Cara Membuat Widget Follow Us Keren Pada Blog

Selamat datang agan atau aganwati kali ini saya akan berbagi ilmu tentang blogging yaitu cara membuat widget follow us keren di blog. Widget follow us di blog merupakan widget yang menampilkan media sosial yang dimiliki oleh pemilik blog atau media sosial blog sehingga pengunjung dapat mengetahui informasi secara dalam tentang blog tersebut.



Dengan adanya media sosial yang kita pasang pada blog, akan semakin meningkatkan kepopularitasan blog atau suatu web, karena pengunjung blog maupun web banyak dapat didapatkan melalui jejaring sosial media. Dengan adanya sosial media memudahkan pengunjung untuk mengetahui berita maupun postingan terbaru dari blog kita. Sehingga blog kita akan semakin ramai untuk dikunjungi.



Bagi kalian yang ingin memasang widget follow us, caranya cukup mudah dan simpel, berikut tutorial untuk memasang widget tersebut :

Langkah

1. Login pada blog anda masing-masing,

2. Pada menu dashboard blog pilih menu tata letak,

3. Setelah itu pilih menu tambahkan gadget,

4. Setelah itu pilih menu javascript / html,

5. Setelah itu copy script di bawah ini lalu paste pada kolom javascript / html,

 <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/AVvXsEj5YMqAjqwqbbdfubl2k9Z85RlmuOsSGDLs-eB_omVGSMDRDlNyxfZf3O6G8aNiKXKEyUXlgY4agkQGSE8-WALGRSf_Qif2B_NRHX_PBUK-cGc3ppDD9BLe1yNNk1tPPDxjpqcOMr9dlt0/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="https://www.facebook.com/RenaldyRizkiRamadani">Follow us on
Facebook</a></li>

<li data-alt="Follow us on
Twitter">

<a class="icon twitter" href="https://twitter.com/ThisIsRenaldy7">Follow us
on Twitter</a></li>

<li data-alt="Follow us on
Google+">

<a class="icon googleplus"
href="https://plus.google.com/u/0/113399816614878257205">Follow us on
Google+</a></li>

<li data-alt="Follow us on
Pinterest">

<a class="icon pinterest"
href="http://www.pinterest.com/renaldyrizkiram/">Follow us
on Pinterest</a></li>

<li data-alt="Subscribe with
RSS">

<a class="icon rss" href="http://renaldyways.blogspot.com/feeds/posts/default">Subscribe
with RSS</a></li>

</ul>


<small><div
style="font-size:80%; text-align:right; text-shadow:2px 2px 2px
#adadad;"><a href="http://renaldyways.blogspot.com"
target="_blank" title="Widget Follow Us">+ Get This
Widget Here</a></div></small> 

Jangan lupa untuk mengubah link atau alamat url media sosial tersebut!

6. Setelah itu tekan simpan,


7. Selesai.

Demo

Nah itu saja dari saya tentang cara membuat widget follow us keren di blog semoga artikel ini dapat membantu anda, jangan lupa like, share dan google+nya serta tinggalkan komentar, terima kasih.

Share this