Cara Memodifikasi Related Post / Artikel Terkait Sehingga Memiliki Fungsi Scroll

ok deh langsung saja,,kali ini kita akan mengulas tentang bagaimana cara mengubah tampilan related post atau bahasa kitanya artikel terkait di bawah posting yang memiliki fungsi scroll? Kita Sebut saja dengan nama Related Post With Scroll yaitu related post yang ditampilkan dalam bentuk menu scroll. Contohnya seperti gambar di bawah ini :

Bagi anda yang ingin tau bagaimana cara membuat Artikel terkait sepeti di atas silakan ikuti langkah-langkah di bawah inii :

1. Login Ke Blogger
2. Pilih Tata Letak
3. Klik Edit HTML
4. Klik kotak kecil  expand . .
5. Cari kode seperti ini <data:post.body/>

    (Biar cepat ketemu, tekan CTRL+F tar masukin aja <data:post.body> ke kotak yang tesedia)

6. Copy kode di bawah ini dan dan simpan di bawah kode <data:post.body/>
<b:if cond='data:blog.pageType == "item"'><br /> <br/><br /> <br/><br /> <H2>Artikel Terkait:</H2> <div class='rbbox'> <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <div id='albri'/> <script type='text/javascript'> var homeUrl3 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 10; 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('albri').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><br /> </div> <script type="text/javascript">RelPost();</script><br /> </div> </b:if>

7.  Cari kode ini : ]]></b:skin>
8.  Copy kode di bawah ini dan paste di atas kode ]]></b:skin>

    .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);}

9. terakhir Save template

Selesai, dan lihat hasilnya . .

Posted in: