Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Artikel Terkait Dibawah Posting Blog

widget related post atau artikel terkait Membuat Artikel Terkait Dibawah Posting Blog – tentu widget ini sudah tidak asing lagi keberadaanya didalam sebuah blog, widget yang sudah familiar dengan setiap artikel halaman blog dan banyak di gunakan oleh para blogger untuk menampilkan judul dari halaman artikel yang terkait atau istilah lainnya biasa di sebut-sebut related post. Memang sudah banyak widget artikel terkait yang lebih bagus dan dengan berbagai gaya, di antaranya mulai dari yang sudah dilengkapi icon thumbnail maupun tooltip dan yang lainnya. Namun pada tutorial ini saya akan membahas untuk membuat widget artikel terkait yang sederhana dan menurut saya lebih simple. Untuk memasang widget artikel terkait dibawah posting blog caranya cukup mudah. Apabila blog yang di gunakan belum terdapat widget artikel terkait bisa mengikuti langkah-langkah yang terdapat dibawah. Berikut tutorialnya untuk Membuat Artikel Terkait Dibawah Posting Blog.

1. Login ke akun blogger.
2. Copy kode berikut ini lalu taruh di atas kode ]]></b:skin>
#related-posts {clear: both;border:2px solid #52e052;}
#related-posts h2{color: #000;background-color: #52e052;padding:5px 5px 5px 10px;}
#related-posts ul{padding: 0;list-style: none;margin:0px;}
#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;background: #222;}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {padding: 5px 5px 5px 10px;display: block;color: #fff;text-decoration: none;cursor: pointer; transition: padding-left 250ms ease-out;}
#related-posts ul li a:hover {padding-left: 20px;background: #111;}
3. Copy kode berikut ini lalu taruh di bawah kode <data:post.body/> atau bisa juga <div class='post-footer'>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/related-post.js'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'/><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=5&quot;' type='text/javascript'/></b:if></b:loop>
<h2>Artikel Terkait</h2>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
4. Langkah terakhir Simpan template.

Perlu diperhatikan dalam langkah pemasangannya, biasanya didalam template blog terdapat 2 atau 3 kode <data:post.body/>. Anda bisa menaruh kode tersebut pada kode yang terakhir, namun apabila kurang sesuai maka silahkan di coba saja pada kode yang pertama atau kedua. Jika menaruhnya pada kode <div class='post-footer'> biasanya terdapat 2 kode tersebut. Anda bisa menaruhnya pada kode yang terakhir, namun apabila kurang tepat dengan template blog anda silahkan di coba saja pada kode yang pertama.

Berlangganan artikel via email

94 Response to "Membuat Artikel Terkait Dibawah Posting Blog"

langsung saya coba nih mas, kebetulan blog saya belum ada widget related post-nya

Balas

tmpilan nya cocok bnget nih buat template nya sobat..
klo di blog ane cocok gk ya..??

Balas

tapi nggak muncul di blog saya :(

Balas

kalo tidak muncul coba di bawah kode <data:post.body/> mas

Balas
avatar
Anonymous

Sob, saya mau nanya nih, kode widget related post di atas udah valid HTML5 nda?

Balas

Betul betul betul mas...tp keren ini mas ada efeknya gitu

Balas
avatar
Anonymous

sebenernya saya juga pengen yang simpel2, tapi itu di blog udah bawaan templatenya, ditambah males juga kalo edit template hehe :D
thank you mas Andes

Balas

yang warna biru ada nggak mas, biar mecing sama template blog saya :D

Balas

ubah warna #52e052 dengan warna kesukaan Kang Ucup

Balas

valid HTML5 sekaligus CSS3 mas

Balas

sip mas, terima kasih nih atas petunjuk-nya

Balas

bagus sekali hasilnya mas andes simple :-d

Balas

wah, sy jg punya tuw related post, emang mantab buat nambahing pageview...
:D

Balas

pake tutorial artikel terkait ala blog ini emang rada nyeni dan nyentrik juga ya...pas ditempelin kursor...artikel terkaitnya bisa goyang itik deh ih....;o)

Balas
avatar
Anonymous

artikle dibawah postingan sudah diterapkan mas khusus untuk blog baru saya mas mantap scriptnya mas.

Balas

tapi itu kok agak geser kesamping gitu memangnya sengaja, apa tampilan rubah sendiri kang :) hehehe

Balas

Ok sob nanti aku coba di blogku yg satunya ya dan makasih atas responnya.. (y)

Balas

kunjungan pertama kali sobat salam kenal, oh iya saya belum praktekin untuk yang ini soalnya di template bawaan sudah ada, hehe eh iya blog nya sudah saya follow lho ya, di tunggu silahturahminya di ikerenki.blogspot.com

Balas

saya cuma ganti warnanya saja mas, wah iya ya...saya malah baru nyadar.
list-nya yang muncul juga 5 artikel saja

Balas

mantep mas.. jgn lupa kunjungan baliknya :)

Balas

sepertinya lebih menarik simpel dan ringan sob, daripada Related post yang saya gunakan, ijin copy sob

Balas
avatar
Anonymous

Wah keren :D
tapi template saya sudah ada related postnya hehe nice infoh mastah :D

Balas
avatar
Anonymous

Langsung Coba :D
haha makasii yahh gan Infonya sangattt Bermanfatt :D

Balas

keren mas widget related post nya :D blog saya kebetulan sudah ada widget tersebut bawaan dari template nya hehehe :D

izin koleksi kode nya aja dech hehehe ^^ siapa tahu bermanfaat untuk besokbesok :) thanks mas andes :)

Balas

Lama tak muncul disini mas .. makin ganteng aja sih hehe

Balas

kalo mau benerin biar rata atur marginnya kang, kalo untuk menampilkan jumlah list atur pada var maxresults=5; bisa ganti angka 10 ato berapa terserah kang Ucup saja :)

Balas

sama2 mas, silahkan misal mau coba :)

Balas

silahkan mas Arie :)

Balas

alhamdulillah kang Rul yang penting gak makin cantik yah :)

Balas

silahkan mbak eka :) bisa buat nambahin koleksi kulkas hehehe..

Balas

maxresults-nya sudah saya ganti 25, kalau margin masih tetap seperti semula. coba nanti tak coba benerin posisinya.

Balas

Boleh juga mas Andes artikel terkait di bawah postingan blognya, cuma saya sudah terlanjur pasang, mungkin besok-besok saya ganti pake punyanya mas Andes ah...

Balas

sipp mas segera meluncur :)

Balas

ga takut dosa tuh mas kalo pindah ke lain hati :D haha

Balas

ahaha goyang itik, ada2 aja nih pak Ci :)

Balas

adminnya lebih bagus mas :) hiks,,

Balas

efek goyang itik mas katanya pak Cilembu :)

Balas

sama mas saya juga kadang males kalo edit template :) kalo lagi kumat doang mau edit template hehe..

Balas

iya mas terimakasih kunjungannya, follback segera muncul di blognya mas Jhonas :)

Balas

sambil goyang itik pasti tambah manteb mas :) ehehe

Balas
avatar
Anonymous

Menarik Mas, ikutan ambil nih Mas..
buat koleksi artikel terkait di bawah
Postingan kebetulan di template saya gak ada
Terima kasih Mas.Andes

Balas

Ilmu Baru baru lagi buat saya Mas
Izin simak dan izin belajar, praktek nih Mas Andes

Balas
avatar
Anonymous

manteeppp kang...

Balas

Wah...tampilan related post nya cantik...ya mas...
Pas nih....buat yg suka sama yg cantik2 hehe :)

Balas

Sebaiknya di taro dalam gentong aja mas..hehe :)

Balas

Ternyata di komputer saya sudah banyak sekali mas script-script widget blog. Sepertinya mau saya simpan di panci aja mas, biar nggak penuh hehe :)

Balas

mudah-mudahan admin nya nggak ikut-ikutan cantik ya mas bud hehe :)

Balas

Bener Mas Karis, ide nya mas andes memang mengalir terus. Ada aja hal yang baru untuk di share. :)

Balas

ora mudeng aku mas... heheh untung tinggal dicopas aja..

Balas

Terima kasih sharenya... dari dulu belajar tapi ga masuk2 ke otak... ada solusi??

Balas

cocok.. kalau tagnya lebih dari satu apa gak kepanjangan entar?!>.

Balas

di masak sekalian mb , hehehe

Balas
avatar
Anonymous

Gan Mohon Bantuannya Koq Di Blog saya Kagak Muncul Yahh ??
Kira" Salahnya Sebelah Mana yahh??

Balas
avatar
Anonymous

Artikelnya sangat bermanfaat gan,,,thanks for share :)

Balas
avatar
Anonymous

keren sekali bro artikel terkaitnya :D

Balas

Mas Andes sama mbak Rin...sebelas dua belas.. ...deh jagonya :)

Balas

Buruan mas...mumpung blm di suruh bayar :)

Balas

Tergantung situasi dan keadaan..barangkali mbak ...hehe :)
Lariiiii.... :)

Balas

Mas andes dan m'ba ririn sebelas dua belas, kalau saya dengan kang Budi os 19 sepuluh dua puluh ya kang....;o)

Balas

mudah-mudahan enggak yah mas hehe...

Balas

cantik dan imut bikin jatuh hati...

Balas

sekarang gratis besok bayar :)

Balas

atur jumlah list yang mau di tampilkan pada var maxresults=5; itu berarti jumlah maksimal yang di tampilkan

