Membuat Widget Kategori Simple Keren Di Blog

Membuat Widget Kategori Simple Keren Di Blog - Menghias blog merupakan pekerjaan yang sangat menarik, Ada suatu kebanggan tersendiri dikala blog kita tampil cantik atau profesional. Tak lepas dari hal tersebut, ternyata menghias blog dapat memakan waktu loading blog yang cukup lama. Apalagi ditambah script dari widget yang menggunakan javascript akan menambah lambat kecepatan loading blog anda, dan itu akan berdampak pada bosannya pengunjung kita menunggu loading blog yang lama. (Baca disini cara memperbanyak pengunjung di blog)

Agar blog kita menjadi lebih cepat, kita perlu menghindari penggunaan javasript terlalu banyak. Menggunakan script yang ringan adalah solusinya. Contoh dari script yang ringan dan tidak memakan banyak waktu saat loading di blog adalah HTML dan CSS.

Seperti pada widget yang saya share disini yakni Widget Kategori Yang Elegan dan tampak profesional, tetapi tidak memakan loading blog kita karena hanya menggunakan sript Css dan HTML. Meskipun terlihat cukup panjang, namun dijamin tidak akan membuat loading blog anda melambat.

Cara Memasang Widget Kategori Elegan

Login di akun blog anda
Pilih menu Template >> Edit HTML
Cari kode ]]></b:skin> dengan menggunakan shortcut Ctrl+F untuk mempercepat pencarian
Copy-Pastekan Kode dibawah ini Tepat diatas Kode ]]></b:skin> tersebut :

img#icon {

float: left;

}

.textwidget {

position: relative;

line-height: 18px;

}

.sidebar-widget {

background: #fff;

position: relative;

margin: 0 0 20px;

word-break: normal;

word-wrap: break-word;

overflow: hidden;

}

.sidebar-widget li {

padding: 10px 0 10px;

font-size: 100%;

line-height: 16px;

list-style: none;

overflow: hidden;

border-bottom: 1px solid #E4E4E4;

}

.sidebar-widget ul {

position: relative;

margin: -10px 0 0;

}

.kepala {

border:2px solid #E4E4E4;

font-weight:bold;

position:relative;

border-radius: 10px 10px 10px 10px;

a align:center;

padding: 10px 40px 10px;

}

Setelah itu SIMPAN template.

Kembali ke menu awal, Klik Tata Letak >> Tambahkan Gadget

Akan keluar jendela baru, Pilih HTML/JavaScript

Berikan Judul, Lalu Copy-Pastekan Script Di Bawah ini :

<div id="text-3" class="sidebar-widget widget_text">

<div class="textwidget"><ul>

<ul>

<a href="#">   Blogger</a>

<li><a href="#"><img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAYW8HhEW9NdvJ252KeIK2NqEtUr4myryzJi1FJoG_3U5FppTpsDnd9lqXhddQ_SPR6_KXDAIS14hKqas89HwZp1oPDVXmGjK2o6HvY9Jkmra-zkDj4L_Xa4KrsE05zlRCYELZLtPCou0K/s1600/Template.png">   Free Templates</a></li>

<li><a href="http://www.benuailmu.com/search/label/blogger"><img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAYW8HhEW9NdvJ252KeIK2NqEtUr4myryzJi1FJoG_3U5FppTpsDnd9lqXhddQ_SPR6_KXDAIS14hKqas89HwZp1oPDVXmGjK2o6HvY9Jkmra-zkDj4L_Xa4KrsE05zlRCYELZLtPCou0K/s1600/Template.png">   Tips Blogger</a></li>

<li><a href="http://www.benuailmu.com/search/label/belajar%20SEO"><img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3LOOkbY5XkeuiGiVXEfsJDTxX-l6LvcF0ceTgdWrSDXa7Zh-fDt9YeA4NZb7-arF8SLeK0R9ehnvuOkYI06YhCFIikkd4tqtz6LVltN20YyjyVuLyIH8pK52HIOxTdnvP39-usQlcSuXY/s1600/Seo.png">   Seo Bloging</a></li>

<a href="http://www.benuailmu.com/search/label/Softwer">   Aplikasi</a>

<li><a href="http://www.benuailmu.com/search/label/Android"><img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkyQ9kNbLLN8dae-bf1PtGunapD_iajSkbr5Hst6IppKPwKv2rYFHlZdlUhs90l1wd1FG0uAcikeyvJ9nlEw8GXRJjEu_5_SDF8QW2kaL1wSYiIt8PVJZ123NuDZXwlMy8Y5WSJv2T59xy/s1600/Android.png">   Android</a></li>

<li><a href="http://www.benuailmu.com/search/label/Antivirus"><img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFlF7Ri1SIvbkJRazpobQftVj2npLWzAzdt0RNkxsDy7BYNipyHTVQu4wnqAucoFE6eiQVtlfm4t0yPR2FE3T-vOY8F2TjgqfU9Fbguy2ANCdnSCV4xPG8pw2kpC08xbxyNNqWzgffir1R/s1600/Anti+Virus.png">   Antivirus</a></li>

