Cara Buat Related Post dengan Fungsi Scroll

Iklan
Untuk memudahkan pengunjung anda melihat daftar isi blog anda ada baiknya anda membuat related post ( Artikel Berhubungan ), related post ini akan berada persis dibawah posting anda, jadi kesimpulannya kalau pengunjung anda membaca artikel anda hingga selesai tentu pengunjung anda akan melihat daftar isi yang mungkin membuat tertarik visitor anda. Related Post ini dilengkapi dengan Fungsi Scroll yang tidak akan membuat panjang halaman Postingan anda.

berikut caranya :

1. Log in
ke akun blogspot.

2. Pilih menu Layout (Tata Letak) » Edit HTML.

3. Beri tanda centang pada Expand Widget Templates.

4. Cari kode berikut. Untuk memudahkan Ctr+f

<p><data:post.body/></p>


5. Copy kode berikut dibawah di atas ;



<b:if cond='data:blog.pageType == "item"'> <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 = 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('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> </DIV> <script type="text/javascript">RelPost();</script> </DIV> </b:if><br />



6. Lalu, copy-paste kode berikut di atas kode ]]></b:skin>

/*-----------------------------
kode related post optimal
visit http://www.manrengat.co.cc------------------------------*/
.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);}

7.
Terakhir, copy kode berikut dan paste di atas kode </head>, kemudian simpan template anda.

<SCRIPT src='http://ateon.fs.googlepages.com/kodescript.js' type='text/javascript'/>
Smoga dengan Tips yang sedikit ini bisa bermanfaat buat anda