membuat menu blog keren

membuat menu blog keren


Anda pasti bertanya menu blog seperti apa ? bentuknya seperti pada blog saya di sebelah kanan yang berwarna coklat kalau mousenya di dekatkan maka menu blognya akan keluar, mau tau bagaiman cara membuatnya , langsung aja :
1. pastinya login terlebih dahulu
masuk ke tata letak (layout) >> elemen halaman

2. tambah gedget >> html/java script
3. masukkan code berikut:

<script language='javascript'>
<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://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 = 600;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 80;

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://abycthong.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>


Pada bagian yang saya beri warna merah tebal, silahkan ubah alamat blognya dengan alamat blog anda, kemudian pada bagian yang saya beriwarna biru tebal silahkan ubah nilai 10 menjadi sesuka anda, misalnya lima dan sebagainya.

Keterangan:

-home_page = "http://abycthong.blogspot.com/"; merupakan tempat dimana tempat alamat postingan blog anda. Jadi jangan lupa untuk mengganti alamatnya dengan blog anda.

-numposts = 10; merupakan jumlah postingan atau artikel yang akan di tampilkan pada slide yang anda buat.


Setelah anda selesai melakukan langkah-langkah di atas, silahkan klik simpan dan kemuadian silahkan anda lihat hasilnya.....Selamat mencoba......