Home Posts filed under KOTAK DAFTAR ISI
Showing posts with label KOTAK DAFTAR ISI. Show all posts
Showing posts with label KOTAK DAFTAR ISI. Show all posts

2/19/11

New Daftar isi Blog Berdasarkan Label

Comment

daftar isi blog new
Keberadaan daftar isi sangat dibutuhkan bagi setiap orang yang hendak mengeksplore sebuah bacaan. Sebetulnya saya sudah pernah membuat posting tentang cara membuat daftar isi seperti disini. Namun pada postingan kali ini saya ingin menampilkan daftar isi yang lain dari postingan sebelumnya. Sebelum anda melanjutkan membaca tulisan ini alangkah baiknya anda lihat dulu
seperti apa hasil jadinya nanti, silahkan  anda klik tab Daftar isi blog ini.
Nah kalau sudah mari kita lanjutkan belajarnya…:d

Pada postingan Daftar isi blog berdasarkan label ini juga dilengkapi dengan penanda khusus kalau-kalau anda membuat postingan baru maka akan muncul tanda khusus berupa tulisan “New”. Ada 2 model yang bisa anda pilih yakni Daftar isi blog berdasarkan label tanpa scroll dan Daftar isi blog yang memakai scroll.
Silahkan copy kode di bawah ini dan paste di blog anda,

Ini Kode daftar isi Tanpa scroll:
<script
style="text/javascript" src="http://kodecode.googlecode.com/files/daptarisiblog.txt"></script><script
src="http://namablog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Dan ini Kode daftar isi Dengan Scroll:
<div
style="overflow:auto;width:450px; height:200px; padding:10px;border:1px
solid #eee"><script style="text/javascript" src="http://kodecode.googlecode.com/files/daptarisiblog.txt"></script><script
src="http://namablog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>

Keterangan:
1. namablog.blogspot.com : gantilah dengan alamat blog anda
2. width:450px : Ganti Lebar sesuai dengan yang anda inginkan, sesuaikan dengan template
3. height:200px : Ganti tingginya sesuai dengan keinginan anda
4. postingan tanpa label tidak muncul di daftar isi ini

Catatan :
Daftar isi ini bisa di pasang di side bar maupun di halaman posting. Bila mau dipasang di side bar sebaiknya gunakanlah yang model scroll untuk menghemat ruang.
Read More
Advertisement

Daftar isi Blog Berdasarkan Label

Comment
Membuat daftar isi dari sebuah blog sudah banyak ditulis di berbagai blog tutorial. Hanya saja, sebagian dari cara yang dikemukakan tidak menampilkan seluruh daftar isi yang ada pada blog.
Tips kali ini juga merupakan cara membuat daftar isi blo secar lengkap yang ditampilkan dalam bentuk tabel. Kelebihan dari daftar isi ini dapat ditampilkan dan juga dapat disembunyikan, anda tinggal klik kata untuk menampilkan atau menyembunyikan daftar isi.

Post ini diperoleh dari sumbernya aslinya yaitu : BEAUTIFUL BETA
Ikuti langkah-langkah dibawah ini bagi anda yang ingin mencoba.

  • Langkah Pertama


    1. Masuk ke Blogger dengan ID anda.
    2. Pilih Tata Letak.
    3. pilih Edit HTML.
    4. Back up dulu templatnya jika takut gagal.
    5. Cari kode ini : ]]></b:skin> 
    6. Copy kode dibawah ini, kemudian paste tepat diatas kode tadi.


      #toc { border: 0px solid #000000; background: #ffffff; padding:2px; width:495px; margin-top:10px;}

      .toc-header-col1, .toc-header-col2,

      .toc-header-col3 { background: #B5CBFA; color: #000000; padding-left: 5px; width:250px;}

      .toc-header-col2 { width:75px;}

      .toc-header-col3 { width:125px;}

      .toc-header-col1 a:link, .toc-header-col1 a:visited,

      .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link,

      .toc-header-col3 a:visited { font-size:100%; text-decoration:none;}

      .toc-header-col1 a:hover,

      .toc-header-col2 a:hover,

      .toc-header-col3 a:hover { font-size:100%; text-decoration:underline; color:#3D3F44;}

      .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:100%; background:#f0f0f0;}



    7. Klik Tombol Simpan Template



  • Langkah Kedua
    1. Masuk ke Elemen Halaman.
    2. Pilih Tambah Gadget.
    3. Klik tanda + pada HTML/JavaScript.
    4. Copy kode dibawah ini kemudian paste pada kolom yang tersedia


      <div id="toclink"> <a href="javascript:showToc();"> <img border="0" src="http://h1.ripway.com/ades40/image/add2.png"/><font color="#808000"><b> Lihat Semua Daftar Posting</b></font></a>
      </div>
      <script style="text/javascript" src="http://h1.ripway.com/ades40/blogtoc.js"></script>
      <script src="http://namablog anda.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>



    5. KLik tombol Simpan

  • Langkah Ketiga

    1. Masih di Elemen Halaman.
    2. Klik Tambah Gadget.
    3. Klik tanda + pada HTML /JavaScript.
    4. Copy kode dibawah ini, kemudian paste pada kolom yang tersedia.


      <div id="toc"></div>
    5. Klik tombol Simpan

  • Selesai.
  • Selamat mencoba, semoga bermanfaat.


Read More
Advertisement

2/7/11

Cara Membuat Kotak Daftar Isi

Comment

Postingan ini saya buat untuk menjawab pertanyaan dari seorang rekan blogger yang menanyakan kepada saya melalui email. Beliau bertanya kesaya, "mas, bagaimana cara membuat kotak blogger tutorial seperti di blog mas herman?" Hm.. Mungkin yang dimaksud adalah yang ini kali ya :)

Blogger Tutorial


Ok sebenarnya cukup mudah untuk membuat daftar isi seperti diatas. Bagi anda yang sudah lama ngeblog pasti sudah tahu cara membuatnya hanya saja mungkin caranya yang berbeda.

Nah berikut saya akan memberikan cara membuat kotak daftar isi dengan cara saya sendiri. Silahkan diikuti bagi yang ingin mencobanya.

1. Login ke blogger. Buka menu Design -> Page Elements
2. Klik Add a Gadget -> HTML/Javascript. Masukkan kode dibawah ini kedalam kotak

<style>
.list {
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px;
}
</style>

<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:380px; height:180px; background-color: #ffffff; border:1px solid #ffffff;">

<div class="list">
1. <a href="http://www.hermanblog.com/2008/10/apa-itu-blog_15.html">Apa itu blog</a></div>

<div class="list">
2. <a href="http://www.hermanblog.com/2008/10/cara-membuat-blog-di-blogger_16.html">Panduan membuat blog di blogger</a></div>

</div>

Keterangan:
380px merupakan lebar kotak
180px merupakan tinggi kotak
#ffffff pada background-color merupakan warna background
#ffffff pada border merupakan warna garis pinggir. Silahkan ganti sesuai dengan template anda.

Ingat:
Ganti tulisan yang berwarna merah dengan alamat postingan anda dan ganti tulisan berwarna merah yg dicetak tebal dengan judul postingan anda. Jika anda ingin menambah postingan baru maka copy kode yang berkedip lalu letakkan diatas kode </div>

Jangan lupa untuk mengganti angkanya dengan angka 3 dan begitu seterusnya jika anda ingin menambah postingan baru lagi.

3. Kalau sudah klik Save Template. Selesai.

Jika anda ingin menggunakan icon gambar sebagai pengganti angka maka ganti kode ini

<style>
.list {
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px;
}
</style>

Dengan kode berikut

<style>
.list {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMjoB8NLwE0It4fci7euPP9UCK7gFTVFJeWkN-giWukN77hFQ_N0xkEo7ezuI-DlEzFJUGWPMTdQZpwlMjuiKjwgs0YjqF77lIRhZhLoGYr4AmtMm0s-ZTblvEfx6haqM0hT6gwFyTTK3E/") no-repeat left center;
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px 0px 0px 20px;
}
</style>
Ganti tulisan yang berwarna merah dengan alamat icon gambar anda dan hapus angka pada setiap judul postingan.

Selamat mencoba. Semoga berhasil
Read More
Advertisement
Subscribe to: Posts (Atom)