Membuat Daftar Isi Blog

Kotak daftar isi sangat bermanfaat bagi sebuah blog, karena dengan adanya daftar isi akan memudahkan pengunjung untuk mengetahui apa yang ada di dalam blog anda. Selain itu penempatan daftar isi yang strategis juga akan membuat pengunjung tertarik melihat apa yang ada di blog anda. Dan tempat yang menurut saya strategis adalah di bawah postingan, karena secara tidak langsung penggunjung blog anda akan melihatnya setelah mereka membaca postingan anda. Sangat bermanfaat bukan, ayo cobalah membuat daftar isi di bawah posting dan rasakan manfaatnya. 

1. Login dulu di blogger.

2. Klik menu Layout. 

3. Klik menu Edit HTML. 

4. Klik Expand Widgets Template. 

5. Klik download template (buat jaga-jaga). 
6. Carilah kode : <p><data:post.body/></p> 

7. Lalu copy kode di bawah ini dan paste di bawahnya :

     

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
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>
</DIV>
<script type="text/javascript">RelPost();</script>
</DIV>
</b:if>

8. Selanjutnya cari kode : ]]></b:skin> 

9. Copy kode di bawah ini dan paste di bawahnya.   

rbbox{border: 1px solid rgb(192, 192, 192);padding:5px;background-color: #a79999;-moz-border-radius:5px;margin:5px;}.rbbox:hover{background-color: rgb(255, 255, 255);}

10. Simpan Template 

11. Selesai dech.

  (anda dapat merubah background daftar isi dengan mengganti kode #a79999 pada script langkah nomer 9)

Mudah toh,tapi ada satu hal lagi yang perlu di perhatikan, anda harus memberi label yang sama di tiap-tiap postingan supaya judul postingan muncul di kotak tersebut. Kalau belum tahu cara memberi label pada postingan klik saja di sini.

Tweet

Subscribe to receive free email updates: