Membuat Widget Related Article

Related url (tutorial atau artikel yang berkaitan) berfungsi untuk mempermudah pembaca dalam mencari artikel-artikel yang berkaitan satu dengan lainnya yang masih dalam satu kategori yang sama.

Dalam tutorial cara menampilkan hasil posting berdasarkan label dijelaskan cara bagaimana trik menampilkan posting based on label menggunakan JSON in Script. Trik ini juga dapat diaplikasikan untuk membuat widget related url.
  1. Masuklah pada Dashboard, pilih Template >> Edit HTML. Karena kita akan meletakkan widget ini diakhir artikel, maka perlu sedikit memodifikasi template.
  2. Cari tag berikut ini <data:post.body/>
  3. Perlu diingat, nanti akan terdapat beberapa tag yang sama, carilah tag yang benar-benar sesuai dan yakin dengan pilihan tampilan Desktop (bukan browser mobile). Jika anda menggunakan template Simple, tampilannya kira-kira seperti ini
    4. related post blogspot tutorial
  4. Copy-Paste script berikut dan letakkan dibawah tag <data:post.body/>
    5. &lt;script type=&quot;text/javascript&quot;&gt;
function relatedPost(json){
    for (var i = 0; i &lt; json.feed.entry.length; i++) {
      for (var j = 0; j &lt; json.feed.entry[i].link.length; j++) {
        if (json.feed.entry[i].link[j].rel == &apos;alternate&apos;) {
          var postUrl = json.feed.entry[i].link[j].href;
          break;
        }
      }
      var postTitle = json.feed.entry[i].title.$t;
      var postSummary = json.feed.entry[i].summary.$t;
           var item = &apos;&lt;div style=&quot;padding:7px 10px;border-left:1px solid #ddd;&quot;&gt;&lt;img src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzvrl4NCwtjAL4chvzKNJv16eutFt3AK0GcpEAIMakg_bkYbItQnQxsXeyKhmKojJWBfFx-mm54jVSGbyd0Kr2bBPYVKeZiyTr580CYpVCG8A_fpiAINo1HnuD88oFma4c5EKZP0IeyXiJ/s16-Ic42/note.png&quot; style=&quot;margin-bottom:-4px;&quot;&gt; &lt;a href=&apos; + postUrl + &apos; target=&quot;_blank&quot;&gt;&apos; + postTitle + &apos;&lt;/a&gt;&lt;/div&gt;&apos;;
      document.write(item);
    }
}
&lt;/script&gt;
<b:if cond='data:post.labels'>
	<b:loop values='data:post.labels' var='label' index='i'>
		<b:if cond='data:i&lt;1'>
          <h2>Related Post :</h2>
&lt;script src=&quot;http://www.alfabet.web.id/feeds/posts/summary/-/<data:label.name/>?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=relatedPost&quot;&gt;&lt;/script&gt;
		</b:if>            
	</b:loop>
</b:if>
  5. Untuk artikel atau posting yang memiliki banyak label, maka label pertama (sesuai abjad) yang akan digunakan
  6. Ganti url http://www.alfabet.web.id/ dengan url blog anda
  7. Pada script max-results=5 berarti hanya akan menampilkan maksimal 5 post sesuai label
  8. Simpan lalu lihat perubahan pada blog anda
  9. Demo dapat dilihat dibawah ini

Baca Juga :

Older Post
Newer Post