Daftar Tema · Widget Daftar Isi Blogger dengan Navigasi
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
<link rel="stylesheet" href="//dte-project.googlecode.com/svn/trunk/blogger-toc-with-pagination_minima-brown-theme.css"/>Elegant Black Theme
<link rel="stylesheet" href="//dte-project.googlecode.com/svn/trunk/blogger-toc-with-pagination_elegant-black-theme.css"/>Facebook Theme
<link rel="stylesheet" href="//dte-project.googlecode.com/svn/trunk/blogger-toc-with-pagination_facebook-theme.css"/>CSS3 Diary Book Theme
<link rel="stylesheet" href="//dte-project.googlecode.com/svn/trunk/blogger-toc-with-pagination_css3-diary-book-theme.css"/>Minima White Theme
<link rel="stylesheet" href="//dte-project.googlecode.com/svn/trunk/blogger-toc-with-pagination_minima-white-theme.css"/>Dark Red Theme
<link rel="stylesheet" href="//dte-project.googlecode.com/svn/trunk/blogger-toc-with-pagination_dark-red-theme.css"/>Yellow Green Theme
<link rel="stylesheet" href="//dte-project.googlecode.com/svn/trunk/blogger-toc-with-pagination_yellow-green-theme.css"/>Construction Theme
<link rel="stylesheet" href="//dte-project.googlecode.com/svn/trunk/blogger-toc-with-pagination_construction-theme.css"/>Dark Blue Theme
<link rel="stylesheet" href="//dte-project.googlecode.com/svn/trunk/blogger-toc-with-pagination_blue-theme.css"/>
67 Comments:
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
@system of blog Oke, nanti Saya tambahkan lagi yang warna BLACK.
MAs kalau untuk tema seperti ini ( http://usilopbg.blogspot.com/p/daftar-isi.html) bisa dibuatin ga, ada garis garisnya kaya buku beneran
@dusal Ditunggu saja :)
tema twitter bang, biru2 cerah gitu
@system of blog Bingung bikin backgroundnya.
Ckckckck di coba2 aja lah kalau ada waktu :D
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
@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...
السلام عليكم ورحمة الله وبركاته
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...
والسلام عليكم ورحمة الله وبركاته
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
@trii waluyo Yang betul pernyataan yang ke dua :)
Oh, makasih mas.
Kalau buat daftar isi versi blognya mas gmana, ?
Supaya bisa di.ganti temanya, ?
Ada postinganya ga mas, ?
Terima kasih:-)
@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
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 :-)
@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
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 :-)
@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".
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
@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 :)
request warna coklat dong bang :D
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. .
@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]
@Taufik Nurrohman Oh, gitu ya mas.. Panggil mas aja lah,, hehe... Akhirnya nemu guru juga...
Terima kasih sensei... :)
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
cara terapkan ke blog ini gimana sob...q masih pusing.....apakah di masukkan ke CSS atau di edit HTML lgi
@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.
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, ?
@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 :)
@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)
@trii waluyo JQuery itu salah satu jenis JavaScript Library: Kumpulan fungsi JavaScript yang sudah dipaketkan. Tugas kita cuma memakainya saja.
Perkenalan JQuery »
@trii waluyo Oya, SEMOGA SUKSES! :-bd :-bd :-bd :-bd :-bd :-bd :-bd
@Metal-xp Baca artikel ini dulu: Widget Daftar Isi Blogger dengan Navigasi Halaman
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.
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 , :'(
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:)
Dihapus saja pakai kode CSS. Taruh kode ini di bawah elemen <link>:
<style>#toc-outer .itemposts img {display:none;}</style>
Demo: http://jsfiddle.net/tovic/yJ6Mg/13/
terimakasih jawabannya bung taufik.
mas ini pasangnya di widget bisa ga?? di widget HTML/JavaScript
Weh, rameee ki :D
Melu gabung lah mas... salam kenal mas topik, aku yo wong ngapak, mbanjar.
ini yg saya cari,, BLOGWALKING :-bd
makasih bang, langsung di coba
Mantap!!!!!!!!! :-bd
Ini semuanya pas sama tema-tema blog saya!!! Makasih banget!!!!!!
bagamana ya caranya supaya ketika di klik tombol selengkapnya ...maka ditampilkan tdk di new tab tapi masih didalam tab nya ,..terimakasih
Sayang mas, ini widget keluaran lama, jadi Saya tidak sempat menambahkan fitur itu...
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)
Tofik?
Jebule pada bae ngapak, salam kenal kang sekang prakerta, nek pada bae ngapake kan kepenak nggo sinau (ngarep.com)
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??
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.
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.
mastaufiq...,
tooltipnya bs ditambah efek gk mas, misalx agak diperbesar dikit, atw efek apa gitu.. \o/, tooltip saat cursor menyorot judul post.. \o/
ealah jebule wong banyumas,, hahah njajal gawe template sing elegant om,aku rha tau nemu kowh -_-",aku kang jatilawang
Misalkan Navigasinya di ganti dengan load more seperti apa caranya?
mas tanya, widgetnya saya pasang di sini:halaman-uji-coba.blogspot.com, bisa, tapi di dhanynurdiansyah.blogspot.com kok nggak bisa y mas?
[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
solusinya gimana mas?
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...?
⇒ /2012/03/daftar-isi-blogger-dengan-navigasi.html?showComment=1347203327449#c5852113577048499633
trimakasih banyak mas taufik....
Buat menu gitu untuk link Gambar? bagus kaya nya
Mas Taufik kalau Loading/Memuat-nya mau pake gambar gimana ya???
#loadingscript {
background:url('gambar-loading.gif') no-repeat 50% 50%;
text-indent:-9999px;
}
⇒ https://code.google.com/p/dte-project/source/browse/trunk/blogger-toc-with-pagination_facebook-theme.css#22
tuk merubah stylenya kayak gini, gmn carax ya mas Taufik..?
[img]http://4.bp.blogspot.com/-c1yvBbnL8HM/U5G7RdDqUeI/AAAAAAAAMRM/tCE7AbqmQNA/s1600/sdsds.JPG[/img]
Desain sitemap ini emang Mantap, Izin Share Om
Ga ada backupan kodenya ya kang.
Hostingnya dah g ada.
→ https://github.com/tovic/dte-project
Post a Comment
<< Home