06 Juni 2012

Membuat fan page Keren Di Blog dengan Fungsi Show-Hide



Fungsi dari hide and show adalah supaya agar blog sobat lebih rapih...
Jadi terkesan simple tapi bagus...
Hide and show facebook fans page yang dimaksud adalah...
Box tempat like fans page facebook, tapi diberi hide and show seperti yg dapat anda lihat disamping kanan blog saya....

Sudah mengerti??
Mari langsung kita bahas ke tutorial cara membuat hide and show facebook fans page :
  1. Login ke blogger sobat...
  2. Kemudian masuk kebagian rancangan => edit html...
  3. Kemudian sobat cari script <head>, setelah ketemu kemudian sobat copy script dibawah ini kemudian pastekan tepat diatas script <head>...
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
  4. Kemudian simpan...
  5. Nah kemudian pergi ke elemen laman dan add gadget dengan script 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: 270px;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><iframe src="http://www.facebook.com/plugins/likebox.php?href= https://www.facebook.com/Arief.MAB&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>By <a href=" http://ariefpertama.blogspot.com/ ">Arief Blog'z</a> / <a href=" http://ariefpertama.blogspot.com/2012/06/membuat-fan-page-keren-di-blog-dengan.html ">+Pasang!</a></span></div></div>
  6. Ganti warna ungu dengan link fans page sobat...
  7. Simpan...
Selamat Mencoba...


Catatan :
Tutorial ini sudah tidak bisa digunakan  lagi,maaf bagi yg sudah mencoba ...

0 Komentar:

Posting Komentar

Silahkan Tinggalkan Komentar Sobat, Jika ada kesalahan pada Artikel Blog saya ini dan jika sobat punya saran untuk blog ini, Silahkan sobat tulis komentar dengan baik dan sopan :)