Cara Membuat Widget Follow Us Social Media di Blog

Cara Membuat Widget Follow Us Social Media di Blog. - Hampir setiap blog atau website memiliki widget follow sosial media dengan icon yang beragam, dengan memasang widget ini anda dapat mengundang pengunjung untuk mengikuti dan terlibat dalam akun media sosial anda, yang tentunya akan meningkatkan reputasi blog anda. tentunya itu tidak akan terjadi jika pengunjung tidak mengklik tombol follow pada widget sosial media anda. maka dari itu buat lah konten-konten yang menarik yang dirasa berguna dan bermanfaat, supaya pengunjung tertarik, dan bukan hal yang tidak mungkin pengunjung akan membagikan atau menshare konten anda ke media sosial mereka, semakin banyak yang membagikan konten anda semakin bertambah juga pengunjung blog anda.

Widget ini tidak otomatis dapat meningkatkan follower blog anda diberbagai jaring sosial tapi setidaknya kita dapat memancing mereka untuk setidaknya mengklik sekali pada tombol dengan membuat/menampilkan tombol widget ini lebih menarik dan memiliki efek cantik.

Widget ini juga tanpa javascript, tanpa JQuery, murni hanya dengan CSS. Widget akan terlihat rapi dan bersih disidebar blog anda atau dibagian manapun anda meletakkannya.

Nah tanpa panjang lebar lagi, bagi sobat blogger yang tertarik untuk memasang widget ini, silakan ikuti langkah-langkahnya dibawah ini:

1. Login ke Blogger tentunnya dengan akun anda.

2. Pilih Tata letak  => Tambah Widget  =>  Pilih HTML/java script. 

3. Copy kode di bawah ini.

<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/AVvXsEgxfctNmm44zKC-9mek7DE2v43UqhLKiSQIX5waoXruOr7BeHTVUogL9wdZb5nKDYF5p96k3h72KglZeCJ1rb0jkPX8jPa4zGt5eWva2bFeGh7gylTOt8oMS-GYd1oaGanl5QHgTEr7-Ao/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:#ffffff; 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>

Ganti semua tanda # merah yang berwarna biru dengan URL jejaring sosial anda

4. Klik Simpan

Nah gimana gampang kan? selamat mencoba, semoga bermanfaat
jiga ada kesulitan tanyakan di kolom komentar.

Berbagi :