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. |
| 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> ≡ </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> ≡ </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. Sekian tutorial cara mengubah tampilan sajian laman dari
type inline menjadi dropdown / checkbox pada tampilan seluler.
