Cara Menambahkan Widget Social Media Di Blog


Dengan menambahkan Widget Social Media pada blog Anda, pastinya menjadikan sebuah blog lebih terlihat elegan dan menjadikan pengunjung bisa lebih leluasa mengenal Anda di social media yang mungkin juga sering digunakan oleh pengunjung. Apakah Cara Menambahkan Widget Social Media Itu Sulit ?

Saya sih jelas NO, entah kalau Mas Anang :)
Maaf canda dikit pemirsa,heuheu yasudahlah daripada ngobrol tidak penting mending kita langsung coba praktikan. Berikut Cara Paling Mudah Menambahkan Widget Social Media kedalam blog :
Sumber : Rivai Silaban
  • 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>  atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.
#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/AVvXsEgHoRW_6AeS_jegoFeDLH2l6-MyKFQJKqCGzxyFfCpNDEfA4sBTrE459ZTmRuaGqRc3FHX2yYfaxUCazLfhgrc8T9EhhPiXXJh6JC0FzgH1Wo5Ve9HctKFH6GelIjD3mkDYONneY509t2Y/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 Anda saatnya anda memasang kode htmlnya.
Untuk memasang kode html 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 dibawah ini kemudian pastekan di gadget anda.
Edit html , save dan lihat hasilnya.

<!-- 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 -->

Itu saja yang bisa saya bagikan pada artikel kali ini, semoga bermanfaat.
Selamat Mencoba
Previous
Next Post »

1 komentar:

Write komentar

Terimakasih sudah berkomentar dengan bijak ConversionConversion EmoticonEmoticon