Membuat Halaman Menu Simple Keren

Membuat Halaman Menu Simple Keren
Membuat halaman menu baru simple keren. Jika anda seorang blogger yang baik pastinya ingin blog kalian juga terlihat baik juga keren dimata pengunjung maupun dimata google untuk mempengaruhi seo blog dalam menambahkan halaman Widget yang nantinya berfungsi menyimpan link yang penting seperti halaman Contact, Privacy Policy, About Us, TOS dan lainnya. Halaman Menu ini juga sudah saya buat dalam kode CSS dengan tampilan responsive, jadi anda tidak perlu kawatir dalam tampilan versi mobile juga. Sekarang saya akan memberikan kode yang nantinya tinggal anda ikuti cara pemasangan nya juga yang gampang dan simple, untuk yang baru saja terjun di dunia blogger.

Pertama silahkan anda msuk ke halaman Edit HTML silahkan pasang kode dibawah ini di mana anda ining memasang nya, atau biasa saya memasang nya di tepat dibawah kode </b:section>

<b:section class='page' id='page' maxwidgets='1' showaddelement='no'>
  <b:widget id='PageList1' locked='true' title='Laman' type='PageList' version='1'>
    <b:widget-settings>
      <b:widget-setting name='pageListJson'><![CDATA[{'home': {'href': 'https://www.cariloker.org/', 'title': 'News', 'position': 0}, 'link0': {'href': 'https://www.cariloker.org/p/contact-cari.html', 'title': 'Contact', 'position': 1}, 'link1': {'href': 'https://www.google.com/webmasters/tools/submit-url?pli\x3d1', 'title': 'Webmaster', 'position': 2}, 'link2': {'href': 'https://www.cariloker.org/p/info-tentang-kami_29.html', 'title': 'About Us', 'position': 3}, 'link3': {'href': 'https://www.cariloker.org/p/privacy-policy-for-cari-loker-if-you.html', 'title': 'Privacy Policy', 'position': 4}}]]></b:widget-setting>
      <b:widget-setting name='homeTitle'>News</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href' expr:title='data:link.title'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href' expr:title='data:link.title'><data:link.title/></a></li>
</b:if>
</b:loop>
</ul>
</div>
</b:includable>
  </b:widget>
</b:section>
<div class='clear'/>

Setelah anda memasangkan kode diatas pada Template, silahkan juga pasang kode CSS dibawah ini tepat setelah kode <style type='text/css'>.

/* Halaman Menu */
.PageList ul{border:1px solid #efefef;box-shadow:0 6px 12px rgba(0,0,0,.3);margin:0 0 10px;padding:0;list-style:none;text-align:center;font-size:0}
.PageList ul li{display:inline-block;margin:0;padding:5px 8px;}
.PageList ul li a{font-size:14px;font-weight:400;color:#333;}
.PageList ul li a:hover{color:#87CEEB}
.PageList ul li.selected{background:#5F9EA0;border-radius:3px}
.PageList ul li.selected a{color:#fff;}

Oke jika anda sudah memasang kode Halaman Menu Simple Keren diatas ini, silahkan Save dan liahat hasilnya.

Tampilan Menu (DEMO)

Jika kurang pahan silahakan tinggalkan pertanyaan di kotak komentar yang sudah disediakan dibawah. Terimakasih.
Advertisement
Membuat Halaman Menu Simple Keren