Membuat Daftar Isi Otomatis Akordion Berdasar Label Blogger (Blogspot)

Oleh

Daftar isi otomatis akordion berdasar label merupakan tampilan daftar isi blog/website yang indah dan dinamis untuk ditampilkan. Untuk membuatnya, maka berikut ialah langkah-langkahnya :

  1. Masuk halaman dashboard blogger (blogspot).
  2. Pilih menu template.
  3. Pilih edit html.
  4. Pastikan blog/website sudah terdapat kode untuk memuat jQuery dengan cara mencari (tekan Ctrl + F pada teks kode html) kode berikut di elemen html blog/website :<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
  5. Jika belum terdapat kode di atas pada elemen html blog/website, maka masukkan kode di atas sebelum kode </head> html.
  6. Klik simpan (save).
  7. Pilih menu halaman dan buat halaman statis (blank page) baru.
  8. Beri judul halaman statis blog/website.
  9. Pilih tab html dan masukkan kode berikut :<style type="text/css">#daftar-isi{background-color:#333;border:2px solid #fafafa;color:#fff;margin-bottom:10px;-webkit-box-shadow:0 1px 2px #000;-moz-box-shadow:0 1px 2px #000;box-shadow:0 1px 2px #000;overflow:hidden}#daftar-isi .judul-label{overflow:hidden;cursor:pointer;text-decoration:none;font:normal 13px/100% 'Verdana',Arial,Sans-serif;padding:10px 15px 11px;color:#bbb;text-shadow:0 1px 1px rgba(0,0,0,0.3);border-top:1px solid #444;border-bottom:1px solid #222;background:#333;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c3c3c',endColorstr='#333');background:-webkit-linear-gradient(top,#3c3c3c,#333);background:-moz-linear-gradient(top,#3c3c3c,#333);background:-o-linear-gradient(#3c3c3c,#333);background:linear-gradient(#3c3c3c,#333))}#daftar-isi .headactive{color:#efefef;border-top:1px solid #24b6e3;border-bottom:1px solid #104968;background:#248ab0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#248AB0',endColorstr='#21739B');background:-webkit-linear-gradient(top,#248AB0,#21739B);background:-moz-linear-gradient(top,#248AB0,#21739B);background:-o-linear-gradient(#248AB0,#21739B);background:linear-gradient(#248AB0,#21739B))}#daftar-isi ol{background-color:#333;margin:0;padding:0;color:#999;list-style:none}#daftar-isi li{line-height:normal;font:normal 11px/100% 'Verdana',Arial,Sans-serif;margin:0;padding:5px 5px 5px 15px;white-space:nowrap;text-align:left;border-top:1px solid #444;border-bottom:1px solid #222}#daftar-isi li:first-child{border-top:0}#daftar-isi a{color:#5687f8}#daftar-isi a:hover{text-decoration:underline}#daftar-isi a:visited{color:#5687b8}#daftar-isi strong{font-weight:bold;font-style:italic;color:red}</style><script type="text/javascript">openNewTab=accToc=showNew=!0;var maxNew=10,baru="Baru!",sDownSpeed=600,sUpSpeed=600;</script><script src="http://reader-download.googlecode.com/files/hompishive-labels-v1.js" type="text/javascript"></script><script src="/feeds/posts/summary?max-results=10000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
  10. Klik publish.
  11. Muat halaman statis blog/website yang baru dibuat.
  12. Selesai.
Membuat halaman statis baru blogger (blogspot)
Tab HTML Halaman Statis Blogger (Blogspot)
Kode HTML daftar isi akordion berdasar label blogger (blogspot)
Hasil Daftar Isi Akordion

Komentar

Posting Komentar

Postingan populer dari blog ini

Menampilkan File Google Drive Pada Blog / Website

Oleh
Gambar
Google Drive sangat berguna apabila sebuah website/blog ingin menampilkan ( embed ) sebuah/beberapa file dalam artikel/halaman website/blog untuk dibaca ataupun dilihat/diunduh oleh pengunjung website/blog. Langkah pertama yang dilakukan ialah dengan menggugah ( upload ) file yang akan dibagi ( share ) ke Google Drive. Sebagai informasi, Google Drive mengakomodasi file apa saja selama tidak mengandung virus. Langkah selanjutnya ialah sebagai berikut : Pilih (centang) file yang akan dibagi ( share ) dalam Google Drive, kemudian klik pilihan menu More --> Share --> Share . Kemudian akan muncul pengaturan berbagi file dan link berbagi ( share ) sebagai berikut : Kemudian ubah akses file Google Drive di atas menjadi public Sehingga menjadi seperti ini, kemudian kopi link yang disediakan Google Drive. Untuk menampilkan ( embed ) file Google Drive : Perhatikan link yang telah dikopi : https://drive.google.com/file/d/0B-wrkvPrI0SQM1RiandKXzVuM2M/edit?usp=sharing Untuk menampilkan ( em
Baca Selengkapnya

Membuat Tombol Kembali Ke Atas Melayang di Pojok Kanan Bawah Blogger (Blogspot)

Oleh
Gambar
Jika halaman pada suatu blog/website sangatlah panjang, maka ada baiknya untuk memasang tombol kembali ke atas ( back to top ) untuk memudahkan navigasi pengunjung/pembaca blog/website kembali ke tampilan halaman atas blog/website. Tombol kembali ke atas ( back to top ) berada pada lapisan ( layer ) paling atas tampilan blog/website dan bergerak mengikuti tampilan/kursor halaman yang sedang dibaca pengunjung blog/website. Apabila tombol kembali di atas ( back to top ) di-klik di tampilan halaman blog/website mana saja, maka tampilan halaman blog/website akan bergulir menuju tampilan halaman blog/website paling atas (tampilan awal saat membuka halaman blog/website). Langkah-langkah untuk membuat tombol kembali ke atas ( back to top ) antara lain : Buka halaman dashboard blogger (blogspot). Pilih menu tata letak ( layout ). Tambahkan widget/gadget html baru (atau bisa digabungkan dengan widget/gadget html yang sudah ada yang disukai). Kopikan kode berikut pada widget/gadget html : <a
Baca Selengkapnya

Membuat Judul Halaman Blog Dinamis Blogger (Blogspot) Untuk Optimasi Mesin Pencarian

Oleh
Gambar
Judul halaman merupakan salah satu parameter mesin pencarian dalam menampilkan hasil pencarian berdasar kata kunci pencarian. Mesin pencari akan mencari judul yang paling relevan dengan kata kunci pencarian. Maka dari itu, pemilihan judul halaman blog menjadi faktor penting yang perlu diperhatikan dalam optimasi mesin pencarian. Terdapat beberapa macam format judul halaman blog, di antaranya ialah judul halaman saat di halaman utama ( homepage ) dan juga judul halaman ketika ada di halaman artikel. Sedangkan gambar di bawah ialah contoh judul halaman artikel suatu blog yang belum dioptimasi untuk kata kunci pencarian 'hide and minimize of image'. Optimasi judul halaman artikel blog secara dinamis untuk mesin pencarian : Contoh gambar di atas ialah contoh halaman artikel blog yang sudah dioptimasi untuk mesin pencarian. Format-format judul halaman artikel yang dapat dijadikan sebagai optimasi mesin pencarian antara lain : "Judul Artikel | Nama Blog" "Judul Artikel
Baca Selengkapnya