Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

32
Tgl. 03 Oktober 2012

Cara Membuat Sebuah Daftar Artikel Terkait Otomatis Untuk Beberapa Label Dalam Blog

Apabila kita membuka dan kemudian membaca artikel yang terdapat pada sebuah blog, maka hampir dapat dipastikan bahwa di bawah setiap artik...

Daftar Artikel Terkait Untuk Beberapa Label Blog - ELTELU
Apabila kita membuka dan kemudian membaca artikel yang terdapat pada sebuah blog, maka hampir dapat dipastikan bahwa di bawah setiap artikel yang dibuka dan dibaca tersebut terdapat beberapa tautan dengan berisikan daftar judul artikel yang memiliki keterkaitan kategori atau label dengan artikel yang dimaksud. Dimana model daftar artikel yang ditampilkan pun sangat bervariasi. Mulai dari yang hanya menampilkan daftar tautan, menampilkan daftar link dengan fungsi scroll, menampilkan daftar tautan disertai dengan gambar, dan bahkan dengan menampilkan kombinasi beberapa model tersebut, yang secara umum daftar semacam ini disebut sebagai daftar artikel terkait.

Berbicara mengenai daftar artikel terkait, maka dapat dipastikan bahwa tidaklah terlalu banyak diantara kita yang belum mengenal atau mengetahui tentang teknik serta cara pembuatannya. Karena apabila kita ingin membuat daftar artikel terkait yang akan dimunculkan secara otomatis dalam setiap halaman artikel, maka script beserta langkah-langkah pengerjaannya dapat dengan mudah ditemukan dengan menggunakan bantuan mesin telusur sehingga kita pun dapat dengan mudah memilih model daftar artikel terkait yang dihasilkan oleh script atau kode yang digunakan.

Lantas untuk apa artikel ini diterbitkan? Salah satu alasan yang mendasari penerbitan artikel tentang cara membuat daftar artikel terkait untuk beberapa label atau kategori yang digunakan dalam blog ini adalah sebagai uraian atas pertanyaan Sobat Blogger dalam dengan judul “Cara Menambahkan Sub Menu (Pull Down Menu) Pada Tab Menu Horizontal Standar Blogger” yang menanyakan tentang bagaimana caranya membuat daftar artikel terkait (related post) seperti yang digunakan pada blog ini (seperti yang tampak pada gambar di atas). Disamping itu, maksud lain dari diterbitkannya artikel ini adalah untuk memberikan alternatif pada Blogger lain, sehingga akhirnya terdapat lebih banyak pilihan model atau desain daftar artikel terkait yang dapat digunakan pada blog yang dikelola.

Dan selanjutnya apabila Anda ingin membuat daftar artikel terkait dengan menggunakan desain atau model seperti yang tampak pada gambar di atas, maka Anda dapat melakukannya dengan mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, seperti biasa apabila akan melakukan kustomisasi pada template maka terlebih dulu buka menu ‘Template>Edit HTML>Lanjutkan>Expand Template Widget’.

Kedua, cari kode ]]></b:skin> dan kemudian sisipkan rangkaian kode berikut ini tepat di atasnya.
.bingkai-dalam-konten {
  height: auto;
  width: 98%;
  padding: 5px;
  overflow: hidden;
  margin: 5px 0px 5px 0px;
  border: 1px solid #666666;
  color: #424242 !important;
  text-align: justify;
  text-shadow: 0 -1px 0 white;
  text-decoration: none;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background: #ffffff;
  background: -moz-linear-gradient( center top, #f3f3f3 30%, #ffffff 70% );
  background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #f3f3f3), color-stop(1, #ffffff) );
}

.area-latar-widget {
  padding: 5px;
  overflow: hidden;
  border: 1px solid #999999;
  background: #ffffff;
  background: -moz-linear-gradient( center top, white 95%, #f3f3f3 100% );
  background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #fcfcfc) );
}

.daftar-artikel-terkait li {
  text-align: justify;
}

.daftar-artikel-terkait li:last-child {
  list-style: none;
}


Ketiga, cari kode </head> dan kemudian sisipkan rangkaian script berikut ini tepat di atasnya.
<script type='text/javascript'>
//<![CDATA[
function artikelterkini(json) {
var numposts = 5;
  document.write('<ul>');
    for (var i = 0; i < numposts; i++) {
      document.write('<li>');
      var entry = json.feed.entry[i];
      var posttitle = entry.title.$t;
      var posturl;
      if (i == json.feed.entry.length) break;
      for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          posturl = entry.link[k].href;
          break;
        }
      }
      posttitle = posttitle.link(posturl);
      document.write(posttitle);
      document.write('</li>');
    }
  document.write('</ul>');
}
//]]>
</script>

Keterangan:
Jika sebelumnya Anda telah mengimplementasikan teknik kustomisasi template untuk mengubah desain tampilan halaman blog versi seluler dengan mengacu pada artikel yang berjudul “MOBILE TEMPLATE - Customize Blogger Mobile Templates”, “Cara Mengedit Template Untuk Mengubah Tema Tampilan Blog Versi Seluler” dan atau telah mengimplementasikan pembuatan daftar artikel terkait dengan mengacu pada artikel yang berjudul “Cara Mengedit Template Untuk Mengubah Tema Tampilan Blog Versi Seluler”, maka Anda dapat melewati langkah yang ketiga ini.
Untuk menentukan banyaknya tautan yang ingin ditampilkan dalam daftar artikel terkait, dapat dilakukan dengan mengubah angka yang terdapat pada kode var numposts = 5;.

Keempat, untuk mempermudah dalam penempatan script, maka cari kode <div class='post-footer'> dan kemudian sisipkan rangkaian script berikut ini tepat di bawahnya.
<!--Artikel Terkait Versi Web Mulai-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:post.labels'>
    <div class='bingkai-dalam-konten'>
      <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='area-latar-widget'>
        <b:loop values='data:post.labels' var='label'>
          <b:if cond='data:label.isLast != &quot;true&quot;'>
          
          <b:else/>
            <div class='daftar-artikel-terkait'>
              <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>
  </b:if>
</b:if>
<!--Artikel Terkait Versi Web Selesai-->


Kelima, simpan template.

Sehingga akhirnya terbentuklah sebuah daftar artikel terkait untuk beberapa label atau kategori artikel sekaligus, yang akan dimunculkan secara otomatis dalam setiap artikel (dalam hal ini adalah pada bagian post footer atau di bawah setiap artikel yang diterbitkan). Sedangkan model atau desain tampilan daftar artikel terkait yang dimaksud adalah seperti yang tampak pada gambar di atas. Sehingga apabila warna latar maupun garis yang digunakan belum sesuai dengan desain tampilan halaman blog yang Anda kelola, maka silakan untuk melakukan kustomisasi seperlunya pada kode CSS yang digunakan.

Semoga berguna serta bermanfaat. Dan apabila Anda mengalami kesulitan dalam menerapkan atau mengimplementasikan teknik tersebut, maka silakan poskan komentar untuk menanyakan solusi atas kesulitan yang Anda alami.
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 32 komentar pada artikel ini ▶
Anonim
03/10/12 14.03 O

asyik dah di share hehehehe makasih mas....

tapi ntar aja deh makenya lagi sibuk nih hehe :)

03/10/12 23.51 O

@Limit PostYap, sama-sama Sobat...

Anonim
08/10/12 16.25 O

sip gan, terima kasih...
lain kali boleh dicoba ini tutorial :)

09/10/12 00.08 O

@karimalaminTerimakasih balik Sobat. Silakan bila berkenan mengimplementasikan teknik tersebut. :)

02/12/12 08.32 O

mantab bnget ....!

jangan lupa kunjungi blog saya di www.treehuges.blogspot.com

02/12/12 14.41 O

Thanks's infox bro, akses88.blogspot.com

05/12/12 04.03 O

@Bachrudin DejavaOke, terimakasih Sobat.

05/12/12 04.14 O

@Basri MatindasKetika saya buka kok malah muncul pesan peringatan seperti di bawah ini, Sob.

Blog telah dihapus

Maaf, blog di akses88.blogspot.com telah dihapus. Alamat ini tidak tersedia untuk blog baru. @_@

15/12/12 22.06 O

terima kasih gann, semoga barakah.

15/12/12 22.07 O

makasih gan, moga-moga manfaat.

16/12/12 04.55 O

@Kaze SeikoSama-sama dan terimakasih balik Sobat. :)

Anonim
20/12/12 23.53 O

makasih gan infonya ini yang lg saya cari2 maklum baru maenan blog...


di tunggu kunjungnnya gan...
http://seobloggerpemula.blogspot.com/

