12/18/16

Menambahkan Dropdown Menu Pada Widget PageList Default Blogger atau Blogspot

Memang para blogger termasuk saya sendiri mengacuhkan Widget PageList  atau Widget Laman bawaan dari blog blogger, karena kekurangannya yang tidak bisa di tambahkan Dropdown Menu. Saya  pernah mencari tutorial kesana kemari untuk membuat Widget PageList default blogger ini untuk bisa di tambahkan Dropdown Menu, tapi sayangnya saya tidak menemukannya.

Dari situlah iseng-iseng saya mengobrak - abrik template default blogger, dan akhirnya saya bisa menemukan cara menamabahkan Dropdown Menu pada widget PageList atau widget Laman default blogger.

Meskipun Widget PageList Dropdown menu ini masih ada kekurangannya yaitu tidak bisa di tampilkan pada handphone atau menu mobile. Karena ada variabel khusus untuk bisa menampilkannya. Mungkin saya akan mencoba memperbaikinya atau Anda yang hobi otak-ataik template blogger mau mencoba menjadikan tampilannya responsive silahkan.

Baca juga : cara membuat tabel responsive di blogger dengan kode HTML 

Baiklah tanpa basa-basa lagi mari kita simak tutorialnya di bawah ini :

1. Pertama pastinya Anda login dulu ke akun blogger atau blogspot Anda.
2. Backup terlebih dahulu template Anda sebelum memeulai pengeditan.
3. Pastikan Anda telah menambahkan Widget PageList atau Widget Laman.
4. Setelah menambahkan widget tersebut selanjutnya Anda masuk kebagian Edit HTML kemudian cari kode CSS Seperti dibawah ini yang terletak didalam tag  ]]></b:skin>. Gunakan (Ctr+F) untuk memudahkan pencarian.

/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
  border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}
.tabs-inner .section:first-child ul {
  margin-top: -$(header.border.size);
  border-top: $(header.border.size) solid $(tabs.border.color);
  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}
.tabs-inner .widget ul {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);

  margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);
}
.tabs-inner .widget li a {
  display: inline-block;

  padding: .6em 1em;

  font: $(tabs.font);
  color: $(tabs.text.color);

  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}
.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: $(tabs.selected.text.color);
  background-color: $(tabs.selected.background.color);
  text-decoration: none;
}

5. Jika Anda telah menemukan kode CSS diatas, selanjutnya Anda hapus kode tersebut dan ganti dengan kode CSS di bawah ini.

/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child ul {
margin-top: -0;
}
.tabs-inner .widget ul {
text-align:center;
background: $(tabs.background.color);
_background-image: none;
margin-top: $(tabs.margin.top);
margin-left: -$(tabs.margin.side);
margin-right: -$(tabs.margin.side);
}
.tabs-inner .widget li a, .tabs-inner .widget li {
display: inline-block;
cursor: pointer;
padding: .6em 1.3em .6em;
font: $(tabs.font);
letter-spacing:2px;
text-transform:uppercase;
color:  $(tabs.text.color);
}
.tabs-inner .widget li:first-child a {
border-left: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: $(tabs.selected.text.color);
background-color: $(tabs.selected.background.color);
text-decoration: none;
}
.tabs-inner .widget li ul li {
display:none !important;
}
.tabs-inner .widget li:hover ul li {
display:block !important;
}
.tabs-inner .widget li ul {
z-index:9999 !important;
padding: 0;
float:right;
position: absolute;
top: 35px;
right:10%;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
transition: max-height 0.3s ease-in;
background-repeat: no-repeat;
background-position: top left;
padding-top:10px;
}
.tabs-inner .widget li ul li {
width:180px;
padding:10px;
font: $(tabs.font);
text-align:left;
border-top:2px solid #fff;
text-transform:uppercase !important;
cursor: pointer;
background:  $(tabs.background.color);
text-shadow:0px 0px transparent !important;
opacity:1.0 !important;
}
.tabs-inner .widget li ul li:hover {
background-color:$(tabs.selected.background.color);
color:$(tabs.selected.text.color);
transition: all 0.5s ease;
}
.tabs-inner .widget li ul li a:hover {
color:$(tabs.selected.text.color);
transition: all 0.5s ease;
}
.PageList {
text-align:center !important;
}
.PageList li {
display:inline !important;
float:none !important;
}

6. Cari Widget Laman atau Widget PageList yang Anda tambahkan tadi, pada bagian edit HTML, untuk lebih mudah mencarinya cari PageList1. Setelah Anda menemukannya buka widget tersebut dan copy paste kode HTML di bawah ini dan masukan tepat di antara  </b:loop>  dan </ul>.

<!-- Dropdown menu star -->

<li>Dropdown Menu &#9660;

    <ul>

     <li><a href='/p/about-us.html'>Full Width Page</a></li>

     <li><a href='/p/blog-page.html'>Full Width Page</a></li>

     <li><a href='/p/contact-us.html'>Contact Form</a></li>

     <li><a href='/p/sitemap.html'>Sitemap</a></li>

   </ul>

</li><!-- Dropdown menu End -->

Untuk lebih jelas pemasangan kode di atas lihat pada screenshot gambar dibawah.

Menambahkan Dropdown Menu Pada Widget PageList Blogspot

7. Terakhir klik Simpan / Save.
1. Kode warna merah di atas ganti dengan link url halaman yang ingin anda tampilkan.
2. Kode warna biru di atas silahkan ganti dengan keterangan link url tersebut.
3. Untuk merubah warna atau mengatur hurup pada Widget Laman atau Widget Pagelist tersebut gunakan penyesuaian pada default blogger, karena saya telah menyesuaikan variabelnya.
Maka tampilan akhirnya akan seperti ini :



Jika tampilannya kurang memuaskan silahkan Anda kreasikan sendiri.

Mungkin hanya itu yang bisa saya berikan pada postingan kali ini, semoga postingan ini bermanfaat.
Jika Anda mengalami kesulitan jangan sungkan untuk meninggalkan komentar di bawah.

You might also enjoy reading

Subscribe

Daftarkan email Anda untuk mendapatkan Artikel terbaru pilihan dari Andito Blog

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Silahkan berkomentar sesuai dengan topik.