Cara membuat Widget Follow us di Blog

Cara Membuat Widget Follow us Keren di Blog

Selamat siang pemirsa,,berjumpa lagi dengan saya Bayu Nuranto :D , baiklah 

Siapa sih yang nggak punya akun jejaring sosial. Saya yakin hampir setiap orang memiliki akun sosial pribadinya. Facebook dan twitter misalnya. Kedua situs tersebut sudah sangat populer sekali. Bahkan anak seusia SD pun sudah lihai bermain facebook, walaupun lebih sering digunakan untuk bermain game ketimbang bersosialisasi dengan teman nya. Selain kedua situs tersebut ada juga jejaring sosial yang juga populer yakni Google+. Menurut saya Google+ ini lebih sering digunakan para blogger untuk berbagi konten blognya atau merekomendasikan blog mereka.

Lalu apa peran jejaring sosial untuk para blogger?
Peran sosial media/jejaring sosial sangat penting dan juga menguntungkan bagi blog. Karena kita bisa membagikan konten/artikel kita ke situs-situs tersebut sehingga akan dibaca orang lain terutama teman-teman anda atau followers anda. Sedangkan untuk twitter kalian bisa memperoleh followers lebih mudah dengan memasang widget twitter di blog.

Setelah faham apa manfaat sosial media bagi blog, sekarang mari kita coba membuat widget follow us sosial media yang keren. Untuk hasil yang akan kita buat nanti sama persis seperti gambar screenshot diatas. Atau biar lebih nyata lagi demonya bisa anda lihat pada sidebar blog ini. Dalam widget ini akan ada 5 icon sosial media yang meliputi facebook, twitter,Google+, Pinterest, dan RSS. Jadi fungsi dari widget ini adalah untuk memudahkan para pengunjung mengikuti akun sosial media kalian. Sangat menguntungkan bukan?

"Buruan gans lama amat dari tadi kultum mulu"
Iya-iya gans, sabar dikit dong sekalian sambil nunggu service motor gue kelar.

Oke, mari kita buat.
1. Pertama silahkan login kedalam akun blogger kalian masing-masing.
2. Masuk ke tata letak > tambah widget > pilih html/java script.
3. Sekarang tambahkan kode ini didalamnya.

<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/AVvXsEgN9m-pnmDhLdqpq9b-qVHy2MgxLs-afzUSIzhfaAQg_36FiSmtIu7s_-ZHXgu_mZzOwUJ6DOxH_7u8UrIj_jq7PPIJLnBXckCSLkOBAn2DuSkhRSiHSHVl-axjz4TzfQxauygruAtCGYk/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://mohammadrobih.blogspot.com/2013/12/cara-membuat-widget-follow-us-keren-di.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>

Ganti kode yang di sorot warna merah dengan URL akun kalian. Jangan lupa sesuaiin URL yang akan dimasukkan sesuai dengan letaknya, jangan sampai bagian milik facebook diisi dengan URL akun twitter, begitu juga sebaliknya. Terimakasih :D

http://mohammadrobih.blogspot.co.id/2013/12/cara-membuat-widget-follow-us-keren-di.html