Cara Membuat Bingkai Daftar Artikel Terkini Pada Blog Seluler Dengan Memakai Kode CSS

Lhoh, kok jadinya tidak sama? Bisa jadi seperti itulah pertanyaan Sobat setelah menerapkan teknik untuk menampilkan daftar artikel berdasarkan kategori atau label pada blog versi seluler sesuai dengan langkah-langkah yang telah saya uraikan pada artikel sebelumnya dan kemudian membandingkannya dengan tampilan daftar artikel terkini pada versi seluler blog ini.

Tentu saja hasilnya tidak sama, karena rangkaian kode yang digunakan memang berbeda. Rangkaian kode bingkai recent post untuk artikel yang berjudul “Cara Menampilkan Daftar Artikel Berdasarkan Kategori Atau Label Pada Blog Versi Seluler” (dalam hal ini adalah rangkaian kode yang terdapat pada langkah ketiga), memang sengaja saya jadikan satu kesatuan, dengan maksud agar dapat diterapkan pada semua template standar Blogger yang telah mengaktifkan tampilan versi seluler (pilihan apapun). Sedangkan rangkaian kode bingkai recent post untuk tampilan versi seluler blog ini saya buat terpisah (yaitu dengan memakai kode CSS seperti yang terdapat dalam artikel yang berjudul “White Purple Themes Untuk Desain Tampilan Halaman Blog Versi Mobile”), yang hanya dapat diterapkan apabila tampilan versi seluler yang diaktifkan adalah ‘Tersesuai’.

Lantas bagaimana caranya membuat bingkai dengan kode CSS, agar daftar artikel terkini untuk tampilan versi seluler menjadi seperti blog ini? Sebagai jawaban atas pertanyaan Sobat Blogger dalam artikel “Tanya Jawab” yang berkaitan dengan hal tersebut, maka hal tersebut dapat dilakukan dengan mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, ubah setelan tampilan versi seluler blog menjadi ‘Tersesuai’. Panduannya dapat Sobat lihat di sini, dan jangan lupa pada langkah yang keempat pilih template seluler ‘Tersesuai’ (Custom).

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

Ketiga, cari kode </b:skin> dan kemudian sisipkan kode berikut ini tepat di atasnya.

/* Judul Widget
----------------------------*/
.mobile-site-widget-title {
border-top: 1px solid rgb(59, 89, 152);
height: auto; overflow: hidden;
padding: 4px; padding-bottom: 0px;
text-align: center; width: auto;
background: url('https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTFPGdGjgkF-SRSk8U_xk857EBd26eYOdEsULLy7tmelUSf2vy6Z_KtGnD8fCj7jcTw6nOIOn_BzULGmhKBhOT_nqp-BqiyuLVt_aa2Th4ZvyLQ6laqkXRioRbeVwYK8gokRGvtfw0Gk0/s800/JudulWidget.png') repeat-x scroll left bottom rgb(152, 173, 198);
}

/* Area Widget
----------------------------*/
.mobile-site-widget-area {
width: auto; height: auto;
padding: 2px; padding-bottom: 0px;
text-align: center; overflow: hidden;
border-top: 1px solid;
border-color: rgb(226, 200, 34);
background: rgb(239, 242, 253);
}

Keempat, cari kode </head> dan kemudian sisipkan script 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>

Kelima, cari kode <b:includable id='mobile-nextprev'> dan kemudian perhatikan bahwa di bawahnya terdapat kode  <div class='blog-pager' id='blog-pager'>. Nah, sisipkan kode berikut ini tepat di bawahnya beberapa kali (sesuai dengan jumlah kategori yang akan ditampilkan.

<div class='mobile-site-widget-title'>

<span style='color: #ffffff;'><b>JUDUL</b></span>

</div>

<div id='KATEGORI-ARTIKEL-X'>

<div class='mobile-site-widget-area' style='text-align: justify;'>

<script src='http://NAMABLOG.blogspot.com/feeds/posts/default/-/LABEL?orderby=published&amp;alt=json-in-script&amp;callback=artikelterkini' type='text/javascript'/>

</div>

</div>

Kemudian ganti kata JUDUL, kategori-artikel-x, NAMABLOG, dan LABEL sesuai dengan judul, kategori artikel, URL blog, serta nama label yang akan digunakan. Sebagai contoh misalnya adalah seperti rangkaian kode di bawah ini yang akan menampilkan 3 (tiga) kategori artikel, yaitu ‘Mobile Blog’, ‘Blogging’, dan ‘How To’.

<div class='mobile-site-widget-title'>

<span style='color: #ffffff;'><b>Mobile Blog</b></span>

</div>

<div id='kategori-artikel-1'>

<div class='mobile-site-widget-area' style='text-align: justify;'>

<script src='http://eltelu.blogspot.com/feeds/posts/default/-/Mobile%20Blog?orderby=published&amp;alt=json-in-script&amp;callback=artikelterkini' type='text/javascript'/>

</div>

</div>

<div class='mobile-site-widget-title'>

<span style='color: #ffffff;'><b>Blogging</b></span>

</div>

<div id='kategori-artikel-2'>

<div class='mobile-site-widget-area' style='text-align: justify;'>

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

<div class='mobile-site-widget-title'>

<span style='color: #ffffff;'><b>How To</b></span>

</div>

<div id='kategori-artikel-3'>

<div class='mobile-site-widget-area' style='text-align: justify;'>

<script src='http://eltelu.blogspot.com/feeds/posts/default/-/How%20To?orderby=published&amp;alt=json-in-script&amp;callback=artikelterkini' type='text/javascript'/>

</div>

</div>

Keenam, simpan template.

Perlu diingat bahwa teknik tersebut hanya dapat diterapkan dalam setelan template seluler ‘Tersesuai’ (Custom). Kemudian perlu diingat pula bahwa hasil akhir penerapan teknik tersebut dalam setelan template seluler ‘Tersesuai’ (Custom), belum tentu akan cocok dengan yang Sobat harapkan. Karena dalam setelan template tersesuai ada banyak hal yang harus Sobat sesuaikan, terutama custom widget (misalnya menu ikon mengapung) yang terkadang juga akan dimunculkan pada tampilan seluler.

Sehingga saya lebih menyarankan agar Sobat menggunakan teknik dalam uraian artikel sebelumnya yang berjudul “Cara Menampilkan Daftar Artikel Berdasarkan Kategori Atau Label Pada Blog Versi Seluler”. Namun apabila Sobat tetap menginginkan agar daftar artikel terkini untuk tampilan versi seluler pada blog yang Sobat kelola menjadi seperti blog ini, maka saya lebih menyarankan agar Sobat langsung menggunakan teknik dalam uraian artikel sebelumnya yang berjudul “Panduan Cara Mengubah Tema Pada Template Untuk Tampilan Halaman Blog Versi Seluler (Blogger Mobile Themes)”.

Semoga berguna dan bermanfaat.

Salam.