Cara membuat facebook like box auto hide di blog | Blog Inspirasi

Facebook Twitter RSS Google

Home » Tutorial Blog » Cara membuat facebook like box auto hide di blog

Cara membuat facebook like box auto hide di blog

Posted by Unknown 0 comments

Facebook Like Box - Disini saya akan berbagi sedikit ilmu bagaiamana caranya membuat Facebook like box auto hide (tersembunyi) tepatnya berada disebelah kanan blog kita dan dia akan muncul pada saat mouse di arahkan ke tempat tersebut, contohnya seperti gambar dibawah ini :

facebook like box

Caranya sangat simple tugas agan cuma copas-copas script aja kog :D

Silahkan di simak ya ....

1. Agan harus login ke blogger terlebih dahulu

2. Klik tata letak

3. Klik tambah gadget dan cari HTML/Javascript

4. Letakkan kode script dibawah ini :

<script type="text/javascript"> // </script> <style type="text/css"> .floatinglikebox{  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPvEfxvpkVmRBOHoizKWmQbArdcDyo4d94tvp4fPr2hdGa8DlNOgLULzaeYzzuAxN7CXluuVHzyM9zWuoLbTr0DuZZ83uRitygOKmZid9VVNtZsXo8uOncapMCAx2cCiLkZYGxQ_proWQ/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;  }  .floatinglikebox div{  border:none;position:relative;display:block;  }  .floatinglikebox span{  bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;  }  .floatinglikebox span a{  color: #808080;text-decoration:none;  }  .floatinglikebox span a:hover{  text-decoration:underline;  }  </style> <div class="floatinglikebox" style="">
 <div>
 <iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/fanspageme&height=270&colorscheme=light&show_faces=true&border_color=%23cccccc&stream=false&header=false&appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="#####" target="_blank">.:Get Widget:.</a> </span> </div>
</div>

5. Masuk ke template

6. Edit HTML, lalu masukkan code dibawah ini tepat di atas </head>

Catatan : Jika pada template agan sudah ada code tersebut agan tidak perlu lagi menambahkan code tersebut pada template agan.

7. Save template

8. Semoga berhasil ....

Semoga artikel kali ini bermanfaat untuk kita semua ..

0 comments:

Post a Comment

Silahkan Anda Berkomentar .. No SPAM !!