Membuat Label Berdasarkan Gambar

Jumpa Lagi Bersama Kami Di Master Adsense Sebenarnya Postingan Kali ini Masih ada Kaitannya Dengan Postingan Sebelumnya Yang Membahas Tentang Cara Menampilkan Postingan Berdasarkan Label. Sebenarnya Kegunaan Dari Spa Yang Akan di Bahas Kali ini Pun Sama, Yakni Menampilkan Postingan Tertentu Berdasarkan Label Atau Kategori Pada Gadget Side Bar Atau  Footer. 

Bedanya Dengan Tutorial Kali ini Yakni Cara Menampilkan Postingan Berdasarkan Label Dengan Gambar Adalah Pada Cara Berikut ini Nantinya Yang Ditampilkan Bukan Judul Postingan, Melainkan Gambarnya.

Untuk Cara Berikut Biasanya Digunakan Untuk Blog Yang Banyak Menampilkan Gambar Seperti Blog Desain Grafis, Fotografi Atau Portal Berita Online Atau Majalah Online Lainnya. Pokoknya Cara ini Sangat Cocok Untuk Menghias Blog Anda Agar Lebih Ramai Dengan Gambar dan Memudakan Orang Yang Mengakses Blog Anda Menemukan Informasi Lain di Blog Anda Dengan Mudah. Maka dari itu Berikut Adalah Cara Menampilkan Postingan Berdasarkan Label Dengan Gambar:

1. Login terlebih dahulu ke blog Anda
2. Langsung masuk saja ke halaman "Tata Letak"

3. Tambahkan widget / gadget dengan cara klik "Add Gadget / Tambahkan Gadget"

4. Pilih gadget/widget dengan tipe HTML/JavaScript
5. Copy-Paste atau masukkan kode di bawah ini ke  dalamnya

<style>
        /*Katagori Gambar*/
        img.label_gambar{
        float:left;
        padding:5px;
        width:120px;
        height:120px;
        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 =4;</script>
        <script type="text/javascript" src="/feeds/posts/default/-/laris?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

6. Ubahlah Kode Yang Dicetak Merah di Atas Sesuai Dengan Keinginan dan Kondisi Blog Anda. Adapun Penjelasan Dari Kode Tersebut Adalah Sebagai Berikut:

• Width:120px; Adalah Lebar Gambar Yang Akan Ditampilkan
• Height:120px; Adalah Tinggi Gambar Yang Akan Ditampilkan
• var numposts =4 Adalah Jumlah Postingan Yang Akan Ditampilkan
• default/-/laris? Adalah Judul Label Yang Akan Anda Masukkan, Nama Label Harus Persis dan Sama Termasuk Huruf Kapitalatau Tidaknya.

7. Klik Simpan/Save

8. Jalankan blog Anda dan Sekarang Blog Anda Sudah Ada Tampilan Beberapa Postingan Berdasarkan Label Tertentu Dalam Satu Gadget. Menarik Bukan?

Bagaimana cara menampilkan postingan berdasarkan label dengan gambar.. sangat mudah kan? Bahkan Anda Tidak Memerlukan Pemahaman Kode html Mendalam dan Tidak Perlu Mengubah Kode html Template Sehingga Risiko Blog Kacau Pun Lebih Sedikit Karena Tidak Mengubah Kode Keseluruhan Template. Anda Yang Newbie Sekalipun Akan Sangat Terbantu Dengan Tutorial Yang Sangat Mudah Untuk Diikuti.

Share this post