Cara Menampilkan Katagori Dengan Gambar

Pada kesempatan kali ini Sundaboy akan mencoba share bagaimana Cara Menampilkan Katagori Dengan Gambar, Katagori Dengan Gambar merupakan salah satu solusi untuk memikat pengunjung untuk mengunjungi Postingan pada Blog, Karena biasanya pengunjung akan tertarik melihat Gambar sebelum Judul pada Postingan, Apalagi Gambar yang ditampilkan membuat pengunjung penasaran untuk membuka apa isi postingan dengan Gambar tersebut. Tapi jangan menampilkan Gambar fornografi ya, karena itu tidak baik, hehe

Nah Gambar yang menarik biasanya ditempatkan pada Katagori Dewasa, Katagori Berita, dan yang bersifat visual lainnya. Nah sekarang kalau sahabat mempunyai Katagori yang terdapat Gambar yang dapat menarik perhatian pengunjung, maka Menampilkan Katagori Dengan Gambar pada halaman home akan cukup membantu meningkatkan traffik pengunjung blog milik sahabat. Gambar pada Widget ini hanya akan menampilkan satu katagori saja, tetapi kalau sahabat ingin membuat menjadi dua katagori sebaiknya tempatkan satu diatas postingan dan satu dibawah postingan. Menampilkan Katagori Dengan Gambar ini akan berfungsi dengan baik apabila disetiap postingan pada katagori tersebut terdapat minimal satu Gambar, tetapi kalau tidak ada Gambar pada halaman posting, maka Gambar tidak akan muncul dan hanya title saja yang muncul itupun ketika mouse berada pada area Gambar. untuk contohnya sahabat bisa melihat Katagori Dengan Gambar dibawah ini, atau sahabat juga bisa melihat Katagori Dengan gambar pada halaman home .

Baiklah kalau sahabat tertarik untuk membuat Cara Menampilkan Katagori Dengan Gambar berikut langkah langkah yang harus sahabat lakukan :

1. Login ke akun Blogger

2. Pilih Tata Letak

4. Tambahkan Widget baru "Add Gadget"

5. Pilih HTML/Javasript

6. Copy kode dibawah ini dan pastekan kedalamnya :

<style>

    /*Katagori Gambar*/

    img.label_gambar{

    float:left;

    padding:5px;

    width:100px;

    height:100px;

    margin-right:1px;

    margin-bottom:1px;

    }

</style>

    <script type='text/javascript'>

    //<![CDATA[

    function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}

    if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}

    var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)

    {s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}

    else thumburl='';}

    document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_gambar" src="'+thumburl+'"/></a>');

    if(i!=(numposts-1))

    document.write('');}

    document.write('</div>');}

    //]]>

    </script>

    <script type='text/javascript'>var numposts =7;</script>

    <script type="text/javascript" src="/feeds/posts/default/-/Blogger?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

7. Ganti lebar dan tinggi gambar width:100px; height:100px;sesuai selera sahabat, Ganti angka 7 dengan jumlah gambar yang akan ditampilkan. Ganti Tulisan Blogger dengan katagori yang ingin sahabat tampilkan

8.Simpan dan lihatlah hasilnya

Nah itulah Cara Menampilkan Katagori Dengan Gambar, yang dapat sundaboy share, semoga dapat bermanfaat. untuk saran dan kritiknya silahkan poskan pada kotak komentar. terima kasih