Membuat Artikel Terkait Pada Template Seluler Blogspot

Kiranya tidak sedikit lagi artikel yang diposting oleh sobat blogger yang menguraikan tentang cara membuat daftar artikel terkait pada halaman posting blog. Namun dari sekian banyak artikel yang menguraikan tentang hal tersebut, dan sampai dengan ketika artikel ini diposting, kami belum pernah sekalipun menemukan artikel yang membahas tentang cara membuat daftar artikel terkait pada template blogspot untuk tampilan seluler. Sehingga akhirnya terpikir di benak kami bila daftar artikel terkait dapat dibuat pada template blogspot untuk tampilan komputer, maka tentunya dapat pula diterapkan pada template blogspot untuk tampilan seluler atau mobile template.

Akhirnya dengan hanya berbekal niat, semangat, serta sedikit kemampuan scripting dan koding yang semuanya serba dipelajari secara otodidak, kami mencoba menerapkan script yang sebenarnya sudah banyak digunakan untuk membuat daftar artikel terkait pada template blogspot tersebut agar dapat pula diterapkan pada template seluler dengan harapan semoga nantinya dapat berguna dan bermanfaat bagi sobat blogger yang lain.

Secara teknis cara pembuatan daftar artikel terkait pada template blogspot untuk tampilan seluler ini serupa dengan pembuatan daftar artikel terkait pada template untuk tampilan komputer, yaitu dengan menambahkan script tertentu ke dalam template yang digunakan. Namun yang perlu diperhatikan di sini adalah di bagian mana script tersebut harus diletakkan. Untuk lebih jelasnya, langkah-langkahnya adalah sebagai berikut:

Pertama, Login ke akun blogger dan selanjutnya pada menu ‘Template’ ubahsesuaikan konfigurasi pada template seluler yang digunakan. Dalam hal ini aktifkan pilihan yang digunakan untuk menampilkan versi seluler pada blog yang dimaksud, kemudian pilih template seluler ‘Tersesuai’ dan selanjutnya klik tombol ‘Simpan’, seperti yang tampak pada gambar di bawah ini.


Kedua, klik tombol ‘Edit HTML’ untuk menambahkan script pada template yang digunakan, dan kemudian klik tombol ‘Lanjutkan’.
Ketiga, klik pilihan ‘Expand Template Widget’ sehingga muncul tanda check list pada kotak yang terdapat di samping pilihan tersebut.

Keempat, lakukan pencarian untuk kode <div class='post-footer-line post-footer-line-2'> yang terletak di antara kode <b:includable id='mobile-post' var='post'> dan </b:includable>
Kelima, tepat di bawah kode <div class='post-footer-line post-footer-line-2'> masukkan kode di bawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='mobile-related-posts'>
<div style='text-align: justify;'>
<h4><b>Artikel Terkait: </b></h4>
<b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
</div>
</b:if>

Catatan: Bila letak daftar artikel terkait yang dihasilkan kurang sesuai, maka dapat dilakukan kustomisasi pada penempatan kode di atas, dengan ketentuan bahwa kode tetap diletakkan di antara <b:includable id='mobile-post' var='post'> dan </b:includable>.

Keenam, simpan template dan lakukan pengecekan dengan menambahkan ?m=1 pada URL blog sehingga menjadi http://namablog.blogspot.com?m=1, untuk membuka blog dengan tampilan versi seluler. 

Sebagai contoh hasil dari pemakaian teknik tersebut, silakan klik di sini untuk menampilkan daftar artikel terkait yang diterapkan pada halaman ini dalam template blogspot versi seluler.

0 komentar:

Posting Komentar