Menu Link / Top Tabs

Menu Link / Top Tabs adalah link yang diletakkan di bagian atas. Link dapat berupa alamat link dari blog kita ataupun blog/web lain yang ingin ditampilkan di blog. Contohnya:

Menu Link

Untuk membuat menu link seperti di atas, dilakukan dalam beberapa tahap.

Tahap pertama, mengubah code HTML.
Pada bagian 'layout', kliklah link 'Edit HTML'. Centangkan 'Expand Widget Templates'. Carilah kode widget untuk header, kodenya awalnya seperti di bawah ini:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Kemudian diakhiri dengan kode:

</b:section>

Tepat di atas kode </b:section>, letakkan kode baru ini:

<b:widget id='LinkList1' locked='false' title='Menu Link' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div class='Menu'>
<ul>
<li class='page_item'><a href='/'><span>Home</span></a></li>
<b:loop values='data:links' var='link'>
<li class='page_item'><a expr:href='data:link.target'><span><data:link.name/></span></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>

Tahap kedua, mengubah code CSS.
Pada bagian CSS, tambahkan elemen berikut ini:

/*-- (Menu Link) --*/
.Menu { padding: 0px 0px 0px 0px; float: right; position: absolute; top: 100px; }
.Menu em { display: none}
.Menu ul { list-style: none; margin: 0px; padding: 0px;}
.Menu ul li { background:#FFFFFF; padding: 0px; margin: 0px; display: inline; font-weight: bold;}
.Menu ul li a { padding: 5px 11px 6px 11px; background:#FFFFFF;}
.Menu ul li a:hover { background:#CC0000; color:#FFFFFF; text-decoration: none;}
.Menu ul li ul { display: none;}

Simpan (save) hasil kerjaan.

Tahap ketiga, menambahkan link.
Masuklah ke bagian 'Page Elements'. Akan terlihat widget 'Menu Link' yang baru kita tambahkan, tepat di bawah header. Kliklah link 'Edit'.


Kemudian, akan terbuat widget baru. Tambahkan link-link kamu melalui widget ini.

Tahap keempat, mengubah tampilan menu.
Bagian ini adalah pilihan. Warna latar (background) menu atau warna link dapat diubah sesuai dengan keinginan. Pada bagian tahap kedua, yaitu mengubah CSS. Coba perhatikan tulisan background:#FFFFFF;. Ubahlah kode warna #FFFFFF dengan kode warna lainnya. Begitu juga untuk mengubah warna font. Carilah kode color:#FFFFFF;. Ubahlah kode warna dengan kode lainnya.

Letak menu juga dapat diubah-ubah. Mengganti letak ketinggian, ubah ukuran yang terdapat pada code top: 100px;. Mengganti letak kanan-kiri dengan cara mengubah nilai dari padding: 0px 0px 0px 0px;. Contohnya, membuat menu lebih ke arah kanan, kodenya menjadi padding: 0px 0px 0px 100px;.

-- Alhamdulillah, selesai juga --

Lihat tutorial lainnya di Azzahrah Design


19 komentar:

Anonymous said...

ini ni yag saya cari. syukron mbak. tambhin lagi trik2 blogspotnya ya mbak

arachesostufo said...

un saluto da un blogger di scorzè venezia

Anonymous said...

Saya tadi mau buat menulink/top tabs, sampai langkah tahap pertama si bisa, tapi waktu tahap kedua nya ga tau di mana CSS nya, so CSS nya tu yang mana sih..? saya lagi buat blog pake blogspot..
makasih jwbnnya..
tolong bls ke email ini ya : mulia_fdrm@yahoo.com.
makasih.

Ijlal Binti Saja @ Mearaj said...

same juga.. css tu kat mana? tlg jwb kat blog saya bahagian chat

admin hamdan said...

maaf aku pemula, penjelasan yang dimaksud CSS kok tidak dimuat, kalau bisa tolong kirim ke email hamdan.walirsyad@gmail.com atau faaza_fast@yahoo.com. Syukron

Bayu Syubidupappap said...

klo gitu,,, harus memiliki minimal 2 alamat URL ?????

Arin said...

aku memiliki problem yg sama, CSS dimana sih? tolong email ke arin_abis@yahoo.com. Makasih...

Signature Online said...

Ass. wr.wb.
siiip deh tutorialnya lengkap dan gampang diikuti.. ijin copas dulu ya..

Dienius said...

MANTAP !!!

Unknown said...

terimakasih share ilmunya bu, langsung saya praktekkan..jazakallah khoir

Ummuzulfa said...

maaf, saya tidak tahu di berkaitan CSS, boleh diterangkan di bawah komentar? supaya lebih ramai mendapat manafaatnya..

kalau keberatan, harap dapat email ke myzulfa@gmail.com

Semoga murah rezeki...Amin.

Rini said...
This comment has been removed by the author.
Rini said...

maksudnya:
CSS itu didapat sewaktu 'EDIT HTML'.

Coba perhatikan kode2 di dalamnya, ada tulisan :
" ]]></b:skin> "

Nah, kode2 di atas itu adalah bagian dari CSS.

Sulistianto said...

Ass wr Wb, saya mau tanya apakah ada software utk pembuatan web buat para pemula, tanpa hrs menggunakan blogger or wordpress, terima kasih

Rini said...

maksudnya mau buat web sendiri ? bukan yang gratisan ?
banyak kok wizard pembuat web, namnya CMS. Coba cari di google dengan keyword itu...

admin said...

bagaimana untuk template klasik, ada nggak ? jazakumullah..

Johan Muhammad said...

Macam mana sih supaya linknya enggak
kelihatan di bawah menu nya? Tolong tunjukkan caranya.

Rohifa said...

Assalamu'alaikum...
Maaf,tolong jelaskan CSS pada bagian ke 2. Info bisa di kirim ke srohifa@yahoo.com
Jazakallah khoir

Unknown said...

makasih...
bermanfaat bgt,..,

-- -- --

Copyright © 2008 - Free Islamic Blogger Templates - powered by Blogger