Advertisement

Sosial Media Mini Untuk Blogger

Gadget sosial media mini nan cantik berikut ini akan aku share atau aku bagikan langsung pada sobat semua agar blog sobat yang belum mempunyai icon sosial medianya tersebut bisa langsung terpasangi oleh beberapa icon cantik tanpa perlu repot-repot dalam penyimpanan kodenya.

Dan sebagai langkah preview berikut ini aku lampirkan live demonya. Silahkan sobat klik spoiler tombol buka tutup, kemudian arahkan kursor pada tiap-tiap icon sosial media tersebut.

Sosial Media Mini

Seperti biasanya, setelah gadget sosial media ini terpasang langkah yang harus sobat lakukan adalah mengganti masing-masing url id sosial media tersebut dengan id sosial media sobat.

Cara Memasang Sosial Media Mini Di Blogger


'Masuk' ke dalam dasbor blog, lalu pilhh 'tata letak' pilih kembali 'add a gadget/menambahkan gadget' lalu pilih 'html'. 'Copy' kode script berikut dan 'pastekan' ke dalam 'gadget html'


 <ul class="spicesocialwidget">
<li class="facebook">
<a rel="nofollow" href="http://www.facebook.com/" target="_blank" title="facebook">
</a></li>
<li class="googleplus">
<a rel="nofollow" href="https://plus.google.com/" target="_blank" title="googleplus">
</a></li>
<li class="pinterest">
<a rel="nofollow" href="http://pinterest.com/" target="_blank" title="pinterest">
</a></li>
<li class="twitter">
<a rel="nofollow" href="http://twitter.com/" target="_blank" title="twitter">
</a></li>
<li class="rss">
<a rel="nofollow" href="http://feedburner.com/" target="_blank" title="rss">
</a></li>
<li class="skype">
<a rel="nofollow" href="http://www.skype.com/" target="_blank" title="Skype">
</a></li>
<li class="vimeo">
<a rel="nofollow" href="http://www.vimeo.com/" target="_blank" title="vimeo">
</a></li>
<li class="dribbble">
<a rel="nofollow" href="http://www.dribbble.com/" target="_blank" title="dribble">
</a></li>
<li class="flickr">
<a rel="nofollow" href="http://www.flickr.com/" target="_blank" title="flickr">
</a></li>
<li class="linkedin">
<a rel="nofollow" href="http://www.linkedin.com/" target="_blank" title="linkedin">
</a></li>
<li class="youtube">
<a rel="nofollow" href="http://www.youtube.com/" target="_blank" title="youtube">
</a></li>
</ul>
<style>
ul.spicesocialwidget {float:right;}
ul.spicesocialwidget li {float:left;list-style: none outside none;border:none;}
ul.spicesocialwidget li a{background-color:transparent;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDOwnLE75ZI_m5AXhicsJz1eBGRZ-doAY-bXVZeIGaUxAOaVJswyotWg_-BM3NuhHRsTklsK_DOO3JKZB6x8ikwHUFITthKxc5L3cT8xNfEevtv2M8SwuUzqyuPOOjDmWQEAOIv7DWMG7j/s1600/spice-social-gadget-sprite.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
.ie7 ul.spicesocialwidget li a, .ie8 ul.spicesocialwidget li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDOwnLE75ZI_m5AXhicsJz1eBGRZ-doAY-bXVZeIGaUxAOaVJswyotWg_-BM3NuhHRsTklsK_DOO3JKZB6x8ikwHUFITthKxc5L3cT8xNfEevtv2M8SwuUzqyuPOOjDmWQEAOIv7DWMG7j/s1600/spice-social-gadget-sprite.png' )}
ul.spicesocialwidget li.facebook a{ background-position:0 0}
ul.spicesocialwidget li.flickr a{ background-position:-32px 0}
ul.spicesocialwidget li.dribbble a{ background-position:-64px 0}
ul.spicesocialwidget li.googleplus a{ background-position:-96px 0}
ul.spicesocialwidget li.linkedin a{ background-position:-128px 0}
ul.spicesocialwidget li.pinterest a{ background-position:-160px 0}
ul.spicesocialwidget li.rss a{ background-position:-192px 0}
ul.spicesocialwidget li.skype a{ background-position:-224px 0}
ul.spicesocialwidget li.twitter a{ background-position:-256px 0}
ul.spicesocialwidget li.vimeo a{ background-position:-288px 0}
ul.spicesocialwidget li.youtube a{ background-position:-320px 0}
ul.spicesocialwidget li.facebook a:hover, #sidebar ul.spicesocialwidget li.facebook a:hover{ background-position:0 -32px}
ul.spicesocialwidget li.flickr a:hover, #sidebar ul.spicesocialwidget li.flickr a:hover{ background-position:-32px -32px}
ul.spicesocialwidget li.dribbble a:hover, #sidebar ul.spicesocialwidget li.dribbble a:hover{ background-position:-64px -32px}
ul.spicesocialwidget li.googleplus a:hover, #sidebar ul.spicesocialwidget li.googleplus a:hover{ background-position:-96px -32px}
ul.spicesocialwidget li.linkedin a:hover, #sidebar ul.spicesocialwidget li.linkedin a:hover{ background-position:-128px -32px}
ul.spicesocialwidget li.pinterest a:hover, #sidebar ul.spicesocialwidget li.pinterest a:hover{ background-position:-160px -32px}
ul.spicesocialwidget li.rss a:hover, #sidebar ul.spicesocialwidget li.rss a:hover{ background-position:-192px -32px}
ul.spicesocialwidget li.skype a:hover, #sidebar ul.spicesocialwidget li.skype a:hover{ background-position:-224px -32px}
ul.spicesocialwidget li.twitter a:hover, #sidebar ul.spicesocialwidget li.twitter a:hover{ background-position:-256px -32px}
ul.spicesocialwidget li.vimeo a:hover, #sidebar ul.spicesocialwidget li.vimeo a:hover{ background-position:-288px -32px}
ul.spicesocialwidget li.youtube a:hover, #sidebar ul.spicesocialwidget li.youtube a:hover{ background-position:-320px -32px}
</style>

Sosial Media Mini Untuk Blogger
Terakhir pilih 'simpan' dan selesai. Sekali lagi silahkan sobat ganti masing-masing url id sosial media yang ada dengan id sosial media sobat masing-masing. Well done! Sampai disini saja tutorial cara memasang sosial media mini untuk blogger, sebagai pilihan sobat juga bisa membaca artikel lainnya tentang memasang sosial media di blogspot. Diantaranya cara membuat sosial media melayang dan cara memasang sosial media di sidebar blog. Bye-bye...

Post a Comment

3 Comments

  1. mantep nih mas widget social medianya... kelihatan rapi kalau dipasang... nt saya otak atik di blog saya mas...makasih :)

    ReplyDelete
    Replies
    1. Silahkan sobat, moga bisa kian mempercantik tampilan blog kita ^^

      Delete
  2. Sip mas tampilannya .. tapi cara memperbesar sizenya gimana yah ?? supaya sesuai sama lebar di blog saya ?? apanya yang harus dirubah ??

    ReplyDelete

Silahkan meninggalkan komentarnya.!
*(Mohon untuk tidak mencantumkan link hidup)