Cara Membuat Widget Share Slides Style

Di malam ini , saya akan berbagi tutorial Blog yaitu membuat Widget Share slides style, bila sobat tertarik  silahkan lihat Demonya, dengan share slides ini para blogger pasti tertarik dengan disain share yang unik dan menarik ini .. ok langsung saja sob..

pertama sobat login dulu ke blogger kalo sudah, ke menu >> Template >> Edit HTML >> cari code

]]></b:skin> tepatkan script ini tepat di atas code tersebut:

**************************/
#socialbdrssliding{font-family: 'Raleway', sans-serif;}
#socialbdrssliding a{font-family: 'Raleway', sans-serif; 40px;transition:width 0.4s;-webkit-transition:width 0.4s;-moz-transition:width 0.4s;overflow: hidden;
}#socialbdrssliding a:hover{width: 100px;overflow: hidden;
}#socialbdrssliding {position: relative;height: 40px;width: 300px;
}#socialbdrssliding ul { margin: 0; }
.titles {color: #990000;}
#socialbdrssliding li,
#socialbdrssliding li a,
#socialbdrssliding li .bdrs-thumb,
#socialbdrssliding li .bdrs-title {display: block;position: relative;width: 40px;height: 40px;
}#socialbdrssliding li,
#socialbdrssliding li a,
#socialbdrssliding li .bdrs-title {float: left;width: auto;overflow: hidden;
}#socialbdrssliding li a {width: 40px;line-height: 40px;color: #E9E9E9;font-size: 11px;font-weight: bold;text-shadow: 1px 2px 2px #000;
text-decoration: none;cursor: default; cursor:pointer;}
}#socialbdrssliding li .bdrs-thumb { float: left; }
#socialbdrssliding li.bdrs-facebook a { background-color: #3B5998; }
#socialbdrssliding li.bdrs-facebook .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnGoUG6ZfG-2i1eWQA1pESnZQ3NraedKZPozvptviUT3WMKo9ZQSUy5hqRvpvaoUoJpICQP7AmMjIAVvkP90xjwIuZcMuJaRWzf4p2-imEMUrGZWSWYcRVYdQwFrUXDmbI2d5OdRGIbu4/s1600/FACEBOOK.png") no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-gplus a { background-color: #d94a39; }
#socialbdrssliding li.bdrs-gplus .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEWoAtC0rq_6_fK3_ciWnnY6OFQ0RhwtQlrO6COMXRIzxnKaBLnyvYww8a3JOXChlw0Zx9ERg1hokBKemOnGj99Uxy1ATYzbTfvfwg5sOaGvLiBZMWG4_GkNJybn8A5bmJaKezyGLFXes/s1600/googleplus.png") no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-twitter a { background-color: #3CF; }
#socialbdrssliding li.bdrs-twitter .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLALjUODiqSmfwg079R7Mehfa6DvbQyxVk17rdBZvJY-RyE5zc0IINu27b1zdDdfJnWl8RlsYAGQcZhEbrea8wwXwsOpzLs7IVIWfeFLBiorhVNsAMDgAR-jHLljFWbQELCHSuwIRHDvM/s1600/TWITTER.png") no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-rss a { background-color: #F88F16; }
#socialbdrssliding li.bdrs-rss .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZeW0PqKcWuObtoPD_93ZRVZwkAgkJSFFur2lvKlrF13V2FwQ8iv1vZ2oRA0OuKEA3jEdEufJGWOhyFqYPlts4DzU4fkImejAA3JchLkGhgqYEaKAh0lTtZrKp5yzJiPMrqRH19qPFslM/s1600/rssbd.png") no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-youtube a { background-color: #BD3518; }
#socialbdrssliding li.bdrs-youtube .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuN6Cxy_sAMhzcM8DFidlEhGxG4Ur0hQRkgE08kDVl5vsm96KO1GOCb7vuDkOhdnE1fJIsxB4lvrx5yVS0lPj59CdVD30eLd5cAYjmgus5dFRcSOfGuAr7ZiguxKLDgh_qhQDxnpdEb7U/s1600/youtube.png") no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-facebook a:hover, #socialbdrssliding li.bdrs-youtube a:hover, #socialbdrssliding li.bdrs-rss a:hover, #socialbdrssliding li.bdrs-twitter a:hover, #socialbdrssliding li.bdrs-gplus a:hover {background-color:#666;}
/* social media slideshare end code */

Kalo sudah cari code ini <data:post.body/> , biasanya code tersebut ada dua atau tiga ,, saran saya tepatkan script ini di code yang kedua , kalo ga bisa code yang ketiga, tepat diatas code tersebut :

<div id="socialbdrssliding"><div class="titles">Share This Article On</div><ul><li class="bdrs-gplus"><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;" rel="nofollow" title="Share this on Gplus"><div class="bdrs-thumb"></div><div class="bdrs-title">Gplus</div></a></li>
<li class="bdrs-facebook"><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;" rel='nofollow' target='_blank' title='Share this on facebook'><div class="bdrs-thumb"></div><div class="bdrs-title">Facebook</div></a></li>
<li class="bdrs-twitter"><a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;" rel='nofollow' target='_blank' title='Share this on twitter'><div class="bdrs-thumb"></div><div class="bdrs-title">Twitter</div></a></li><li class="bdrs-rss"><a href="http://feeds.feedburner.com/idblogspot" target="_blank" rel="nofollow" title="rss feed"><div class="bdrs-thumb"></div><div class="bdrs-title">RSS</div></a></li>
<li class="bdrs-youtube"><a href="https://www.youtube.com/channel/UCxLE683fC-YfQnRRWaPtWjQ" target="_blank" rel="nofollow" title="youtube"><div class="bdrs-thumb"></div><div class="bdrs-title">YouTube</div></a></li></ul></div>

SELAMAT.... MENCOBA ^_^