Membuat Daftar Isi pada Halaman Blogger Blogspot

Daftar Isi Blogspot ? apakah di perlukan, bagi saya tentu aja di perlukan, agar pengunjung web blog dapat lebih mudah mengakses halaman-halaman yang ada , apalagi jika blog yang kita kelola sudah memiliki banyak artikel.

Pada situs-situs blog dari blogger atau blogspot, ada beberapa trik menampilkan daftar isi blog baik melalui widget sidebar, entry post atau dari jenis halaman. Post kali ini akan mengungkap bagaimana membuat halaman daftar isi (Table of Content) pada halaman blogger. Dengan memanfaatkan javascript yang bersumber dari http://bloggergadgets.googlecode.com , anda dapat menaruhnya pada isi artikel di halaman blogspot anda. Kode sumber hasil tweak saya dapatkan dari situs www.bloggerplugins.org , dengan tweak tersebut anda dapat menampilkan daftar hingga 500 judul artikel pada halaman tersebut.

Berikut ini beberapa kelebihan yang ditawarkan dari versi tweak yang dibuat oleh admin situs diatas :
1. Dapat menampilkan hingga 500 judul artikel.
2. Ditampilkan dalam bentuk tabel dengan 3 kolom dan memiliki opsi sorting pada ke tiga kolom tersebut.
3. Contoh hasil dari halaman daftar isi ini, dapat anda lihat di halaman ini.

Langkah 1 - Buat Halaman dengan judul yang anda inginkan.

Copy paste kode dibawah ini dalam mode edit HTML pada halaman tersebut.

<div id="bp_toc">Loading TOC. Please wait....</div>
<script src="http://bloggergadgets.googlecode.com/files/blogtoc_orig.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script>


Kemudian Publish halaman tersebut. Halaman ini sudah dapat memuat daftar isi blog anda, hanya saja tampilan tabel nya belum tersusun baik. Agar tabel tersebut tersusun baik, anda harus membuat pengaturan CSS bagi tabel ini. Silahkan ikuti tahapan-tahapan tersebut dibawah ini.

Langkah 2 - Menambah Parameter CSS Blogspot anda

Buka Dashboard anda, jika anda sudah menggunakan User Interface Blogger terbaru, silahkan cari dan buka Template, dan setelah itu buka Customize. Selanjutnya pilih Advanced >> Add CSS

Tambahkan kode dibawah ini ke kotak CSS tersebut :

#bp_toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:500px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ffd595;
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:80%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:80%;
text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:70%;
}

Lanjutkan Membaca ...

Hello Webmaster - Ini tool buat anda

Programmer's Notepad adalah editor teks yang powerfull menampilkan highlight sintaks, manajemen proyek, antarmuka pengguna yang mantap dan juga gratis, editor teks  opensource  ini mendukung beberapa bahasa pemrograman.

Fitur

• Bookmarks (baik bernomor dan biasa)
• Folding Kode / Outlining
• windows alat Docking - jauh lebih baik daripada yang ada di versi 1
• Excellent dukungan alat eksternal dengan pengguna-dikonfigurasi
• pencocokan output - klik pada kesalahan dan peringatan untuk melompat hak untuk tempat di file tersebut di mana mereka dihasilkan
• Ekspor ke HTML (menggunakan CSS) dan RTF
• File manager asosiasi
• Dalam metode-file / navigasi definisi (menggunakan Ctags)
• Tidak ada batasan pada ukuran file (meskipun file besar mungkin memerlukan beberapa saat untuk me-load)
• Non fixed-width font dukungan
• Proyek dan Kelompok Proyek dengan folder multi-level dan mirroring sistem file
• Quick Search toolbar dengan link ke Google Groups dan Google
• Pencarian ekspresi reguler dan mengganti
• Dukungan untuk file unicode
• Dukungan untuk windows, unix dan format file macintosh
• Sintaks penyorotan untuk banyak bahasa melalui "skema".
• Tabbed interface MDI
• Teks Klip
• Unlimited jumlah skema yang didukung, sintaks kuat menyoroti mendukung keduauser-defined dan built-in skema
• User-skema (XML)
• Kata-pembungkus

Bahasa Pemrograman yang didukung:

Plain Text, Ada, Assembler, file Batch, C / C + +, C #, CSS, D, Diff, Docbook XML,Hypertext, IDL, JAWA, JavaSccript, LaTeX, Membuat, Modula-2, NSIS2 Installer,Pascal, Perl, PL / SQL, Properties, Python, Ruby, SQL, TCL, VBScript, VHDL, VisualBasic, XML

Unduh Download Portable Edition (~2.3m)

Lanjutkan Membaca ...

Hosting dan Domain Gratis dari Cz.CC

Hai, ada berita bagus nih hari ini, ane baru aja nemuin layanan gratisaan yang bisa anda gunakan buat beruji coba website. Soalnya selain bisa dapetin Domain Gratis Cz.Cc anda juga bisa dapetin hosting gratis dari mereka. Oya, Untuk Domain Cz.Cc, anda bisa daftar gratis untuk 2 tahun (woow, mantap kan). Umumnya domain gratis cuma berumur 1 tahun dan harus di perpanjang (nah ini otomatis harus bayar), seperti di Co.Cc , ataupun di Co.tv . Tambah asiknya lagi, mereka juga sediakan hosting gratis dengan syarat penggunaan 150 MB Disk Space, 4 GB Monthly Traffic, and hosted 10 MB for MySQL (v.4) . Oya, ketika anda mendaftar di sana, anda bisa punya domain gratisan sampe 5 Domain (kalo di co.tv cuma dapet 3 doang), jadi lebih mantap kan. Ok deh, gak usah panjang-panjang. Kalo anda berminat buat bikin akun di sana silahkan pilih domain dulu, nah terus daftar bikin akun dan selanjutnya....

Jika engkau berminat, mungkin cukup bagi saya mengantarkan anda melalui banner dibawah ini.

Lanjutkan Membaca ...