Memanfaatkan Crosscol-wrapper untuk Navigasi

Banyak cara membuat navigasi menu pada blog, namun disini saya mencoba sharing bagaimana memanfaatkan Crosscol-wrapper untuk navigasi menu. Bagi pengguna template minima, tentu tidak asing dengan Crosscol-wrapper dan biasanya sektor ini jarang dimanfaatkan.

Ketika saya memodifikasi minima menjadi sebuah template yang minimalis, maka saya mencoba memanfaatkan bagian ini. Langkah awal tentu kita harus masuk ke blogger, kemudian apabila kita ingin tahu dimana letak "crosscol", maka lihat pada dashboard >Layout > Edit HTML. Silahkan tekan ctrl + F secara bersamaan kemudian masukkan "crosscol", maka akan anda jumpai kode seperti ini :

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

Pada kode diatas, maka terdapat dua bagian yang dilambangkan dengan kode : style='text-align:center' yang membuat semua widget yang kita tambahkan akan berada pada posisi di tengah dan showaddelement='no' yang menyebabkan kita tidak bisa menambahkan widget. Untuk itu kita perlu mengubahnya menjadi seperti dibawah ini :

<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>

Karena kita ingin menambahkan navigasi menu secara terbatas, maka sebaiknya cobalah membuat posting yang terkait dengan "Home, About atau Contact" Salinlah url dari masing-masing posting dalam notepad yang nantinya akan kita tambahkan URL tersebut sebagai link list kita.

Langkah membuat widget Link List adalah sebagai berikut : klik Layout>Page element > add a gadget pilih Link List. Pada jendela Configure Link List untuk title, number of links to show in list dikosongkan. Sedangkan untuk Sorting pilih Don't Sort. Masukkan url dari posting Home pada New Site URL kemudian ketikkan HOME pada New Site Name kemudian save. Lakukan dengan url yang lainnya.

Kita akan menambahkan kode CSS dari pada navigasi tersebut, silahkan ke Layout > Edit HTML dan tambahkan kode dibawah ini sebelum kode ]]></b:skin>.

/* Navigasi
------------------------------------------------ */
.crosscol .LinkList ul {padding:0px;}

.crosscol .LinkList ul li {
float:left;
list-style-type:none;
margin-right:1px;
}

.crosscol .LinkList ul li a {
border:1px solid #CCCCCC;
padding:5px 10px;
}

.crosscol .LinkList ul li a:hover, .crosscol .LinkList ul li a.current {
background:#ccc;
}

Sekarang kita perlu membuat widget Link List secara otomatis akan berubah warna pada saat T-mouse berada di atas link tersebut, untuk itu silahkan klik Layout >Edit HTML sebelumnya tandai "Expand Widget Templates" dan cari kode dibawah ini :

<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

Ganti dengan kode dibawah ini :

<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:blog.url!=data:link.target'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
<b:else/>
<li><a class='current' expr:href='data:link.target'><data:link.name/></a></li>
</b:if>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

Simpan dan nikmati hasilnya....