• Twitter
  • Buzz
  • Facebook

Blog TOC Widget

Blog TOC Widget




Bila anda memperhatikan lebih cermat, maka di bagian atas posting ini terdapat menu "Show table of content" kemudian akan muncul tabel tabel pada kolom header. Yup..itu dinamakan TOC atau table of content. TOC ini menampilkan berbagai macam post title pada kolom header.

Berikut langkah langkah nya untuk membuat TOC pada blogger baru :

Langkah 1 : Back up template kamu, ini menjaga jaga, jika template kita kacau saat memasukkan code code TOC.
Langkah 2 : Tambahkan sebuah HTML pada edit HTML.
Lakukan peng edit an HTML pada <b:section> yang memiliki id=main


<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>



bila saya cermati, code ini akan menambahkan sebuah halaman utama baru diatas halaman post pada page element, atau dibawah header.

Kemudian simpan template tersebut dan sekarang berpindah ke sisi page element. Sekarang buka halaman baru yang saya sebutkan barusan (diatas halaman post page element) >> klik add a page element dan ke HTML/javascript kemudian tambahkan html berikut :


<div id="toc"></div>



Simpan template barusan.

Langkah 3 : Tambahkan HTML elemen lagi pada sidebar yang kanan >> klik add a page element dan ke HTML/javascript kemudian tambahkan html berikut :


<div id="toclink"><a href="javascript:showToc();">Show TOC</a><br/><br/></div>
<script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script>
<script src="http://namaakunanda.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>



Silahkan ganti url "namaakunanda" dengan url anda.

Langkah 4 : Sekarang kita beralih ke edit HTML, tambahkan custom style pada bagian id dan class :

#toc : the div-wrapper that contains the TOC
.toc-header-col1 : header of column 1
.toc-header-col2 : header of column 2
.toc-header-col3 : header of column 3
.toc-entry-col1 : cell in column 1
.toc-entry-col2 : cell in column 2
.toc-entry-col3 : cell in column 3


Sumber inspirasi :
http://beautifulbeta.blogspot.com/2007/04/blogtoc-widget-released.html

Spesial thanks to :
http://www.jonipoetra.info atas rujukan situs diatas sebagai tambahan pernak pernik blog.

13 comments:

Anang said...

sip sip artikelnya membantu sesama blogger tuh...

Mama Rafi said...

bolehlah kapan2 dicoba tuh.

joni said...

sip dah berhasil..

gute job. :D

Dhona said...

Terima kasih tutorialnya om Cempluk. Tapi aku nggak mudeng tuh soalnya aku tuh gaptek. Dicoba dulu mungkin baru bisa. Ntarlah tak coba di blogspotku.

CempLuk said...

#dhona : selamat mencoba mbak dhona ^_^

NiLA Obsidian said...

pengen nyoba....
tpi gaptek niy om andi...kudu ngulik ya....hiks

Nieke,, said...

bedanya sama recent post apa..?

mashuri said...

urutan konten berdasarkan apa?

CempLuk said...

#nieke : recent post kan cuma lihat post kita yang udah kita posting, TOC ini menampilkan post kita secara random.

#mashuri : random mas.

aLe said...

wa, sayang aLe gak pake blogger..
padahal ni resep OK punya ne..

Sri Swami Sivananda said...

Maaf numpang ngelink....

-----------------------------------
artikel kesehatan
download pdf jawapos
yoga
review
BitDefender

Sri Swami Sivananda said...

Maaf numpang ngelink. Saya akan pasang pasang backlink untuk blog ini di semua blog saya. Mohon jangan dihapus semua link saya. Terima Kasih banyak atas bantuannya.

-----------------------------------
BitDefender
Cheap Softwares

Unknown said...

網頁設計 網路行銷 關鍵字廣告 關鍵字行銷 餐飲設備 製冰機 洗碗機 咖啡機 冷凍冷藏冰箱 蒸烤箱 關島婚禮 巴里島機票 彈簧床 床墊 獨立筒床墊 乳膠床墊 床墊工廠 產後護理之家 月子中心 坐月子中心 坐月子 月子餐 銀行貸款 信用貸款 個人信貸 房屋貸款 房屋轉增貸 房貸二胎 房屋二胎 銀行二胎 土地貸款 農地貸款 情趣用品 情趣用品 腳臭 長灘島 長灘島旅遊 ssd固態硬碟 外接式硬碟 記憶體 SD記憶卡 隨身碟 SD記憶卡 婚禮顧問 婚禮顧問 水晶 花蓮民宿 血糖機 血壓計 洗鼻器 熱敷墊 體脂計 化痰機 氧氣製造機 氣墊床 電動病床 ソリッドステートドライブ USB フラッシュドライブ SD シリーズ

Post a Comment

Assalamualaikum

1. Ucapkan Basmallah
2. Silahkan menuliskan komentar pada artikel cempluk di kotak yang tersedia dengan hati berseri seri dan senyum mengembang (kiri 2 cm kanan 2 cm).
3. Setelah selesai menulis komentar baca Hamdalah. Silahkan klik post comment..
4. Selesai !!! cempluk mengucapkan terima kasih atas komentar mbak, mas yang telah merelakan waktu nya menulis komentar ini.
5. Jangan sungkan dan lupa tuk balik lagi yah di artikel cempluk berikut nya

Wassalamualaikum


Salam Perjuangan,

Cempluk
http://andibagus.blogspot.com