Cara Membuat Like Box Facebook Melayang Dengan Tombol Close

Setelah tadi saya bagikan Cara Membuat Like Facebook Di Blog. Sekarang kita beralih kecara pemasanganya. Pemasangan Like Box yang saya bahas tadi tempatnya disidebar blog. Sebenarnya meletakkan like box tidak hanya disidebar saja. bisa di bawah postingan, dan bisa juga melayang. Nah kali ini saya akan memberikan pemasangan yang melayang. Like Box melayang nanti yang akan dibuat ada tombol closenya jadi pengunjung biar mudah mengeluarkan Like Boxnya. Like Box yang dibuat nanti sama seperti yang ada di blog ini. berikut screenshotnya :

Sedikit saja penjelasan dari Like Box ini. Sekarang langsung ke cara pembuatanya. Simak baik-baik
  • Pastinya anda sudah masuk ke akun blogger anda.
  • Klik template
  • Klik Edit HTML
  • Centang Expand Widget Template
  • Cari kode </body> dan letakkan kode berikut diatas kode </body>
 <!--Like Box Facebook-->
<style type='text/css'> .notification{position:fixed;left: 35%;padding: 10px;background:white;box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);right: 30%;width: 300px;top: 35%;z-index: 9999;} .notification span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-AbLWOFY4A4LjcRkNO0_UsTPZJCVhdWcOSUxQEvsvmul562I0Pb4Rl0ownM8VibzxCgAKjij0E6bxJozFoHImGMFfgzR2l7ehtjJZyNmHmlxWYaMvvrdx3tYTXYE70opIB-9DZvFqoB4/) no-repeat right top;cursor:pointer;display:block;width:19px;height:19px;position:absolute;top:-2px;right:-5px} .notification p{width:400px;font-family:Arial,Helvetica,sans-serif;color:#323232;font-size:14px;line-height:21px;text-align:left;float:right;margin:10px 15px 0 0;*margin-top:15px;/*for lt IE8*/padding:0;/* TEXT SHADOW */ text-shadow:0 0 1px #f9f9f9} .notification:after{background: rgba(0, 0, 0, 0.77);content: &#39;&#39;;position: absolute;top: -500%;bottom: 0;right: 0;left: -500%;z-index: -1;width: 1000%;height: 1000%;} </style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){$(&#39;.notification&#39;).hover(function(){$(this).css(&#39;cursor&#39;,&#39;auto&#39;);});$(&#39;.notification span&#39;).click(function(){$(this).parent().fadeOut(800);});});</script> <div class='notification warning'><span/>

<div style='text-align:center;color:Red;font-weight:bold;font-size:14PX'> Like FP Blognya antok yah.. Thanks...</div> <iframe allowtransparency='true' frameborder='0' rel='nofollow' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=
https://www.facebook.com/pages/Blognya-Antok/477646848955605
&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=265' style='height: 265px;background: white;border-radius: 3px;'/> </div>
  • Ganti dulu tulisan yang berwarna ungu sesuai selera anda. dan kode yang berwarna kuning ganti dengan URL fanspage anda.
  • Setelah anda mengganti silahkan save template dan lihat hasilnya.
Sekian dulu dari saya. untuk cara memasang Like Box di bawah postingan di trik ngeblog selanjutnya aja... Salam Blogging:x

Article :

0 comments:

Post a Comment

Berkomentarlah dengan sopan sesuai topik pembahasan, jangan mencantumkan link aktif.