Cara membuat plugins fans page facebook dan twiter auto hide

Kali ini Saya akan share widget blog asli buatan saya, saya pernah blogwalking untuk mencari box twiter auto hide seperti plugins facebook, tapi tak pernah ketemu sama sekalipun. karena banyak yang ingin memasang widget follow twiter dan like fans page blog auto hide disamping blog saya terinspirasi untuk membuat widget tersebut dalam satu box auto hide, lihat saja perbeda'anya facebook plugins biasa dan facebook plugins + follow twiter buatan saya dibawah ini ▼

Facebook plugins biasa ▼

Facebook plugins + plugins follow twiter ▼

Jelas berbeda bukan foto yang diatas ama dibawahnya langsung aja agan jika ingin memasang widget ini silahkan simak tutorialnya dibawah ini :

• Pertama masuk ke dashbord bloger dan pilih Template
• lalu klik edit HTML
• Setelah itu cari kode ini </head> ( Untuk memudahkan pencarian klik CTRL + F )
• Lalu tambah script jquery ini Tepat dibawah Tag </head> :
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
  Jika Sudah Ada script tersebut tidak usah ditambahkan lagi cukup 1 saja]
• Jika sudah langsung saja simpan template
• Lalu sekarang pergi ke tata letak dan tambah widget
• Pilih lah widget HTML /  Javascript
• Lalu Tambahkan Kode Dibawah Ini :

          <script type="text/javascript">//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});

//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 300px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>

<a href="https://twitter.com/Username sobat" title="facewoman.blogspot" class="twitter-follow-button" data-button="grey" data-text-color="#000000" data-link-color="#ffffff">Follow @Username sobat </a><script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=Url Fans page facebook Sobat &amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://blognya-komputer.blogspot.com/2013/08/cara-membuat-plugins-fans-page-facebook.html">Widget Tutorial</a></span></div></div>

• Jika Sudah Simpan Template dan lihat hasilnya

Keterangan :

• Tulisan Yang diberi warna merah ganti dengan username twiter kalian masing - masing
• Tulisan Yang diberi warna biru ganti dengan Link / URL Facebook fans page Kalian masing - masing

Mohon untuk tidak mengganti URL tulisan warna hijau karena itu adalah sumber untuk mengetahui cara membuat widget buatan saya jika ketahuan diganti saya akan adukan ke DMCA Tanpa Pemberitahuan terlebih dahulu / peringatan.

Sekian dari saya terima kasih.

Bagikan Artikel ini