Cara Memasang Widget Social Media Keren

Cara membuat widget social media di blogspot ini lebih simpel dan tampilan yang lebih menarik. pada postingan kali ini Widget Social Media m...

Cara membuat widget social media di blogspot ini lebih simpel dan tampilan yang lebih menarik. pada postingan kali ini Widget Social Media memiliki style dengan tampilan tombol yang memakai CSS shadow dan in shadow sehingga lebih menarik. Jadi widget ini tidak hanya di pasang pada HTML javascript tapi juga di letakkan pada kode HTML nya. Berbeda dengan postingan saya sebelumnya yang hanya mengandalkan HTML Javascript Cara Memasang Tombol Follow Me di Blog Terlengkap.

Login ke dashboard anda Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code ]]></b:skin> Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi
Atau bila template blog anda  memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.
Copy code dibawah ini.

******************************************/
#bdrs-social {
margin:0px auto;
width: 300px;
}
#bdrs-social .bdbox-social a:link,.bdbox-social a:visited{
float:left;
width:32px;
height:32px;
margin:0 5px;
padding:0;
text-indent:-9999em;
box-shadow:3px 3px 3px rgba(0,0,0,0.3);
background-color:transparent;
background-size:100% auto;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX0Kl-Nejf9ZLApbxiVTMawsXzdg292Ujs5-et6w9Pxx-W1mcNLEscC4xujQg33m94x3Dx4gesTQ5ikNveahSi2Dwe4iKGtdUdslHSDDeRufk8QhSa2BJeN6zrEllenHXzbLP4Bb6THtE/s1600/BRS01-sosial.png');
background-repeat:no-repeat;
}
#bdrs-social .bdbox-social a:hover,.bdbox-social a:active {
box-shadow:3px 3px 7px #333 INSET;
}
#bdrs-social .bdbox-social a:first-child{margin-left:3px}
#bdrs-social .bdbox-social a:last-child{margin-right:0}
#bdrs-social .bdrs-rss{background-position:0 0}
#bdrs-social .bdrs-goo{background-position:0 -32px}
#bdrs-social .bdrs-fac{background-position:0 -64px}
#bdrs-social .bdrs-lin{background-position:0 -96px}
#bdrs-social .bdrs-tum{background-position:0 -128px}
#bdrs-social .bdrs-twi{background-position:0 -160px}
#bdrs-social .bdrs-wor{background-position:0 -192px}
/*code CSS end */

Untuk memanggil widget social media tersebut agar tampil pada halaman blog kesayangan anda silahkan simak penjelasan dibawah ini.

Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya. Untuk memasang kode htmlnya anda dapat memasangnya dimana saja. Untuk tutorial kali ini saya memasangnya di widget sidebar halaman blog.

Silahkan pilih " Tata Letak " pada dasbor blog anda.
Klik "Add gadget " ( Tambahkan gadget )
Setelah muncul halaman gadget silahkan pilih " HTML/JavaScript ".
Copy kode didalam spoiler dibawah ini kemudian pastekan di gadget anda.
Save dan lihat hasilnya, semoga bermanfaat...
Copy code berikut.

<!-- BDRS widget social media code start -->
<div id="bdrs-social">
    <div class="bdbox-social">
        <a class="bdrs-goo" href="https://plus.google.com/u/0/+muhammadiqbal02" rel="publisher" target="_blank" title="Google+">Google+</a>
        <a class="bdrs-fac" href="https://www.facebook.com/pajatapuih.iqbal" rel="nofollow" target="_blank" title="Facebook">Facebook</a>
        <a class="bdrs-twi" href="https://twitter.com/02IQb4L" rel="nofollow" target="_blank" title="Twitter">Twitter</a>
        <a class="bdrs-lin" href="http://id.linkedin.com/in/iqbal02" rel="nofollow" target="_blank" title="LinkedIn">LinkedIn</a>
        <a class="bdrs-tum" href="http://id.linkedin.com/in/iqbal02" rel="nofollow" target="_blank" title="Tumblr">Tumblr</a>
        <a class="bdrs-rss" href="http://masdabang.blogspot.com/feeds/posts/default" rel="external" target="_self" title="RSS Feed">RSS Feed</a>
    </div>
</div>
<!-- BDRS widget social media code end -->

Keterangan : Ganti link berwarna merah dengan link media sosial sobat
Untuk contoh, Hasilnya nanti lebih kurang seperti ini (sobat bisa meletakkannya di mana saja)