Skip to main content

Cara Membuat Icon pada Label Blog


Lagi asyik-asyik'a browsing ke blog orang, pas lagi baca2 komentar perhatian saya tertuju pada komentar yang menanyakan "bagaimana cara membuat mini icon di setiap label blog?" langsung deh kepikiran untuk posting tulisan ini. siapa tau bermanfaat kan untuk kawan2 semua.

Nah, sebelum memulainya. Anda harus mempunyai sebuah link iconnya dulu.
sebagai contoh ini ada sebuah icon yang sudah saya upload. alamatnya adalah,
http://i965.photobucket.com/albums/ae136/boujan/folder.png

nah, sekarang agar gambarnya tampil. Anda mesti menambahkan kode lagi. jadinya seperti di bawah ini:
<img src="http://i965.photobucket.com/albums/ae136/boujan/folder.png"/>

dari kode di atas, maka gambarnya akan terlihat seperti ini:


Sekarang langkah-langkah memasukkannya icon di Label atau Kategori bisa Anda lihat di bawah ini:
1. Login ke Blog
2. Klik Rancangan
3. klik menu Edit HTML
4. berikan centang pada Expand Template Widget
5. cari kode ]]></b:skin> setelah ketemu, pastekan kode di bawah ini tepat di atas kode ]]></b:skin> tadi.

/*ICON LABEL----------------------*/
#Label1 ul, #Label2 ul{
list-style:none;
margin:0 0 0;
padding:0 0 8px;
}
#Label1 li, #Label2 li{
background:url(http://i965.photobucket.com/albums/ae136/boujan/folder.png) no-repeat;
padding-top:0;
padding-right:0;
padding-bottom:3px;
padding-left:20px;
margin-bottom:3px;
border-bottom:1px dotted #063E3F;
line-height: 1.2em;
}

tulisan yang tercetak merah di atas adalah URL gambar tadi. terserah Anda mau ganti dengan gambar Anda sendiri.

kalau sudah silakan di SAVE dan lihat hasilnya di blog Anda.
jika trik kali ini berhasil, pasti blog Anda akan terlihat lebih Cool seperti orang yg punya mungkin :P
hehehe...

Sekian dulu yaa untuk postingan kali ini.
semoga tutorial yang singkat ini dapat membantu Anda dalam mengutak-atik blog.
Semoga bermanfaat....

Comments

  1. thanks Harum,
    smoga ilmu'a bermanfaat....

    ReplyDelete
  2. baru tau aku gan...padahal dah sekian lama nyarinya. thanks gan semoga mjd amal agan. lagi newbie ni gan.

    ReplyDelete
  3. Terima kasih atas infonya mas :)
    bermmanfaat banget nih :)

    ReplyDelete
  4. info bagus bro dan juga artikel yg sangat membantu aku nie, dan salam kenal dari mico negeri seberang malaysia

    ReplyDelete
  5. visit back gan http://ahmedtnj.blogspot.com/

    ReplyDelete
  6. kalo' milih icon yg lain caranya gmna?

    ReplyDelete
  7. wah.. tnks.. kebetulan saya cari-cari cara ini.. ketemu disini.. hee

    visit juga
    http://igamingliveforgame.blogspot.com/

    ReplyDelete
  8. Thanks a lot dear... Really useful..

    Follow me:
    http://liszvitamin.blogspot.com

    ReplyDelete
  9. ilmunya bermanfaat gan, mksh...

    ReplyDelete
  10. saya coba gan
    mampir juga di blog ane
    https://imenrepairing.blogspot.com

    ReplyDelete

Post a Comment

*jika Anda belum terdaftar di KoFa Style Blog, harap memilih profil Nama/URL sebelum memposting komentar.

Popular posts from this blog

Konsep dan Hirarki DNS

DNS adalah suatu bentuk database yang terdistribusi, dimana pengelolaan secara lokal terhadap suatu data akan segera diteruskan ke seluruh jaringan (internet) dengan menggunakan skema client-server. Suatu program yang dinamakan name server, mengandung semua segmen informasi dari database dan juga merupakan resolver bagi client-client yang berhubungan ataupun menggunakannya. Struktur dari database DNS bisa diibaratkan dengan dengan struktur file dari sebuah sistem operasi UNIX. Seluruh database digambarkan sebagai sebuah struktur terbalik dari sebuah pohon (tree) dimana pada puncaknya disebut dengan root node. Pada setiap node dalam tree tersebut mempunyai keterangan (label) misalnya, .org, .com, .edu, .net, .id dan lain-lainnya, sampel penggunaan pada  www.aceh-id.com yang relatif rerhadap puncaknya (parent).Ini bisa diibaratkan dengan relative pathname pada sistem file UNIX,seperti direktori bin, usr, var, etc dan lain sebagainya. Pada puncak root node dalam sebuah sistem DNS di

Cara Install Puppy Linux di USB

Hi All!!! Malam ini ada lattop mau di install ulang... Tapi sayangnya banyak data yang tersimpan di c:\ termasuk beberapa data proyek kecil - kecilan yang minggu depan mesti diserahkan sama vendor... huffff... pusing deh. Tapi saat menulis tulisan ini semua hampir teratasi. Ya!!! Puppy linux solusinya. Jadi biar lebih mermamfaat mending di tulis aja di blog kofa-style biar kalau Ada yang mampir seperti yang sedang membaca ini bisa dapat bantuan kalau tidak banyak ya barang sedikit saja. Oke kita mulai saja... Mengapa Puppy? jawabnya karena mudah dan ringan untuk keperluan system operasi bootable sekedar buat back up data dan memperbaiki error partisi pada windows XP.

Navigasi Halaman Blog dengan Javascript

Page Navigation atau Navigasi Halaman berfungsi untuk mempermudah para pengunjung untuk menjelajahi blog kita dengan melihat halaman per halaman. Bagi pengguna Wordpress, tentunya sudah tidak asing lagi dengan Page Navigasi seperti yang Anda lihat pada gambar disamping, karena biasanya template-template wordpress sudah menyediakan fasilitas ini. Bagi pengguna Blogspot, harus menambahkan sintak JavaScript dibawah ini. berikut cara-caranya: Login ke Blog Anda pilih Rancangan kemudian klik tab Edit HTML masukkan kode dibawah ini sebelum kode ]]></b:skin> .showpageNum a { color:#FFF;padding:4px 10px; margin:0 2px; text-decoration:none; -webkit-border-radius:2px;- moz-border-radius:2px; background:#848484 } .showpageOf { color:#222; margin:0 6px 0 0 } .showpageNum a:hover { background:#222; color:#FFF } .showpagePoint { color:#FFF; text-shadow:0 1px 2px #333; padding:4px 10px; margin:0 2px; -webkit-border-radius:2px; -moz-border-radius:2px; background:#222; text-de