Membuat Recent Post dengan Disertai Thumbnail

Cara Membuatnya
1. Login ke Blogger  Tata Letak
2. Tambah Gadget
3. Pilih"HTML/Javascript".

Setelah itu masukan kode dibawah ini :
<script language="JavaScript"> imgr = new Array(); imgr[0] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[1] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[2] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[3] = "http://i43.tinypic.com/orpg0m.jpg"; imgr[4] = "http://i43.tinypic.com/orpg0m.jpg"; showRandomImg = true; boxwidth = 245; cellspacing = 8; borderColor = "#ffffff"; bgTD = "#000000"; thumbwidth = 40; thumbheight = 40; fntsize = 12; acolor = "#666"; aBold = true; icon = " "; text = "comments"; showPostDate = true; summaryPost = 100; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 5; home_page = "http://beautifullshop.co.cc/"; </script> <script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

Dan berikut ini beberapa kode yang harus dan bisa kita rubah,

    boxwidth - Ukuran Lebar Widget
    cellspacing - Spasi diantara cells
    borderColor - Warna Border
    thumbwidth &amp; thumbheight - Ukuran lebar dan tinggi gambar Thumbnails
    fntsize - Ukuran Font pada title
    acolor - Warna title
    aBold - Tebal huruf pada title? (true or false)
    numposts - Jumlah recent post yang ditampilkan?
    home_page : http://beautifullshop.co.cc/ (Ubah sesuai URL blog anda sendiri)

Read More

05.07 | 0 komentar

Membuat Slide Recent Post

Cara Membuat Slide Recent Post
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <style type="text/css" media="screen"> <!-- #spylist { overflow:hidden; margin-top:5px; padding:0px 0px; height:350px; } #spylist ul{ width:220px; overflow:hidden; list-style-type: none; padding: 0px 0px; margin:0px 0px; } #spylist li { width:208px; padding: 5px 5px; margin:0px 0px 5px 0px; list-style-type:none; float:none; height:70px; overflow: hidden; background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x; border:1px solid #ddd; } #spylist li a { text-decoration:none; color:#4B545B; font-size:11px; height:18px; overflow:hidden; margin:0px 0px; padding:0px 0px 2px 0px; } #spylist li img { float:left; margin-right:5px; background:#EFEFEF; border:0; } .spydate{ overflow:hidden; font-size:10px; color:#0284C2; padding:2px 0px; margin:1px 0px 0px 0px; height:15px; font-family:Tahoma,Arial,verdana, sans-serif; } .spycomment{ overflow:hidden; font-family:Tahoma,Arial,verdana, sans-serif; font-size:10px; color:#262B2F; padding:0px 0px; margin:0px 0px; } --> </style> <script language='JavaScript'> imgr = new Array(); imgr[0] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg"; imgr[1] = "http://i1037.photobucket.com/albums/a452/thing_wu/Thing/women/2q1bhc3.jpg"; imgr[2] = "http://i1044.photobucket.com/albums/b443/akropolis_album/antarktis/125model6-1.jpg"; imgr[3] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg"; imgr[4] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg"; showRandomImg = true; boxwidth = 255; cellspacing = 6; borderColor = "#232c35"; bgTD = "#000000"; thumbwidth = 70; thumbheight = 70; fntsize = 12; acolor = "#666"; aBold = true; icon = " "; text = "comments"; showPostDate = true; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 10; home_page = "http://beautifullshop.co.cc/"; limitspy=4 intervalspy=4000 </script> <div id="spylist"> <script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script> </div>

Sebelum kita Simpan, berikut ini yang bisa kita ubah:

• 220 dan 208 adalah lebar widget.
•  numposts = 10; adalah banyaknya postingan yg ingin kita tampilkan
• Ganti http://beautifullshop.co.cc/ dengan URL blog anda sendiri.

5. Simpan Template anda, jika sudah selesai.

Read More

04.54 | 0 komentar

Cara Membuat Icon Burung Twitter Berterbangan di Blog

Cara Membuatnya
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<script type="text/javascript" src="https://sites.google.com/site/exeloph/file/Twitterbang.js"></script> <script type="text/javascript"> var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEityxesxZn7CMj3bX27oUtCiCoEgs4lp1DIBcW6TRweM6HXd3S6P-RKImYQz3CkTV3ELYw13URooTlGk1oCtxsgqDhse9IVHTZq7vRcOW3yyt1rZzs-zqAAXhei5K7hDUyIHtgveS17kRY/"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/#!/93liubenz";var tweetThisText = "Twitter - 93liubenz http://beautifullshop.co.cc/";tripleflapInit();</script>

5. Ganti http://beautifullshop.co.cc/ dengan URL blogmu sendiri dan 93liubenz dengan twitter usernamemu sendiri.
6. Simpan jika sudah selesai. Jangan lupa follow @93liubenz ya!

Read More

04.34 | 2 komentar

Cara Membuat Tulisan Berjalan Bolak - balik

Cara Membuat Tulisan Berjalan Bolak-balik
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode script berikut ini:

<marquee behavior="alternate">Selamat Datang di B3N7Y BLOG</marquee>

Itu adalah contoh, kamu bisa menganti tulisan yang berwarna merah dengan tulisan (teks) yang kamu inginkan, dan juga bisa menyisipkan kode lain, misalnya Bold, italic, font size, atau tex colour. Atau juga bisa kode html untuk banner (gambar).

5 Simpan jika sudah selesai. Hasilnya akan seperti ini:
Selamat Datang di B3N7Y BLOG

Read More

05.36 | 0 komentar