Daftar Isi dalam sebuah blog sangat dibutuhkan untuk membantu pembaca atau pengunjung blog. Selain itu, daftar isi juga dapat mempercantik blog serta menambah tampilan lebih elegan. Saat ini cukup banyak tutorial Cara Membuat Daftar Isi Blog, hanya saja kebanyakan tutorial yang diberikan Menggunakan script Google Code. Oleh karena layanan Google Code saat ditutup oleh google sehingga tampilan pada blog menjadi blank.


Untuk membantu para blogger khusus blogger pemula, Admin mencoba memberikan tutorial singkat Cara Memasang atau Membuat Daftar Isi Blog Berdasarkan Label tanpa menggunakan google code (googlecode). Contoh contoh hasil silah klik link berikut ini. Silahkan Klik dulu contohnya pada link di bawah ini agar Anda puas, tampil atau tidak di laman blog.


Berikut ini Cara Memasang atau Membuat Daftar Isi Blog Berdasarkan Label tanpa menggunakan google code (googlecode)

1. Login ke Blogger.

2. Selanjutnya pilih Laman  → Laman Baru → pilih Laman Kosong atau juga bisa pilih Entri Baru




3. Kemudian pilih Mode HTML.



4. Berikan judul Daftar Isi, Selanjutnya copy dan pastekan kode script dibawah ini tepat di halaman kosong tersebut :



<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="text-align: justify;">
<blink>= LABEL GURU &nbsp;=</blink></h3>
<div class="similiar">
<div style="border: 0px solid rgb(204 , 204 , 204); height: 600px; overflow: auto; padding: 5px; width: 100%;">
<div class="widget-content">
<div id="data2007">
</div>
<br />
<br />
<script type="text/javascript">
var homeUrl3 = "http://guroe.blogspot.co.id/";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 5;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 5;

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("%40", " ");
var txt = document.createTextNode(label);

var h = document.createElement('b');
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').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;
textLabel = "Guru";
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++;
}
}
</script>
</div>
</div>
</div>
</div>
</div>
</center>
</center>

</div>


5. Ganti semua kode yang dikasih warna merah.

Ganti Tulisan yang berwarna merah pertama dengan ukuran yang diharapkan misalnya 250px; 600px; 900px dan lain-lain

Gantikan Tulisan warna merah yang kedua dengan alamat url blog Anda misalnya http://guroe.blogspot.co.id/

Gantikan Tulislan yang berwarna merah ketiga dengan Label yang ada pada blog Anda 


6. Publikasikan dan selesai.


Selamat Mencoba, Mudahan-mudahan info singkat Cara Memasang atau Membuat Daftar Isi Blog Berdasarkan Label tanpa mengguanakan google code (googlecode) dapat bermanfaat


= Baca Juga =



2 Comments

  1. maaf, kode htmlnya kok tidak bisa di blog?

    ReplyDelete
  2. Hadeh suruh copy paste tapi blognya diprotect gak bisa dicopas/klik kanan

    ReplyDelete

Post a Comment

Previous Post Next Post