Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

2
Tgl. 25 September 2012

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

ELTELU - Daftar Artikel Terkait Versi Mobile Blog
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.


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 2 komentar pada artikel ini ▶
07/05/13, 08.52 O

saya gagal terus mas menerapkan trik ini..

08/05/13, 05.17 O

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

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