Membuat Label Menurut Kategori Dengan 1 Thumb (Images)

Assalamu Alaikum Wr.Wb.
Pada kesempatan kali ini saya akan memberikan trik blogger yaitu Cara 'Membuat Label Menurut Label / Kategori Dengan 1 Thumb (Images)'. Jika Anda belum tau cara membuat label di blog maka saya sarankan bagi Anda untuk membuatnya terlebih dahulu, karena jika blog Anda belum memiliki label maka tutorial ini tidak akan bisa Anda terapkan. Menampilkan judul artikel berdasarkan label ini sering di aplikasikan oleh para blogger dalam blognya, dengan tujuan utamanya agar pengunjung blog lebih mudah untuk melihat beberapa artikel berdasarkan label yang ada. Sedangkan manfaatnya bagi blog Anda adalah meningkatnya jumlah pageview karena banyaknya halaman yang dikunjungi dan dibaca oleh para pengunjung.

Baiklah agar dapat dimengerti dri tutorial ini, sobat bisa melihat contoh seperti gambar berikut :


Sampai disini saya harapkan Anda sudah paham dan mengerti menampilkan judul artikel berdasarkan label. Untuk cara membuatnya, ikuti dan perhatikan langkah-langkah yang akan saya jelaskan seperti berikut :

1. Log in ke blogger
2. Klik Template
3. Klik Edit HTML
4. Lalu letakkan kode CSS berikut di atas kode ]]></b:skin>

/* Label_thumb */
img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:70px;width:70px;padding:2px;box-shadow: 0 8px 6px -6px rgba(0,0,0,.7);-webkit-box-shadow: 0 8px 6px -6px rgba(0,0,0,.7);-moz-box-shadow: 0 8px 6px -6px rgba(0,0,0,.7);}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}
ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}

KET:
- Perhtikan teks yg berwarna biru (70px) diatas it adalah lebar dan tinggi gambar Tumbs (images) nya, silahkan sobat rubah sesuai keinginan.

5. Selanjutnya cari kode </head> , dan letakkan kode berikut diatasnya.

<script src='http://ut2a-4down-blogspot-com.googlecode.com/files/LabelThumb.js' type='text/javascript'/>
<script type='text/javascript'>
function recentpostslist(json) {
 document.write(&#39;&lt;ul&gt;&#39;);
 for (var i = 1; i &lt; json.feed.entry.length; i++)
 {
    for (var j = 1; j &lt; json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == &#39;alternate&#39;) {
        break;
      }
    }
var entryUrl = &quot;&#39;&quot; + json.feed.entry[i].link[j].href + &quot;&#39;&quot;;//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = &quot;&lt;li&gt;&quot; + &quot;&lt;a href=&quot;+ entryUrl + &#39;&quot; target=&quot;_blank&quot;&gt;&#39; + entryTitle + &quot;&lt;/a&gt; &lt;/li&gt;&quot;;
 document.write(item);
 }
 document.write(&#39;&lt;/ul&gt;&#39;);
 }
</script>
<script>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

6. Setelah semua langkah diatas selesai, lalu Simpan Template.

7. Dan selanjutnya dengan pemanggilan kodenya, caranya Sobat Klik Pilih Rancangan, >> Klik Tambah Gadget >> Pilih HTML/Javascript >> Lalu copy dan paste kode berikut ini kedalamnya.

<script src="http://ut2a-4down.blogspot.com/feeds/posts/summary/-/Template%20Blogger?max-results=5&alt=json-in-script&callback=recentpostslist"></script>
<a href='http://ut2a-4down.blogspot.com/search/label/Template%20Blogger' style='float:right;font:normal 11px arial;padding:5px 0;'>More on this category &#187;</a>

KET:
- Perhatikan teks yg berwarna merah silahkan ganti dengan alamat blog sobat
- Sedangkan warna hijau adalah nama label yg ingin ditampilkan, silahkan diganti.
- dan teks yg berwarna kuning, adlh jumlah perlabel yg ingin ditampilkan, silhkan dirubah sesuai keinginan masing2.okey

8. Simpan dan Lihat Hasilnya.

Jika ada yang ingin ditanyakan silahkan berkomntr di forum yg tersedia.trims

GoodLuck Semoga Bermanfaat. ;) Please rate this article: