25 September 2012
Artikel ini merupakan update atau pembaruan yang kedua atas artikel sebelumnya yang berjudul “Membuat Daftar Artikel Terkait Pada Template Seluler Blogspot”. Sebenarnya pada tanggal 02 September 2012 yang lalu telah saya lakukan update untuk artikel tersebut, dimana update yang dimaksud dilakukan terhadap beberapa rangkaian kode yang digunakan dalam membuat daftar artikel terkait versi seluler karena terdapat adanya bug pada rangkaian kode yang sebelumnya. Namun ternyata beberapa waktu lalu saya masih menemukan adanya bug dalam rangkaian kode yang terdapat pada artikel sebelumnya, sehingga jika Anda telah mengimplementasikan teknik yang diuraikan dalam artikel pertama dan atau telah melakukan update dengan memanfaatkan teknik yang diuraikan dalam artikel yang kedua maka sangat disarankan untuk melakukan pembaruan sesuai dengan teknik yang diuraikan dalam artikel ini.
Perlu diketahui bahwasanya tujuan dari pembaruan ini adalah untuk menghilangkan munculnya tautan ganda dalam daftar artikel terkait ketika sebuah artikel ditandai dalam beberapa kategori atau label sekaligus. Sebagai contoh dari tautan ganda yang dimaksud adalah tautan atau link untuk sebuah artikel yang sama dalam daftar artikel terkait, seperti yang ditunjukkan dengan tanda warna merah pada gambar di atas.
Sedangkan pembaruan yang perlu dilakukan adalah terhadap rangkaian kode yang terdapat pada langkah kelima artikel pertama, atau rangkaian kode kedua yang terdapat pada artikel update sebelumnya. Untuk mempermudah dalam memahaminya, maka di bawah ini adalah rangkaian kode yang dimaksud pada kedua artikel tersebut.
Berikut ini adalah rangkaian kode yang digunakan dalam artikel pertama.
<b:if cond='data:blog.pageType == "item"'> <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 != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script> </div> </div> </b:if>
Dan berikut ini adalah rangkaian kode yang digunakan dalam artikel update sebelumnya.
<b:if cond='data:blog.pageType == "item"'> <h4><b>Baca Pula Artikel Terkait:</b></h4> <b:loop values='data:post.labels' var='label'> <b><data:label.name/></b> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=artikelterkini&orderby=published"' type='text/javascript'/> <b:if cond='data:label.isLast != "true"'><br/></b:if> </b:loop> </b:if>
Nah, yang perlu dikerjakan untuk melakukan pembaruan adalah dengan cara mengganti rangkaian kode tersebut dengan menggunakan rangkaian kode berikut ini.
<b:if cond='data:blog.pageType == "item"'> <h4> <b> Baca Pula Artikel Terkait Dalam Kategori: <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> . </b> </h4> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> <b:else/> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=artikelterkini&orderby=published"' type='text/javascript'/> </b:if> </b:loop> </b:if>
Namun apabila sebelumnya Anda telah mengimplementasikan teknik kustimisasi template untuk mengubah desain tampilan halaman versi seluler seperti yang diuraikan dalam artikel dengan judul “Cara Mengedit Template Untuk Mengubah Tema Tampilan Blog Versi Seluler” atau “MOBILE TEMPLATE - Customize Blogger Mobile Templates”, maka yang perlu diperbarui adalah rangkaian kode di bawah ini.
<div class='mobile-related-posts' style='background-color: rgb(255, 251, 226);'> <h4><b>Baca Pula Artikel Terkait:</b></h4> <div class='mobile-related-posts' style='background-color: #ffffff; color: #444444;'> <b:loop values='data:post.labels' var='label'> <b><data:label.name/></b> <div class='mobile-related-posts-area'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=artikelterkini&orderby=published"' type='text/javascript'/> </div> <b:if cond='data:label.isLast != "true"'><br/></b:if> </b:loop> </div> </div>
Untuk memperbaruinya silakan ganti rangkaian kode tersebut dengan rangkaian kode berikut ini.
<div class='mobile-related-posts' style='background-color: rgb(255, 251, 226);'> <h4> <b> Baca Pula Artikel Terkait Dalam Kategori: <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> . </b> </h4> <div class='mobile-related-posts' style='background-color: #ffffff; color: #444444;'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> <b:else/> <div class='mobile-related-posts-area'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=artikelterkini&orderby=published"' type='text/javascript'/> </div> </b:if> </b:loop> </div> </div>
Dengan demikian maka tautan ganda untuk artikel yang sama tidak lagi ditampilkan dalam daftar artikel terkait (walaupun artikel yang diterbitkan ditandai dalam beberapa kategori atau label), dan sekaligus akan ditampilkan pula label dari masing-masing artikel pada bagian judul daftar artikel terkait tersebut.
Semoga berguna dan bermanfaat.
Salam.
Terdapat 2 komentar pada artikel ini ▶
saya gagal terus mas menerapkan trik ini..
@Aulia MPKalau masih terjadi kegagalan, bisa jadi Sobat belum memasukkan rangkaian javascript-nya. Karena seperti yang saya uraiakan di atas bahwasanya teknik tersebut merupakan updae (pembaruan) dari artikel sebelumnya, sehingga apabila Sobat menerapkan teknik tersebut maka jangan lupa untuk melihat uraian yang terdapat pada artikel sebelumnya.
Jadi selain menambahkan rangkaian kode di atas, maka agar dapat bekerja sesuai dengan yang semestinya maka rangkaian javascript-nya pun (yang terdapat pada artikel sebelumnya) juga harus dimasukkan dalam template.