Daftar Tema · Widget Daftar Isi Blogger dengan Navigasi

Tabel Konten
  1. Minima Brown Theme 
  2. Elegant Black Theme 
  3. Facebook Theme 
  4. CSS3 Diary Book Theme 
  5. Minima White Theme 
  6. Dark Red Theme 
  7. Yellow Green Theme 
  8. Construction Theme 
  9. Dark Blue Theme 

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

Minima Brown Theme 

Minima Brown Theme

Lihat Demo

<link rel="stylesheet" href="//dte-project.googlecode.com/svn/trunk/blogger-toc-with-pagination_minima-brown-theme.css"/>

Elegant Black Theme 

Elegant Black Theme

Lihat Demo

<link rel="stylesheet" href="//dte-project.googlecode.com/svn/trunk/blogger-toc-with-pagination_elegant-black-theme.css"/>

Facebook Theme 

Facebook Theme

Lihat Demo

<link rel="stylesheet" href="//dte-project.googlecode.com/svn/trunk/blogger-toc-with-pagination_facebook-theme.css"/>

CSS3 Diary Book Theme 

CSS3 Diary Book

Lihat Demo

<link rel="stylesheet" href="//dte-project.googlecode.com/svn/trunk/blogger-toc-with-pagination_css3-diary-book-theme.css"/>

Minima White Theme 

Minima White

Lihat Demo

<link rel="stylesheet" href="//dte-project.googlecode.com/svn/trunk/blogger-toc-with-pagination_minima-white-theme.css"/>

Dark Red Theme 

Dark Red

Lihat Demo

<link rel="stylesheet" href="//dte-project.googlecode.com/svn/trunk/blogger-toc-with-pagination_dark-red-theme.css"/>

Yellow Green Theme 

Fresh Green

Lihat Demo

<link rel="stylesheet" href="//dte-project.googlecode.com/svn/trunk/blogger-toc-with-pagination_yellow-green-theme.css"/>

Construction Theme 

Construction Theme

Lihat Demo

<link rel="stylesheet" href="//dte-project.googlecode.com/svn/trunk/blogger-toc-with-pagination_construction-theme.css"/>

Dark Blue Theme 

Dark Blue

Lihat Demo

<link rel="stylesheet" href="//dte-project.googlecode.com/svn/trunk/blogger-toc-with-pagination_blue-theme.css"/>

67 Komentar

  • Unknown

    Ini Baru Mantep, Kalau ini Aku Yakin Loading gak terlalu berat, kalau daftar isi dengan accordion dan juga daftar isi berdasarkan bulan itu berat banget bang, Load sampe' setengah jam baru muncul, oh iya Warna BLACK bang keren

  • Taufik Nurrohman

    @system of blogOke, nanti Saya tambahkan lagi yang warna BLACK.

  • dusal

    MAs kalau untuk tema seperti ini ( http://usilopbg.blogspot.com/p/daftar-isi.html) bisa dibuatin ga, ada garis garisnya kaya buku beneran

  • Taufik Nurrohman

    @dusalDitunggu saja :)

  • Unknown

    tema twitter bang, biru2 cerah gitu

  • Taufik Nurrohman

    @system of blogBingung bikin backgroundnya.

  • Unknown

    Ckckckck di coba2 aja lah kalau ada waktu :D

  • Unknown

    Kerja yang bagus, namun ada yang perlu diperhatikan, kami harap ini adalah untuk membangun kinerja teman ke depannya dan bagi teman2 blogger lainnya. Jadi jangan di hapus.

    Begini:
    Langkah anda membuat daftar isi cukup bagus. Kerja yang bagus teman. Saya mengerti mengapa daftar isi sangat diharuskan, karena ini diharapkan sebagai sitemap.

    Kita sekarang berbicara tentang SEO. Crawler sangat senang bila berselancar melalui tautan-tautan yang ada di blog melalui sitemap. Crawler butuh waktu secepat mungkin. Jadi, saran kami, cukup tuliskan saja judul beserta label, lengkap dengan tautan. Adapun isi konten, crawler akan membacanya setelah masuk ke tautan yang telah diberikan oleh sitemap.

    Tentang seberapa cepat, memberikan pagination pada daftar isi juga ide bagus. Sebenarnya, kecepatannya jadi bertambah. Begini, saat seluruh isi blog dibaca oleh javascipt, kemudian ditampilkan. Namun, bila menggunakan pagination maka ada tambahan kerja pada javascript (dalam hal ini jquery), yaitu memilih dan menyembunyikan sejumlah tautan yang tidak diinginkan pada halaman tertentu. Jadi buatlah normal.

    Saran kami terbaik adalah, buatlah dua pages untuk pagination bila jumlah posting sangat banyak. Ini tentang SEO. Kami harap teman-teman bisa mengerti dan mengembangkan blognya lebih dalam lagi.

    Agar lebih jelasnya silahkan terus ikuti update threelas.com, banyak informasi tersembunyi dan widget ramah SEO yang dapat membantu teman2 saling berbagi tentang blogger.

    Hormat kami,

    Putri Arisnawati.
    Pendiri dan Penulis Utama Threelas.com

  • Taufik Nurrohman

    @Putri Arisnawati Mohon maaf, tapi jujur saja Saya tidak begitu merasa nyaman dengan istilah ini:

    Crawler sangat senang bila berselancar melalui tautan-tautan yang ada di blog melalui sitemap. Crawler butuh waktu secepat mungkin.

    Di sini Saya pribadi hanya ingin membicarakan mengenai sisi manusia, karena Saya pikir (ini cuma pikiran Saya saja) mengapa harus memanjakan Crawler? Bukankah blog itu diciptakan untuk dibaca oleh manusia? Jadi manjakanlah manusia.
    Baiklah, Saya mengerti bahwa manusia juga tidak akan pernah bisa membaca artikel kita jika kita tidak bisa memasuki peringkat yang bagus dalam mesin pencari. Tapi setelah Saya pelajari tentang bagaimana cara menjadi unggul, menjadi nomor satu, Saya rasa semua akan tetap berakhir pada manusia juga, karena yang menuliskan kata kunci pada mesin pencari tetaplah manusia. Katakanlah, sebuah Crawler begitu senang mengindeks sebuah posting dengan tema "Hari Minggu". Tapi jika manusia tidak pernah menuliskan kata kunci "Hari Minggu" pada mesin pencari, posting pada peringkat pertama tersebut tetaplah tidak akan pernah ditemukan. Dan juga, SEO tidak selalu berakhir pada mesin pencari. Seperti yang Anda tuliskan dalam artikel bahwa media sosial juga berpengaruh. Saya setuju dengan itu. Setiap orang membaca, mereka puas dan mereka berbagi. Bukankah itu juga sangat jauh dari pendekatan secara mesin (dan bahkan sangat manusiawi: berbagi kesenangan).

    Itu kesimpulan Saya mengenai SEO. Saya tidak pernah berpikir dari segi mesin, karena yang mencari tetaplah manusia. Dan Saya berusaha menciptakan penampilan yang baik untuk memanjakan manusia.
    Beuh... Setahu Saya, sejak dulu mesin pencari tidak bisa membaca JavaScript. Sepertinya Saya harus belajar lagi WARRGHHHH!!!!!!!

    SEO itu bikin stess Mbak, jadi Saya mengabaikannya hehe...

    • Unknown

      Betul juga tuh mas....
      memang SEO itu penting,tapi mau sampai kapan kita memikirkan SEO?karna SEO untuk SE itu tidak bisa di tebak,bisa berubah kapanpun semua nya dia.
      kalo terus-terusan mikirin SEO saya rasa buang-buang waktu.
      hal terpenting itu CONTENT / ARTIKEL IS THE KING,kenyamanan pengunjung yang terpenting.
      kalo pengunjung sudah nyaman tinggal di blog kita gk perlu susah-susah mikirin SEO.
      tok nantinya pengunjung itu pun balik lagi :)
      termasuk saya nih udah betah smedi di sini (y)

  • Ahmad Thoufur Abi

    السلام عليكم ورحمة الله وبركاته
    Salam kenal dari saya, Ahmad Thoufur MH (Abi HaSnaNif At-Thoilah)... Sungguh, pernyataan Antum (Anda) membuat saya terkesan... Hal inilah yang memang seharusnya terus dipupuk dan dipelihara (baca: dipelihara dan dipupuk) oleh setiap MUSLIM... Keikhlasan Antum yang tidak memandang materi sangat menyentuh dan membuat saya kagum... Terus berdakwah (Antum pasti muslim, sebab namanya juga Islami...) walau hanya melalui dunia maya ini... Saya berusaha mengikuti tutorial Antum dan mempraktikkannya... Trims sob...
    والسلام عليكم ورحمة الله وبركاته

  • Unknown

    Maaf mas,
    Akhrnya aku menemukan blog untuk belajar CSS.
    Alhmdlilah,

    Maaf mas, aku masih pemula dan masih banyak belajar lagi.

    Postingan diatas untuk membuat daftar isi, apa daftar isi udah dibuat, tapi cuma mengganti temanya.
    Mohon pencerahaannya

  • Taufik Nurrohman

    @trii waluyo Yang betul pernyataan yang ke dua :)

    • Unknown

      Oh, makasih mas.
      Kalau buat daftar isi versi blognya mas gmana, ?
      Supaya bisa di.ganti temanya, ?
      Ada postinganya ga mas, ?
      Terima kasih:-)

  • Taufik Nurrohman

    @trii waluyo Di sini Saya menggunakan CSS eksternal (file yang disimpan di luar) kemudian memanggilnya menggunakan tag <link>. Kalau memang ingin membuat tema sendiri, caranya cukup dengan mengakses salah satu URL file CSS di atas, setelah itu ambil semua kodenya dan sisipkan ke dalam tag <style> seperti ini:

    <style type="text/css">
    Letakkan kode CSS di sini...
    </style>

    Gunakan kode itu untuk menggantikan <link>
    Dari situ kamu bisa mengeditnya sesuka hati :-d

    • Unknown

      Oh ya, terima kasih mas.
      Q mulah maksud ni.
      Hehe,

      Ada yg saya ingin tanyakan lagi,
      1. Postingan ini kan untuk merubah tema daftar isi, kata mas, daftar isi sudah dibuat,lalu mengganti temanya.
      "Pertanyaan saya, cara membuat daftar isinya,gmana mas, ?
      Blog saya kan belum ada daftar isinya, pengin daftar isi yang nanti bisa di.ubah temanya, seperti yang diatas."

      Soalnya saya belum tahu cara membuat daftar isi yang nanti bisa diganti temanya.
      Tahap pertama kan harus dibuat daftar isinya dulu ya mas, nah itu, yang saya ingin tanyakan

      Terima kasih mas,
      Maaf mas, kepanjangen.
      Maklum lah, orang bodoh ya banyak tanya.nya :-)

  • Taufik Nurrohman

    @trii waluyo Oalah... hehe :p
    Nah, di atas kan sudah ada tautannya, tinggal diklik saja http://hompimpaalaihumgambreng.blogspot.com/2012/03/daftar-isi-blogger-dengan-navigasi.html

    • Unknown

      Oh ya mas,
      Astagfiruloh,
      Hehe. . .

      Oh ya mas,
      Ada pertanyaan lagi mas,

      1. Bagaimana cara membuat efek animasi CSS3 pada gambar di dalam postingan, ?
      Q pengen bgt bisa mas,
      Q dah ngikutin tutorial, tapi ga jadi.
      Kayanya akunya aja yang bodoh.

      Apakah ada postinganya di Blog Mas ini,

      Mohon bantuanya mas,
      Terima kasih sekali :-)

  • Taufik Nurrohman

    @trii waluyo Ada, coba kamu cari pada label Efek atau Gambar. Di situ Saya pernah menulis beberapa posting tentang membuat efek foto, efek hover transparan dan beberapa efek transisi pada gambar.

    "Di dunia ini tidak ada yang namanya orang bodoh dan orang pintar. Yang ada adalah orang yang menonjol pada satu bidang".

    • Unknown

      alhmdulilah mas, akhrnya jadi juga. trma ksh mas, tutorial ditempat lain malah bikin pusing, tapi di tempat ini tidak, siip lah. oh ya, ada pertanyaan lagi nie mas, 1. kalau membuat efek css3 pada judul setiap postingan gmana mas, ? apakah ada postinganya, terima kasih

  • Taufik Nurrohman

    @trii waluyo Tidak ada. Kalau mau memodifikasi judul posting cari saja kode yang tampak seperti ini:

    .post-title { ... }
    .post-title a { ... }

    Diobrak-abrik saja bagian itu. Itu kode CSS untuk judul posting :)

    • Unknown

      oh ya mas trmksh, oh ya mar hompimpa mw tanya lagi. 1. apakah tampilan hompage bisa di ubah, misalnya gambarnya saja yg di hompage. 2. aku tadi baca tentang animasi image flow, bgus mas. kalau animasi image flow supaya tampil di hompage bisa ga mas, ? q pgen si kya gto, terima kasih. .

  • Aldy

    request warna coklat dong bang :D

  • Taufik Nurrohman

    @trii waluyo Supaya tampil hanya di halaman muka, letakkan slideshow di dalam tag kondisional halaman muka. Dan taruh kerangka slideshow bukan di dalam widget, tapi di dalam template:

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    Slideshow di sini...
    </b:if>

    Panggil Taufik saja :-bd

    [note]Terkait:
    Slideshow Otomatis Blogger dengan Imageflow
    Pemahaman Tag Kondisional Tingkat Pertama[/note]

    • Unknown

      Mas Taufik orang Sumpyuh toh,
      Alhmdlilah, q wong Banyumas mas, somagede, ngerti ora mas, ?
      Maaf ya mas, bahasane ngoko, aku kromo inggil ora lancar mas :-D,hehe. .
      Ujarku mas taufik wong Jakarta.
      Ya aku nek rep dolan, njaluk di waraih ya perek lah mas, hehe.

      Mas taufik guru ya, jan pinter bgt yakin.
      Siip lah mas,
      Q pengen bgt belajar dari Mas Hompimpa nie :-D
      Tapi tutorialnya angel bgt mas, gye ws tingkat lanjut.
      Aku malah tembe wingi-wingi ngerti CSS3.

      Maaf ya mas, kakeen goleh ngmg, aku ra ngerti facebooke sampean ya lewat komentar blog bae.

      Aku akeh bgt sing rep takon janen, tuk siji.siji lah.

      Maaf ya mas, nek aku ngmg kaya kue, nek ra sopan hapus bae.

      Tujuanku pengin sinau bareng, :-)

      Matur nuhun

  • Unknown

    @Taufik Nurrohman Oh, gitu ya mas.. Panggil mas aja lah,, hehe... Akhirnya nemu guru juga...
    Terima kasih sensei... :)

  • Unknown

    cara terapkan ke blog ini gimana sob...q masih pusing.....apakah di masukkan ke CSS atau di edit HTML lgi

  • Taufik Nurrohman

    @trii waluyo Ya, ngerti. Aku jarang metu-metu mas, ndekem ng ngarep komputer terus haha **p
    Aku dudu guru, cuma hobiis. CSS & HTML kue dolananku hehe... Masa kecil kurang bahagia.
    Facebook, gampang dicari: Foto profil gambar rai abang.

    • Unknown

      Jebule pada bae ngapak, salam kenal kang sekang prakerta, nek pada bae ngapake kan kepenak nggo sinau (ngarep.com)

      • Unknown

        ealah jebule wong banyumas,, hahah njajal gawe template sing elegant om,aku rha tau nemu kowh -_-",aku kang jatilawang

  • Unknown

    ora sekolah si mas, ? apa ws kerja mas. q melu kerja lah mas, q bingung ws rampung ujian rep golet kerja ndi, ? men teyeng go tku laptop koh :(. rekasa ora dw laptop, q pling dolanan blog nang warnet mas, kadang warnete google chrome eror,hu. .

    Mas aku rep takon lah, (aku takone go b.indo men liane melu ngerti :D)

    1. Mas, tombol like facebook supaya ada di akhr postingan, gmana y ?
    Ada postingan ga mas taufik, ?

  • Taufik Nurrohman

    @trii waluyo Keluar daftar keluar daftar lagi. Alias, tidak menetap. Sekarang malah sudah berhenti total.

    Terlalu banyak orang-orang di atas Saya yang tidak bisa dipercaya *fck*

    Nggak nyoba ke PT mas? Saya sudah pernah tapi gagal hehe... :p
    Coba saja mas... tapi pakai jalur normal ya 0:), jangan pakai jalur suap-suapan x@

    Untuk meletakkan script like Facebook di bawah posting coba cari kode ini (Expand Template Widget dulu):

    <div class='post-footer'>

    Nah, taruh script Facebook di bawah kode itu :)

  • Unknown

    @Taufik Nurrohman Iya mas, aku lagi aftar di PT AHM, tinggal nunggu pengumuman wawancaranya,,, ^_^.

    Oh ya mas ????
    Jquey itu apa si mas ???
    Ada postingannya ga mas,:D...
    Aku ga tau Jquery,, bodoh banget aku ya...
    Aduh jan :'(

    Mohon pencerahannya B)

  • Taufik Nurrohman

    @trii waluyo JQuery itu salah satu jenis JavaScript Library: Kumpulan fungsi JavaScript yang sudah dipaketkan. Tugas kita cuma memakainya saja.
    Perkenalan JQuery »

  • Taufik Nurrohman

    @trii waluyo Oya, SEMOGA SUKSES! :-bd :-bd :-bd :-bd :-bd :-bd :-bd

  • Taufik Nurrohman

  • PRADANA TEKNIK AC

    ya setahu saya juga begitu bang..kalau tulisan atau gambar yang di hasilkan oleh java scrip itu tidak bisa terindex alias tidak bisa di baca oleh google.

  • Saktian

    kok ga bisa ya gan , saya taro di postingan malah ga muncul apa", mohon pencerahannya gan , secara rinci :(

    Ane masukin ke postingan , malah ga muncul apa- apa , :'(

  • Unknown

    mas, bisa buat yang tanpa gambar thumbnail dg theme dark red,.
    atau mungkin anda bisa membuatkan table of content untuk sebuah blog baca manga ?
    0:)

  • Unknown

    mas ini pasangnya di widget bisa ga?? di widget HTML/JavaScript

  • Viyan Pradita

    Weh, rameee ki :D
    Melu gabung lah mas... salam kenal mas topik, aku yo wong ngapak, mbanjar.

  • Anonim

    ini yg saya cari,, BLOGWALKING :-bd

  • Unknown

    makasih bang, langsung di coba

  • budkalon

    Mantap!!!!!!!!! :-bd
    Ini semuanya pas sama tema-tema blog saya!!! Makasih banget!!!!!!

  • neylan

    bagamana ya caranya supaya ketika di klik tombol selengkapnya ...maka ditampilkan tdk di new tab tapi masih didalam tab nya ,..terimakasih

    • Taufik Nurrohman

      Sayang mas, ini widget keluaran lama, jadi Saya tidak sempat menambahkan fitur itu...

  • Unknown

    sy pake salah style diatas mas pd homepage sy.., skrg klo hny menampilkan judul sj dgn menghilangkan gambar dan semuax, carax gmn tuh mas.., sdh sy coba tp gk bs2....

    mf bnyk nanya.. ^_^ , trus agar loadx gk trlalu berat bagusx file .js-nya di hosting atw jgn mas??

    • Taufik Nurrohman

      Mungkin seperti ini. Di konfigurasi widget juga ada:

      .itemposts img,
      .itemposts .iteminside,
      .itemposts .itemfoot {display:none}

      Supaya cepat, file dihosting di tempat yang sama dengan tempat hosting file lain yang juga dipakai di situ.

  • Unknown

    Mas Taufik, saya ingin membuat halaman daftar isi seperti punya mas. Kenapa ya mas, di blog uji coba daftar isi itu mau muncul, tetapi di blog asli tidak mau muncul. Tulisan "Memuat" tidak mau ease out, jadi hanya stack terus dengan kata memuat. Tapi kalau di blog uji coba daftar isi bisa ease out secara sempurna. Padahal, semua kode html template sama persis mas. Apakah ada pengaruh lain mungkin dari pengaturan halaman page atau bagaimana mas? terima kasih.

  • Unknown

    mastaufiq...,
    tooltipnya bs ditambah efek gk mas, misalx agak diperbesar dikit, atw efek apa gitu.. \o/, tooltip saat cursor menyorot judul post.. \o/

  • Unknown

    Misalkan Navigasinya di ganti dengan load more seperti apa caranya?

  • dhanyn10

    mas tanya, widgetnya saya pasang di sini:halaman-uji-coba.blogspot.com, bisa, tapi di dhanynurdiansyah.blogspot.com kok nggak bisa y mas?

    • Taufik Nurrohman

      [20:27:47.182] SyntaxError: missing ; before statement @ http://dhanynurdiansyah.blogspot.com/:556
      [20:27:47.184] ReferenceError: executeonload is not defined @ http://dhanynurdiansyah.blogspot.com/:587
  • Imron Fhatoni

    mas taufik saya mau nanya nie soal daftar isi navigasinya mas..
    kalau seandainya daftar isi tersebut dibuat menjadi 2kolom untuk digunakan pada homepage kira2 bagaimana mas...?

  • Imron Fhatoni

    trimakasih banyak mas taufik....

  • Unknown

    Buat menu gitu untuk link Gambar? bagus kaya nya

  • Kang Fathur

    Mas Taufik kalau Loading/Memuat-nya mau pake gambar gimana ya???

  • Unknown

    tuk merubah stylenya kayak gini, gmn carax ya mas Taufik..?

  • Sule M2010

    Desain sitemap ini emang Mantap, Izin Share Om

  • Mas Tamvan

    Ga ada backupan kodenya ya kang.
    Hostingnya dah g ada.

Komentar telah ditutup.