Ada Tiga Jenis Aplikasi Artikel terkait:
- Alikasi artikel/Posting terkait tanpa gambar/thumbnail. (Yang akan anda baca saat ini)
- Alikasi artikel/Posting terkait dengan gambar dan judul saja.
- Alikasi artikel/Posting terkait dengan gambar, judul, dan deskripsi.
Dan 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 value165pxdalam propertiheight:denganautosehingga 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.
Sumber :