<li><a href="http://www.benuailmu.com/search/label/AudioEditor"><img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGxeQWiuwAdEvZIIB40gtWWF2Vf1STdh3k3gvU-csfRNfPeqtEjKIaZuWTiaK9GIEH2MWJCEb3vKTdP35QFwkemPEHAC4buQK31s2w4mMhm_USrIatFcJum3e-iFFWHkMrqmKkRB4_QuM3/s1600/Audio+COnverter.png">   Audio Video Editor</a></li>

<a href="#">   Pelajaran</a>

<li><a href="http://www.benuailmu.com/search/label/B.%20Indonesia"><img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicIzYFoB405Ge3MToX1Y77Zt32wyocvbbBHezhR3_yh5RiiM7O8X0h6kl7cU3-3KXT3ROG4sQp2w5TUu0uo7AiqF8znYQoFGovrCy_vjynweEeTq6ISJz2LFRqEbA9Yh-s21nn_uakZGD4/s1600/bendera.png">   Bahasa Indonesia</a></li>

<li><a href="http://www.benuailmu.com/search/label/Ilmu%20Agama%20Hindu"><img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2NwS5OQN77xAoX4ggLPMcC_OqGFqGLXmukYbJ1iFnyGNpabns0thmJFIGFT4xTIPvww_fG-ayjnNvrI4iW8HHjgo08q26dHcqezaJHd3kzPnTehI7MLNtUfb1NLULsNYSqYGCJQWocshK/s1600/hindu.png">   Agama Hindu</a></li>

<li><a href="http://www.benuailmu.com/search/label/Matematika"><img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXVJ239jCsp4Ccjd-VK69HW0ghQhdCqxpXnqwrvRlpIF_5pq1pkY3qcf3INkzgqquGrfb-uSTDSpjxoZfKIrAIOfHtdY39QmXhm5dyVS3wHN9uU3MS46QsHzbOElnCwimsvrvXbQWDLjvL/s1600/matematika.png">   Matematika</a></li>

<a href="#">    Other</a>

<li><a href="http://www.benuailmu.com/search/label/Tips%20dan%20Tick"><img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtq20WnBTe5bPyHY3pIxLHwkBd4O-fL35dpLLzM-x9Fen06Vfn12zJL2YZFMJCITtY7i-DnsbOroPl8gfC03FYKfUsyP33SwgR7zeCdkIAbSeobOHoOlPwys7lVa8Vp4qAFdw4dbSp74p2/s1600/Tis.png">   Tips And Trick</a></li>

<li><a href="http://www.benuailmu.com/search/label/wisata"><img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV5tGCUvi3i-t-O7W9jyFe_F5CqP_YMywIWgSG7Z_Yc78SIR0V1WF4lD8_YkNYGgiHcVS6zlJ2Ml34cDLDkd-gNFavqO_cLAN0B3_lOdOZU8_wHsQmoAOx6ugUs-L9QwzuowqhgMMD0lyf/s1600/wisata.png">   Wisata</a></li>

<li><a href="http://www.benuailmu.com/search/label/ilmu%20internet"><img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0F7uRqWzZNXiBPwnhdYrJxA54XEtJfOmQTi53wirGi2t9lmRjDcetG8iRTQ-_f69eI1eAfLxbGrgzj9l658mlHyH7r-eQZpM3GFB2n3UUhU2C1t271y1XeIwPBFj7dkK-RL2GN81cME5N/s1600/interent.png">   Internet</a></li>

<a href="http://www.benuailmu.com/2014/08/membuat-widget-kategori-simple-keren-di.html" style="font-family: arial; size: 5px; text-align: right;"> Get This Widget </a>
</ul>

Kemudian Klik SIMPAN,

*cat :

- Untuk Link diatas ( Tulisan Berstabilo Kuning ), Ganti menggunakan Laman Link Anda Sendiri.

- Dan untuk gambar, Anda bisa ganti dengan gambar berukuran 20x20 px. Upload gambar anda, Lalu copy URLnya. Kemudian ganti pada URL gambar Script diatas dengan URL gambar anda.

- Jika anda ingin menambah menu lain, Copykan saja script diatas mulai dari <li>..........sampai.............</li> sudah saya pisahkan dalam sebuah jarak enter

Demo Widget Kategori

Untuk demonya sendiri, anda bisa langsusng lihat di bilah kiri blog saya ini. Keren Bukan??? Simple dan tidak berat pula.

Terimakasih telah berkunjung di artikel saya tentang Membuat Widget Kategori Simple Keren Di Blog Apabila ada yang ingin kalian tanyakan, bisa langsung bertanya via komenter dibawah ini. Terimakasih

Facebook

Twitter

Google+