22/12/12 03.35 O

@seobloggerpemulaOke Sobat....

24/12/12 23.38 O

Mantab Bozzz..!!!
ijin sedot ia....!!!
hehehehe

25/12/12 00.09 O

@wahyu diSilakan Sob...

Anonim
25/12/12 10.37 O

ok sob, sekarang juga saya akan terapkan..tapi sebenarnya masih ada satu pertanyaan lagi menyambung pertanyaan yang kemarin.. biasanya kan urutan nama-nama label dalam postingan akan otomatis urutannya sesuai dengan abjad:
label a, label b, label c ... dan seterusnya

tapi saya ingin urutan nama label tersebut dapat diatur menjadi:
label b, label a, label c

mohon bantunannya ya.., semua artikelnya sangat bermamfaat.
thanks.

Anonim
26/12/12 19.40 O

Bagus ni gan tutorialnya, saya coba ya;. salam sukses

27/12/12 01.25 O

@Ijang CahyanaUntuk teknik yang seperti itu, jujur saja saya belum pernah mencobanya Sob. Sehingga bisa jadi ini malah menjadi sebuah masukan bagi saya untuk mencobanya suatu saat nanti.

27/12/12 02.39 O

@ruddinnoerSilakan Sob. Terimakasih.

Anonim
10/01/13 05.21 O

terimakasih atas artikel yang sangat bermanfaat.

10/01/13 08.52 O

@goresansipopokSama-sama Sobat.

15/01/13 21.54 O

Asslamualaikum
mas mw nanya ni...punyaku gak jadi! bagian div class='post-footer kan ada 2 nah aku pake bagian prtamna smua da coba tpi msi gk jdi...tlong bantuannya!

17/01/13 05.29 O

@gio akramSayang sekali Sobat tidak mencantumkan info tentang blog dalam profil Google Plus, sehingga akhirnya saya tidak dapat melakukan pengecekan secara langsung pada blog yang Sobat kelola untuk mengetahui penyebabnya.

Jadi, mohon maaf bila saya tidak dapat memberikan uraian jawaban sebagai solusi atas permasalahan tersebut.

Namun demikian sebenarnya saya dapat memastikan bila Sobat telah mengerjakan teknik tersebut secara benar, maka hasil yang didapat pun akan sesuai dengan yang semestinya.

Salam.

22/01/13 12.48 O

udah di coba gan
tapi ko ga keluar ya artikel terkaitnya n juga templatnya ga Eror pula ,kenapa ya

http://zerosnumber.blogspot.com

22/01/13 23.03 O

@joey satrianaKalau begitu pastikan bahwa Sobat telah mengerjakan semua langkah dan menyisipkan semua kode atau script yang digunakan dengan benar.

Jadi, coba Sobat cek lagi apakah ada bagian yang belum disisipkan atau dikerjakan sesuai dengan yang semestinya.

Semoga dapat membantu.

28/01/13 22.23 O

Kenapa Kalo Mode ?m=0 Artikel Terkaitnya Nggak Nongol Apa'' yah ..??

28/01/13 22.48 O

@Agung SetiawanSobat, hal tersebut disebabkan karena jika di belakang URL terdapat ?m=0 sama artinya dengan tampilan versi web.

Sehingga dalam mode seperti ini yang akan ditampilkan adalah daftar artikel terkait yang telah dibuat untuk tampilan versi web.

Sedangkan daftar artikel versi seluler hanya akan ditampilkan jika format URL diakhiri dengan ?m=1

Semoga dapat membantu. :)

04/03/13 07.21 O

Alhmdllah...akhirnya bisa juga mas trmaksih...! Salam

04/03/13 14.09 O

@gio akramSyukurlah bila demikian, Sobat. Saya turut senang bila Sobat tidak mengalami kesulitan dalam mengimplementasikan teknik tersebut di atas. :)

.. aq gagal n gak keluar. huhh. terpaksa dech pake yg lama ..

22/10/13 20.03 O

tuto nya keren, tapi saya ada saran : jika ini tuto untuk membuat di blog versi desktop/komputer, sebaiknya setelah href atau expr:href yang dituju ditambahkan " + "?m=0"" contoh :
expr:href='data:blog.homepageUrl + "?m=0"'

terimakasih

22/10/13 21.37 O

@Alfa Renaldo AluskaTerimakasih atas saran yang diberikan Sob. :)

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