Cara Biar Hidangan Laman (Pagelist) Menjadi Hidangan Dropdown

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

hal selanjutnya yang perlu kita ubah sesudah Cara Agar Menu Laman (Pagelist) menjadi Menu Dropdown

Pada tampilan seluler

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

1. Agar sajian laman sanggup kita kendalikan, kita perlu id gres untuk disusupkan ke dalam denah kerja sajian 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 contoh dari sajian 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 menyerupai 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 sajian laman dropdown gres muncul dikala blog di buka pada perangkat / gadget dengan ukuran layar 768px dan di bawahnya, jadi tampilan sajian laman pada layar di atas 768px tidak berubah (tetap inline). Anda sanggup mengatur kemunculan sajian laman dropdown dengan menaruh isyarat css di atas pada ukuran media screen sesuai cita-cita anda.

4. Simpan Template.

Selanjutnya: Cara Mengubah Tombol Next Prev Blogspot dengan Angka

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