Daftar Isi Versi 5

<br /> <link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_default-theme.css" type="text/css" /><br /> <script type="text/javascript"><br /> var showPostDate = true,<br /> showComments = true,<br /> idMode = true,<br /> sortByLabel = false,<br /> labelSorter = "JQuery",<br /> loadingText = "Loading...",<br /> totalPostLabel = "Jumlah posting:",<br /> jumpPageLabel = "Halaman",<br /> commentsLabel = "Komentar",<br /> rmoreText = "Selengkapnya &#9658;",<br /> prevText = "Sebelumnya",<br /> nextText = "Berikutnya",<br /> siteUrl = "http://myblogtutoriaandrel.blogspot.com/",<br /> postsperpage = 10,<br /> numchars = 370,<br /> imgBlank = "http://andreblog.googlecode.com/files/images.jpg";<br /> </script><br /> <script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/blogger-archive-with-pagination.js"></script><br /> <br />

OPSI	NILAI	KETERANGAN
showPostDate	False /True	Ganti nilainya menjadi false jika Anda tidak ingin menampilkan bulan terbit artikel.
showComments	False /True	Ganti nilainya menjadi false jika Anda tidak ingin menampilkan jumlah komentar pada artikel.
idMode	False /True	Jika bernilai true, sistem penaggalan artikel akan menjadi berbahasa Indonesia. Jika bernilai false sistem penanggalan artikel akan berubah menjadi berbahasa Inggris.
sortByLabel	False /True	Digunakan untuk memfilter artikel/posting. Jika ingin menampilkan posting dengan kategori tertentu saja, pilihlah nilai true. Setelah itu tentukan nama label pada variabel labelSorter.
labelSorter	"JavaScript", "Widget", ... (nama label)	Tentukan nama label jika opsi sortByLabel bernilai true.
totalPostLabel	"Jumlah posting:", ... (teks)	Tentukan keterangan jumlah posting (yang di bawah navigasi).
jumpPageLabel	"Halaman", ... (teks)	Tentukan keterangan lompatan posting (yang di bawah navigasi).
commentsLabel	"Komentar", "Comments", ... (teks)	Digunakan untuk menentukan label jumlah komentar (contoh: 10 Komentar).
rmoreText	"Baca Selengkapnya", "Read More", ... (teks)	Digunakan untuk menentukan label link menuju posting asli.
prevText	"Sebelumnya", "Previous", ... (teks)	Digunakan untuk menentukan label navigasi mundur.
nextText	"Berikutnya", "Next", ... (teks)	Digunakan untuk menentukan label navigasi maju.
siteUrl	(URL Blog)	Ganti URL ini dengan URL blog Anda.
postsperpage	10, 30, ... (numerik)	Digunakan untuk menentukan jumlah posting yang tampil pada satu halaman.
numchars	100, 200, ... (numerik)	Digunakan untuk menentukan jumlah karakter ringkasan posting.
imgBlank	no-image.jpg (URL Gambar)	Gambar cadangan jika posting yang tampil tidak memiliki gambar.

Hasilnya





Di bawah ini adalah daftar tema untuk widget daftar isi Blogger dengan navigasi halaman. Untuk menerapkannya, caranya cukup dengan mengganti kode <link rel='stylesheet' media='screen' href='style.css' type='text/css' /> dengan kode ini:

1. <link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_minima-brown.css" type="text/css" />
   
2. <link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_elegant-black-theme.css" type="text/css" />
3. &Daftar Lainnya ada disini

Read more »

Daftar Isi Versi 3

Setelah Posting sebelumnya mengenai Membuat Daftar Isi Versi 1 dan Versi 2, berikut ini adalah bentuk lain dari model daftar isi yang saya ambil dari SC Community's Blognya Kang Enes. Yang merupakan modifikasi dari script nya master blogger Abu Farhan

Ikuti Langkah-langkah berikut ini :

1. Seperti biasa, login ke Blogger.
2. Setelah itu klik Dasbor pada blogspot anda
3. Klik Tata Letak
4. Klik Tambah Gadget
5. Pilih HTML/Javascript dan letakkan script ini didalamnya
   
   DAFTAR ISI BERDASARKAN KATEGORI :
   
   
   <script style="text/javascript" src="http://andreblog.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>
   
   DAFTAR ISI BERDASARKAN TANGGAL
   
   
   <script style="text/javascript" src="http://andreblog.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>
6. Ganti link berwarna merah dengan link blog anda
   
7. Anda dapat merubah link berwarna biru dan hijau dengan script aslinya Abu Farhan
   
   
   
   http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js

   http://abu-farhan.com/script/daftarisibloggerarchive/tocbyarchivemin.js
   
   SELAMAT MENCOBA...
   Diambil dari Blog Tutorial
   

Hasilnya :
DAFTAR ISI BERDASARKAN KATEGORI



DAFTAR ISI BERDASARKAN TANGGAL

Read more »

Daftar Isi Versi 2

data:text/html,<script src="http://andreblog.googlecode.com/files/Test.js" type="text/javascript">
</script>
<link href="http://reader-download.googlecode.com/svn/trunk/acc-toc-labelsort-default.css" media="screen" rel="stylesheet" type="text/css"></link>
<script type="text/javascript">
var showNew = true,
accToc = false,
openNewTab = true,
maxNew = 10,
baru = "Baru!",
sDownSpeed = 600,
sUpSpeed = 600;
</script>
<script src="http://andreblog.googlecode.com/files/test2.js" type="text/javascript">
</script>
<script src="http://blogkamu.blogspot.com/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

Untuk Keterangan :

var showNew = true, False maka postingan baru tidak tampak (lihat)
accToc = false,untuk true (lihat)
openNewTab = true,
maxNew = 10, menampilkan tulisan terbaru sebanyak yang kamu suka
baru = "Baru!",menandakan tulisan new di artikel baru
sDownSpeed = 600,
sUpSpeed = 600;
blogkamu = Ganti dengan nama blog kamu

Demo

untuk Kode diatas

Read more »

Daftar Isi Versi 1

Daftar isi blog pada website/blog tidak jauh berbeda dengan daftar isi pada halaman buku pada umumnya. Tujuannya tentu untuk memudahkan pembaca mencari halaman yang ingin mereka baca. Sobat tertarik mencobanya, ikuti langkah-langkah berikut,

Langkah pertama :

1. Masuk ke blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik link Download full template, save untuk backup data
5. Copy paste kode CSS berikut di atas kode ]]></b:skin>
#toc { border: 0px solid #000000; background: #ffffff; padding:2px; width:495px; margin-top:10px;} .toc-header-col1, .toc-header-col2, .toc-header-col3 { background: #B5CBFA; color: #000000; padding-left: 5px; width:250px;} .toc-header-col2 { width:75px;} .toc-header-col3 { width:125px;} .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited { font-size:100%; text-decoration:none;} .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { font-size:100%; text-decoration:underline; color:#3D3F44;} .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:100%; background:#f0f0f0;}
6. Save

Langkah kedua :

1. Klik menu Elemen Halaman
2. Klik tulisan Tambah sebuah Elemen Halaman 
3. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML 
4. Copy paste kode berikut ke dalam elemen yang muncul
<div id="toc"></div>
5. Simpan
   
6. Pindahkan elemen yang baru di buat tepat di atas elemen Post
   
7. Klik tombol Simpan yang berada di sebelah atas
   
8. Klik tulisan Tambah sebuah Elemen Halaman kembali
   
9. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML
   
10. Beri judul elemen tersebut dengan yang kata yang sobat ke hendaki. Contoh : DAFTAR ISI
    
kemudian copy paste kode berikut ke dalam kotak elemen
<div id="toclink"><a href="javascript:showToc();"&gt;Daftar Isi Blog</a><br/><br/></div> <script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script> <script src="http://namaBlog.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
Keterangan
• Ganti tulisan tebal dengan nama blog Sobat, yang merah adalah tittle Daftar Isi Sobat
• Simpan
  Tulisan yang muncul pada 'Widet Daftar Isi' di atas adalah berbahasa Inggris, untuk menggantinya menjadi Bahasa Indonesia, lakukan langkah berikut, Pasang dengan kode di bawah ini saja, :
  
  
  <div id="toclink"><a href="javascript:showToc();"><img src="http://amen24.googlepages.com/folder.gif"/> &nbsp;&nbsp;Lihat Daftar Isi !</a><br/><br/></div> <script style="text/javascript" src="http://andreblog.googlecode.com/files/daftarisi.js"> </script><script src="http://NamaBlog.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
