Sebelumnya saya pernah menulis tentang membuat artikel berkaitan tanpa plugin yang mana khusus untuk blog berbasis wordpress. Adapun kali ini saya akan berbagi mengenai cara membuat related post/ artikel berkaitan untuk blogger. Kalau untuk fungsi dan kegunaannya sepertinya tak perlu saya bahas lagi karena sudah saya bahas sebelumnya, dan saya yakin sobatpun sudah paham.
Ada dua tipe umum related posts atau artikel berkaitan, menggunakan thumbnail/ gambar dari postingan atau hanya dengan list/ daftar post artikel serupa. Nah, tipe kedua ini lebih sederhana namun sebenarnya lebih baik dari pada menggunakan thumbnail. Tipe kedua ini dapat melisting konten lebih banyak, juga membuat page loaded lebih cepat dan halaman terasa ringan. Biasanya style pada artikel berkaitan cantik blogger ini menggunakan tipe list standar, yaitu menggunakan nomor dan bullet. Namun kita dapat membuatnya lebih menarik dengan menambakan ikon situs/ blog kita sebagai isi listnya, atau bisa juga dengan gambar lain sesuai dengan keinginan kita. Tuh kayak di gambar bawah.
Cara membuat artikel berkaitan blogger dengan icon ini mudah saja, cukup dengan 2 langkah mudah:
Pertama, log in ke dashboard bloggermu- klik Design – Edit HTML dan check “Expand Widget Templates” supaya kodenya nggak ngumpet. Cari kode </head> dan tambahkan kode di bawah ini sebelum kode </head> tadi. Kira-kira seperti ini jadinya:
<!-- Mulai Kode--> <b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts{width:100%;font-size:12px tahoma;margin: 15px 0 7px 0;} #related-posts .widget{list-style-type:none;margin:5px 0 5px 0;padding:0;} #related-posts .widget h2, #related-posts h2{font-size:20px; font-weight:normal;margin:5px 7px 0; padding:0 0 5px;} #related-posts a{text-decoration:none;} #related-posts a:hover{text-decoration:none;} #related-posts ul{border:medium none;margin:16px;padding:0;} #related-posts ul li{display:block;background:url(/favicon.ico) no-repeat; padding:0 0 1px 21px;margin-bottom:3px;line-height:1.6em; border-bottom:1px dotted #cccccc;} #related-posts ul li a{background:#fff;display:block;} #related-posts ul li a:hover{background:#E9F5FB;} </style> <script src='https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/dvslabs/relatedpost-icon.js' type='text/javascript'/> </b:if> </head>
Kalau gambarnya ingin dirubah, tinggal ganti saja favicon.ico dengan url image yang kamu kehendaki
Kedua, Cari kode berikut
<data:post.body/>
Kode itu berfungsi untuk menampilkan isi post/ konten. Untuk beberapa template mungkin ada beberapa kode serupa, tapi pastikan cari kode itu untuk bagian single post atau halaman posting biasa (bukan homepage/ static), dan biasanya ditandai dengan id “item”. Setelah itu tambahkan kode di bawah setelah kode tadi:
<b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <font face='Arial' size='3'><b>Related Posts : </b></font> <font color='#FFFFFF'><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=7"' type='text/javascript'/></b:if></b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div> </b:if>
Kode max-results=7 (lihat line 7) menunjukkan jumlah post maksimal atau artikel berkaitan yang akan tampil pada setiap halamannya, sesuaikan saja sesuai kehendakmu, dan selesai. Untuk widget keren lainnya, silahkan baca juga Widget Navigasi Halaman Cantik untuk Blogger. Oke deh, selamat mencoba! Adapted from my EN version : Related Post with Icon Widget for Blogger
Gan Saya Izin Comot Code Nya Buat Saya Pasang Diblog Saya Mudah mudahan Ga Jadi berat
Loading Nya hehehe ๐
Tentu silahkan gan, ringan aja kok…
Sayangnya menggunakan JS yah kang, tambah lelet donk blog saya ๐
trims atas sharingnnya ๐
js-nya kecil banget kok, cuma 1.36kb cek aja, download file ini http://dvslabs.googlecode.com/files/relatedpost-icon.js
oya bang. tolong bs bantu aku ndak kasih cara n solusi hebat biar load page di bloggu g berat, biar bisa punya kaya abang dpt Nila AA semua keren2 ? masa size logku ampe 1 MB gtu. 10Second lagi hmmmm. aku dah baca artikel milik agan soal cara mempercepat loading blog cma aku blm paham msh rumit rasanya. ada cara yg lbh simple g gan? tolong send di emailku ya. ary_caesar.inc46@yahoo.com
di tunggu gan bantuannya. makasih
Klo pengennya simple dan instan ya gak mungkin juga, karena kita tau proses loading sebuah halaman melibatkan banyak unsur. silahkan tes blognya di sini http://gtmetrix.com nanti disitu dijelaskan apa saja yang hal yang perlu menjadi koreksi dari yg prioritasnya rendah sampai yg paling penting. kebanyakan yg sya tulis juga sebenarnya terinspirasi dari kebutuhan dan performa utk blog ini berdasarkan tolak ukur dari site di atas, jadi gak bakalan jauh bgt patokannya.
Makasih buat infonya mas. kren2 disini artikelnya ya. sangat membantu bgt
Sama-sama, semoga bermanfaat ya…
wahh boleh juga related postnya bang. cma kira2 bikin load page nambah berat g ya ntar.
Nggak kok, kan iconnya sudah ada dari blognya sendiri, jadi gak nambah http request lagi