Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

10
Tgl. 06 Juli 2012

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 be...

Daftar Artikel Berdasarkan Label Atau Kategori Pada Mobile Blog
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.
Tampilan Daftar Artikel Terkini Pada Blog Seluler
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.


Katagori: ,
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 10 komentar pada artikel ini ▶
08/07/12 10.09 O

your blog is very beautiful and i like your blog. by agungbelog.co.cc

09/07/12 16.33 O

Scriptnya panjang amat sob, aku masih bingung dg hal ini. Mungkin harus terus belajar, thx sob, happy blogging dan salam ya

10/07/12 08.33 O

@Agunk_arlyTerimakasih Sob.

10/07/12 08.36 O

@TABUHGONGSebenarnya apabila kode untuk membuat bingkai dan warna latar dalam langkah ketiga dimasukkan dalam area CSS, kode akan menjadi lebih ringkas Sob.

Jadi, sengaja saya buat seperti ini dengan maksud agar langkahnya tidak terlalu panjang.

12/07/12 17.13 O

sob , saya udah ngikutin cara yang sobat terangkan , akan tetapi ko gak seperti gambar di atas sih , yang muncul malah nama labelnya saja .. kunjung dan komentar balik ke blog saya ya www.ghilankmayones.blogspot.com

Anonim
13/07/12 05.24 O

@GhiieellaaankSetelah saya cek blog Sobat, sepertinya Sobat belum mengaktifkan setelan tampilan halaman versi seluler untuk blog tersebut.

13/07/12 15.05 O

iya sob,memang sengaja saya tidak aktifkan , saya malu , karena tampilan blog saya kalau tampilan seluler , jelek sob , tapi kan walaupun gak di aktifkan versi selulernya kan masih bisa dibuka dengan menambahkan /?m=1 dibelakangnya .. maka dari itu saya masih mau pelajari dari blog sobat ini , supaya blog saya bagus dengan tampilan mobile seperti blog sobat ini :)

26/12/12 07.52 O

Sudah pas tapi tetep ga jadi sob :(

http://game2hp.blogspot.com

27/12/12 02.24 O

@GesitBisa jadi ada yang belum sesuai Sob, karena sebelumnya saya sudah melakukan uji coba pada teknik tersebut dan terbukti berhasil diterapkan dengan baik.

18/05/19 09.30 O

Mantap sob
Aku lagi belajar

How To ▶
Education ▶
SEO ▶
Other Internet ▶
Programming ▶
Tutorial ▶
DP & Story ▶
Tips & Trick ▶

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog