Menambahkan widget Social Media (FB, twitter, G+ All) di Blog

Menambahkan widget  Social Media di blog pada dasarnya bertujuan untuk memperkenalkan atau bahasa kerennya menaikkan Page Rank kita di google. Para pengunjung yang tertarik dengan artikel yang kita buat akan dengan Madah menyebarkannya lagi di FB atau tw mereka. Agar lebih mengesankan ada baiknya icon Social media tersebut di buat sedemikian rupa sehingga menarik pengunjung untuk mengekliknya. Oke Tampa berpanjang lebar lagi kita langsung ke TKP.

1.    Login ke dasbor blogger

2.    Pilih tata letak

3.    Tambah widget html/javascript di tempat yang di sukai

4.    Kopi dan paste script berikut

 

<style>

#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}

#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}

#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}

#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzYy36GtLHo7JRkrbi7VsfXJ8tzE8O2yKx4aPOH65OtcLsi0_iq5owg6VJSx_g0rj02uVCghMIYVt748F0lCk6sTic_Hi8el6dSnYn940fZ4SqoXs4mY28QC98sqcBXVwcNqE54Wlyb7M/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}

#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}

#tbisose .icon{overflow:hidden; color:#fafafa;}

#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}

#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}

#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}

#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}

#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}

#tbisose li:hover .icon,

.touch #tbisose li .icon{width:210px;}

.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}

.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}

.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}

.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}

.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}

</style>

<ul id="tbisose">

<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li>

<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li>

<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li>

<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li>

<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li>

</ul>

<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://www.tipstrikblogging.com/2012/12/cara-membuat-widget-follow-us-social.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>