Cara membuat Daftar Isi Otomatis di Blog versi 2

setelah dulu saya sudah pernah mosting tentang Cara membuat Daftar Isi Otomatis di Blog kali ini saya akan membahas hal yang sama tapi daftar isi yang satu ini lebih bagus dari sebelumnya screenshotnya disebelah kanan(klik untuk memperbesar) oke deh kalo udah penasaran langsung aja kita mulai tapi sebelum itu follow blog saya dulu dong kalo udah follow kita mulai:

1.Login ke akun blogger anda
2.Pilih tab rancangan
3.Pilih Edit html
4.Cari kode <b:skin><![CDATA[ (gunakan f3 agar lebih mudah mencari)
5.Kalo udah ketemu letakkan kode dibawah ini dibawah kode <b:skin><![CDATA[

.judul-label{background:-moz-linear-gradient(top,#393e41,#000);font-weight:bold;line-height:1.4em;margin-bottom:5px;overflow:hidden;vertical-align:baseline;margin:0 2px;outline:none;cursor:pointer;text-decoration:none;font:14px/100% Arial,Helvetica,sans-serif;padding:.5em 2em .55em;text-shadow: 1px 1px rgba(0,0,0,.3);-webkit-border-radius:.5em;-moz-border-radius:.5em;border-radius:.5em;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);-moz-box-shadow:1px 1px 4px #aaa;box-shadow: 1px 2px rgba(0,0,0,.2);color:#e9e9e9;border:2px solid white !important;background:#0000fff }.judul-label,.data-list{white-space:nowrap}.data-list{font:12px comic sans ms /1.5em;margin-:5px;padding-left:20px;15px;text-align:left;left}.list-ganjil,.list-genap{background:#000;color:#51a104;border-top:1px solid #f00;border-bottom:1px solid #f00}.headactive,.headactive{color:#fff;border:2px solid:#c0c0c0;!important;background:#d11717;background:-moz-linear-gradient(top,#d11717,#8c0000)}

6.kalo udah tinggal di simpan deh

LANGKAH INI BELUM SELESAI MASIH ADA LANGKAH SELANJUTNYA

untuk memanggil kode tersebut kita harus membuat sebuah postingan baru ikuti langkah-langkah berikut:

1.Login ke akun blogger anda

2.Pilih tab entri baru

3.Pilih Edit html

 

masukkan kode dibawah ini dikotak yang telah disediakan

<script src="https://sites.google.com/site/webmiftah/js/wm2.js">

</script>
<script src="http://webmiftah.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="https://sites.google.com/site/webmiftah/js/wm.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/webmiftah/js/wm3.js" type="text/javascript">
</script>

kalo udah tinggal di terbitkan deh

contoh bisa dilihat disini

keterangan:kode yang berwarna biru ganti dengan url blog anda

SELAMAT MENCOBA

Cara membuat Daftar Isi Otomatis di Blog

Sama halnya seperti buku blog juga ada yang memiliki daftar isi,daftar isi sangat diperlukan di blog sebab apa?jika blog kita sudah mempunyai banyak postingan tapi gak ada daftar isi pasti pengunjung akan kesulitan untuk mengetahui postingan kita yang lainnya.Tapi,sebelum baca artikel ini anda diwajibkan untuk follow di blog ini dan kasih konfirmasi dengan cara berkomentar.Yaudah langsung aJa kita ke TKP:

1.Login ke akun blogger anda
2.Pilih tab rancangan
3.Klik tab elemen laman
4.Klik tambah gadget
5.Kemudian pilih yang HTML/Java Script
6.Masukkan kode dibawah ini di kotak yang telah disediakan

<script src="https://sites.google.com/site/webmiftah/js/daftarisiv2pack.js"></script>

<script src="http://webmiftah.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

<script type="text/javascript">

var accToc=true;

</script>

<script src="https://sites.google.com/site/webmiftah/js/accordion-pack.js" type="text/javascript"></script>

7.kalo udah tinggal di save dan lihat hasilnya

Keterangan:Ganti tulisan webmiftah.blogspot.com dengan url blog anda
                 Kalo gak bisa jangan panik ada cara kedua


Cara kedua :



1.Login ke akun blogger anda
2.Pilih tab rancangan
3.Klik tab elemen laman
4.Klik tambah gadget
5.Kemudian pilih yang HTML/Java Script
6.Masukkan kode dibawah ini di kotak yang telah disediakan

<div style="background-color: rgb(000, 000, 000); border: 1px solid #ccc; height: 300px; overflow: auto; padding: 5px; width: 500px;">
<div align="left">
Label: <span id="pbl_labels"></span>

<div id="pbl_posts">
Recent Posts </div>


<script type="text/javascript">
var jumlah_maksimum_post = 100;var dengan_ringkasan = false;var jumlah_karakter_ringkasan = 100;
</script>


<script src="https://sites.google.com/site/webmiftah/js/recentpostsbylabel.js">
</script>


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

7.kalo udah tinggal di save dan lihat hasilnya

Keterangan:Ganti tulisan webmiftah.blogspot.com dengan url blog anda

 SELAMAT MENCOBA

Cara Membuat Read More Otomatis Versi 2

Kayaknya ni tutorial dah banyak yang tau tapi gak papa deh siapa tau ada yang masih belum ngerti caranya.
Sesuai namanya readmore versi 2 ini berbeda dengan versi sebelumnya yaitu versi 1  karena read more ini bisa otomatis tanpa harus mengatur batas perpotongan text secara manual jadi gak perlu susah-susah mengatur posisi perpotomgan text dengan menaruh text sebelum kode <span class="fullpost"> dan sisanya sebelum kode </span>

Readmore versi 2 ini juga dapat menampilkan gambar pertama postingan kita untuk mewakili isi dari postingan kita.Masih gak ngerti? ya udah langsung aja ke tutorialnya biar kagak pusing-pusing hehehehehe

Bagi Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja) tapi kalo belum pernah pasang yang versi lama langkah yang satu ini lewati saja

<div class='post-header-line-1'/>
<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>

<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>

<a expr:href='data:post.url'>Readmore</a>
</b:if>

<div style='clear: both;'/>

OK, kalo sudah tinggal lanjutkan ke tahap selanjutnya:

1. login dulu ke akun Blogger kamu
2. Pilih Rancangan
3. Edit HTML
4. Di Backup dulu templatenya biar gak ilang
5.centang Expand Template Widget
6.Letakkan kode berikut di atas kode </head>

<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>

7. Cari kode <p><data:post.body/></p> atau <data:post.body/> (Gunakan ctrl+f agar mudah mencarinya) dan ganti kode tersebut dengan kode berikut:

<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</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

 
8.Lalu save templatenya

oke dah selesai kalo pengen tulisan readmorenya jadi gambar klik disini