Benua Ilmu

Benua Ilmu Adalah Tempat Mendownload Aplikasi Gratis, Aplikasi Full Version, Serta Tips-Tips Blog, Ilmu Seo dan Juga Ilmu dan Pelajaran SMA

  • Home
  • Sehat
  • Bloger
  • Info
  • Tips And Trick
  • Site Map
    • Home
    • Sehat
    • Bloger
    • Info
    • Tips And Trick
    • Site Map
Home » Tips Blog » Membuat Widget Kategori Simple Keren Di Blog

Membuat Widget Kategori Simple Keren Di Blog

By: Funday Pande On: 11:07 PM  In: Tips Blog  

Membuat Widget Kategori Simple Keren Di Blog

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
    cara menambahkan widget di blog
  • Akan keluar jendela baru, Pilih HTML/JavaScript
    menambahkan html/javasript di blog
  • Berikan Judul, Lalu Copy-Pastekan Script Di Bawah ini :


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

<p class="kepala"><a href="#">&nbsp;&nbsp;&nbsp;Blogger</a></p>

<li><a href="#"><img id="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAYW8HhEW9NdvJ252KeIK2NqEtUr4myryzJi1FJoG_3U5FppTpsDnd9lqXhddQ_SPR6_KXDAIS14hKqas89HwZp1oPDVXmGjK2o6HvY9Jkmra-zkDj4L_Xa4KrsE05zlRCYELZLtPCou0K/s1600/Template.png">&nbsp;&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;Seo Bloging</a></li>

<p class="kepala"><a href="http://www.benuailmu.com/search/label/Softwer">&nbsp;&nbsp;&nbsp;Aplikasi</a>

</p><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">&nbsp;&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;Audio Video Editor</a></li>

<p class="kepala"><a href="#">&nbsp;&nbsp;&nbsp;Pelajaran</a></p>

<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">&nbsp;&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;Matematika</a></li>

<p class="kepala" =""><a href="#"> &nbsp;&nbsp;&nbsp;Other</a></p>

<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">&nbsp;&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;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>
<p></p></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

Share On :

Facebook
Twitter
Google+
Related Post : Tips Blog
Newer Post Older Post Home

       Blogger

  •    Free Templates
  •    Tips Blogger
  •    Seo Bloging
  •    Pelajaran

  •    Bahasa Indonesia
  •    Agama Hindu
  •    Matematika
  •    Fisika
  •    Kimia
  •    Biologi
  •    Bahasa Inggris
  •    Bahasa Bali
  •    Other

  •    Tips And Trick
  •    Wisata
  •    Internet

Alexa Page Rank

Entri Populer ★ ★ ★ ★ ★

  • Rumus Integral Tak Tentu Beserta Contoh Soal dan Pembahasan
  • Contoh Dialog Bahasa Inggris Giving Suggestion
  • Cara Menghilangkan Iklan Di Google Chrome
  • Download Aplikasi CorelDraw X4 Gratis Full Cr*ck Version 14.0.0.701 Di Blog
  • Contoh Pidato Perpisahan Kelas 9 2015
  • Kisah Nyata : Menghilangkan Jerawat Dengan Garnier Light Complete
  • Entah Disengaja Atau Tidak Artis-Artis Cantik Ini Gak Pake Celana Dalam
  • About
  • Author
  • Site Map
  • Term of Service
  • Design By : Funday