Home » » widget social media versi 2

widget social media versi 2

Pada posting kali ini taukahbahwa.blogspot.com akan menyajikan posting tentang widget social media versi 2. Semoga dengan artikel widget social media versi 2 akan menambah wacana untuk anda pembaca setia taukahbahwa.blogspot.com

widget social media blogspot

Widget social media blogspot ini lebih keren, cara membuat widget social media blogspot ini lebih simpel dan tampilan yang lebih menarik. Widget social media blogspot pada postingan kali ini memiliki style dengan tampilan tombol yang memakai CSS shadow dan in shadow sehingga lebih menarik Widget social media blogspot ini terinspirasi dari plugsin blog wordpress social media tahun ini. buat teman teman blogger yang ingin memasang widget social media blogspot ini silahkan simak penjelasan di bawah ini, jangan lupa  untuk melihat tampilan widget social media blogspot ini. Langsung saja menuju TKP.

http://adf.ly/YvSj6


Install Program CSS

  • 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.

/*****************************************
Name : Widget social media
By : Arieadie | Blog Design
Update : kamis, 08 oktober 2013
******************************************/
#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('http://2.bp.blogspot.com/-l34G5vpMi_M/UnPSyKfedDI/AAAAAAAAB90/uBMeYXEawzQ/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 */

Install Program Tag HTML

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.
  • Edit html , save dan lihat hasilnya, semoga bermanfaat...

<!-- BDRS widget social media code start -->
<div id="bdrs-social">
<div class="bdbox-social" >
<a class="bdrs-goo" href="LINK GOOGLE PLUS" rel="publisher" target="_blank" title="Google+">Google+</a>
<a class="bdrs-fac" href="LINK FB" rel="nofollow" target="_blank" title="Facebook">Facebook</a>
<a class="bdrs-twi" href="LINK TWITTER" rel="nofollow" target="_blank" title="Twitter">Twitter</a>
<a class="bdrs-lin" href="LINK LINKEDIN" rel="nofollow" target="_blank" title="LinkedIn">LinkedIn</a>
<a class="bdrs-tum" href="LINK TUMBLR" rel="nofollow" target="_blank" title="Tumblr">Tumblr</a>
<a class="bdrs-rss" href="LINK RSS" rel="external" target="_self" title="RSS Feed">RSS Feed</a>
</div></div>
<!-- BDRS widget social media code end -->
Keterangan Gambar
  • Code warna MERAH ganti dengan link social media anda.
  • Lebar dari widget social media ini 300px, silahkan anda edit CSSnya sesuai dengan halaman blog anda.

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com
Homepage|http://taukahbahwa.blogspot.com

Sobat baru saja membaca artikel yang berkategori Informasi dengan judul widget social media versi 2. Jika sobat rasa artikel ini menarik silakan di share dengan meninggalkan URL http://taukahbahwa.blogspot.com/2014/02/widget-social-media-versi-2.html. Terima kasih atas kunjungannya!

0 komentar:

Posting Komentar