24 October 2015

Cara Membuat Show More Categories di Blog

Show More Categories Tutorial

Cara Mudah Membuat Show More Categories di Blog - Pada tutorial kali ini sebenarnya hanya menghilangkan sebagian label atau categories pada blog agar tidak terlalu panjang ataupun agar tidak terlalu banyak. Tutorial kali ini menggunakan Show Hide pada HTML dan tidak menggunakan Javascript sedikitpun, maka dari itu tutorial membuat Show More Categories ini tidak membuat loading blog sobat menjadi lambat.

Tutorial kali ini tidak bisa langsung menambahkan kode begitu saja lalu Save. Pada tutorial ini sobat juga harus mengoptimalkan sendiri kode-kode tersebut pada template blog sobat agar pas dan rapih. Jadi fokus dan ikuti tutorial ini baik-baik.

1. Buka Blogger > Tata Letak > Tambahkan Widget > HTML/Javascript > lalu masukan kode HTML di bawah ini lalu Simpan.

<a class='show-more' id='showmore' onclick='document.getElementById(&#39;Label1&#39;).style.height=&#39;auto&#39;;document.getElementById(&#39;showmore&#39;).style.display=&#39;none&#39;;document.getElementById(&#39;hidemore&#39;).style.display=&#39;block&#39;;' href='javascript:;'>Show More Categories</a>
<a class='show-more' id='hidemore' onclick='document.getElementById(&#39;Label1&#39;).style.height=&#39;130px&#39;;document.getElementById(&#39;hidemore&#39;).style.display=&#39;none&#39;;document.getElementById(&#39;showmore&#39;).style.display=&#39;block&#39;;' href='javascript:;'>Hide More Categories</a>

Info : 130px adalah ukuran kategori yang akan menyesuaikan jumlah kategori yang akan di tampilkan. Jika sobat merubah 130px harap ubah juga 130px pada CSS.

2.  Buka Blogger > Template > Edit HTML > lalu letakan kode CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style>

/* CSS Show More Categories */
#Label1{height:130px;transition:all 1s ease-in-out;overflow:hidden}
a.show-more{width:180px;overflow:hidden;color:#fff;background:#36BD80;text-transform:uppercase;font-weight:bold;border:4px solid #ddd;padding:10px 30px;text-align:center;margin:15px;border-radius:10px;font-size:12px;transition:all .5s ease-in-out}
a.show-more:hover{border:4px solid #22AF6F;background:#fff;color:#22AF6F}
#showmore{display:block}#hidemore{display:none}

Info : #Label1 adalah Tag CSS pada kategori, mungkin tag CSS kategori pada blog sobat berbeda jadi samakan dengan cara "lihat gambar 1".

Gambar 1 - Tutorial
Gambar 1

Simpan Template.

Note : Jika tampilan show more categories masih berantakan harap lihat kembali tutorial dan sesuaikan seperti kode #Label1 dan 130px.


Semoga Tutorial ini Bemanfaat...
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic