Traffic Visitor
31 Mar 2013
Salam Pembaca Blog , Membuat sebuah daftar isi merupakan hal sangat penting karena para pengunjung blog anda bisa dengan mudah mencari artikel/konten yang ada di blog anda. Ada dua cara untuk tutorial kali ini yaitu membuat daftar isi perlabel secara otomatis dan secara manual. Jika anda berminat untuk membuatnya silahkan ikuti tutorial berikut ini :
Keterangan : width:auto; menunjukkan lebar scroll box akan mengikuti lebar sidebar.
Jika ingin menampilkan lebih dari satu label, silakan ditambahkan script untuk labelnya. Misalnya saya akan menampilkan label Tutorial membuat blog dan komputer maka script-nya akan menjadi seperti di bawah ini.
1. Buka daftar isi blog yang tadi anda buat.
2. Blok posting-posting dari label mana yang akan di ambil. Misalnya saya mengambil label Tutorial membuat blog juga seperti contoh menggunakan script. Setelah diblok, lalu klik kanan dan pilih Lihat Kode Sumber Teks yang Dipilih. Atau tekan CTRL+U
3. Copy semua teks yang muncul di jendela Sumber DOM yang Dipilih.
4. Masuk ke akun Blogger anda.
5. Klik Rancangan > Elemen Laman > Tambah Gadget.
6. Pilih HTML/JavaScript.
7. Beri judul, paste kode tadi di Konten. Silakan diedit dan hapus kata-kata yang tidak diperlukan (seperti kata "New" dan lain-lain) sehingga susunannya akan menjadi seperti di bawah ini.
1. Silahkan masuk di Blogger anda, klik Rancangan > Elemen Laman > Tambah Gadget. Kemudian pilihHTML/JavaScript.
2. Berikan judulnya (“Daftar isi” “ isi blog ini” ) sesuai yang diinginkan, lalu copy kode di bawah ini dan paste diRuangan HTML/JavaScript.
<div style="overflow:auto; width:auto; height:100px; padding:5px; border:1px solid #e6e4e3;"><ol><script style="text/javascript">var numposts = 100;var standardstyling = true;</script><script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>
<ol><script src="http://mbeiji.blogspot.com//feeds/posts/default/-/Tutorial%20membuat%20blog?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script></ol></ol></div>
Keterangan : width:auto; menunjukkan lebar scroll box akan mengikuti lebar sidebar.
height:100px; menunjukkan tinggi scroll box setinggi 100 pixsel. Silakan diganti angkanya untuk mengubah tingginya.
border:1px solid #e6e4e3; menunjukkan garis keliling (border) scroll box bergaya solid setebal 1 piksel berwarna #e6e4e3. Silakan disesuaikan dengan keadaan template anda.
<ol> menunjukkan numbered list, kalau ingin menjadi bullet list silakan diganti dengan <ul>.
Ganti http://mbeiji.blogspot.com/ dengan alamat blog anda.
Ganti Tutorial%20membuat%20blog dengan label yang anda inginkan. Penulisan label harus sesuai dengan yang tertera di blog. Perhatikan huruf besar-kecilnya dan spasi diganti dengan %20.
3. Klik tombol SIMPAN.
4. Pindahkan elemen tadi ke tempat yang anda inginkan.
5. Klik tombol SIMPAN.
4. Pindahkan elemen tadi ke tempat yang anda inginkan.
5. Klik tombol SIMPAN.
Jika ingin menampilkan lebih dari satu label, silakan ditambahkan script untuk labelnya. Misalnya saya akan menampilkan label Tutorial membuat blog dan komputer maka script-nya akan menjadi seperti di bawah ini.
<div style="overflow:auto; width:auto; height:100px; padding:5px; border:1px solid #e6e4e3;"><ol><script style="text/javascript">var numposts = 100;var standardstyling = true;</script><script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>
<h3> Tutorial blog</h3><ol><script src="http://mbeiji.blogspot.com//feeds/posts/default/-/Tutorial%20membuat%20blog?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script></ol></ol><br/ >
<h3>Komputer</h3><ol><script src="http://mbeiji.blogspot.com//feeds/posts/default/-/komputer?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script></ol></ol></div>
Cara di atas merupakan cara yang menggunakan script. Jika anda tertarik untuk menggunakan cara manual seperti yang saya terapkan pada blog ini dengan cara manual ini blog anda tidak akan menjadi lelet/lemot saat dibuka tidak seperti halnya menggunakan script, silakan simak baik – baik langkah-langkahnya di bawah ini. Sebelum mengikuti cara ini, silakan anda ikuti langkah berikut :
1. Buka daftar isi blog yang tadi anda buat.
2. Blok posting-posting dari label mana yang akan di ambil. Misalnya saya mengambil label Tutorial membuat blog juga seperti contoh menggunakan script. Setelah diblok, lalu klik kanan dan pilih Lihat Kode Sumber Teks yang Dipilih. Atau tekan CTRL+U
3. Copy semua teks yang muncul di jendela Sumber DOM yang Dipilih.
4. Masuk ke akun Blogger anda.
5. Klik Rancangan > Elemen Laman > Tambah Gadget.
6. Pilih HTML/JavaScript.
7. Beri judul, paste kode tadi di Konten. Silakan diedit dan hapus kata-kata yang tidak diperlukan (seperti kata "New" dan lain-lain) sehingga susunannya akan menjadi seperti di bawah ini.
<a href="http://mbeiji.blogspot.com//2011/12/cara-membuat-blog-di-bloggerblogspot.html">Cara membuat blog di blogger</a></li><li>
<a href="http://mbeiji.blogspot.com//2011/12/cara-setting-blog-di-blogger_25.html">Cara Setting Blog Di blogger</a></li><li>
<a href="http://mbeiji.blogspot.com//2011/12/cara-upload-video-diblog.html">Cara Upload Video diBlog</a></li><li>
<a href="http://mbeiji.blogspot.com//2011/12/cara-membuat-background-di-postingan.html">Cara membuat background di postingan blog</a></li><li>
<a href="http://mbeiji.blogspot.com//2011/12/cara-mengganti-template-di-blogger.html">Cara Mengganti Template di blogger</a></li><li>
<a href="http://mbeiji.blogspot.com//2011/12/cara-membackup-template-blog-di-blogger.html">Cara membackup template blog di blogger</a></li><li>
<a href="http://mbeiji.blogspot.com//2011/12/cara-custom-domain-di-blogger.html">Cara Custom Domain di Blogger</a></li><li>
<a href="http://mbeiji.blogspot.com//2011/12/cara-membuat-kategori-label.html">Cara membuat kategori label</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-membuat-dan-memasang-favicon.html">Cara membuat dan memasang Favicon</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/membuat-favicon-atau-logo-blog-di.html">Membuat favicon atau logo blog di photoshop</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-daftar-di-feedburnercom.html">Cara Daftar di Feedburner.com</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-membuat-banner-animasi-di-blog.html">Cara Membuat Banner Animasi di blog</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-pasang-banner-di-header-blog.html">Cara Pasang Banner di Header Blog</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-menyembunyikan-judul-blog-di.html">Cara Menyembunyikan Judul Blog di Header</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-membuat-menu-dropdown-di-blog.html">Cara Membuat Menu Dropdown di Blog</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-membuat-readmore-pada-blog-1.html">Cara Membuat Readmore pada blog (1)</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-membuat-text-area-pada-blog.html">Cara Membuat Text Area pada blog</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-mengubah-lebar-kolom-template.html">Cara Mengubah Lebar Kolom Template</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-pasang-buku-tamu-di-blog.html">Cara Pasang Buku Tamu di Blog</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-pasang-kode-iklan-adsensecamp-di.html">Cara Pasang Iklan AdsenseCAMP di Bawah Posting</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-pasang-widget-jam-di-sidebar.html">Cara Pasang widget Jam di Sidebar</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-agar-postingan-tidak-bisa-dicopy.html">Cara agar postingan tidak bisa dicopy paste</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-edit-blog-secara-offline.html">Cara edit Blog Secara Offline</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-memasang-widgettool-untuk-user.html">Cara memasang widget/tool untuk User Online</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-membuat-efek-salju-pada-blog.html">Cara membuat efek salju pada blog</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-membuat-gambar-bergerak-pada-blog.html">Cara membuat gambar bergerak pada blog</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-membuat-shoutmix.html">Cara membuat shoutMix</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-membuat-tombol-like-pada-postingan.html">Cara membuat tombol like pada postingan</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-membuat-tulisan-bergerak-di-blog.html">Cara membuat tulisan bergerak di blog</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-mengganti-kursor-di-blog.html">Cara mengganti kursor di blog</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-sembunyikan-shoutbox-di-sidebar.html">Cara sembunyikan shoutbox di sidebar</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/membuat-refresh-pada-blog.html">Membuat Refresh pada blog</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/membuat-pesan-pembuka-dan-penutup-pada.html">Membuat pesan pembuka dan penutup pada blog</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/menghasilkan-uang-dari-ngeblog.html">Menghasilkan uang dari ngeBLOG</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/perjalanan-blog-dalam-menyambut-tahun.html">Perjalanan blog dalam menyambut tahun baru 2012</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/tips-trik-seo-2012.html">Tips Trik SEO 2012</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li></ol></div>
8. Klik tombol SIMPAN.
9. Pindahkan elemen ke tempat yang anda inginkan.
10. Klik tombol SIMPAN.
9. Pindahkan elemen ke tempat yang anda inginkan.
10. Klik tombol SIMPAN.
Selesai deh tutorial kali ini ,semoga bermanfaat bagi pembaca .Terima kasih telah membaca.
Langganan:
Posting Komentar
(Atom)
Numpang nyari rezeki, kalo nyampah hapus aja - Informasi Menarik Mengenai Cara Cepat Mengeringkan dan Menyembuhkan Luka Diabetes dengan Obat Herbal Pengering Luka Diabetes Jelly Gamat Gold G.
BalasHapusNumpang nyari rezeki, kalo nyampah hapus aja ya - Informasi Menarik Mengenai Obat Herbal Pencegah dan Penyembuh Congek atau cara cepat dan ampuh menyembuhkana telinga congek anda bisa mengkonsumsi obat herbal trica jus yang tersedia di agen kami
BalasHapusMaaf ganggu numpang buka lapak, hapus aja ya kalo spam - Informasi Menarik Mengenai Obat Herbal Pencegah dan Penyembuh Tipes Jelly Gamat Gold G Sebagai Salah Satu Cara Cepat dan Ampuh Mengobati serta Mencegah Tipes.
BalasHapusMaaf ganggu numpang buka lapak, hapus aja ya kalo spam - Informasi Menarik Mengenai Cara Cepat Mengeringkan dan Menyembuhkan Luka Bernanah dengan Obat Oles Pengering Luka Bernanah dan Luka Borok
BalasHapusIjin buka lapak herbal. Hapus aja gan kalo spam - Informasi Menarik Mengenai Obat Herbal Pencegah dan Penyembuh Kista Ovarium Jelly Gamat Gold G Sebagai Salah Satu Cara Cepat Mengobati dan Menyembuhkan Penyakit Kista Pada Wanita.
BalasHapusIjin buka lapak herbal. Hapus aja gan kalo spam - Informasi Menarik Mengenai Obat Herbal Pencegah dan Penyembuh Hepatitis dengan Jelly Gamat Gold G yang Juga Merupakan Cara Cepat Mengobati dan Menyembuhkan Liver.
BalasHapusIjin buka lapak herbal. Hapus aja gan kalo spam - Informasi Menarik Mengenai Cara Cepat Mengobati dan Menyembuhkan Flu Berkepanjangan dengan Obat Alami Ampuh Pencegah dan Penyembuh Flu Berkepanjangan Jelly Gamat Gold G.
BalasHapusIjin buka lapak herbal. Hapus aja gan kalo spam - Informasi Menarik Mengenai Cara Cepat Mengobati dan Menyembuhkan Flu Menahun dengan Obat Herbal Ampuh Pencegah dan Penyembuh Flu Menahun Jelly Gamat Gold G.
BalasHapusIjin buka lapak herbal. Hapus aja gan kalo spam - Informasi Mengenai Pencegahan dan Pengobatan Pilek Menahun Secara Alami dengan Obat Herbal Penyembuh Pilek Menahun Jelly Gamat Gold G.
BalasHapusIzin nyari rezeki gan kalo spam hapus aja ya - Informasi Menarik Mengenai Obat Herbal Pencegah dan Penyembuh Mioma Uteri Jelly Gamat Gold G Sebagai Cara Cepat dan Ampuh Mengatasi Mioma Secara Alami Tanpa Operasi.
BalasHapusIzin nyari rezeki gan kalo spam hapus aja ya - Informasi Menarik Mengenai Obat Herbal Pencegah dan Penyembuh Kanker Payudara dengan Herbal Jelly Gamat Gold G yang Juga Sebagai Cara Cepat dan Ampuh Mengatasi Kanker Secara Alami Tanpa Operasi.
BalasHapusIzin nyari rezeki gan kalo spam hapus aja ya - Pengobatan Penyakit Secara Alami Sebagai Cara Cepat Mengobati dan Menyembuhkan Penyakit dengan Obat Tradisional Jelly Gamat Gold G.
BalasHapus