Cara membuat widget Daftar isi

Semua blogger ingin blognya masuk dalam daftar mesin pencari dibagian atas, karena itu pasti akan membuat traffiknya meningkat. Tapi selain dari mesin pencari, kita juga harus menebar link posting di blog kita. Kalau lama kelamaan, kita malas juga menebar link.

1. Dasbor > Rancangan / Layout > Tambah / Add gadget

2. Pilih HTML / JavaScript

3. Copy kode dibawah ini

   <div style="background: transparent url(#) no-repeat scroll 0 0; border:1px solid white; height:250px; overflow:auto; width:280px;text-align:left;float:center">
    <div id="cl_option">
    Loading... </div>
    <div id="cl_content_list">
    </div>
    <script type="text/javascript">
    var jumlah_kata_dalam_ringkasan = 200;
    </script>
    <script src="http://sites.google.com/site/kibagusnet/x-design/Daftarisi-hdx.js">


    </script>
    <script src="http://faishal94.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed&amp;max-results=500">


    </script><div style="text-align:center">Cara membuat <a href="http://faishal94.blogspot.com/2011/11/cara-membuat-widget-daftar-isi.html">ini</a></div></div>

4. Paste kode diatas pada kotak konten Kode HTML / JavaScript

Simpan !

Ket:
- ganti faishal94.blogspot.com dengan nama domain blog sobat

READ MORE - Cara membuat widget Daftar isi

Cara pasang Auto Read More terbaru

Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.

Langsung copy paste aja kode dibawah ini:

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>


<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


silahkan disimpan dan lihat hasilnya :)

Keterangan:

var thumbnail_mode = "float";  (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

READ MORE - Cara pasang Auto Read More terbaru