Membuat Halaman Sajian Simple Keren

Membuat halaman sajian gres 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 ibarat halaman Contact, Privacy Policy, About Us, TOS dan lainnya. Halaman Menu ini juga sudah aku buat dalam aba-aba CSS dengan tampilan responsive, jadi anda tidak perlu kawatir dalam tampilan versi mobile juga. Sekarang aku akan menawarkan aba-aba yang nantinya tinggal anda ikuti cara pemasangan nya juga yang simpel dan simple, untuk yang gres saja terjun di dunia blogger.

Pertama silahkan anda msuk ke halaman Edit HTML silahkan pasang aba-aba dibawah ini di mana anda ining memasang nya, atau biasa aku memasang nya di sempurna 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 aba-aba diatas pada Template, silahkan juga pasang aba-aba CSS dibawah ini sempurna sesudah aba-aba <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 bila 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.
Sumber https://www.idsiteblog.com/

Share :