Membuat Menu Blog Model Vista

Dari beberapa permintaan untuk membuat blog yang lebih menarik terutama "Menu Blog", maka saya coba untuk membuat menu model "Toolbar Vista", sebetulnya model ini biasanya ditampilkan pada Web bukan Blog, Nah dengan sedikit modifikasi akhirnya bisa kita tampilkan pada halaman Blogger. perlu diketahui juga bahwa menu ini tidak kita letakkan di bagian header tetapi pada bagian gadget blogspot yang digeser tepat dibawah header.
Beberapa penjelasan saya buat agar bisa dilakukan modifikasi sesuai selera.

Model menu ini menggunakan HTML dan CSS, untuk kode CSS akan kita letakkan sebelum tanda </b:skin>.

img{ border: 0pt; } #bottom_div{ width: 520px; height: 150px; background-color: #b9d1ea; clear:both; } #vista_toolbar { float:left; font:normal 12px 'Trebuchet MS','Arial'; margin:0; padding:0; } #vista_toolbar ul { background-image:url(http://i616.photobucket.com/albums/tt248/bahron2000/back.gif); background-repeat:repeat-x; float:left; line-height:32px; list-style:none; margin:0; padding:0 10px 0 10px; width:500px; } #vista_toolbar li { display:inline; padding:0; } #vista_toolbar a { color:#FFF; float:left; padding:0 3px 0 3px; text-decoration:none; } #vista_toolbar a span { display:block; float:none; padding:0 10px 0 7px; } #vista_toolbar a span img { border:none; margin:8px 4px 0 0; } /* tampilkan gambar ketika mouse over link */ #vista_toolbar a:hover{ background: url(http://i616.photobucket.com/albums/tt248/bahron2000/left.png) no-repeat left center; } #vista_toolbar a:hover span { background:url(http://i616.photobucket.com/albums/tt248/bahron2000/right.png) no-repeat right center; } #vista_toolbar a.right { float:right; } }

dari kode css diatas dapat dijelaskan sebagaiu berikut :

#bottom_div{ width: 520px; height: 150px; background-color: #b9d1ea; clear:both; }

Mendefinisikan lebar bottom =520 piksel dan tinggi=150 piksel dengan warna latar belakang kode heksa #b9d1ea seperti dibawah ini : latar belakang

#vista_toolbar ul { background-image:url(http://i616.photobucket.com/albums/tt248/bahron2000/back.gif); background-repeat:repeat-x; float:left; line-height:32px; list-style:none; margin:0; padding:0 10px 0 10px; width:500px; }

Membuat vista toolbar dengan mengambil gambar dari background image yang sudah ditentukan yaitu bentuk denga model sliding-door yaitu 1 gambar yang disusun berulang-ulang hingga membentuk toolbar sepanjang 500 piksel

kode HTML dibawah ini kita letakkan pada bagian "Gadget->HTML/Java Script" kemudian digeser letaknya pada bagian posting paling atas atau dibawah header. berikut ini kode HTML

<div id="vista_toolbar"> <ul> <li><a href="#"><span><img src="http://i616.photobucket.com/albums/tt248/bahron2000/add.gif" alt="add new" align="left"/>Add New</span></a></li> <li><a href="#"><span><img alt="check mail" src="http://i616.photobucket.com/albums/tt248/bahron2000/mail.gif" align="left">Check Mail</span></a></li> <li><a href="#"><span><img alt=" " src="http://i616.photobucket.com/albums/tt248/bahron2000/chart.gif" align="left" statistic/>Statistic</span></a></li> <li><a href="#"><span><img alt="my pictures" src=" http://i616.photobucket.com/albums/tt248/bahron2000/mona.gif" align="left"/>My Pictures</a></li> <li><a class="right" href="#"><span><img alt="help" src="http://i616.photobucket.com/albums/tt248/bahron2000/sos.gif" align="left"/>Help</span></a></li> </ul> </div>

dari kode diatas, jika link akan dibuat sesuai dengan target, maka tanda "#" bisa digantikan dengan url target yang dikehendaki. Sedangkan untuk warna latar belakang toolbar dapat di desain sendiri menggunakan Adobe Photoshop. dan untuk icon bisa diambil dan dipotong-potong sendiri dari "istartedsomething.com"

Contoh beberapa icon vista yang bisa dipakai :


Thank to http://blog.itookia.com