Artikel/Posting Terkait dengan atau tanpa Scroll Bar
Tabel Konten
Jika kalian merasa tidak suka dengan gaya artikel/posting terkait dengan gambar/thumbnail, berikut ini adalah model elemen posting terkait berbentuk daftar yang lebih sederhana dan praktis:

Untuk membuatnya, ikutilah langkah-langkah kebenaran Saya ini:
- Masuk ke tab Rancangan, kemudian pilih Edit HTML. Cek Expand Template Widget agar seluruh elemen pembangun posting tampil.
- Salin kode pemodel ini, kemudian letakkan di atas kode
</style>
atau]]></b:skin>
:#mamas-topik { margin-top:100px; clear:both; display:block; } .paling-ganteng { border:2px solid #666; padding:5px; background-color:#efefef; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:inset 0 0 7px #666; -moz-box-shadow:inset 0 0 7px #666; box-shadow:inset 0 0 7px #666; } .paling-ganteng:hover {background:#f9f9f9;} .sedunia { padding:10px; border:1px solid #bbb; height:165px; overflow:auto; }
- Setelah itu salin juga kode ini:
<b:if cond='data:blog.pageType == "item"'> <div id='mamas-topik'> <h2>Tutorial Sejenis:</h2> <div class='paling-ganteng'> <div class='sedunia'> <div id='hompimpa'/> <script type='text/javascript'> var homeUrl3 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 7; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 50; maxNumberOfLabels = 7; function listEntries10(json) { var ul = document.createElement('ul'); var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i < maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } var li = document.createElement('li'); var a = document.createElement('a'); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l < json.feed.link.length; l++) { if (json.feed.link[l].rel == 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k<20; k++) label = label.replace("%20", " "); var txt = document.createTextNode(label); var h = document.createElement('b'); h.appendChild(txt); var div1 = document.createElement('div'); div1.appendChild(h); div1.appendChild(ul); document.getElementById('hompimpa').appendChild(div1); } } } function search10(query, label) { var script = document.createElement('script'); script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=listEntries10'); script.setAttribute('type', 'text/javascript'); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = "<data:label.name/>"; var test = 0; for (var i = 0; i < labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length <= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel < maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div> </div> </div> </b:if>
Kemudian letakkan tepat di bawah kode yang tampak seperti ini:
<data:post.body/>
atau seperti ini:
<p><data:post.body/></p>
atau seperti ini:
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
- Klik Simpan Template dan lihat hasilnya (pada halaman item).
Sedikit Penyesuaian:
- Ganti kode yang Saya beri warna merah (Saya harap Anda tidak buta warna) dengan judul yang kalian inginkan.
- Di situ juga terdapat beberapa variabel yang bisa kalian utak-atik, tapi Saya rasa itu tidak telalu penting. Langsung simpan saja.
- Jika kalian tidak menghendaki scroll bar dalam elemen ini, hapus saja deklarasi
overflow:auto;
dan ganti value165px
dalam propertiheight:
denganauto
sehingga hasilnya menjadi seperti ini:
Dengan begitu tampilan scroll bar akan hilang, sementara tinggi artikel/posting terkaitmu akan menyesuaikan diri dengan banyaknya daftar yang ada di dalamnya..sedunia { padding:10px; border:1px solid #bbb; height:auto; }
20 Komentar
Admin
wah menarik sekali nih tutornya bt di pelajarin ...
Unknown
Maaf mas ga nyambung. Daftar saja di alexa > site tool > claim site
Sang Blogger
Trims banyak gan, tutorialnya sangat membantu sekali, kebetulan blog saya baru jadi, dan pengen buat seperti yg dimaksud di atas. o y gan, ijin copas ya,,,..
Anonim
mau nyoba tapi nanti ahh kalo udah templatenya saya fix :P
Unknown
kode data:post.body/ nya ga cuma 1 mas
aduh, gimana ya mas ??? banyak bgt...
taruh dimana mas ???
sudah tak coba taruh di yang pertama malah ga jadi...
saya ada 7 mas taufik...
trus ada banyak kode b:if cond='data:blog.pageType == "item"'><data:post.body/
,,,
dah aku coba taruh di bawahnya,, gagal hu :(
Taufik Nurrohman
@trii waluyo Haha... :D Berarti templatemu sangar! Ada tujuh???? @@,
Kalau gitu taruh saja di sekitar kode yang mudah terlihat. Coba taruh di atas kode
<div class='post-footer'>
. Pada intinya sebenarnya adalah tentang bagaimana kita bisa menampilkan daftar artikel terkait di bawah posting.Bahkan kalau mau meletakkannya di atas posting juga bisa. Di atas judul! Tinggal cari tahu saja elemennya di mana.
Unknown
mas, kogh munculnya di atas posting sih, Gimana donk..???
caba liat deh mas URL dibawah ini..
http://blogriefs.blogspot.com/
Taufik Nurrohman
@Riefky Sucahyo Pindah kode artikel terkait di atas menjadi di atas
<div class='post-footer'>
Unknown
@Taufik Nurrohman
ok mas berhasil nih trick nya makasih ya... \o/
Unknown
mas, saya sedang mencari tutorial untuk membuat recents post supaya bisa tampil tapi tidak mempengaruhi gambar. trims atas jawabannya nanti saya dicolek.
Taufik Nurrohman
@Paparapzio Holic Nggak mudeng <=)
marco
mas, klo maxNumberOfLabels = 1; tapi urutannya dari belakang,
atau yang mau ditampilkan adalah label dengan urutan yang terakhir, gmn mas?
(slx kami coba ngisi maxNumberOfLabels = 1;, tapi yg ditampilkan adalah label urutan pertama).
Taufik Nurrohman
Kurang tahu. JavaScript ini bukan Saya yang buat. Coba ganti
appendChild
keprependChild
dulu:marco
sudah dicoba, tp gak berhasil mas.
tapi stlh utak-atik, dan coba:
function search10(query, label) {
...
document.documentElement.firstChild.appendChild(script);
}
'firstChild' diganti dengan 'lastChild', berhasil mas.
urutan label-nya, dimulai dari urutan label terakhir... hehehehe
Unknown
Mas Taufik, kode untuk membuat related post seperti punya sampeyan bagaimana? Maksud saya, yang menampilkan semua judul posting per labelnya. Sejauh ini, saya mencari-cari belum ketemu. Yang ada hanya semua judul tanpa Label, atau dengan label tetapi yang terkait dalam satu label saja. Kalau milik sampeyan saya lihat kan tampil semua mas dari setiap label. Makasih mas. :)
kang olis
salam...pak kalo artikel terkait dibuat bersebelahan dengan email langganan bagaimana? terima kasih
blog saya
home-edukasi2.blogspot.com
Yusuf
ini yang saya cari-cari..
bolak sana-sini gak ketemu. ehh ternyata DTE ada yang seperti ini
thanks sob..
Randy
bang kalo artikel terkait cuma ngambil last label alias label terakhir gimana bang?
Ijal Fauzi
Supaya nama labelnya ngga muncul gimana mas?
Taufik Nurrohman
Hapus kode ini: