Navigasi Linkbar pada Minima Template

Minima template yang tersedia disaat awal kita membuat sebuah blog di blogger biasanya tidak dilengkapi dengan navigasi menu. Navigasi menu disamping mempercantik tampilan blog kita, dapat berfungsi untuk memasang link penting atau link utama seperti Home, Service, Contact Us dan lain-lain.

Berdasarkan pengalaman saya saat memodifikasi template minima agar mirip sebuah majalah pribadi, maka saya mencoba sharing pengalaman ini dengan rekan-rekan.

Oke berikut langkah-langkahnya.

1. Login di Blogger, kemudian masuk pada "Tata letak" dan klik Edit HTML. Ingat jangan dicentang "Expand Template Widget"

2. Membuat Variable definitions untuk memudahkan pengaturan warna dengan mudah apabila kita ingin merubah warna di menu "Tata Letak" pada bagian "Font dan Warna"

Kita membuat variable seperti dibawah ini.

<Variable name="linkbarbgColor" description="Linkbar Background Color"
type="color" default="#C94093" value="#808080">
<Variable name="linkbarmainBorderColor" description="Linkbar Main Border Color"
type="color" default="#C94093" value="#b3b3b3">
<Variable name="linkbarBorderColor" description="Linkbar Border Color"
type="color" default="#9D1961" value="#333333">
<Variable name="linkbarTextColor" description="Linkbar Text Color"
type="color" default="#ffffff" value="#b3b3b3">
<Variable name="linkbarHoverBgColor" description="Linkbar Hover Background Color"
type="color" default="#ffffff" value="#f2984c">
<Variable name="linkbarHoverTextColor" description="Linkbar Hover Text Color"
type="color" default="#9D1961" value="#0D8F63">

kemudian sisipkan dibagian Variable definitions.

/* Variable definitions

...........dst hingga

<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#f2984c">

(sisipkan kode variable yang telah kita buat disini )


<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 99% Arial, sans-serif">

3. Kemudian tambahkan variable definitions tentang besarnya huruf. Kodenya seperti ini

<Variable name="linkbarTextFont" description="Linkbar Text Font"
type="font"
default="normal normal 77% Verdana, sans-serif"
value="normal bold 67% Arial, sans-serif">

kode variable definitions diatas , pasang setelah kode dibawah ini :

<Variable name="descriptionfont" description="Blog Description Font"
type="font" default="normal normal 0% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 0% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">

4. Buat kode CSS seperti dibawah ini

/* ----- LINKBAR ----- Modify by nataludin */

#linkbar-wrapper {
margin: 2px 0px 5px 0px;
padding: 0px 0px 0px 0px;
width: 940px;
position: relative;
background: $linkbarbgColor;
border: 0px solid $linkbarmainBorderColor;
}

#linkbar .widget {
margin: 0px 0px 0px 0px;
padding: 4px 0px 7px 0px;
text-align: left;
}

#linkbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type:none;
}

#linkbar li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#linkbar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: none;
visibility: hidden;
}

#linkbar a {
clear: both;
margin: 0px -4px 0px 0px;
padding: 7px 10px 7px 10px;
width:100%;
text-decoration:none;
font: $linkbarTextColor;
color: $linkbarTextColor;
text-transform: uppercase;
border-right: 1px solid $linkbarBorderColor;
border-left: 0px solid $linkbarBorderColor;
}

#linkbar a:hover {
color: $linkbarHoverTextColor;
background: $linkbarHoverBgColor;
}

Catatan : width: 940px; sesuaikan dengan lebar dari " outer-wrapper "

Kode CSS diatas dipasang di atas kode ]]></b:skin>


5. Kemudian buat kode CSS dibawah ini :

<div id='linkbar-wrapper'>
<b:section class='linkbar' id='linkbar' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'/>
</b:section>
</div>
<div style='clear: both;'/>

Pasang kode diatas <div id='main-wrapper'>

Pemasangan ditempat ini bila kita menginginkan posisi Linkbar berada dibawah header.

Apabila anda ingin memasang diatas Header, maka kode CSS dipasang di atas kode : <div id='header-wrapper'>


Saya rasa demikian cara modifikasi Minima Template, bila ada kesalahan mohon diberi masukan. Karena ini berdasarkan pengalaman saya saat modifikasi template model majalah "Sharing Post".

Mohon ditambahkan kekurangannya pada komentar anda, sebagai sharing pengetahuan sesame blogger.