Cara Memasang Widget Social Media Keren di Blog [4 Widget] !

Cara Memasang Widget Social Media Keren di Blog! [4 Widget] - Selamat datang di Blog Billy-Art!  nah pada kali ini Blog Billy-Art akan share tutorial Cara Memasang Widget Social Media di Blog yuk kita langsung masuk ke Tutorialnya cekidott..

UPDATE 21 APRIL 2014 ! 

1. Langsung Masuk ke Blogger

2. Kemudian Pilih Template > Edit HTML 

3.  Letakkan kode dibawah ini tepat diatas kode ]]></b:skin> 

/*****************************************
Name : Widget social media
By : Rivai Silaban | Blog Design
Update : Sabtu, 02 November 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheijpTvOkCW5KUb20d-JLIyu-I7MRRK18i3wvIYwpIPn9fre7u-cokIMqgJ9I7bUmOAeHIphOFuyKoWNtohMN3hQmvQR6mzQIHKkV5krtbDS1y_NLvF8SeTalyHTkR2cBCvs9fJ0_JD-0/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 */

4. Lalu Klik Simpan Template

5. Silahkan Dipilih Tampilan Social Widget yang agan inginkan No 1/2/3/4 ???

DEMO

• Social Media 1 :

<!-- BDRS widget social media code start -->
<div class="bdrssocial-thumb">
<a class="twitter" href="LINK TWITTER " target="_blank" title="twitter" bdrs-count="215,882+ Followers"></a>
<a class="facebook" href="LINK FACEBOOK " target="_blank" title="facebook" bdrs-count="49,540+ Like"></a>
<a class="googleplus" href="LINK GPLUS " target="_blank" title="gplus" bdrs-count="901,540+ Invite"></a>
<a class="rss" href="LINK FEEDBURNER " target="_blank" title="rss" bdrs-count="193,692+ Readers" ></a>
</div>
<!-- BDRS widget social media code end -->

• Social Media 2 :

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

• Social Media 3 :

<!-- BDRS widget social media round style code start -->
<div class="social-ballbdrs">
<ul><li class="twitterball"><a target="_blank" href="LINK TWITTER ANDA" rel="nofollow" title="twitter">twitter</a></li>
<li class="googleplusball"><a target="_blank" href="LINK GPLUS ANDA" rel="nofollow" title="gplus">googleplus</a></li>
<li class="facebookball"><a target="_blank" href="LINK FACEBOOK ANDA" rel="nofollow" title="facebook">facebook</a></li>
<li class="rssball"><a target="_blank" href="LINK RSS FEED ANDA" rel="nofollow" title="rss">rss</a></li>
<li class="youtubeball"><a target="_blank" href="LINK YOUTUBE ANDA" rel="nofollow" title="youtube">youtube</a></li></ul>
</div>
<!-- BDRS widget social media round style code end -->

• Social Media 4 :

<!-- BDRS widget social slide code start -->
<div id="socialbdrssliding"><ul><li class="bdrs-gplus"><a href="LINK GPlus " target="_blank" rel="nofollow" title="gplus"><div class="bdrs-thumb"></div><div class="bdrs-title">Gplus</div></a></li>
<li class="bdrs-facebook"><a href="LINK FACEBOOK" target="_blank" rel="nofollow" title="facebook"><div class="bdrs-thumb"></div><div class="bdrs-title">Facebook</div></a></li>
<li class="bdrs-twitter"><a href="LINK TWITTER" target="_blank" rel="nofollow" title="twitter"><div class="bdrs-thumb"></div><div class="bdrs-title">Twitter</div></a></li>
<li class="bdrs-rss"><a href="LINK RSS" 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="LINK YOUTUBE" target="_blank" rel="nofollow" title="youtube"><div class="bdrs-thumb"></div><div class="bdrs-title">YouTube</div></a></li></ul></div>
<!-- BDRS widget social slide code end -->

Cara Pemasangannya  : 

• Masuk ke Tata Letak
• Tambahkan Gadget
• Pilih HTML/JavaScirpt
• Copy Kode Social Widget diatas yang agan inginkan
• Lalu Letakkan kode Tersebut tepat didalam HTML/Javascript
• Simpan dan Lihat hasilnya! 

Mudah kan?  Pastinya dong semua yang ada di Blog Billy-Art semua Pasti mudah dan simple, Terus kunjungi Blog Billy-Art ya untuk Tutorial Keren lainnya!  

sumber

Tweet