Swift

Cara Menampilkan Postingan Berdasarkan Label dengan Gambar atau Thumbnails

Contoh Postingan Berdasarkan Label dengan Gambar
Sebenarnya postingan kali ini masih ada kaitannya dengan postingan sebelumnya yang membahas tentang Cara Menampilkan Postingan Berdasarkan Label. Sebenarnya kegunaan dari apa 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. 

Langsung saja dipraktekkan di blog Anda. Langsung deh blog Anda terlihat seperti blog profesional.

You Might Also Like

7 komentar

  1. THANKS BANTUANNYA, TAPI KOK GAK ADA JUDULNYA YANG MUNCUL??
    BAGAIMANA CARA MUNCULKAN JUDULNYA???

    ReplyDelete
    Replies
    1. memang tidak ada judulnya kak, hanya gambar aja..

      Delete
  2. Mantabb langsung dicoba nih di blog saya gan, pas hhe thanks ya

    ReplyDelete
  3. Gan, itu masukkan gambarnya gimana, jika misal semua pos tak ada gambarnya? jadi gambar cuma ada di homepage, tapi saat buka posnya gak ada gambarnya

    ReplyDelete
  4. Mantap jaya..
    silahkan kunjungi website kami tentang mobile legends!

    https://www.gmaell.com/

    ReplyDelete

Silahkan tinggalkan jejak komentar, kesan ataupun saran. Sehingga dapat menjadi pelajaran untuk menyempurnakan tulisan, maupun desain blog ini. Komentar Anda adalah semangat saya ^_^ Terima kasih