Fungsi scroll pada related posts atau artikel terkait dibawah postingan blog ini baik sekali diterapkan di blog karena juga memudahkan pengunjung untuk mencari artikel blog yang lainnya dan yang pasti related posts ini juga memberikan dampak untuk meningkatkan pageview blog anda. Nah simak bagaimana cara membuat related post / artikel terkait berada dibawah postingan blog.
Cara Membuat Related Posts dengan Scroll dibawah postingan blog :
1. Login ke blogger.com
2. Pada dasboard, pilih Template => Edit HTML
3. Pencet Ctrl+F, cari kode <data:post.body/> atau <p><data:post.body/></p> copy kode ini dibawahnya
4. Jika ada 2 kode
<data:post.body/> maka pilih kode yang nomor 2 <b:if cond='data:blog.pageType == "item"'><br/><br/><H2>Related Posts</H2> <div class='rbbox'> <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <div id='ardi33'/> <script type='text/javascript'> var homeUrl3 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; 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('ardi33').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> <script type='text/javascript'>RelPost();</script> </div> </b:if>
5. Lalu cari kode
]]></b:skin> dan copypaste kode berikut diatasnya
.rbbox{border: 1px solid rgb(192, 192, 192); padding: 5px;background-color: #f0f0f0; -moz-border-radius:5px; margin:5px; } .rbbox:hover{ background-color: rgb(255, 255, 255); }
6. Simpan Template
Semoga ulasan mengenai cara memasang related posts dengan fungsi scroll dibawah postingan blog dapat bermanfaat.
Related Posts
tutorial blog
- How to Use Pokespy
- Cara Membuat Link Download dari MediaFire
- Menambah Elemen Sidebar Sebelah Kiri di Blogspot
- Cara Mendaftar Blog ke Dmoz
- Begini Cara Daftar Blog di Technorati
- Cara Claim Token Di Technorati
- Menyembunyikan Titel Blog Untuk Diganti Logo Di Header
- Membuat Header dan Menu Navigasi Tidak Bergerak (Tetap Diatas)
- Membuat Ruang Posting Blog Menjadi 2 Kolom Di Homepage
- Static Pages Blogger Bermasalah? Solusinya Begini
- Memasang Widget Cek No Resi JNE, TIKI, Pos Indonesia
- Membagi Elemen Postingan Blog Menjadi Dua Kolom Tanpa Edit HTML
- Cara Mengganti Template Baru di Blogspot
- Membuat Efek Marquee di Blogspot
- Cara Membuat Tabel dan Thumbnail di Postingan Blog
- Cara Membuat Artikel Terbaru Dengan Thumbnail di Blogspot
- Membuat Related Posts Dengan Thumbnail di Bawah Postingan
- Cara Mengganti Warna Link di Blogspot
- Cara Memberi Tombol Scroll di Kotak Komentar Blog
- Cara Membuat Related Posts Super Cepat
- Cara Pasang Tombol Spoiler di Komentar Blogspot Versi 2
- Cara Memasang Google Translate di Blog
- Cara Membuat Blockquote di Postingan Blog
- Inilah Widget Random Post Fast Loading Plus Thumbnail
- Merubah Tampilan Blog Yang Berbeda Pada Homepage dan Halaman Posting
