Membuat Daftar Isi Blog Pada Halaman Artikel Bag I

Bagi blog yang sudah memiliki banyak tulisan dengan kategori yang bebeda-beda, menambahkan TagCloud dan Blog Archieve saja tidaklah cukup. Karena itu perlu adanya penambahan site map (peta situs), yang dalam hal ini adalah daftar isi (table of content), dimana dengan daftar isi ini setiap pengunjung dapat melihat keseluruhan artikel yang terdapat di dalam blog tersebut melalui judul-judul artikel yang ditayangkan.

Ada beberapa bentuk daftar isi (table of content) yang biasa digunakan para blogger, mulai yang disimpan pada halaman artikel, widget sidebar, sampai yang dibuat sebagai halaman blog. Nah, kali ini saya akan coba membahas tentang table of content yang ditempatkan pada halaman artikel.

Pada tulisan pertama ini akan dibahas mengenai daftar isi (table of content) yang dibuat oleh Abu Farhan, salah seorang Master Blogger kita yang sudah sangat terkenal hingga manca negara. Ada dua jenis yang ia buat: Pertama, daftar isi yang diurutkan berdasarkan kategori atau label, dan kedua, diurutkan berdasarkan tanggal posting.

Daftar Isi Berdasarkan Label

Contoh daftar isi ini bisa kamu lihat di blog ini. Dan cara membuatnya:

• Seperti biasa, login ke Blogger.
• Kemudian buat sebuah Entri Baru atau Laman Baru dan pilih Edit HTML.
• Berilah judul, misalnya: Daftar Isi Berdasarkan Label.
• Jika memilih Entri Baru, klik pada Opsi Entri dan setting supaya dipublikasikan mundur (ke tanggal pertama kali kamu posting).
• Kopikan script berikut (gunakan Control C) dan ganti NamaBlog sesuai nama Blog kamu:

  
  <script style="text/javascript" src="http://enes-sc.googlecode.com/files/blogtoc-v1.js"></script>
  <script src="http://NamaBlog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
  

  atau kamu bisa gunakan source script aslinya dari Abu Farhan, dengan mengganti alamat berwarna biru dengan alamat ini:

  
  http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js
  

• Setelah di-paste, klik Terbitkan Entri dan ucapkan Alhamdulillah...

Daftar Isi Berdasarkan Tanggal

Contoh daftar isi ini bisa kamu lihat di blog ini. Dan cara membuatnya:

• Langkah ke-1 sampai dengan ke-4 sama dengan di atas.
• Kopikan script berikut dan ganti NamaBlog sesuai nama Blog kamu:

  
  <script style="text/javascript" src="http://enes-sc.googlecode.com/files/blogtoc-v2.js"></script>
  <script src="http://NamaBlog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
  

  atau kamu bisa gunakan source script aslinya dari Abu Farhan, dengan mengganti alamat berwarna biru dengan alamat ini:

  
  http://abu-farhan.com/script/daftarisibloggerarchive/tocbyarchivemin.js
  

• Setelah di-paste, klik Terbitkan Entri dan ucapkan Alhamdulillah...

Sekarang tinggal kamu pilih salah satu dari kedua model daftar isi itu. Atau jika mau kedua-duanya juga boleh, hanya harus dibuat dua halaman berbeda. Setelah itu buatlah link ke daftar isi ini. Link ini bisa kamu tempatkan pada navbar menu atau pada sidebar blog kamu (lebih jelasnya tentang link, silahkan baca artikel ini).
Link-nya misalnya seperti ini (jika memilih entri baru):

<a href="http://NamaBlog.blogspot.com/2009/03/daftar-isi-berdasarkan-label.html">Daftar Isi</a>

atau seperti ini (jika memilih laman baru):

<a href="http://NamaBlog.blogspot.com/p/daftar-isi-berdasarkan-label.html">Daftar Isi</a>

Jika tulisan-tulisan kamu sudah banyak sehingga jika dilihat daftarnya akan sangat panjang, maka buatlah scroll untuk daftar isi ini, seperti daftar isi pada blog ini. Caranya kamu tinggal menambahkan perintah overflow.

Ok coy, selamat mencoba....

Diposting oleh Unknown 23.15 0 komentar

Cara Memasang Artikel Terkait dibawah Postingan

Cara Memasang Artikel Terkait dibawah Postingan  -  Kali ini saya akan membahas Cara Memasang Artikel Terkait dibawah Postingan . Pada dasarnya, Artikel terkait atau Related post ini diletakkan di sidebar, namun pada postingan kali ini saya akan mencoba untuk menempatkan Artikel Terkait tepat dibawah postingan. Sebelum memulai membuat artikel terkait dibawah postingan, sebaiknya buatlah kategori sesuai dengan artikel, karena ini sangat memengaruhi ada tidaknya tampilan artikel terkait. 

Contoh Artikel Terkait dibawah Postingan :

Berikut Tutorialnya :

1. Silahkan login ke Blogger kamu.

2. pilih Rancangan >> Edit HTML >> Ceklis "Expand Template Widget"

3. Cari kode <data:post.body/> 

4. Lalu copy kode berikut tepat dibawah kode tadi

 <b:if cond=data:blog.pageType == &quot;item&quot;> <strong>Artikel Terkait di Bawah posting</strong> <div class=rbbox> <div style=margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;> <div id=ardi33/> <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;ardi33&#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>

5. Simpan Template

Diposting oleh Unknown 17.30 0 komentar