Cara Membuat Daftar Isi Blog Otomatis Berdasarkan Label

| By Unknown



Daftar Isi atau yang sering kita sebut Sitemap pada umumnya kita gunakan sebagai petunjuk atau informasi sudah berapa banyak artikel yang selama ini sudah kita buat di dalam blog kita. Kadang kita merasa malas apabila kita harus membuat dan mengisi daftar isi tersebut secara manual setiap kali kita selesai meng update artikel. Maka dari itu kali ini saya akan berbagi informasi tentang bagaimana cara membuat daftar isi atau sitemap berdasarkan label secara otomatis mengisi sendiri setiap kita selesai membuat artikel. Berikut tutorialnya.

Pertama masuk dahulu ke dalam akun Blogger anda. Buka menu Posting atau Postskemudian kita klik Entri Baru atau New Post. Setelah masuk ke dalam halaman editor posting pilih dalam mode HTML bukan Compose. Lalu copy paste kan kode di bawah ini ke dalam halaman editor posting :
<script src="http://sitemap-kiosbisnis.googlecode.com/files/KiosBisnislabel2.js"></script><script src="http://virgeia-riyadi.blogspot.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Ganti text yang berwarna merah diatas dengan alamat blog anda. Simpan dan Lihat hasilnya. Berikut contoh tampilan daftar isi berdasarkan label dari blog....
Namun misal anda menginginkan menggunakan fungsi scroll karena daftar isi dirasa sudah terlalu banyak dan terlalu banyak memakan tempat (memanjang ke bawah) maka bisa menambahkan kode berwarna biru di bawah ini.
<div style="overflow:auto; border: 1px solid #000000; margin: auto; padding: 3px; width: 100%; height: 500px; background-color: none; text-align: left;"> <script src="http://sitemap-kiosbisnis.googlecode.com/files/KiosBisnislabel2.js"></script><script src="http://virgeia-riyadi.blogspot.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

Jangan lupa untuk mengganti teks berwarna merah dengan alamat blog anda. Simpan dan Lihat hasilnya. Berikut contoh tampilan daftar isi berdasarkan label menggunakan fungsi scroll dari blog
Selamat mencoba dan Semoga Bermanfaat.
0 komentar Label:

Cara Membuat Daftar Menu/Isi Di Sidebar Blog

| By Unknown

Daftar menu blog yang biasanya ditempatkan pada sidebar blog ini ada juga yang menyebutnya dengan table of content.Cara membuat table of content ini sedikit berbeda dengan daftar isi blog otomatis yang pernah saya posting sebelumnya. Pada widget daftar menu otomatis ini sudah dilengkapi fungsi scroll dan pengunjung blog anda dapat mempercepat pencarian artikel dengan menggunakan opsi pilihan label, title, tanggal posting serta dapat juga menampilkan seluruh isi blog jika kita memilih opsi “All label”. Pada script daftar menu blog yang mau saya share ini, mampu menampilkan sampai max 500 halaman posting. Jika blog anda sudah memiliki lebih dari 500 halaman posting, tinggal diganti saja angka 500 dengan angka 1000 beres !. Dan satu lagi kelebihannya : jika anda mengklik icon panah hitam yang ada didepan judul posting, maka akan memunculkan ringkasan artikel tersebut sepanjang 250 kata. Klik kembali icon panah tersebut untuk menyembunyikan ringkasan.download


Cara Membuat Daftar Menu/Isi Di Sidebar Blog :
1.       Login ke dashboard blogger anda.
2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).
3.       Copy script dibawah ini dan paste pada gadget.

<div style="background:#FFFFFF; no-repeat scroll 0 0; border:2px solid #FFFFFF; height:310px; overflow:auto; padding:10px; width:260px;">
<div id="cl_option">
Loading... </div>
<div id="cl_content_list">
</div>
<script type="text/javascript">
var jumlah_kata_dalam_ringkasan = 250;
</script>
<script src="http://raihanun.googlecode.com/files/DaftarMenuOtomatis.js">
</script>
<script src="http://virgeia-riyadi.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed&amp;max-results=500">
</script></div>

4.       Silahkan edit pada lebar (width) dan tinggi (height) pada script ini untuk menyesuaikan dengan lebar sidebar blog anda. Dan ganti juga nama blognya dengan nama blog anda.
5.       Save / Simpan.

Lumayan mudah bukan, selamat mencobanya ya...
0 komentar Label:

Cara membuat daftar isi dengan jquery

| By Unknown

Cara membuat daftar isi dengan jquery yang satu ini ternyata banyak disukai oleh para blogger.karena dengan daftar isi ini sangat keren dan cantik untuk dilihat juga. disamping itu tampilan ini lebih disukai daripada daftar isi dengan fungsi scroll lihat gambar tampilan daftar isi dibawah ini!
 
 Nah,keren kan tampilanya? jika kamu ingin melihat demonya langsung silahkan klik disini. lalu bagaimana cara membuat daftar isi dengan jquery tersebut? ikuti langkah-langkah dibawah ini!

  1. Login ke blogspot.
  2. Klik Design/Rancangan.
  3. Edit HTML.
  4. Kemudian letakan kode dibawah ini di atas kode ]]></b:skin>
#dafis-acc{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
background:#ffffff;
}
.dafis-label {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfEPZvlEoNonbFMMjCDxZOpaeXYJRqoYImK5HkeChgUQ3AVFPeFh0liABd0aclmHU2Qi0ITCjzxloQ7prY62Zt98DcNRcx_7_nEPchqnGVkKBxoKSXCWuxi9jN8SH-Ao7loH6l4mIZo30/d/bg4.gif") repeat-x scroll 0 0 #E1F4FB;
border: 1px solid #2F94BA;
color: #FFFFFF;
cursor: pointer;
font-weight: bold;
line-height: 1.4em;
margin: 1px 3px;
outline: medium none;
overflow: hidden;
padding: 2px 10px;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
vertical-align: baseline;
white-space: nowrap;
}
.dafis-label:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr-BhwDzyLsp5FWtj_PF6RxMIz3lAjJzSIrwTgDj0UwVJ85cgeiBKzzdRS_yoUTTeOAXkngAYLUlwPx9AY_XbCSn36hjex31rO4ci4bLPHdTp5e_12aTExu2drKgQiLrelLNC_RkE1wwo/d/bg2.gif") repeat-x scroll 0 0 #E1F4FB;
color: #003366;
}
.dafis-daf ol {
margin: 0 0 0 30px !important;
padding: 0 !important;
}
.dafis-daf ol li {
background-color: #C9E9F4;
border: 1px solid #339DC6;
line-height: 1.5em;
margin: 1px 3px !important;
text-align: left;
white-space: nowrap;
}
.dafis-daf ol li a {
color: #333333 !important;
display: block;
padding-left: 10px;
text-decoration: none !important;
}
.dafis-daf ol li a:hover {
background: none repeat scroll 0 0 #7BC4DF;
border-left: 5px solid #333333;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
5. Copy kode dibawah ini dan letakkan diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
Tapi jika di blogmu sudah ada kode seperti ini maka kamu boleh meninggalkan langkah no 5 ini.
6. Jika sudah,copy dan paste kode dibawah ini,boleh kamu letakkan dalam postingan maupun widget blog kamu.
<script type="text/javascript" src="http://infonetmu.googlecode.com/files/Acc1.js"></script>
<script src="http://virgeia-riyadi.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
7. Ganti yang berwarna merah dengan URL blogmu.Selesei.
Mudah bukan? sulit ya? ya sudah,kalo mau yang gampang silahkan kamu copy kode dibawah ini,letakkan dipostingan kamu lalu terbitkn..
<style type='text/css'>
#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCYKGI9tPvdN2BTD5MESeMCSBzXIVZY4sz_SYoOvmv-G5YRpQdGaHdc7lVhQbUHgVIUxVpAnS6tzW7FMHpqMF1UBqBmJxtjCgLhz2rf6JMuH8msIMcIDkXoPdTYkL2hssDWlEHQA8WCQA/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfEPZvlEoNonbFMMjCDxZOpaeXYJRqoYImK5HkeChgUQ3AVFPeFh0liABd0aclmHU2Qi0ITCjzxloQ7prY62Zt98DcNRcx_7_nEPchqnGVkKBxoKSXCWuxi9jN8SH-Ao7loH6l4mIZo30/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr-BhwDzyLsp5FWtj_PF6RxMIz3lAjJzSIrwTgDj0UwVJ85cgeiBKzzdRS_yoUTTeOAXkngAYLUlwPx9AY_XbCSn36hjex31rO4ci4bLPHdTp5e_12aTExu2drKgQiLrelLNC_RkE1wwo/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="http://infonetmu.googlecode.com/files/Acc1.js"></script>
<script src="http://virgeia-riyadi.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Ganti yang berwarna merah dengan URL blog kamu. selesei deh..

0 komentar Label: