Peluang Mendapatkan Ribuan Dollar / Bulan, 3 Step Terselesaikan Langsung Dapat $125 USD (Trusted) | Tips Berikutnya »

Home » Blogger » HTML Tutorial » Internet » Pemrograman » Template » Tips dan Trik » Tutorial Blog » Currently Reading:

Cara Membuat Daftar Isi di Blogspot

June 4, 2009 Blogger, HTML Tutorial, Internet, Pemrograman, Template, Tips dan Trik, Tutorial Blog 34 Comments

Setelah beberapa hari lalu saya mengedit artikel Cara Membuat Daftar Isi di Wordpress dan membuat artikel Cara Membuat Daftar Isi di Wordpress dengan SiteMap Generator.. Maka untuk melengkapi artikel tersebut saya buat artikel tentang Cara Membuat Daftar Isi di Blogspot. Cara ini saya temukan di blog guru saya, O-Om. Berikut adalah screenshotnya :

cara membuat daftar isi 300x245 Cara Membuat Daftar Isi di Blogspot

Bagaimana caranya?

  • Masuk ke blogger dengan akun Anda.
  • Lalu masuk ke Layout
  • Add a Gadget >> HTML / Javascript
  • Copy Paste kode di bawah ini :

    • <div id="toclink"><a href="javascript:showToc();"><font color="#808000"><b> Lihat Semua Daftar Posting</b></font></a>
    </div>
    <script style="text/javascript" src="http://melodanta.com/blogtoc.js"></script>
    <script src=" http://namabloganda.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

  • Lalu Add a Gadget lagi >> HTML / Javascript
  • Copy Paste kode di bawah ini :

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

  • Lalu pindah ke Edit HTML, cari kode <b:skin><![CDATA[/* dan paste kode dibawah ini tepat dibawahnya

    • /* Show Table of Contents
    -----------------------------------------
    */
    #toc {
    border: 0px solid #78B749;
    background: #ffffff;
    padding: 5px;
    width:500px;
    margin-top:10px;
    }
    .toc-header-col1, .toc-header-col2, .toc-header-col3 {
    background: #cccccc;
    color: #444;
    padding-left: 5px;
    font-weight:bold;
    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:95%;
    text-decoration:none;
    text-align: Left;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #cccccc;
    }
    .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
    font-size:95%;
    text-decoration:underline;
    text-align: left;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #cccccc;
    }

    .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
    padding-left: 5px;
    text-align: left;
    font-size:95%;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #cccccc;
    }

  • Save dan lihat hasilnya

Untuk demonya bisa dilihat di SINI. Ada yang ingin menambahkan?

Anda Menyukai Artikel di Blog Ini? Masukkan Alamat Email Anda untuk Berlangganan:


Artikel Populer

Artikel yang Berkaitan :

Hasil Pencarian:

cara mengisi blog . cara membuat daftar isi pada blog . cara membuat daftar isi blog . membuat daftar isi di blog . cara membuat daftar isi di blog . cara membuat daftar isi di blogger . membuat daftar isi blog . cara membuat daftar isi . membuat daftar isi di blogspot . membuat daftar isi pada blog . membuat daftar isi di blogger . cara membuat daftar isi blogspot . cara mengisi blogger . membuat daftar isi blogspot . membuat daftar isi blogger . cara membuat daftar artikel . buat daftar isi di blog . cara membuat daftar isi pada blogger . cara buat daftar isi blogger . daftar isi blogger .

Tags : , , , , , , , , ,