Selamat Mencoba

Read more »

Daftar Isi Versi 4

Cara lain untuk membuat daftar isi yang saya beri nama Daftar isi Versi 4 yang saya ambil dari Copycat91

1. Login ke Blogger.
2. Kemudian buat sebuah Entri Baru dan pilih Edit HTML.
3. Berilah judul, misalnya: Daftar Isi.
4. Klik pada Opsi Entri dan setting supaya dipublikasikan mundur (ke tanggal pertama kali kamu posting).
5. Kopikan script berikut (gunakan Control C) dan ganti NamaBlog sesuai nama Blog kamu:
   
   <div id="cl_option"> Loading... </div>
   <div id="cl_content_list"></div>
   <script type="text/javascript">var jumlah_kata_dalam_ringkasan = 500;</script>
   <script src="http://andreblog.googlecode.com/files/blogtoc-v3.js"></script>
   <script src="http://NamaBlog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=9999"></script>
   atau script dibawah ini :
   
   
   <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://copycat91.googlecode.com/svn/trunk/contentlist.js"> </script>
   <script src="http://BLOGKAMU.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=500"> </script>
6. Jangan lupa untuk mengganti BLOGKAMU dengan URL blog kamu,
7. Kamu juga bisa mengatur jumlah kata dalam ringkasan dengan mengubah nilai variabel jumlah_kata_dalam_ringkasan,
8. Untuk mencegah daftar isi ini berada di halaman paling depan, klik "Post Option" di bagian bawah sebelah kiri, kemudian ganti tanggalnya jadi beberapa hari yang lalu, sebulan yang lalu, atau setahun yang lalu,
9. Kalau kamu ingin yang versi bahasa inggris, ganti aja contentlist.js jadi contentlist_en.js.
   
   kalau ingin menulis artikel tentang daftar isi ini di blog kamu, kamu boleh menambahkan kode :
   
   
   <div style="text-align:right; font-size:80%">
   Re-published by: <a href="urlblogkamu.com"> Blog kamu </a>
   </div>
   di bagian bawah kode di atas pada artikel kamu.
   Supaya blog kamu juga dapat backlink dari blogger yang pakai daftar isi ini.
   

Selamat Mencoba...

Hasilnya :

data:text/html,

Loading...

Read more »

Menampilkan Artikel Menurut Label Tertentu

Beberapa waktu lalu saya kesulitan untuk membuat navbar menu horizontal dengan submenu vertikalnya...bukan karena menunya tapi direpotkan dengan daftar link yang akan saya masukkan --> jumlahnya cukup banyak misalkan pada menu "Blogging" ada 24 posting yang jika di buat secara manual akan memerlukan waktu yang cukup lama.

Setelah saya cari-cari kesana-kesini akhirnya saya menemukan bagai mana menampilkan posting sesuai dengan kategorinya/labelnya dari blog SC Community'snya Kang Enes, berikut ini adalah script contoh diblog saya :

<script style="text/javascript">
var numposts = 50;
var standardstyling = true;
</script>

<script type='text/javascript' src='http://andreblog.googlecode.com/files/rc-label.js'></script>

<ul>
<script src="http://jendelainfo23.blogspot.com//feeds/posts/default/-/Kumpulan%20Menu%Navigasi?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999">test</script>
</ul>
</div>

Keterangan

1. Yang berwarna BIRU diganti dengan nama blog ANDA
2. Yang Berwarna Merah diganti Label yang ingin ditampilkan postingnya, oya...jangan lupa menambahkan %20 untuk setiap spasi, dan tulisan Huruf besar/kecilnya harus sama dengan Label /Kategori yang dituju.
3. Misalkan Penulisan "Tip dan Trik" maka ditulis "Tip%20dan%20Trik".....dan lain-lain.

SELAMAT MENCOBA..!

Hasilnya dibawah ini :

Read more »