Artikel/Posting Terkait dengan atau tanpa Scroll Bar
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:
.sedunia { padding:10px; border:1px solid #bbb; height:auto; }
Dengan begitu tampilan scroll bar akan hilang, sementara tinggi artikel/posting terkaitmu akan menyesuaikan diri dengan banyaknya daftar yang ada di dalamnya.
Labels: Blogger
20 Comments:
wah menarik sekali nih tutornya bt di pelajarin ...
Maaf mas ga nyambung. Daftar saja di alexa > site tool > claim site
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,,,..
mau nyoba tapi nanti ahh kalo udah templatenya saya fix :P
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 :(
@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.
mas, kogh munculnya di atas posting sih, Gimana donk..???
caba liat deh mas URL dibawah ini..
http://blogriefs.blogspot.com/
@Riefky Sucahyo Pindah kode artikel terkait di atas menjadi di atas <div class='post-footer'>
@Taufik Nurrohman
ok mas berhasil nih trick nya makasih ya... \o/
mas, saya sedang mencari tutorial untuk membuat recents post supaya bisa tampil tapi tidak mempengaruhi gambar. trims atas jawabannya nanti saya dicolek.
@Paparapzio Holic Nggak mudeng <=)
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).
Kurang tahu. JavaScript ini bukan Saya yang buat. Coba ganti appendChild ke prependChild dulu:
document.getElementById('hompimpa').prependChild(div1);
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
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. :)
salam...pak kalo artikel terkait dibuat bersebelahan dengan email langganan bagaimana? terima kasih
blog saya home-edukasi2.blogspot.com
ini yang saya cari-cari..
bolak sana-sini gak ketemu. ehh ternyata DTE ada yang seperti ini
thanks sob..
bang kalo artikel terkait cuma ngambil last label alias label terakhir gimana bang?
Supaya nama labelnya ngga muncul gimana mas?
Hapus kode ini:
div1.appendChild(h);
Post a Comment
<< Home