Mini Niche Scraper Banner 468x60
Panduan Blogspot Master
Mini Niche Scraper Banner 125x125
Google PageRank Checker Powered by MyPagerank.Net
Tampilkan postingan dengan label daftar isi. Tampilkan semua postingan
Tampilkan postingan dengan label daftar isi. Tampilkan semua postingan

Cara Membuat Daftar Isi Label Tertentu Atau Banyak Label Di Blog

 Cara Membuat Daftar Isi Label Tertentu Atau Banyak Label (Category) Di Blog - Daftar Isi by label (Category) itulah kata familiarnya dalam dunia blogger untuk artikel yang akan saya share ini. Membuat daftar isi dalam blog merupakan keinginan dari setiap blogger maupun design web. Sebab dengan cara ini akan dapat mempermudah para pengunjung atau visitor yang datang ke blog kita, Agar bisa dengan cepat menemukan saat mencari artikel posting apa yang di inginkan.

 Tampilan dari daftar isi by label ini kurang lebih seperti daftar isi Jquery Accordion, Kerena fungsinya juga sama-sama daftar isi by label. Namun untuk daftar isi dengan Jquery Accordion sudah menggunakan efek Jquery dan akan menampilkan daftar isi dari isi keseluruhan blog itu sendiri, Sedangkan daftar isi by label atau banyak label ini bisa di atur manual perlabel atau banyak label yang kita ingin tampilkan di halaman posting, laman maupun widget blog.

 Agar sobat tidak bingung dan ingin melihat seperti apa daftar isi dengan Jquery Accordion, Silahkan sobat bisa lihat pada artikel posting yang sudah pernah saya share dan perbarui sebelumnya, Yaitu tentang Cara Membuat Daftar Isi Jquery Accordion Di Blog.

 Oke sekarang kita kembali ke pokok bahasan cara membuat daftar isi label tertentu atau banyak label di blog. Cara pemasangannya di blog sangat mudah sekali, Karena sobat tidak usah repot-repot Edit HTML dalam template blog sobat yang tentunya sangat rumit dan membingungkan. Cukup hanya menaruh kodenya dalam rancangan atau Tata Letak blog melalui Tambah Gadget, Jadi sangat gampang sekali untuk di pindah-pindah widgetnya seperti yang sobat inginkan agar sesuai dengan tampilan blog sobat.

Lihat contoh gambar screenshot berikut atau lihat pada blog DEMO KUCOPAS.

Cara Membuat Daftar Isi Label Tertentu Atau Banyak Label Di Blog


Cara memasangnya di blog ada dua cara yaitu:
1. Memasang Daftar isi label tertentu atau banyak label pada Widget blog.
2. Memasang Daftar isi label tertentu atau banyak label pada Posting dan Laman blog.

Untuk cara memasangnya silahkan sobat ikuti langkah-langkahnya sebagai berikut.

1. Cara memasang Daftar isi Label tertentu atau banyak Label pada Widget Blog
  • Silahkan sobat >> Login atau Masuk ke Blogger.com menggunakan akun sobat.
  • Pada Dashboard tampilan blogger baru, Pilih Menu >> Tata Letak >> Tambah Gadget >> HTML/JavaScript.
  • Kemudian masukkan semua kode berikut ke dalam kotak HTML/JavaScript.
<script>
var numposts = 100;
var standardstyling = true;
</script>
<script src="http://kucopas-js.googlecode.com/files/DaftarIsiByLabel.js" type="text/javascript"></script>
<div style="border: 1px solid #000000; height: 200px; overflow: auto; padding: 5px; width: auto;">
<h3>
TUTORIAL BLOG</h3>
<ul><script src="http://kuc0pas.blogspot.com/feeds/posts/default/-/TUTORIAL%20BLOG?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script> </ul>
<h3>
TRIK FACEBOOK</h3>
<ul><script src="http://kuc0pas.blogspot.com/feeds/posts/default/-/trik%20facebook?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script> </ul>
<h3>
TECHNO</h3>
<ul><script src="http://kuc0pas.blogspot.com/feeds/posts/default/-/trik%20komputer?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script> </ul>
</div>
  • Jika sudah di masukkan semua kodenya, Silahkan sobat klik >> Simpan dan lihat hasilnya.
Catatan:

- Warna Hijau : Silahkan sobat ganti dengan alamat URL blog sobat.
- Warna Merah : Nama Judul Label, Silahkan sobat ganti sesuai dengan keinginan sobat.
- Warna Biru : Nama label blog yang daftar isinya akan di tampilkan, Silahkan sobat ganti dengan label blog sobat, Besar kecil huruf harus sesuai dengan label blog sobat. Gunakan %20 untuk label yang ada space atau spasinya.
- Jika sobat ingin menambahkan atau mengurangi daftar label yang di tampilkan, Silahkan sobat bisa menambah atau mengurangi kode script-nya.
- Warna Pink adalah ukuran box atau kotak scroll. Silahkan sobat ganti sesuai dengan keinginan sobat.

2. Cara Memasang Daftar isi label tertentu atau banyak label pada Posting dan Laman blog.
  • Silahkan sobat >> Login atau Masuk ke Blogger.com menggunakan akun sobat.
  • Pada Dashboard pilih >> Buat Entri Baru Untuk posting.
  • Untuk Laman pilih Menu >> Laman >> Laman Baru.
  • Pada Kotak Posting atau Laman, Pilih Mode HTML. Bukan Compose.
  • Kemudian masukkan semua kode di atas tadi.
  • Jika sudah, Silahkan sobat klik >> Publikasikan dan lihat hasilnya.
 Jika sobat mengikuti cara dan langkah-langkahnya dengan benar, Maka dapat saya pastikan trik dan tips ini berhasil dengan sempurna. Namun jika sobat mengalami kesulitan, Silahkan bertanya pada form komentar yang tersedia.

 Semoga artikel tentang Cara Membuat Daftar Isi Label Tertentu Atau Banyak Label Di Blog, Bisa sangat bermanfaat bagi sobat KUCOPAS semua. Selamat Berkarya...
10.33 | 0 komentar | Read More
Label: , ,

Cara Membuat Dan Memasang Daftar Isi Blog Dengan Jquery Accordion

 Cara Membuat Dan Memasang Daftar Isi Blog Dengan Jquery Accordion - Kali ini saya akan share artikel tentang cara membuat daftar isi di blog. Namun daftar isi yang akan saya kasih triknya berikut ini bukan seperti daftar isi yang biasa, Karena daftar isi blog ini menggunakan Jquery Accordion mempunyai efek yang sangat luar biasa mengagumkan.

 Daftar isi blog dengan Jquery Accordion ini yang membuat kodenya adalah Abu Farhan, Kemudian di modifikasi lagi kodenya oleh Teja HTC. Lalu daftar isi blog Jquery Accordion ini saya edit lagi sehingga lebih mudah untuk di pasang atau di terapkan pada blog sobat semua.

 Daftar isi atau sitemap di blog memang sangat penting, Karena dapat memudahkan para pengunjung untuk mengetahui semua daftar dari isi blog itu sendiri. Kegunaan yang lain adalah agar lebih memudahkan visitor atau pengunjung blog dalam mencari konten atau artikel posting yang di butuhkan.

 Jika sobat ingin memasang iklan pada blog sobat, Kemungkinan besar blog sobat akan di review oleh pemasang iklan. Apakah layak atau tidak blog sobat di tempeli iklan dari penyedia iklan. Yang biasa menonjol di review adalah tentang apakah navigasi pencarian konten berbelit-belit dan tepat pada tujuan yang di cari atau tidak, Kemudian apakah ada pemasangan sitemap atau daftar isi pada blog atau tidak.

 Menurut webmaster, Memasang daftar isi atau sitemap pada blog itu wajib hukumnya. Sebab untuk menunjang agar menjadi suatu blog yang profesional memang harus mempunyai navigasi pencarian yang tertuju dengan benar untuk memudahkan para pengunjung atau visitor mencari apa yang di cari atau di butuhkan dalam blog tersebut.

 Mengenai tampilan atau wujud dari daftar isi blog yang menggunakan Jquery Accordion ini kurang lebih seperti seperti gambar berikut di bawah ini. Namun biasanya link dari judul akan berubah warna mengikuti warna link default dari blog sobat.

Cara Membuat Dan Memasang Daftar Isi Blog Dengan Jquery Accordion

 Efek dari Daftar isi blog dengan Jquery Accordion ini akan menimbulkan efek dropdown seperti menu, Efeknya akan timbul jika mouse di arahkan dan di klik pada satu pilihan label atau kategori, Maka akan keluar daftar isi dari label atau kategori tersebut berurutan kebawah sesuai dengan banyaknya isi label atau kategori blog.

 Jika sobat tertarik untuk membuat, memasang dan menerapkannya pada blog sobat, Caranya sangat mudah. Jadi silahkan sobat ikuti langkah-langkahnya dengan teliti yang akan saya jelaskan sebagai berikut:
  • Langkah Pertama:
  1. Silahkan sobat >> Masuk/Login >> ke Blog sobat.
  2. Pada "Dasboard" Tampilan blogger baru, Pilih Menu >> Template >> Edit HTML >> Lanjutkan.
  3. Jangan lupa sobat "Centang" kotak >> Expand Template Widget.
  4. Kemudian silahkan sobat cari kode ]]></b:skin> (Gunakan CTRL+F pada keyboard sobat untuk memudahkan pencarian).
  5. Jika sudah ketemu, Silahkan sobat masukkan kode CSS berikut tepat sebelum atau di atas kode ]]></b:skin>
.judul-label{background:-moz-linear-gradient(top,  #393E41,  #000000);font-weight:bold;line-height:1.4em;margin-bottom:5px;overflow:hidden;white-space:nowrap;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 1px 1px 4px #AAAAAA;box-shadow: 0 1px 2px rgba(0,0,0,.2);color: #e9e9e9;border: 2px solid white !important;background:#000 url("http://2.bp.blogspot.com/-6OcDgB9yXXI/TVfIh9HaUYI/AAAAAAAABUk/PUZFTYOTg-8/s1600/1m3.gif") no-repeat}.data-list{line-height:1.5em;margin-left:5px;margin-right:5px;padding-left:15px;padding-right:5px;white-space:nowrap;text-align:left;font-family:kristen itc;font-size:12px;}.list-ganjil{background-color:#000;color:#51A104;border-top:1px solid #FF0000;border-bottom:1px solid #FF0000}.headactive{color: #FFFFFF;border: 2px solid:#C0C0C0;!important;background: #D11717;background: -moz-linear-gradient(top,  #D11717,  #8C0000)}
Catatan:
  • Warna Merah adalah Kode warna dari daftar isi yang akan di tampilkan. Sobat bisa menggantinya sesuai dengan keinginan sobat, Namun saya menyarankan tidak usah di ganti. Karena kemungkinan daftar isi akan menjadi eror.
6. Sebelum sobat klik Simpan Template, Ada baiknya sobat klik >> Preview atau Pratinjau terlebih dahulu. Guna untuk menghindari terjadinya eror saat Edit HTML dalam template blog sobat.

7. Jika hasil dari Preview atau Pratinjau tidak terjadi masalah eror, Maka silahkan sobat klik >> Simpan Template.
  • Langkah Terakhir:
 Langkah yang pertama sudah selesai, Kemudian kita akan menuju ke langkah tahap yang terakhir yaitu pemasangan kode pemanggil, Agar daftar isi dengan Jquery Accordion dapat muncul dan berfungsi di blog sobat dengan baik.

Cara Memasang Daftar Isi Jquery Accordion Pada Posting Blog
  1. Setelah Template di Save atau di Simpan, Sekarang silahkan sobat langsung menuju ke menu >> Post atau Tab Posting.
  2. Kemudian pilih klik >> Buat Entri Baru. (Caranya seperti saat membuat postingan blog).
  3. Lalu isikan judul Entri atau judul postingnya dengan judul Daftar isi, Sitemap, Table of Content atau judul yang lain seperti yang sobat inginkan.
  4. Setelah itu sobat pilih Mode >> HTML bukan Compose, Lalu masukkan semua kode script berikut ke dalamnya.
 <script src="http://kucopas-js.googlecode.com/files/sitemap1.js">
</script>
<script src="http://kuc0pas.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://kucopas.googlecode.com/files/sitemap.js" type="text/javascript">
</script>

5. Yang terakhir silahkan sobat klik >> Publikasikan atau Terbitkan Entri dan lihat hasilnya pada posting blog sobat.

Catatan:
  • Silahkan sobat ganti URL warna BIRU dengan Alamat URL blog sobat.
Cara Memasang Daftar Isi Jquery Accordion Pada Laman Blog
  1. Setelah Template di Save atau di Simpan, Sekarang silahkan sobat langsung menuju pilih menu >> Laman >> pilih dan klik >> Laman Baru >> Pilih dan klik lagi >> Laman Kosong.
  2. Kemudian  isikan judul Laman dengan judul Daftar isi, Sitemap, Table of Content atau judul yang lain seperti yang sobat inginkan.
  3. Setelah itu sobat pilih Mode >> HTML bukan Compose, Lalu masukkan semua kode script berikut ke dalamnya.
 <script src="http://kucopas.googlecode.com/files/sitemap1.js">
</script>
<script src="http://kuc0pas.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://kucopas.googlecode.com/files/sitemap.js" type="text/javascript">
</script>

4. Yang terakhir silahkan sobat klik >> Publikasikan dan lihat hasilnya pada laman blog sobat.

Catatan:
  • Ganti URL warna BIRU dengan Alamat URL blog sobat.
Cara Memasang Daftar Isi Jquery Accordion Pada Widget, Sidebar Atau Gadget Blog
  1. Setelah Template di Save atau di Simpan, Sekarang silahkan sobat langsung menuju pilihan menu >> Tata Letak >> Silahkan sobat tentukan posisinya dimana daftar isi Jquery Accordion ini akan di letakkan pada blog sobat.
  2. Kemudian pilih dan klik >> Tambah Gadget >> Lalu pilih dan klik lagi >> HTML/JavaScript.
  3. Setelah itu sobat masukkan semua kode script berikut di bawah ini ke dalamnya.
 <script src="http://kucopas.googlecode.com/files/sitemap1.js">
</script>
<script src="http://kuc0pas.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://kucopas-js.googlecode.com/files/sitemap.js" type="text/javascript">
</script>

4. Yang terakhir silahkan sobat klik >> Simpan atau Save dan lihat hasilnya pada halaman blog sobat.

Catatan:
  • Ganti URL warna BIRU dengan Alamat URL blog sobat.
 Sampai di sini saya kira sobat pasti sudah bisa mengerti dan paham bagaimana cara membuat dan memasang daftar isi dengan Jquery Accordion di blog sobat. Bisa sobat sudah berhasil, Jangan lupa di Like atau Follow blog saya. Namun jika sobat masih menemui kesulitan, Silahkan bertanya pada form komentar yang tersedia.

 Semoga artikel tutorial blog tentang Cara Membuat Dan Memasang Daftar Isi Blog Dengan Jquery Accordion yang saya share ini, Bisa sangat bermanfaat untuk para sobat KUCOPAS semua. Happy Blogging...
01.22 | 0 komentar | Read More
Label: , ,

Cara Membuat Dan Memasang Daftar Isi Berdasarkan Label Di Blog

 Cara Membuat Dan Memasang Daftar Isi Perlabel Di Blog - Halo sobat kita ketemu lagi, Pada kesempatan kali ini saya akan share artikel tentang cara membuat daftar isi diblog, Namun daftar isi yang akan kita buat kali ini berdasarkan label atau kategori. Jadi daftar isi ini hanya akan menampilkan daftar isi dari label atau kategori tertentu saja.

 Fungsi dari daftar isi perlabel atau kategori ini adalah untuk memudahkan visitor atau pengunjung blog kita agar dapat dengan cepat menemukan apa yang dicari dalam blog kita. Sobat bisa menaruh daftar isi ini di sidebar maupun dimana saja posisinya seperti yang sobat inginkan. Tampilannya pun menarik dan rapi tidak amburadul, Jadi bisa juga untuk mempercantik blog kita biar terkesan profesional.

 Pada artikel sebelumnya yang sudah pernah saya share yaitu cara membuat daftar isi Jquery Accordion di blog, Daftar isi itu akan menampilkan daftar isi keseluruhan posting pada blog dengan sentuhan Jquery Accordion. Jadi tampilanya akan mirip seperti menu drop down, Bedanya yang di tampilkan adalah daftar isi dari semua judul posting pada blog.

 Kembali lagi pada pokok bahasan, Daftar isi perlabel ini sudah saya modifikasi, Otomatis menggunakan scroll box. Jadi sobat jangan khawatir, Daftar isi ini tidak akan memakan banyak tempat di template blog sobat. Untuk melihat contohnya seperti apa tampilannya daftar isi perlabel ini, Sobat bisa melihat contoh screenshoot gambarnya di bawah ini.

Cara Membuat Dan Memasang Daftar Isi Berdasarkan Label Di Blog

 Gimana? Sobat tertarik untuk membuatnya?
Jika sobat tertarik untuk membuat dan memasangnya di blog sobat, Ikuti saja langkah-langkahnya jangan sampai ada yang terlewatkan.

Cara Memasang Daftar Isi Perlabel di Blog

1. Silahkan sobat >> Masuk/Login pada Blog sobat.
2. Kemudian pada Menu Blogger yang baru, Pilih >> Tata Letak.
3. Langkah selanjutnya sobat pilih dimana kira-kira daftar isi perlabel ini akan sobat letakkan, Caranya sobat klik tab >> Tambahkan Gadget.
4. Lalu sobat pilih >> HTML/JavaScript.
5. Kemudian silahkan sobat masukkan semua kode script dibawah ini:
<div style="border: 1px solid #000000; height: 200px; overflow: auto; padding: 5px; width: auto;">
<ul><script>
var numposts = 100;
var standardstyling = true;
</script> </ul>
<script src="http://kucopas-js.googlecode.com/files/label-post.js" type="text/javascript"></script>
<ul><script src="http://kuc0pas.blogspot.com/feeds/posts/default/-/TUTORIAL%20BLOG?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script> </ul>
</div>
Keterangan:
  • Warna pink adalah kode scroll box (kotak scroll). Ukuran lebar akan otomatis sesuai dengan tempat dimana daftar isi ini akan di letakkan.
  • height: 200px; adalah ukuran tinggi scroll box (kotak scroll), Silahkan sobat ganti nilainya sesuai dengan keinginan sobat.
  • Ganti http://kuc0pas.blogspot.com dengan URL blog sobat.
  • Ganti TUTORIAL%20BLOG dengan label sobat yang ingin ditampilkan pada daftar isi. Ingat sobat, Label harus sesuai dengan besar kecil huruf label pada blog sobat.
  • Gunakan %20 jika label sobat ada space (spasi) nya.
  • max-results=999" adalah banyaknya judul posting dalam daftar isi yang akan di tampilkan, Silahkan sobat ganti nilainya sesuai dengan keinginan sobat.
6. Langkah yang terakhir, Silahkan sobat klik >> Simpan, Selesai dan lihat hasilnya.

 Saya yakin sobat pasti bisa memasangnya pada blog sobat, Karena caranya sangat mudah. Namun bila sobat mengalami kesulitan, Silahkan bertanya pada form komentar yang telah tersedia. Jangan lupa di Like, Bila sobat sudah berhasil memasangnya di blog sobat.

 Berikut contoh Daftar isi berdasarkan label atau kategori yang sudah saya buat:

TUTORIAL BLOG




 Semoga artikel ringan tentang Cara Membuat Dan Memasang Daftar Isi Berdasarkan Label Di Blog ini, Bisa sangat bermanfaat untuk sobat KUCOPAS semua. Happy Blogging...
23.17 | 0 komentar | Read More
Label: , ,
Langganan: Postingan (Atom)