Home » Tutorial Blog » Web Design » Ganti Teks pada Labels dengan Gambar Menarik

Ganti Teks pada Labels dengan Gambar Menarik

Posted on Apr 28, 2013

label dengan gambar
Ganti Teks pada Labels dengan Gambar Menarik-Salah satu cara terbaik untuk membuat blog sobat menonjol dari yang lainnya dapat dilalukakan dengan menggunakan beberapa trik kecil di dalam desain template blog anda. Ini akan berdampak pada kualitas keunikan suatu template blog. Contohnya, pada blog demo yang akan saya sertai linknya di bawah ini, menggunakan gambar untuk labelnya. 


Gambar cenderung lebih menarik dibandingkan dengan tulisan. Kebanyakan template blog di luar sana tidak menggunakan/mengembangkan desain ini, pastinya trik yang akan saya sajikan benar-benar membuat blog-mu UNIK. Tidak lupa dan saya berharap untuk like FP Facebook yang berada di widget sebelah kiri.

labels with image blog netfori
Contoh Hasilnya

Kelemahan dari trik ini:
  • Repot karena bila ada banyak label harus memasukkan kodenya satu-persatu.
  • Dengan memakai gambar, maka proses loading blog menjadi lebih lama.
  • Diperlukan pemahaman dan ketelitian dalam menggunakan trik ini.
Langkah-Langkah Awal

 1. Pertama, kamu membutuhkan beberapa icon cantik yang akan digunakan untuk labelnya. Kamu dapat mendownloadnya lewat mana saja. Terutama lewat google image. Gambar yang direkomendasikan berbentuk bujur sangkar dengan besaran kurang dari 32 pixels. Bila melebihi dari itu, maka akan terlihat terlalu besar atau bahkan berubah bentuknya. 

 2. Upload gambarnya melalui Entri Baru di Postingan Blog dengan cara:

  • Entri Baru > Insert Image
  • Di Tab Uploud, Klik “Pilih File” > Pilih file yang akan di upload > Tunggu
  • Klik dua kali agar gambar masuk dalam postingannya > klik kanan > copy image url  
langkah-langkah awal blog netfori
Klik untuk memperbesar
 NB: Taruh image url di notepad atau tempat aman lainnya agar pada saat dibutuhkan tidak harus melakukan pengkopian url kembali
Penginstalan Triknya

1. Masuk ke “Template” > Edit HTML > CTRL + F (untuk mencari) > cari kata yang hampir sama dengan di bawah ini:
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>

2. Masukkan kode di bawah ini tepat di bawah kode “<b:loop values='data:post.labels' var='label'>” :

<b:if cond='data:label.name == "NAMA-LABELNYA"'>
<a href='http://www.NAMA-BlOG.com/search/label/NAMA-LABELNYA' rel='tag'><span style='clear: left; display:inline; margin-bottom: 1em; margin-right:5px;'><img alt='NAMA-ALTNYA' border='0' src='URL-IMAGENYA' title='JUDUL-GAMBARNYA'/></span></a>
</b:if>
NB: Teks yang berwarna merah harus diganti dengan keterangan yang sesuai. Untuk bagian “NAMA-ALTNYA” dan “URL-IMAGENYA’” tidak begitu penting, tetapi sangat berpengaruh untuk SEO score.
 3. Ulangi kode-kode di atas untuk labels yang lain, sesuai dengan labels yang ingin diganti dengan gambar.
KOde-kode Blog Netfori
Klik Untuk Memperbesar
Sekian penjelasan cara membuat labels dengan gambar di blog. Apakah kamu suka dengan tips yang unik ini? Jangan lupa untuk subscribe e-mail dan LIKE FP Facebook dengan meng-Klik tulisan “Like” di widget yang berada di sebelah kiri anda. Itu tuh kelihatan! Tunggu juga trick lainnya…


Dengan nge-like FP Facebook maka anda telah membantu saya. Terimakasih, semoga bermanfaat. Lihat juga Load Posting Otomatis dan Scroll Tidak Terbatas di Blog dan Cara Membuat Archive Blog yang Lebih Baik (Fresh Trick).



Artikel Terkait :



Bagi yang merasa artikel ini menarik, dan ingin menyebarluaskannya dimohon bagi siapa pun yang ingin mengutip diwajibkan untuk mencantumkan kode link di bawah ini. Hargailah karya cipta orang lain. Terimakasih.


Posted by Labels: ,

15 comments:

  1. hayardinApril 29, 2013 at 4:49 AM

    selamat pagi Sob,,,waaah kunjungan perdana saya nich sob,,,saya menyimak dulu yaa Sob Tutorialnya nanti dicoba dipraktekkan,,,saya minta izin sob follow blognya, kalau ada waktu kesebelah juga yaa jalan jalan dan follback....

    ReplyDelete
  2. anonymousApril 29, 2013 at 2:45 PM

    wah..bagus ini sob..aku coba ya...

    saran :
    sebaiknya blog ini ketika dibuka nggak lama loadingnya..

    ReplyDelete
  3. rahmatApril 29, 2013 at 7:35 PM

    @Hayardin Putra= oke boss siap. Bagi siapapun yang ingin saling mem-follow dipersilahkan dengan senang hati. :)

    @Fairus

    ReplyDelete
  4. rahmatApril 29, 2013 at 7:39 PM

    @Fairus= bener banget tapi masih bingung cara untuk cepetin nya. Oke insyaallah akan saya usahakan.

    ReplyDelete
  5. AnonymousApril 29, 2013 at 9:35 PM

    keren sobat ... :D

    ReplyDelete
  6. UnknownApril 30, 2013 at 5:15 AM

    Bagus juga :)

    ReplyDelete
  7. hujan lagiApril 30, 2013 at 4:12 PM

    nice ilmu.y bang..thx share.y ..wajib d coba nih

    komen back yeee

    ReplyDelete
  8. HermanbagusApril 30, 2013 at 6:31 PM

    wah jadi lebih keren

    ReplyDelete
  9. Planet PengetahuanMay 1, 2013 at 9:49 AM

    simpan dan borkmark this page.. :)

    ReplyDelete
  10. AnonymousMay 1, 2013 at 8:58 PM

    Boleh juga eksperimen nya bro! Tapi saya akui ini trick nya memang cukup merepotkan apalagi kalau yang punya label lebih dari 10 bahkan lebih. Dan belum lagi untuk me-load gambarnya pun (walau ukurannya kecil), lebih agak berat drpd hanya me-load tulisan biasa. :)

    ReplyDelete
  11. rahmatMay 2, 2013 at 2:28 PM

    @topspot-official= meang benar bro... seperti yang sudah saya jelaskan di atas, pasti akan repot. Terimakasih masukannnya.

    ReplyDelete
  12. Achmed Islamic HernawanMay 5, 2013 at 6:21 AM

    ooh, ternyata bisa ea dikasih gambar?
    boleh jg nih buat dicoba,,

    ReplyDelete
  13. HanifMay 5, 2013 at 12:50 PM

    bagus tuh saya baru tau kalo bisa, tapi kalo labelnya kayak di blog saya gak ada yang cocok gambarnya :)

    ReplyDelete
  14. Hack4rtMay 5, 2013 at 4:27 PM

    Makasih gan atas tutorialnya :)

    ReplyDelete
  15. prismaMay 8, 2013 at 7:16 AM

    wah menarik nih sob tutorialnya..

    ReplyDelete