Selasa, 06 Mei 2014
CARA ADD STYLISH FLOATING Facebook Like BOX WIDGET DI BLOGGER
Hari ini kita akan belajar bagaimana menambahkan facebook seperti box untuk blog blogger dengan tampilan yang khas, indah dan menarik Format, di mana facebook seperti kotak tersembunyi di sisi kanan layar dan hanya menunjukkan bagian dari kursor di atasnya. untuk menambahkan widget ini ke blog Anda, ikuti dua langkah sederhana ini:
LANGKAH 1
1. Pergi ke Blogger Dashboard -> Template
2. Tolong ! men-download salinan template Anda
3. Sekarang klik Edit HTML
4. Gunakan Ctrl + F untuk mencari </ head>
5. Kemudian copy dan paste tepat di atas / sebelum, kode ini:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
6. save your template
LANGKAH 2
1. Sekarang pergi ke Tata Letak -> klik "Add a gadget".
2. Pilih "script html / java" dan tambahkan kode yang diberikan di bawah ini dan klik save
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUZqLG8r9xjovIJtNJKJiYHkOFu2-xwsu21mf4eI10K74UdGBnV_F20DRdwMLTA2SJ6O5OaUVZZdFf3OTk-Z2JAq97ZLGPWSm75QbesUfujl63XeMM9-YdVcZc-j1ZlNgEr5chSZ43RH0/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;} } </style> <div class="abtlikebox" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Paertaibenk&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>Widget by :<a href="http://seotutorialblogg.blogspot.com/"> SEOtutorialblogg</a></span> </div> </div>
Catatan: Ganti Paertaibenk dengan URL halaman facebook Anda atau nama pengguna dan ganti URL yang berwarna merah dengan URL BLOG sobat.
Sekarang Anda dapat melihat hasilnya dan bahagia. :-D
Hari ini kita akan belajar bagaimana menambahkan facebook seperti box untuk blog blogger dengan tampilan yang khas, indah dan menarik Format, di mana facebook seperti kotak tersembunyi di sisi kanan layar dan hanya menunjukkan bagian dari kursor di atasnya. untuk menambahkan widget ini ke blog Anda, ikuti dua langkah sederhana ini:
LANGKAH 1
1. Pergi ke Blogger Dashboard -> Template
2. Tolong ! men-download salinan template Anda
3. Sekarang klik Edit HTML
4. Gunakan Ctrl + F untuk mencari </ head>
5. Kemudian copy dan paste tepat di atas / sebelum, kode ini:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
6. save your template
LANGKAH 2
1. Sekarang pergi ke Tata Letak -> klik "Add a gadget".
2. Pilih "script html / java" dan tambahkan kode yang diberikan di bawah ini dan klik save
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUZqLG8r9xjovIJtNJKJiYHkOFu2-xwsu21mf4eI10K74UdGBnV_F20DRdwMLTA2SJ6O5OaUVZZdFf3OTk-Z2JAq97ZLGPWSm75QbesUfujl63XeMM9-YdVcZc-j1ZlNgEr5chSZ43RH0/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;} } </style> <div class="abtlikebox" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Paertaibenk&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>Widget by :<a href="http://seotutorialblogg.blogspot.com/"> SEOtutorialblogg</a></span> </div> </div>
Catatan: Ganti Paertaibenk dengan URL halaman facebook Anda atau nama pengguna dan ganti URL yang berwarna merah dengan URL BLOG sobat.
Sekarang Anda dapat melihat hasilnya dan bahagia. :-D