Sub Halaman dalam Blogger

Ni atas request dari mas Sandi :-$
Sebenernya bikin sub halaman di Blogger (seperti tab-tab di header Blogger Banyumas yang warna merah) sih ga susah-susah amat. Fitur ini memang tidak disediakan dalam Blogger seperti dalam Wordpress, tapi dengan akalan-akalan sederhana, kita bisa membuatnya mirip seperti Wordpress ko :-)

Pertama yang perlu diperhatikan adalah mau diisi apa sub halaman kita nantinya. Kalo kita ambil contoh seperti yang di blog ini, saya membagi halaman kedalam 4 bagian : Ngoprek Blog, Rekomendasi, Blogger Banyumas, dan Link. Masing-masing sub halaman punya tema tulisan sendiri.
Nah, bagaimana cara membagi tema-tema tersebut sebenarnya sangat mudah. Saat workshop kemarin, hal pertama yang kita praktekan setelah proses pendaftaran akun Blogger adalah memposting tulisan perdana. Saat memposting, pada bagian bawah text area posting terdapat opsi pemilihan label. Label ini dapat diisi apapun sesuai dengan tema tulisan yang akan kita publish nantinya. Berangkat dari Label inilah sebenarnya ide untuk membagi blog kita ke dalam sub-sub halaman dapat terealisasikan. Sebelum anda mencoba, backup dulu template anda yang sekarang.

Berikut langkah-langkahnya :

1. Tentukan nama Label berdasarkan nama sub halaman yang akan dibuat. Klasifikasikan tema tulisan jadi beberapa tema pokok saja, jangan terlalu banyak.

2. Setelah selesai, masuk ke halaman Tata Letak dan klik Tambah Elemen Halaman. Klik ikon Label. Kemudian masukan ke dalam sidebar.

3. Setelah selesai klik Simpan, kemudian lihat hasilnya. Di bagian sidebar terdapat sederet label yang telah anda buat sebelumnya. Klik salah satu Label dan anda akan dibawa ke halaman yang hanya memuat tema-tema Label tersebut. Logikanya seperti itu, sederhana kan? Nah, untuk membuat halaman About Us, atau Tentang Kami atau apapun yang tidak membutuhkan comment, hilangkan opsi pemberian comment pada Label tersebut.

Untuk membuat navigasi khusus terkait sub halaman, anda membutuhkan kode HTML dan CSS yang diletakan terpisah. Berikut langkah-langkahnya :

1. Pada halaman blog anda, klik kanan Label yang baru saja anda masukan, kemudian klik "copy link location" atau "copy shotcut" setelah itu paste di Notepad. Ulangi langkah tersebut pada setiap label yang ada.

2. Masuk ke halaman Tata Letak, kemudian klik Elemen Halaman. Pada bagian bawah Navbar anda perhatikan apakah ada opsi untuk menambah elemen halaman. Jika tidak, anda harus membuat beberapa modifikasi di halaman Edit HTML.

2.1. Klik Edit HTML dan cari tag seperti berikut :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog Anda (Header)' type='Header'/>
</b:section>
</div>

Ubah maxwidgets menjadi 2 dan showaddelement menjadi yes. Hasilnya seperti ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Blog Anda (Header)' type='Header'/>
</b:section>
</div>

Sebagai catatan, metode ini dapat anda gunakan pada bagian manapun. Artinya jika anda ingin menambahkan jumlah widget yang dapat ditampung oleh header, body, sidebar ataupun footer, anda tinggal mengubah parameter seperti itu. Maxwidgets menendakan jumlah Elemen Halaman yang dapat anda tambahkan, sedangkan Showaddelement akan memunculkan opsi Tambah Elemen Halaman.

3. Ok, kembali ke topik, setelah anda merubah parameter Element tadi, simpan template anda dan klik Elemen Halaman. Anda akan melihat tampilan opsi Tambah Elemen Halaman pada bagian header anda.

4. Klik Tambah Elemen Halaman, kemudian pilih HTML/Javascript, ketikan kode berikut :

<div id="navcontainer">
<ul id="navlist">
<li><a href="http://namabloganda.blogspot.com/linklabel1.html">Depan</a></li>
<li><a href="http://namabloganda.blogspot.com/linklabel2">Tentang Saya</a></li>
<li><a href="namabloganda.blogspot.com/linklabel3">Link</a></li>
</ul>
</div>

Paste shortcut label yang tadi telah anda pindahkan ke notepad di bagian href=".."
Setelah selesai, klik Simpan.

5. Sekarang klik kembali Edit HTML, kemudian letakan kode berikut sebelum kode ]]></b:skin>

#navlist ul
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#navlist li
{
display: inline;
list-style-type: none;
}
#navlist a { padding: 3px 10px; }
#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}
#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}

Setelah selesai klik Simpan Template.

6. Lihat Hasilnya, jangan lupa menghapus Elemen Label yang anda masukan di sidebar sebelumnya, karena sudah tidak berguna..;p

Jika ingin merubah tampilan navigasinya, anda gunakan saja jasa pembuatan menu list di List O-Matic. Lihat Rekomendasi untuk lebih jelasnya.