Cara Memasang Widget Follow Me Keren Untuk Blog

Setelah sekian lama tidak update rasanya gatal juga jari ini untuk pijit-pijit keyboard. Dengan ditemani segelas kopi serta musik melayu yang mengalun kita langsung saja ke tutorialnya.

Widget Follow Me pada blog cukup penting peranannya, karena widget ini akan menghubungkan pengunjung dengan media sosial yang kita punya seperti facebook ,twitter dan lainnya. Dengan terhubungnya pengunjung dengan medsos akan lebih mempermudah komunikasi jika ada hal-hal  yang pengunjung ingin tanyakan langsung tentang topik yang sedang dibacanya pada blog kita.

Cara memasang widget Follow Me ini sangat gampang sekali. Oke, kita langsung saja bagaimana Cara Memasang Widget Follow Me Keren ini pada blog anda.

1. Pilih Tata Letak » Tambah Gadget

2. Selanjutnya Pilih HTML/JavaScript

3. Pasang kode dibawah ini pada kolom HTML/JavaScript

<style>

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

#abt a{text-decoration:Follow Me; font-family:trebuchet ms,sans-serif;}

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

#abt .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/AVvXsEg5fjVRCSo9cdWQkKpJN6O8Dc_D-_H67dFqKfxuYOKvReqrqALa42229U0bqOUm2NG3fFTaj_8ytkUCyjTU-FP2SjcQBNYwDzLrqEKMREOfyUIQYBaPa2yUDzbGzeO8WXyEgXueOFDXoYc/w35-h158-no/facebook+and+google%252B+.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;}

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

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

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

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

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

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

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

#abt li:hover .icon,

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

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

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

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

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

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

</style><a href="https://ap-thea.blogspot.com" style="font-size:0pt">Salam Blogger</a><ul id="abt">

<li data-alt="Follow Me on Facebook"><a class="icon facebook" href="Link Facebook Anda" target="blank">Follow Me on Facebook</a></li>

<li data-alt="Follow Me on Google+"><a class="icon googleplus" href="Link Google+ Anda" target="blank">Follow Me on Google+</a></li>

<li data-alt="Follow Me on twitter"><a class="icon twitter" href="Link Twitter Anda" target="blank">Follow ME on Twitter</a></li>

<li data-alt="Subscribe via RSS"><a class="icon rss" href="Link Feeds Anda" target="blank">Subscribe via RSS</a></li>

</ul>

4. Ganti Tulisan Biru dengan alamat link medsos anda

5. Simpan

Demikian Cara Memasang Widget Follow Me Keren Untuk Blog, semoga artikel ini bisa membantu dan bermanfaat untuk anda. Semoga sukses.

Please Share » » Facebook Google+ Twitter