Cara Membuat Tampilan Widget Follow Social Media Button

Dari beberapa blog atau website, memilik sebuah widget follow social media dengan bermacam-macam tampilan icon tersebut. Widget media social berguna untuk mengundang pengunjung di jaringan social anda dan tentunya juga dapat meningkatkan reputasi blog anda.

Jika pengunjung/pembaca anda, tidak sama sekali mengklik tombol widget follow social anda, maka tidak dapat secara otomatis meningkatkan jumlah follower anda pada jaringan social media.

Widget ini memiliki kesan menarik untuk di tampilkan di blog, dengan hasil pembuatan dari CSS3. tidak ada kode javascript, murni 100% CSS3.

Catatan Untuk Anda
Anda dapat menambahkan widget di tempat tertentu, asal gunakan HTML terpisan dengan CSS. Supaya widget yang anda inginkan muncul di sidebar, maka ada salah satu jalan alternatif untuk widget follow us social media.

HTML

1. Silahkan login ke akun blogger anda terlebih dahulu, setelah itu masuk ke Template - Edit HTML.
2. Letakkan kode sebagai berikut, dimana anda inginkan untuk meletakkannya.

<!--Wdiget Follow Us Social Media Myscrewblog.blogspot.com-->
<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>
<!--Wdiget Follow Us Social Media Myscrewblog.blogspot.com—>
<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://www.myscrewblog.blogspot.com/2015/02/cara-membuat-tampilan-widget-follow-social-media-button.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>

Silahkan ganti tanda (#) warna merah, sesuai URL social media anda.

CSS

Tambahkan sebuah kode CSS, supaya terlihat menarik seperti di gambar yang di atas.

1. Masuk ke menu Template - Edit HTML.
2. Cari kode ]></b:skin>, gunakan tombol CTRL+F (Pencarian cepat). setelah anda menemukan kode ]></b:skin> letakkan kode berikut di atas.

/* Widget Follow Us Media Social Myscrewblog.blogspot.com*/
#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/AVvXsEiOY7aQTtEJJNQs4hF2e2WL41ojUH94F02906DIowxaHGdv2I8jKSjyi7EZtGidh-msmt00UrYLtAIRq7PzXAARCI9jdeKeK3OYTPxPezSULDbNRlAcp6As9TpD5vSjAfxxVZc96xu1Pqc/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);}
/* Widget Follow Us Media Social Myscrewblog.blogspot.com*/

Menambahkan Widget Pada Sidebar

1. klik menu layout
2. Tambahkan gedget di blog anda
3. Pilih HTML/JavaScript dan letakkan kode 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/AVvXsEiOY7aQTtEJJNQs4hF2e2WL41ojUH94F02906DIowxaHGdv2I8jKSjyi7EZtGidh-msmt00UrYLtAIRq7PzXAARCI9jdeKeK3OYTPxPezSULDbNRlAcp6As9TpD5vSjAfxxVZc96xu1Pqc/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.myscrewblog.blogspot.com/2015/02/cara-membuat-tampilan-widget-follow-social-media-button.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>

Selanjutnya, ganti semua tanda (#) warna merah, dengan URL social media anda. Setelah itu klik simpan.

Demikian tips atau tutorial blog yang dapat saya bagikan kepada anda dengan cara membuat tampilan widget follow media social button di blog