Cara Agar Menu Laman (Pagelist) menjadi Menu Dropdown

Selain tampilan halaman utama, hal selanjutnya yang perlu kita ubah setelah membuat responsive template standar bawaan Blogger adalah tampilan menu laman (pagelist) khususnya pada tampilan seluler.

Pada tampilan seluler

Mengapa? Coba anda bayangkan, jika blog anda memiliki 10 laman pada Menu Laman, maka pada tampilan seluler akan terlihat seperti pasangan bata yang belum diplester. Untuk mempercatik tampilan menunya, silahkan ikuti tutorial cara membuat menu laman agar menjadi menu dropdown pada tampilan seluler.

1. Agar menu laman dapat kita kendalikan, kita perlu id baru untuk disusupkan ke dalam skema kerja menu laman. Silahkan masuk ke edit HTML template dan cari kode berikut ini.

<b:widget id='PageList1' locked='false' title='Laman' type='PageList' version='1' visible='true'>⋯</b:widget>

Buka dan buka lagi sampai terlihat pola dari menu laman. Kemudian copy kode dibawah ini, lalu pastekan tepat di atas kode <ul>.

<div id='laman'>
<input type='checkbox'/>
<label>
&#8801;
</label>

Setelah itu pasang penutup </div> tepat di bawah </ul>.
Hasil akhir akan terlihat seperti skema di bawah ini.

<b:widget id='PageList1' locked='false' title='Laman' type='PageList' version='1' visible='true'>
  <b:includable id='main'>
.......
.......
    <div id='laman'>
        <input type='checkbox'/>
        <label>
            &#8801;
        </label>
        <ul>
.......
.......
        </ul>
    </div>
........
........
  </b:includable>
</b:widget>

2. Copy kode css di bawah, lalu pastekan tepat di atas ]]></b:skin>

/*Menu laman*/
#laman {
background: transparent;
position:relative;
}
#laman input {
display: none;
margin:0 0;
padding:0 0;
width: 40px;
height: 40px;
opacity: 0;
cursor: pointer;
}
#laman label {
font: bold 45px Arial;
display: none;
width: 45px;
height: 41px;
line-height: 41px;
text-align: center;
}
#laman ul,
#laman li {
width: auto;
margin: 0;
padding: 0;
list-style: none;
z-index: 100;
}
#laman li {
position: relative;
display: inline;
}

3. Copy kode css di bawah, lalu pastekan tepat di bawah @media screen and (max-width: 768px) {

#laman {
border: 3px solid #000000;
height: 40px;
}
#laman ul {
display: none;
top: 100%;
right: 0;
left: 0;
height: auto;
position: absolute;
}
#laman ul.menus {
width: 100%;
position: static;
border: none;
}
#laman li {
display: block;
float: none;
text-align: left;
}
#laman a {
display: block;
line-height: 40px;
padding:0 14px;
text-decoration: none;
color: #000000;
}
#laman li a {
border-bottom: 1px solid rgba(0, 0, 0, .1);
background: #eeeeee;
}
#laman input,
#laman label {
color: #000000;
display: block;
position: absolute;
right: 0;
}
#laman input {
z-index: 4;
}
#laman input:checked + label {
color: #000000;
}
#laman input:checked ~ ul {
display: block;
}

Pada tutorial ini menu laman dropdown baru muncul ketika blog di buka pada perangkat / gadget dengan ukuran layar 768px dan di bawahnya, jadi tampilan menu laman pada layar di atas 768px tidak berubah (tetap inline). Anda bisa mengatur kemunculan menu laman dropdown dengan menaruh kode css di atas pada ukuran media screen sesuai keinginan anda.

4. Simpan Template.

Selanjutnya: Cara Mengubah Tombol Next Prev Blogspot dengan Angka

Sekian tutorial cara mengubah tampilan menu laman dari type inline menjadi dropdown / checkbox pada tampilan seluler.