Membuat widget fans page facebook melayang
Ok skarang kembali cara membuat widget fans page facebook melayang.
Setelah sobat mempunyai fans pagenya kemudian sobat masuk kedasbor blogger >> Template >> Edit HTML
Setelah itu sobat cari kode </head> lalu letakn kode berikut tepat di atas kode </head> tetapai jika sobat sudah mempunyai kode Jquery sebelumnya tidak disarankan untuk menambahkan kode berikut.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>Setelah sobat selesai memasukan kode Jquery kedalam template blogger sobat, selanjutnya sobat pilih Tata letak >> Tambah Gadget >> HTML/JavaScript lalu masukan kode di bawah ke dalam widget HTML/Javascript sobat.
<script type="text/javascript">Ganti kode yang berwarna biru dengan url blog sobat. setelah itu simpan dan lihat hasilnya.
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK3uDthx1DXITaSF3Z6ladGiwpRvLOmHPc8sYCvUw8oeVw-gKA7OhupT9ouAvdxFXlyFiXbudGMCW0Kc5mDDzYJDynJDqp4AFCuTtSy4rOmXT74CxupBL5Cnd3WTAygZZcs3HTvtkSS4c/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=http://www.facebook.com/fajar345blog&width=251&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="http://www.fajar345.com/2012/04/membuat-widget-fans-page-facebook.html" target="_blank">+MAU??</a></span></div></div>
Silahkan sobat lihat DEMO untuk mengetahui bentuk widget fans page facebook melayang. Jangan lupa like fans pagenya juga ya :)
Ok mungkin sekian dulu tulisan saya hari semoga bermanfaat.
Membuat widget fans page facebook melayang
Ok skarang kembali cara membuat widget fans page facebook melayang.
Setelah sobat mempunyai fans pagenya kemudian sobat masuk kedasbor blogger >> Template >> Edit HTML
Setelah itu sobat cari kode </head> lalu letakn kode berikut tepat di atas kode </head> tetapai jika sobat sudah mempunyai kode Jquery sebelumnya tidak disarankan untuk menambahkan kode berikut.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>Setelah sobat selesai memasukan kode Jquery kedalam template blogger sobat, selanjutnya sobat pilih Tata letak >> Tambah Gadget >> HTML/JavaScript lalu masukan kode di bawah ke dalam widget HTML/Javascript sobat.
<script type="text/javascript">Ganti kode yang berwarna biru dengan url blog sobat. setelah itu simpan dan lihat hasilnya.
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK3uDthx1DXITaSF3Z6ladGiwpRvLOmHPc8sYCvUw8oeVw-gKA7OhupT9ouAvdxFXlyFiXbudGMCW0Kc5mDDzYJDynJDqp4AFCuTtSy4rOmXT74CxupBL5Cnd3WTAygZZcs3HTvtkSS4c/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=http://www.facebook.com/fajar345blog&width=251&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="http://www.fajar345.com/2012/04/membuat-widget-fans-page-facebook.html" target="_blank">+MAU??</a></span></div></div>
Silahkan sobat lihat DEMO untuk mengetahui bentuk widget fans page facebook melayang. Jangan lupa like fans pagenya juga ya :)
Ok mungkin sekian dulu tulisan saya hari semoga bermanfaat.
Demo Block quote fajar345 Blog
Ini adalah demo dari block quote yang telah di tulis di http://www.fajar345.com. untuk block quote yang di tulis di postng fajar345.com adalah block quote dengan warna putih seperti dibawah ini
haloo ini block quote yang telah didemokan sebelumnya, sobat dapat menggati ketebalan tulisan seperti yang telah ditulis di fajar345 blog. dan juga dapat memilih warna background yang sesuai dengan tema blog sobat
dan dibawah adalah beberapa pilihan background yang bisa sobat terapkan di blog sobat.
berikut kode url untuk warna diatas
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCBwMoHBjFdmou8rXVwuN3xkgMjlWnx7taYKUWpg3YOwHTO2iUb1kaDM4BxcYf46o6f2NKcowmSvP5JmZdd9nYSmkbPKA6Rfh8h2cK_4uwurJLgXpUnKOAQrOjQBBR6NX-Qw9fP_PeR34/s1600/notebook-brown.gif
Url block quote dengan background diatas
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiploXC4qcZapZdnSl5Cqidrk4qxXkRT9ljr7kwzbQxdm_jhz0XTYQUUCpWf337upbqcwKFKNDorrpGCxwZ21fxWEJJ5ubMf9fe3tzwVeMvBIhQE8MTAqVAxOQy3Or-M13YDQ5yFvOzbNg/s1600/notebook-green.gif
Diatas adalah pilihan untuk kode yang pertama jika sobat gunakan pilihan kode yang kedua berikut adalah contoh background block quote dan urlnya.Untuk warna diatas1.bp.blogspot.com/_7wsQzULWIwo/SwluBQVcDsI/AAAAAAAACTA/eN3HYcH6nTw/s1600/notebook-grey.gif
Link untuk warna diatas
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj11dw9CjcHpLjTb3tg3cKYZ_pjIwG8dCg-crIqOQxK7pYhoug-oV9oJ6asevdMKdWJl2WGDg_hor5c5lx71WWRqCHoL5-uZZDrTJXZINObeaOfAmDm1XfI66gCvoBaQK86iaJ4FQbuNng/
Link untuk warna diatas
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWpsiS4pN8i0dZ3NATndt5tLcJuaaLOsY5G1nyY0Gk-sP4EENtNhcHwRtkpMiD77KqaWFqsN3A23UtGMvOK4vhWsTmyDogwWsQzlct9OjWoq-RRTL7OrVnMxhqnTTDLbxX1gvVNaboLcA/
Link untuk warna diatasSilahkan sobat gunakan salah satu bacgroun diatas.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhamtaLoAhxUNDmNshlOvUP9f0m5RW7ipA5xo96DDkfTKvUZ-nmyVCjoCCFJMtwQsUkW-9CmSXLvEcPOBBPVwucTv-TxmfXflQzErvsNFTUrx8YNTmSCCJkGVBeG7v2_djvmVo18ft80aA/
