Membuat Facebook Slide Box Widget jQuery Effect

Sobat blogger Facebook banyak digunakan para blogger untuk lebih memperkenalkan hasil postingan di blog/website yang dimilikinya salahsatunya dengan cara membuat Fans Page blog/web itu sendiri nah sobat blogger kali ini Kolom Tutorial™ akan menyajikan kepada anda bagaimana cara Membuat Facebook Slide Box Widget jQuery Effect agar Fans Page Facebook Blog/web anda dapat tampil di blog/web anda. untuk freviewnya kurang lebih seperti gambar dibawah ini :
VIEW A DEMO

Untuk Cara Penerapannya :
LANGKAH KE-1
1. Seperti biasa Login dulu ke akun Blogger sobat
2. Kemudian klik "Template" Klik "Edit HTML"
3. Jangan Lupa Cetang "Expand Template Widget"
4. Cari Kode
<head> Gunakan Ctrl+F untuk mempercepat pencarian
5. Kopi Paste Kode Java Scrift  Dibawah ini Tepat dibawah kode 
<head>
 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

6. Save Template
7. Kemudian Kopi paste Kode HTML dibawah ini, Caranya ;
    a.  Klik Tata Letak
    b.  Klik Add Widget
    c.  Klik HTML/Java Scrift dan taruh Kode dibawah ini :

<!-- Kolom Tutorial™ Facebook Widget Start --><script type="text/javascript">/*<![CDATA[*/jQuery(document).ready(function() {jQuery(".rblikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});/*]]>*/</script><style type="text/css">.rblikebox{background: url("URL GAMBAR") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 42px;width: 245px;z-index: 9999999;position:fixed;right:-250px;top:20%;}.rblikebox div{border:none;position:relative;display:block;}.rblikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 999;}.rblikebox span a{color: gray;text-decoration:none;}.rblikebox span a:hover{text-decoration:underline;}</style><div class="rblikebox"><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/joens.tutorial&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></div><a href='http://joens-tutorial.blogspot.com'><img src='http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png'/></a></div><!--Realcombiz Widgets by realcombiz.com --><!-- Kolom Tutorial™ Facebook Widget End -->
 

8. Save and enjoy
Note :
Ganti Tulisan URL GAMBAR dengan salah satu url gambar dibawah
Ganti Tulisan joens.tutorial dengan alamat Fans Page facebook Sobat
URL Gambar :

http://3.bp.blogspot.com/-Z8LQja3hHv4/UQn9_FhhvxI/AAAAAAAABBY/E4b6UyvjtdA/s1600/rb%20facebook%20slide%20out%20widget%201.png

http://1.bp.blogspot.com/-JzY_t8JwPkY/UQn-Cj7cBLI/AAAAAAAABBg/UM6XwbYsmoE/s1600/rb%20facebook%20slide%20out%20widget%202.png

http://2.bp.blogspot.com/-u1YyVbGhSbw/UQn-C-MKlWI/AAAAAAAABBo/9AA9SFnrdCk/s1600/rb%20facebook%20slide%20out%20widget%203.png


Berlangganan update artikel terbaru via email:

2 Responses to "Membuat Facebook Slide Box Widget jQuery Effect"

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel