Cara Menampilkan Artikel Terkait Kategori Atau Label Tertentu Di Bawah Halaman Artikel Tampilan Mobile [UPDATE]

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

Dan berikut ini adalah rangkaian kode yang digunakan dalam artikel update sebelumnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <h4><b>Baca Pula Artikel Terkait:</b></h4>
    <b:loop values='data:post.labels' var='label'>
      <b><data:label.name/></b>
      <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=artikelterkini&amp;orderby=published&quot;' type='text/javascript'/>
      <b:if cond='data:label.isLast != &quot;true&quot;'><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 == &quot;item&quot;'>
  <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 != &quot;true&quot;'>,</b:if>
      </b:loop>
      .
    </b>
  </h4>
  <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'>
    
    <b:else/>
      <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=artikelterkini&amp;orderby=published&quot;' 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='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=artikelterkini&amp;orderby=published&quot;' type='text/javascript'/>
      </div>
      <b:if cond='data:label.isLast != &quot;true&quot;'><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 != &quot;true&quot;'>,</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 != &quot;true&quot;'>
      
      <b:else/>
        <div class='mobile-related-posts-area'>
          <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=artikelterkini&amp;orderby=published&quot;' 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.