Breaking News
Loading...
Rabu, 09 Mei 2012

Membuat Artikel Terkait dengan Fungsi Scroll

15.52
Artikel terkait / Related Post betujuan agar pengunjung blog agan lebih mudah dalam mencari artikel yang berhubungan dengan label tertentu. Pada postingan kali ini ane akan membahas cara membuat artikel terkait dengan fungsi scroll.

Kelebihan artikel terkait dengan fungsi scroll ini agar saat postingan agan sudah banyak, tidak memakan terlalu banyak tempat.



Langsung saja ikuti langkah-langkah berikut.

1. Masuk ke akun blog agan pilih tata letak
2. Pilih edit HTML jangan lupa Expand Template Widget. Download full template untuk menghindari kesalahan.
3. Cari kode <data:post.body/> dan letakkan kode di bawah ini sesudah kode <data:post.body/> :


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Related Post</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 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 50;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
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 &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
<small><p>Widget by [ <a href='http://agan53.blogspot.com' target='new'>Agan53</a> ]</p></small>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>



4. Selanjutnya cari kode ]]></b:skin>
5. Pasang kode di bawah ini diatas kode ]]></b:skin> tadi.

.rbbox{border: 1px solid #D8D8D8;padding: 5px;
background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}

Disana ada tulisan Related Post yang berwarna merah yang bisa diganti dengan teks favorit agan. Untuk kode warna juga demikian, sesuaikan dengan desain template agan. Sekarang coba lihat salah satu posting agan. Maka Artikel Terkait / Related Post dengan scroll akan berada di bawah posting. Tampilannya pun lebih rapi dengan kotak yang mengelilingi widget ini. Mudah bukan, oke selamat mencoba. ^_^

Good Luck !!

0 komentar:

Posting Komentar

 
Toggle Footer