Cara Membuat Daftar Isi Nyeleneh

Sebelumnya saya pernah memposting artikel tentang membuat daftar isi Kali ini saya coba membuat sedikit modifikasi. Saya hanya menerapkan penggabungan antara tab view yang berbentuk navigasi seperti virtual pagination, penerapan label dalam tampilan, dan menambahkan thumbnail gambar beserta ringkasan artikel. Untuk thumbnail gambar dan
ringkasan artikel saya pergunakan script dari kang rohman karena menurut saya tampilannya menarik. Sebelumnya saya ucapkan terima kasih kepada kang rohman atas tutorialnya, semoga bermanfaat bagi yang lain...amin. Baiklah sahabat blogger semuanya, kita mulai saja bagaimana cara pembuatannya. Ikuti langkah berikut ini.

• Sebelumnya Saya Minta Maaf kalau Kodenya Kepanjangan, Terlalu Panjang, Panjang Sekali, Wah panjang amat kodenya, waduh panjang ya scriptnya, Bikin Anda Pusing, Sumpah Serapah, Mengutuk Saya, Menghujat Saya, Membenci Saya, Sampai anda Menyayang saya (semoga aja), ..... karena ini juga hasil utak-atik yang bikin ane pusing. Silahkan lihat contoh daftar isinya di SINI  

Log in ke blog anda
Klik Rancangan

Klik Edit HTML

Silahkan Download Template lengkap untuk mengembalikan kebentuk semula jika terjadi kesalahan nantinya

• Sebelum anda memasukkan script jangan perhatikan scriptnya, tapi pasang saja menurut petunjuk pemasangan biar lebih mudah...yang penting jangan tutup mata aja pada waktu masukkan scriptnya bro...hehehee.......yyyyuuuuhhhhuuuuuuuuuu. Laaannnjjuuutttttttt

Masukkan kode berikut di atas kode ]]></b:skin>

/*** Featured Categories ***/
     img.label_thumb{
        float:left;
 padding:5px;
 border:1px solid #8f8f8f;
 background:#D2D0D0;
 margin-right:10px;
 height:55px;
 width:55px;
 }
     img.label_thumb:hover{
 background:#f7f6f6;
 }
     .label_with_thumbs {
 float: left;
 width: 100%;
 min-height: 70px;
 margin: 0px 10px 2px 0px;
 adding: 0;
 }
     ul.label_with_thumbs li {
 padding:8px 0;
 min-height:65px;
 margin-bottom:10px;
 }
    .label_with_thumbs a {}
    .label_with_thumbs strong {}

Masukkan kode berikut di bawah atau sesudah kode ]]></b:skin>

<script src='http://bloekoetoek-blogonol.googlecode.com/files/virtualpaginate.js' type='text/javascript'>
</script>

<style type='text/css'>

.paginationstyle{
width: 250px;
text-align: center;
padding: 2px 0;
margin: 10px 0;
}

.paginationstyle select{
border: 1px solid navy;
margin: 0 15px;
}

.paginationstyle a{
padding: 0 5px;
text-decoration: none;
border: 1px solid black;
color: navy;
background-color: white;
}

.paginationstyle a:hover, .paginationstyle a.selected{
color: #000;
background-color: #FEE496;
}

.paginationstyle a.disabled, .paginationstyle a.disabled:hover{
background-color: white;
cursor: default;
color: #929292;
border-color: transparent;
}

.paginationstyle a.imglinks{
border: 0;
padding: 0;
}

.paginationstyle a.imglinks img{
vertical-align: bottom;
border: 0;
}

.paginationstyle a.imglinks a:hover{
background: none;
}

.paginationstyle .flatview a:hover, .paginationstyle .flatview a.selected{
color: #000;
background-color: yellow;
}

</style>

Masukkan kode berikut di atas kode </head>

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src="",a);c=s.indexOf(""",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2AkrkqCpLtlW5SilmFMF3ExtbykpiErplCPAfWHnf7MFAeCA5eWXa1fdMQJAC4XTZkIUFhAHAQ4k5agtafkpNYH2GJ2a1_NTb4P5kOZdplin3ts4zbzplZeiStO2f8ff0ZeuUKNSDlp8l/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

Simpan Template
Klik lagi Rancangan

Klik Tambah Gadget

Pilih HTML/ JavaScript

Masukkan Kode berikut ke dalamnya

<div style="width: 100%; height: 300px; overflow: auto;">

<div class="virtualpage4 hidepiece">

<h3>Aneh</h3> /* ganti tulisan Aneh dengan judul anda */

<script type='text/javascript'>var numposts = 999;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

<script type="text/javascript" src="/feeds/posts/default/-/aneh?orderby=updated&alt=json-in-script&callback=labelthumbs"></script> /* perhatikan huruf besar atau kecil dalam penulisan label warna merah. jangan sampai salah karena ini case sensitive */
</div>

<div class="virtualpage4 hidepiece">
<h3>Unik</h3> /* ganti Unik dengan judul anda */
<script type='text/javascript'>var numposts = 999;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

<script type="text/javascript" src="/feeds/posts/default/-/unik?orderby=updated&alt=json-in-script&callback=labelthumbs"></script> /* perhatikan huruf besar atau kecil dalam penulisan label warna merah. jangan sampai salah karena ini case sensitive */
</div>

<div class="virtualpage4 hidepiece">
<h3>Lucu</h3> /* ganti Lucu dengan judul anda */

<script type='text/javascript'>var numposts = 999;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

<script type="text/javascript" src="/feeds/posts/default/-/lucu?orderby=updated&alt=json-in-script&callback=labelthumbs"></script> /* perhatikan huruf besar atau kecil dalam penulisan label warna merah. jangan sampai salah karena ini case sensitive */
</div>

<div class="virtualpage4 hidepiece">
<h3>Seo</h3> /* ganti Seo dengan judul anda */
<script type='text/javascript'>var numposts = 999;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

<script type="text/javascript" src="/feeds/posts/default/-/seo?orderby=updated&alt=json-in-script&callback=labelthumbs"></script> /* perhatikan huruf besar atau kecil dalam penulisan label warna merah. jangan sampai salah karena ini case sensitive */
</div>

<div class="virtualpage4 hidepiece">
<h3>Blog Info</h3> /* ganti Blog Info dengan judul anda */
<script type='text/javascript'>var numposts = 999;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

<script type="text/javascript" src="/feeds/posts/default/-/blog%20info?orderby=updated&alt=json-in-script&callback=labelthumbs"></script> /* perhatikan huruf besar atau kecil dalam penulisan label warna merah. jangan sampai salah karena ini case sensitive. sebagai catatan kalau anda menuliskan label lebih dari satu kata, maka spasi diganti menjadi %20. contohnya seperti ini blog info menjadi blog%20info  */
</div>
</div>

<div id="galleryalt" class="paginationstyle" style="width: 100%; text-align: left">
<a href="#" rel="previous"></a> <span class="flatview"></span> <a href="#" rel="next">></a>
</div>

<script type="text/javascript">

var gallery4=new virtualpaginate({
piececlass: "virtualpage4",
piececontainer: 'div',
pieces_per_page: 1,
defaultpage: 0,
wraparound: false,
persist: true
})

gallery4.buildpagination(["galleryalt"], ["Aneh", "Unik", "Lucu", "Seo", "Blog Info"])

</script>

Catatan:
Bila anda ingin menambah label silahkan copy script sebelumnya,
misalnya seperti di bawah ini. yang kita copy adalah script pada label blog info.

<div class="virtualpage4 hidepiece">
<h3>Blog Info</h3>
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

<script type="text/javascript" src="/feeds/posts/default/-/blog%20info?orderby=updated&alt=json-in-script&callback=labelthumbs"></script> 
</div>

</div> /* kode ini yang nantinya di hapus dan di ganti dengan kode yang anda copy */

Ganti label blog%20info dengan label baru anda. Jangan lupa ganti juga judul pada kode <h3>Blog Info</h3>. Lalu hapus kode </div> dan ganti dengan kode yang anda paste tadi. Tambahkan label baru anda pada tombol navigasi di bawahnya sehingga menjadi seperti ini.

Silahkan cari kode ini di bagian akhir script
gallery4.buildpagination(["galleryalt"], ["Aneh", "Unik", "Lucu", "Seo", "Blog Info", "label baru anda di sini"])

Selesai dan lihat hasilnya

Selamat Mencoba dan Sukses Selalu

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Metal Xp. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Metal Xp dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh Unknown pada tanggal Sabtu, 17 September 2011