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:

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