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

<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.