Currently there are "34 comments" on this Article:

  1. download ebooksNo Gravatar says:
    June 4, 2009 at 5:49 pm

    trims infonya bro. mbok kapan-kapan dibuat panduan bikin daftar isi untuk Joomla! saya pake joomla je hehe…..

    download ebookss last blog post..Lawn Tennis Explained

    Reply
    • widhianNo Gravatar says:
      June 5, 2009 at 4:11 pm

      Yupz mas.. wuaduh.. saya ga begitu tau tentang joomla mas.. justru saya yang harusnya belajar sama mas :D

      Reply
  2. suryadenNo Gravatar says:
    June 4, 2009 at 6:05 pm

    keren ki, ikutan ngotak ngatik lah…

    suryadens last blog post..it can happen

    Reply
  3. IHSANNo Gravatar says:
    June 4, 2009 at 10:58 pm

    wah klo saya tahunya dari Kang Rohman baru ke Oom

    siiiip

    sama-sama belajar ke O-om juga ya?

    IHSANs last blog post..Belajar SEO Para Pemula

    Reply
  4. PemulaNo Gravatar says:
    June 5, 2009 at 8:03 am

    mas o-om dah bs jadi datuk nya di perbloggeran.
    idenya keren.

    Pemulas last blog post..Alnect Komputer – Netbook Advan Vanbook A1N70T + BONUS!!’

    Reply
  5. BrillieNo Gravatar says:
    June 5, 2009 at 8:22 am

    makasih ya sudah sharing…

    Brillies last blog post..Menjadi Atheis, why not?

    Reply
  6. raiderhostNo Gravatar says:
    June 5, 2009 at 1:56 pm

    sementara disimpen doeloe ilmoenya ach.. soale blom pakai blogspot

    raiderhosts last blog post..Kontes SEO Aristia Wida Rukmi : Update 10 Top List SERP G.co.id

    Reply
  7. automotiverblogNo Gravatar says:
    June 8, 2009 at 3:33 pm

    tutorial yang yahut gan,… besol mau pasang daftar isi do blogspot gW ah..

    automotiverblogs last blog post..2010 Mercedes-Benz SL65 AMG Black Series

    Reply
    • widhianNo Gravatar says:
      June 22, 2009 at 4:12 pm

      Wah makasih mas.. maaf ya sudah lama baru dibales, beberapa minggu memang blog ini sedang dalam perbaikan, baru tadi siang blog ini hodup kembali..

      Reply
  8. iwanNo Gravatar says:
    June 9, 2009 at 8:57 am

    dah lama saya cari artikel ini..makasih infonya, aku coba deh di blogku

    iwans last blog post..Keyword Position Tool

    Reply
    • widhianNo Gravatar says:
      June 22, 2009 at 4:13 pm

      Iya mas.. silakan dicoba :D, maaf baru dibales mas.. blog ini beberapa hari sedang dalam perbaikan :D

      Reply
  9. bisnispastiNo Gravatar says:
    July 28, 2009 at 4:31 pm

    Makasih banget atas tutorialnya bagaimana membuat sitemap di blogspot. Salam sukses untuk Anda.
    bisnispasti´s last blog ..nice info frien…thnxs yaa :) My ComLuv Profile

    Reply
    • widhianNo Gravatar says:
      August 1, 2009 at 8:56 am

      Wah.. sama2 mas.. kalo blogspot sudah ada sitemapnya kok mas.. filenya bernama atom.xml, jadi sudah otomatis

      Reply
  10. eNeSNo Gravatar says:
    August 20, 2009 at 9:52 pm

    Saya sudah beberapa kali nyoba TOC ini dari script blog orang tapi blum berhasil, saya coba lagi deh dari script mas
    eNeS´s last blog ..Menampilkan/Menyembunyikan Blog Pada Blogger Profile My ComLuv Profile

    Reply
  11. 19 widescreenNo Gravatar says:
    August 23, 2009 at 3:33 am

    mantap tipsnya..
    19 widescreen´s last blog ..19 inch LG 19LF10 My ComLuv Profile

    Reply
  12. PejuangNo Gravatar says:
    October 26, 2009 at 9:09 am

    Kalo pake ini jadi berat gak blognya ya?? Izin mencoba mas

    Reply
  13. nurmanNo Gravatar says:
    December 12, 2009 at 10:13 pm

    mas, mau nanya … untuk buat postingan yang didalamnya ada kode html, gmn cara masukkannya ? spt pada postingan sampeyan di atas “cara membuat daftar isi pada blogspot” nah.. didalamnya kan terdapat teks2 kode html. pas kucoba copy paste di tempat posting, e.. ternyata ga’ mau menerima… (memang masih awaaaaam). Bagi ilmunya ya mas….. makasih sebelumnya
    nurman´s last blog ..PayPal My ComLuv Profile

    Reply
  14. hannyNo Gravatar says:
    January 13, 2010 at 12:06 pm

    betul ga nih kodenya???? kucoba dulu….
    hanny´s last blog ..Beladiri Apa yang Terbaik? My ComLuv Profile

    Reply
    • widhianNo Gravatar says:
      January 23, 2010 at 7:10 pm

      Tadinya error mas.. karena scriptnya dihost di geocities yang sudah mati, lupa saya backup. Tapi sekarang sudah jadi kok ^^

      Reply
  15. ipin's coolNo Gravatar says:
    January 16, 2010 at 12:19 pm

    nice oinfo sob:) thanks dah di sharing nihh…
    ipin’s cool´s last blog ..AC Tekhnologi Inverter My ComLuv Profile

    Reply
  16. NanangNo Gravatar says:
    January 26, 2010 at 8:49 pm

    Kalau mau pasang di header bagaimana caranya? atau ini linknya akan muncul d header. nanang´s last blog …Kamus Seluler

    Reply
    • widhianNo Gravatar says:
      January 30, 2010 at 11:26 pm

      Kalau header support widget, mas tinggal drag saja ke bawah header. Namun jika tidak.. mas bisa meletakkan kode di atas, yang seharusnya diletakkan di halaman layout, diganti manual di halaman edit html mas..

      Reply
  17. ibnumasrupaNo Gravatar says:
    February 6, 2010 at 5:45 am

    mksh

    Reply
  18. Aji st ajiNo Gravatar says:
    February 14, 2010 at 8:53 am

    Salam Kenal….

    Makasih tutorialnya….
    Dah saya coba..
    dan hasilnya…..
    “SANGAT KEREN”

    visit back:

    http://maniackom.blogspot.com
    Aji st aji´s last blog ..Replaced Facebook Display 2 (yontoo.com) My ComLuv Profile

    Reply
  19. Bujang RiauNo Gravatar says:
    February 20, 2010 at 9:18 am

    terimaksih, artikelnya sangat menarik

    Reply

Search This Site:

Play Online Games !!

Adventure Online Game Puzzle Online Game
Sport Online Game Strategy Online Game

Content Tags:

Adsense Bisnis Bisnis Internet Bisnis Online Blog Blogger Blogspot Bukti Pembayaran C++ CMS download Duit Facebook Google Gratis HTML Internet IPTEK Komputer Online Plugin Plugin Wordpress PPC Program PTC Search Engine SEO Situs Software Teknologi Theme Tips Tips dan Trik Trafik Trik Tutorial Tutorial Blog Tutorial Blogger Tutorial Blogspot Tutorial HTML Web Site Widget Ready Wordpress Wordpress Plugin Wordpress Theme
nowGoogle.Com SEO Challenge

Sponsor

Friends




Connections

Status

Dofollow Blog Internet Sehat

Polls

Platform CMS Favorit Para Blogger

View Results

Loading ... Loading ...

Translator

Comment on this Article:







CommentLuv Enabled

Kategori

Arsip Seluruh Artikel

Arsip


Hot Topics


Dukungan Kontes