ŘęVθ˩ŧŦ

Login ke Blogger
Klik Rancangan Edit HTML
Klik tulisan Download Template Lengkap
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget

Kemudian, cari kode <body>
Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3)
jika sudah ketemu ganti dengan kode dibawah ini :

<body onLoad='init()'>
<div id='loading' style='position:absolute; width:100%; text-align:center; top:300px;'> <img border='0' src='http://i1002.photobucket.com/albums/af149/Imtikhan/Loading1.gif'/></div>

<script src='http://h1.ripway.com/imtikhan/loading.js' type='text/javascript'/>


Keterangan : Url gambar diatas bisa sobat ganti dengan Url gambar pilihan sobat
berikut contoh gambar beserta kodenya :

Contoh gambar

http://i1002.photobucket.com/albums/af149/Imtikhan/Loading1.gif


Contoh gambar

http://i1002.photobucket.com/albums/af149/Imtikhan/Loading2.gif


Contoh gambar

http://i1002.photobucket.com/albums/af149/Imtikhan/Loading3.gif


Contoh gambar

http://i1002.photobucket.com/albums/af149/Imtikhan/Loading4.gif


Contoh gambar

http://i1002.photobucket.com/albums/af149/Imtikhan/Loading5.gif

Untuk mengubah penempatan gambar loading silahkan atur sendiri pada kode text-align:center sobat bisa mengubahnya dengan left, right, top atau bottom


selamat mencoba!
Read More …


Memasang widget recent post pada blog hampir dilakukan oleh mayoritas blogger, tentu saja alasannya untuk mempermudah pengunjung blog mengetahui artikel terbaru di blog kita dan untuk memancing pengunjung agar membaca artikel lain di blog kita. Pada artikel kali ini saya akan sedikit berbagi mengenai cara membuat recent posts bergambar / recent posts menggunakan thumbnails seperti yang saya gunakan di blog ini. Saya harap widget ini dapat lebih mempercantik blog teman-teman dan lebih menarik pengunjung untuk meng-klik link tersebut.

1. Login ke account blogger.
2. Pada dashboard klik: Layout » Add a getget » pilih "HTML/Javascript"
3. Copy paste code di bawah ini:
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i44.tinypic.com/2r72hjd.jpg";
imgr[1] = "http://i44.tinypic.com/2r72hjd.jpg";
imgr[2] = "http://i44.tinypic.com/2r72hjd.jpg";
imgr[3] = "http://i44.tinypic.com/2r72hjd.jpg";
imgr[4] = "http://i44.tinypic.com/2r72hjd.jpg";
showRandomImg = true;
boxwidth = 280;
cellspacing = 2;
borderColor = "#cccccc";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://komunitas-bantu-membantu.blogspot.com/";
</script>
<script src="http://viemonsta.googlecode.com/files/devrecentpost.js" type="text/javascript"></script>4. Save

Jangan lupa ganti URL yang berwarna biru di atas dengan alamat URL blog teman-teman, untuk membuat tampilan sesuai dengan template blog teman-teman silahkan edit code yang berwarna merah. Dibawah ini sedikit penjelasannya:
imgr[0] = Pic yang keluar bila artikel tidak memiliki pic, silahkan ganti dengan URL pic teman-teman
boxwidth = Lebar widget
cellspacing = Jarak antara gambar
borderColor = Warna border (ganti dengan warna background template)
thumbwidth & thumbheight = Tinggi dan lebar gambar
fntsize = Ukuran text
acolor = Warna text
aBold = Bold text, isi dengan "true" bila menginginkan bold atau "false" bila tidak
numposts = Jumlah post yang ingin ditampilkan

di tunggu komentarnya di bawah kalo ada yang mau ditanyakan. Selamat mencoba..
Read More …