0 Cara Mudah Membuat Scroll Widget Blog

By Agoeng Wong | At 06.26 | Label : Tutorial , Widget | 0 Comments

Tutorial - Pada kesempatan terakhir sebelum paket datanet habis pada jam 07.00 wib ini. Mudah-mudah bisa menyelesaikan postingan cara mudah membuat scroll widget blog. Scroll sendiri berfungsi untuk memberikan ruang widget lebih ramping dari sebelumnya. Scroll disini bisa diterapkan pada semua widget sobat blogger. 

Dibawah ini ada kode yang harus sobat blogger pakai:

<div style="background-color: #dde1e3; border: 1px solid #999999; height: 100px; overflow: auto; padding: 10px; width: 100%px;">kode anda </div><br /><br />http://agoengwong.blogspot.com/2014/03/cara-mudah-membuat-scroll-widget-blog.html<br />

Keterangan:

• Width: Lebar
• Height: Tinggi
• Border: Garis tepi
• Background color: Warna Background
• Kode Anda: Silahkan isi kode widget yang akan dipasang scroll  

Ok, silahkan dicoba!!! Semoga bermanfaat.

0 Cara Mudah Membuat Widget Fanpage Facebook Melayang

By Agoeng Wong | At 02.18 | Label : Tutorial , Widget | 0 Comments

Blog akan lebih indah lagi jika ada beraneka widget yang terpasang disana. Tidak terkecuali widget Fanpage Facebook juga harus dipasang di blog. Fanpage sendiri akan banyak membantu agar blog maupun pemilik blog dalam berinteraksi dengan kawan yang laen lebih mudah. Ini juga bisa membantu blog supaya cepat dikenal oleh pengunjung blog. Bisa juga mempromosikan facebook sobat blogger tentunya. Dengan memasang Fanpage dalam blog maka otomatis pengunjung blog laen akan mengeklik tombol Like Fanpage yang melayang tersebut. 

Widget Fanpage Facebook melayang ini tidak akan mengganggu pengunjung blog karena ada tombol close untuk menghilangkannya.  Jadi bagaimana sobat blogger masih mau pasang widget ini di blog? Bagaimana cara masangnya, silahkan ikuti tutorial blok ini!!!

Cara mudah pasang widget Fanpage Facebook melayang di blog dengan mudah.

• Login ke blogger.com.
• Pilih Tata Letak kemudian Tambah Gadget.
• Pilih HTML/JavaScript.
• Masukkan kode html dibawah ini.

 <style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/agoengwong?ref=hl&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</center>
<!-- HTML End -->
<a class='close' href='#'>&times;</a>
</div>

• Ganti kode yang merah dengan ID Facebook kamu.
• Simpan jika sudah selesai.

Sobat blogger, cukup mudah dan simpel untuk tutorial blog kali ini. Semoga bermanfaat dan jika ada kritik juga saran bisa tinggalkan komentar di sini.