Tips Tutorial Cara Semoga Hidangan Laman (Pagelist) Menjadi Hidangan Dropdown

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

Pada tampilan seluler

Mengapa? Coba anda bayangkan, jikalau blog anda mempunyai 10 laman pada Menu Laman, maka pada tampilan seluler akan terlihat ibarat pasangan bata yang belum diplester. Untuk mempercatik tampilan menunya, silahkan ikuti tutorial cara menciptakan hidangan laman semoga menjadi hidangan dropdown pada tampilan seluler.

1. Agar hidangan laman sanggup kita kendalikan, kita perlu id gres untuk disusupkan ke dalam denah kerja hidangan laman. Silahkan masuk ke edit HTML template dan cari isyarat berikut ini.

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

Buka dan buka lagi hingga terlihat teladan dari hidangan laman. Kemudian copy isyarat dibawah ini, kemudian pastekan sempurna di atas isyarat <ul>.

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

Setelah itu pasang epilog </div> sempurna di bawah </ul>.
Hasil selesai akan terlihat ibarat denah 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 isyarat css di bawah, kemudian pastekan sempurna 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 isyarat css di bawah, kemudian pastekan sempurna 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 hidangan laman dropdown gres muncul saat blog di buka pada perangkat / gadget dengan ukuran layar 768px dan di bawahnya, jadi tampilan hidangan laman pada layar di atas 768px tidak berubah (tetap inline). Anda sanggup mengatur kemunculan hidangan laman dropdown dengan menaruh isyarat css di atas pada ukuran media screen sesuai impian anda.

4. Simpan Template.

Selanjutnya: Cara Mengubah Tombol Next Prev Blogspot dengan Angka

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