Balas
avatar
Anonymous

dari kemarin saya utak atik ini kok ndak muncul padahal sudah tersimpan ... nanti saya coba lagi ...

Balas

dititip ke saya juga boleh scripnya...

Balas

ternyata sudah pada pasang ya mas Eka.. kok saya belum ya...

Balas

hati siapa yang jatuh mas hehehe

Balas

di prit dulu mas pakai kertas hvs terus di bakar dan abunya dibuat kopi

Balas

hehe kurang tepat mungkin mang, emang taruh kodenya dimana.. soalnya tiap template beda2.. mungkin bisa saya bantuin mamang :)

Balas

kodenya di situ mas sesuai perintah tapi belum saya coba ding pada kode yang kedua soalnya ada dua kodenya ...cobalagi ya mas... mudah mudahan bisa...

Balas

kalo sesuai petunjuk di atas pasti muncul mas :)

Balas

silahkan mang kalo ada kesulitan bisa tanya lagi ntar saya bantu :)

Balas

artikel terkait itu memang sangat perlu dan penting. Demi mempromosikan artikel lawas. Pengunjung akan dibuat betah berlama-lama memanteng blog kita.

Balas

mas andes, kalau supaya bisa di scroll gimana mas, supaya bisa ngirit tempat maksudnya.

Balas

Mas Andes Memang sebelas dua belas tiga belas, dan 14,
Sama Mbak Rin, Mas Budi, Mas Cilembu. tt3t3t3t3t3t
Entah yang ke 15 dan seterus nya siapa yah..?
Yang jelas saya belum bisa menduduki kursi jabatan itu hhkkhk

Balas

Berarti Neng "Zaskia Rizky Nugroho" dong ya Mas Andes.? hhhhh

Balas

Mas Andes di tunggu di Rumah saya ada yang nyari-nyari nih hhhh

Balas

Wah keren dong Mbak Rin.. banyak script simpananya
Kalau sudah kumpul semua di rebus saja Yah Mbak hehhehh

Balas

Ini tt3t3t3t3t3t kode CSS baru ya mas karis hehe :)

Balas

Iya mas karis untuk disuguhkan kepada tamu dirumah hehe :)
Script rebus ala ririn hehe ^_+

Balas

owh begitu ya mas bud, hehe :)
saya mau ikutan kabur dech kalau begitu hehe :)

Balas

Kebetulan postingan Mas Andes ini sudah
Boronga semua tuh Mas Budi dan Mas Anthonie..hhhh

Balas

Saya juga seneng koq Mas Bud yang cantik-cantik mah.? hhh

Balas

Mbak Rin..? kalau Mas Admin Cantik biasa Rempong deh Boo.?
Jangan deh akh.. Masa Mas Andes Cantik sih Mbak..? tt3tt3tt3

Balas

tt3tt3tt3 bener Mbak Mbak Rin, itu kompilasi Perpaduan
Validasi W3C juga ChkMe dan terus labas ke WC gara2
Kebanyakan Makan semangka nya Mas Budi tt3tt3tt3tt3

Balas
avatar
Anonymous

Tuh yah? kesrimped lagi gara-gara Mas Budi sih..?
Jadi nya nyebut Mbak Rin menjadi Mbak-Mbak an
tt3tt3tt3, Mas Budi Mas Anthonie pulang belum yh?

Balas

mas scrip ini bikin ada link http://24work.blogspot.com/
yang ada di blog sampean juga

Balas

oke.. sekarang giliran author box yang di pasang blog sampean mas, pasang kode ini.
<span style='font:10px arial;float:right;padding-top:5px;'><a href='http://mas-andes.blogspot.com/2013/09/membuat-widget-author-box-blogger.html' target='_blank'>[ Get This Widget ]</a></span>

Balas

Masih kebagian gak Mbak Rin Rebus Script nya
Say minta satu pincuk saja yah,. gak pakai sambal
tt3tt3tt3tt3tt3

Balas

Masih cakep keren dan cantik juga nih artikel Mas Andes

Balas

Artikel Mas Andes ini sudah saya pasang di blog saya
Supaya bisa jadi satu sama artikel terbaru saya dalam satu
Scrol apa yang harus di tambah dan di edit script nya Mas?
Mohon pencerahanya,. terima kasih

Balas

Mas pada script CSS artikel terkait postingan Mas Andes ini
Masih ada laporan Warning mohon pencerahanya
Pada bagian #related-posts ul li {border-top: 1px solid #FBB207;border-bottom: 1px solid #111;background: #fff;}

ada effects error nya gak buat validasi CSS3 nya Mas? soalnya warning

Balas

Coba saya terapkan dulu mas, thank's for share ...

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Artikel Terkait Dibawah Posting Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode