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

How to change Pages widget (Pagelist) into a responsive dropdown sajian on the mobile display - Another impact after making default Blogger template being responsive is the sajian display Pagelist be stacked and irregular, especially on mobile screens. Sure it looks unattractive. To make it look neat and attractive, we need to change the display of Pagelist sajian being Dropdown menu, specifically for mobile display. So, Dropdown sajian appears only on mobile, for desktop unchanged. The result you can see in the picture below.

please follow the tutorial how to create a Pagelist sajian (Pages widget) to become dropdown sajian on mobile display.

1. So that we can control the sajian Pagelist, we need a new id to be inserted into the working scheme Pagelist menu. Please sign in to edit HTML template and locate the code below (or similar).

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

Open, until you can see the pattern of Pagelist menu. Then copy the code below and paste it just above the code <ul>.

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

Then plug the closing </div> just below </ul>.
The tamat result will look like the following pattern.

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