Tips Tutorial How To Change Pages Widget (Pagelist) Into A Responsive Dropdown Menu

<b:widget id='PageList1' locked='false' title='Pages' 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 the css code below and paste it just above the code ]]></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 the css code below and paste it right under @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; }

In this tutorial, dropdown menu, appears when the blog was opened on devices with screen sizes 768px and underneath. You can adjust the appearance of the sajian Dropdown, to put css code above in size @media screen according to your wishes.

4. Save Template.

Next: How to change Blogspot Next page with numbers

That's tutorials how to change the sajian view Pagelist of inline type into dropdown / checkbox on a mobile display.