Cara Menampilkan Daftar Artikel Berdasarkan Kategori Atau Label Pada Blog Versi Seluler

Pernahkah Anda membuka http://eltelu.blogspot.com (blog ini) dengan menggunakan browser yang terdapat pada HP (hand phone) Anda? Jika belum pernah, maka cobalah sekarang Anda buka terlebih dulu blog ini dengan menggunakan browser yang terdapat pada hand phone Anda (misalnya dengan memakai Opera Mini dan atau sejenisnya).

Nah, setelah Anda membuka blog ini dengan menggunakan hand phone yang Anda miliki, pastilah Anda akan mendapati bahwa tampilannya adalah serupa dengan gambar yang tampak di atas. Hal ini terjadi karena telah dilakukan kustomisasi tema untuk tampilan halaman versi seluler pada blog ini, sehingga jika dibuka dengan menggunakan perangkat seluler maka tampilannya tidak lagi menggunakan tampilan standar yang diberikan oleh Blogger, namun menggunakan tampilan hasil kustomisasi, dimana caranya dapat anda pelajari dengan membuka artikel yang berjudul Panduan Cara Mengubah Tema Pada Template Untuk Tampilan Halaman Blog Versi Seluler (Blogger Mobile Themes).

Apabila kita perhatikan gambar yang tampak di atas, maka dapat kita lihat bahwa dalam tampilan versi seluler blog ini terdapat beberapa daftar artikel yang ditampilkan sesuai dengan kategorinya masing-masing, seperti halnya daftar artikel sesuai dengan kategori atau label yang biasanya ditampilkan pada blog versi web.

Adalah suatu hal yang sangat mudah ketika kita ingin membuat widget untuk menampilkan daftar artikel sesuai dengan kategori atau label untuk tampilan halaman blog versi web yang kita kelola, karena untuk keperluan ini kita tinggal menambahkan gadget “Feed” yang dapat dimanfaatkan untuk menambahkan konten dari feed RSS atau Atom ke blog yang kita kelola. Namun bagaimana caranya jika kita ingin menampilkan daftar artikel sesuai dengan label atau kategori yang ada untuk blog versi seluler yang kita kelola?

Untuk membuat atau menampilkan daftar artikel sesuai dengan kategorinya masing-masing pada halaman blog versi seluler, maka Anda dapat melakukannya dengan mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > ‘Expand Template Widget’.

Kedua, cari kode </head> dan kemudian sisipkan kode berikut ini tepat di atasnya.

<script type='text/javascript'>
//<![CDATA[
function artikelterkini(json) {
var numposts = 5;
    document.write('<ul>');
    for (var i = 0; i < numposts; i++) {
        document.write('<li>');
        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 == 'alternate') {
                posturl = entry.link[k].href;
                break;
            }
        }
            posttitle = posttitle.link(posturl);
            document.write(posttitle);
        document.write('</li>');
    }
    document.write('</ul>');
}
//]]>
</script>

Ketiga, untuk mempermudah proses maka cari kode <b:includable id='mobile-nextprev'> dan kemudian sisipkan kode berikut ini tepat di bawah kode  <div class='blog-pager' id='blog-pager'> yang terdapat di bawahnya, sehingga nantinya daftar artikel akan ditampilkan di atas tombol navigasi blog versi seluler.

<div style="background-color: #666666; border: 1px solid #444444; margin-bottom: 4px; padding: 2px; text-align: center; height: auto; width: 100%;">
  <span style='color: #ffffff;'><b>Label Artikel</b></span>
    <div style="background-color: #ffffff; border: 1px solid #444444; margin: 0px; padding: 3px; text-align: justify; height: auto; width: auto;">
      <script src='http://eltelu.blogspot.com/feeds/posts/default/-/Blogging?orderby=published&amp;alt=json-in-script&amp;callback=artikelterkini' type='text/javascript'/>
    </div>
</div>

Perlu diingat, bahwa sebelum Anda menerapkan kode tersebut maka terlebih dulu ubah ‘Label Artikel’ sesuai dengan kategori artikel yang akan Anda gunakan sebagai judul, ganti http://eltelu.blogspot.com/ dengan URL blog Anda, dan ubahsesuaikan kata ‘Blogging’ yang terdapat dalam kode src='http://eltelu.blogspot.com/feeds/posts/default/-/Blogging? sesuai dengan label artikel yang akan ditampilkan. Namun apabila label artikel terdiri dari beberapa kata, maka Anda dapat menambahkan %20 di antara setiap kata yang digunakan sebagai label, misalnya seperti ini src='http://eltelu.blogspot.com/feeds/posts/default/-/Mobile%20Blog?

Kemudian Anda juga dapat menyesuaikan warna garis maupun latar dengan cara mengubah kode warna pada kode border: dan background-color:, serta kode warna yang terdapat pada kode color: untuk mengubah warna teks yang dijadikan sebagai judul daftar artikel. Dan sebagai contoh penerapannya misalnya adalah seperti yang tampak pada rangkaian kode di bawah ini.

<b:includable id='mobile-nextprev'>
  <div class='blog-pager' id='blog-pager'>
     <div style='background-color: #666666; border: 1px solid #444444; margin-bottom: 4px; padding: 2px; text-align: center; height: auto; width: 100%;'>
       <span style='color: #ffffff;'><b>Pendidikan</b></span>
        <div style='background-color: #ffffff; border: 1px solid #444444; margin: 0px; padding: 3px; text-align: justify; height: auto; width: auto;'>
           <script src='http://ayaheokta.blogspot.com/feeds/posts/default/-/Pendidikan?orderby=published&amp;alt=json-in-script&amp;callback=artikelterkini' type='text/javascript'/>
         </div>
    </div>
    <b:if cond='data:newerPageUrl'>

Keempat, simpan template Anda.

Sehingga hasil penerapan dari kode yang terdapat dalam rangkaian contoh kode tersebut pada template standar Blogger, adalah seperti yang tampak pada gambar di bawah ini.

Sumber gambar: ayaheokta.blogspot.com

Namun demikian apabila Anda menginginkan agar tampilan versi seluler dari blog yang Anda kelola menjadi seperti tampilan halaman versi seluler http://eltelu.blogspot.com/ (blog ini), maka terlebih dulu Anda harus melakukan kustomisasi desain halaman versi seluler seperti yang saya uraikan dalam artikel dengan judul “Panduan Cara Mengubah Tema Pada Template Untuk Tampilan Halaman Blog Versi Seluler (Blogger Mobile Themes)”.

Semoga berguna dan bermanfaat.

Salam.