Tips Trik Membuat Daftar Isi Diblog

Berikut langkah-langkah membuat daftar isi diblog

1. Membuat daftar isi blog di laman

• Login di blogger dengan ID anda
• Pilih  Laman
• Klik Entri Laman Baru
• Kemudian copas kode berikut kedalamnya

<script src="http://wong-sidakaton.googlecode.com/files/daftar-isi.js"></script>
<script src="http://digratisan.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>
  

• Ganti tulisan yang berwarna merah dengan url blog anda
• Kemudian terbitkan laman dan lihat hasilnya

2. Membuat daftar isi blog di gadget/sidebar

• Login di blogger dengan ID anda
• Klik Rancangan 
• Klik Edit HTML ==> Tambah Gadget
• Copas kode berikut kedalamnya

 <div style="overflow:auto;
border: 1px solid #CCC;
margin: auto;
padding: 3px;
width: 95%;
height: 500px;
background-color: none;
text-align: left;">
<script src="http://wong-sidakaton.googlecode.com/files/daftar-isi.js"></script>
<script src="http://digratisan.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>

• Ganti tulisan yang berwarna merah dengan url blog anda
• Klik simpan dan coba anda lihat hasilnya

Read More

Cara Membuat Label dan Daftar Isi Keren Di Blog

Widget label / daftar isi keren ini merupakan sebuah widget yang mempunyai tampilan yang dinamis dan menarik serta mempunyai kelebihan tersendiri, diantanya jika salah satu label di klik, maka semua postingan pada label tersebut akan tertutup dan postingan pada label yang lain akan terbuka secara otomatis dan masih banyak kelebihan lain pada widget tersebut. Berikut gambar widget yang saya maksud di atas :

Daftar isi keren

Nah, untuk membuat widget label keren di atas, sobat hanya memerlukan script di bawah ini dan memasukkannya ke dalam gadget dan tanpa harus mengotak atik kode template (HTML). Berikut kode/scriptnya :

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link><script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script><script src="http://nama-blog-sobat-disini.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script><script type="text/javascript">var accToc=true;</script> <script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

Keterangan : Warna Merah, ganti dengan nama blog sobat...!!!

Oh ya, kode atau script di atas, selain bisa di tempatkan atau di masukkan ke dalam gadget, sobat juga bisa memasukkannya kedalam laman baru untuk jadikan sebagai daftar isi blog sobat.

Read More

Cara Buat Daftar Isi Blog Dengan Tampilan yang Elegan

Beberapa waktu yang lalu telah saya posting Cara Buat Daftar Isi Blog, kali ini saya coba posting lagi cara buat daftar isi blog yang baru dengan tampilan yang menurut saya lebih elegan, saya menamainya Daftar Isi Blog versi 3.00, sebenarnya sumber asli daftar isi ini, saya dapat dari blog Abu Farhan, tetapi scriptnya sudah saya modifikasi sedikit untuk menyesuaikan dengan blog ini. Mudah-mudahan Abu Farhan mengikhlaskannya, saya doakan semoga ilmu beliau terus bertambah dan saya bisa belajar lebih banyak lagi dari beliau.

Kita langsung saja menuju 'TKP' bagaimana cara membuat Daftar Isi Blog seperti yang bisa anda lihat pada DAFTAR ISI blog ini.

• Detail cara membuatnya bisa anda lihat pada artikel Cara Buat Daftar Isi Blog

• Gunakan script yang ada di bawah ini :

• <link href="https://sites.google.com/site/multipaste1/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
  <script src="http://multipaste.googlecode.com/files/daftarisiv3-mp.js"></script>
  <script src="http://namabog.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://multipaste.googlecode.com/files/accordion-pack.js" type="text/javascript"></script>

• Ganti tulisan yang berwarna merah dengan URL blog Anda

Note :

Jika script ini tidak befungsi sebagai mana mestinya, maka lakukan seperti cara di bawah ini :

• Login ke blogger dengan ID anda

• Klik menu Template ->> Edit HTML ->> Proceed

• Cari Kode <head> dan tempatkan kode berikut tepat di bawahnya

• <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
  <script src="http://multipaste.googlecode.com/files/accordion-pack.js" type="text/javascript"/>

• Lalu gunakan script di bawah ini untuk di masukkan ke dalam isi halaman daftar isi

• <link href="https://sites.google.com/site/multipaste1/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
  <script src="http://multipaste.googlecode.com/files/daftarisiv3-mp.js"></script>
  <script src="http://namabog.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>

Silahkan perikasa tampilan daftar isi blog Anda jika berhasil, ucapkan Alhamdulillah

Read More

Daftar Isi Blogger Dengan Tampilan Tabulasi

MULTI PASTE - Banyak model dan bentuk daftar isi blogger yang bisa Anda dapatkan melalui google search.  Menggunakan widget ini penting, karena akan mempermudah visitor melakukan navigasi untuk memperoleh informasi dari blog Anda.

Berikut ini salah satu widget daftar isi yang mungkin dapat dijadikan pilihan.  Ada beberapa fitur yang lebih unggul dibanding widget daftar isi versi tampilan elegan.  Pada widget daftar isi blogger dengan tampilan tabulasi ini, selain otomatis menampilkan daftar judul posting yang dikelompokkan berdasarkan label, Anda masih dapat melakukan pengaturan lain seperti menampilkan tangal publikasi, menambahkan label New pada artikel terbaru, bahkan Anda dapat menampilkan summary ringkasan posting, jika Anda menginginkannya.


Berikut adalah cara menggunakan widget daftar isi dengan tampilan tabulasi

• Login ke blogger dengan ID Anda

• Pada halaman dashboard blogger pilih menu Template

• Seperti biasa backup template Anda terlebih dahulu

• Pilih Template > Edit HTML dan beri tanda cek pada kotak Expand widget templates

• Cari kode ]]></b:skin> dan letakkan kode berikut ini tepat di atas kode ]]></b:skin>

• #tabbed-toc {margin:0 auto;background-color:#BD5D48;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4);overflow:hidden;position:relative;color:#333;}
  #tabbed-toc .loading {display:block;padding:5px 10px;font:normal bold 10px Arial,Sans-Serif;color:white;}
  #tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li {margin:0 0;padding:0 0;list-style:none;}
  #tabbed-toc .toc-tabs {width:22%;float:left;}
  #tabbed-toc .toc-tabs li a {display:block;font:normal bold 10px/28px Arial,Sans-Serif;height:28px;overflow:hidden;text-overflow:ellipsis;color:#ccc;text-transform:uppercase;text-decoration:none;padding:0 12px;cursor:pointer;}
  #tabbed-toc .toc-tabs li a:hover {background-color:#9a3b26;color:white;}
  #tabbed-toc .toc-tabs li a.active-tab {background-color:#9a5546;color:white;-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);box-shadow:-2px 2px 2px rgba(0,0,0,.5);position:relative;z-index:5;margin:0 -1px 0 0;/* cursor:text; */}
  #tabbed-toc .toc-content, #tabbed-toc .divider-layer {width:78%;float:right;background-color:white; border-left:5px solid #9a5546;-webkit-box-sizing:border-box;-moz-box-sizing: border-box;box-sizing:border-box;}
  #tabbed-toc .divider-layer {float:none;display:block;position:absolute;top:0; right:0;bottom:0; -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);-moz-box-shadow:0 0 7px rgba(0,0,0,.7);box-shadow:0 0 7px rgba(0,0,0,.7);}
  #tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px Arial,Sans-Serif;}
  #tabbed-toc .panel li a {display:block;position:relative;font-weight:bold;font-size:11px; color:#892412;line-height:20px;height:20px;padding:0 12px;text-decoration:none;outline:none;overflow:hidden;}
  #tabbed-toc .panel li time {display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right;}
  #tabbed-toc .panel li .summary {display:block;padding:10px 12px 10px;font-style:italic;border-bottom:4px solid #275827;overflow:hidden;}
  #tabbed-toc .panel li .summary img.thumbnail {float:left;display:block;margin:0 8px 0 0;padding:4px 4px;width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa;}
  #tabbed-toc .panel li:nth-child(even) {background-color:#FFE8E3;}
  #tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a {background-color:#333;color:white;outline:none;}
  #tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time {background-color:#222;}
  @media (max-width:700px) {
    #tabbed-toc {border:2px solid #333;}
    #tabbed-toc .toc-tabs,#tabbed-toc .toc-content {overflow:hidden; width:auto;float:none; display:block;}
    #tabbed-toc .toc-tabs li {display:inline;float:left;}
    #tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab {background-color:#224C19;-webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);-moz-box-shadow:2px 0 7px rgba(0,0,0,.4);box-shadow:2px 0 7px rgba(0,0,0,.4);}
    #tabbed-toc .toc-tabs li a.active-tab {background-color:white;color:#333;}
    #tabbed-toc .toc-content {border:none;}
    #tabbed-toc .divider-layer,#tabbed-toc .panel li time {display:none;}
  }

• Simpan template Anda dengan menekan tombol Save Templates

• Buat Laman Baru, pilih menu Pages > New Page > Blank page dan paste kode berikut ini pada formulir halaman baru dalam mode HTML dan bukan mode Compose, lalu terbitkan / publish

• <div id="tabbed-toc"><span class="loading">Memuat...</span></div>
  <a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://digratisan.blogspot.com/2013/05/modifikasi-widget-profil-blogger.html" title="Tabbed TOC">DTE :]</a>
  <script type="text/javascript">
  var tabbedTOC = {
      blogUrl: "http://nama_blog.blogspot.com", // Blog URL
      containerId: "tabbed-toc", // Container ID
      activeTab: 1, // The default active tab index (default: the first tab)
      showDates: false, // `true` to show the post date
      showSummaries: false, // `true` to show the posts summaries
      numChars: 200, // Number of summary chars
      showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
      thumbSize: 40, // Thumbnail size
      noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
      monthNames: [ // Array of month names
          "Januari",
          "Februari",
          "Maret",
          "April",
          "Mei",
          "Juni",
          "Juli",
          "Agustus",
          "September",
          "Oktober",
          "November",
          "Desember"
      ],
      newTabLink: true, // Open link in new window?
      maxResults: 99999, // Maximum post results
      preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
      sortAlphabetically: true, // `false` to sort posts by published date
      showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
      newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
  };
  </script>
  <script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js"></script>

• Atau jika Anda sebelumnya telah memiliki laman yang berisi widget daftar isi, untuk mengupdatenya anda tinggal mengganti isi widget dengan script di atas dalam mode HTML lalu klik tombol Updates

Pengaturan dan Kustomisasi Widget

• blogUrl : Ganti dengan alamat blog Anda.
• activeTab : Nilai 1 akan membuat tab di urutan pertama menjadi aktif, konten tab pertama akan terbuka saat pertama kali halaman diakses.
• showDates : Nilainya true untuk menampilkan waktu terbit postingan.
• showSummaries : Nilainya true untuk menampilkan ringkasan posting.
• showThumbnails : Nilainya true untuk menampilkan thumbnail (tidak direkomendasikan karena akan membuat halaman lama termuat).
• thumbSize : Untuk menentukan ukuran thumbnail.
• noThumb : URL gambar cadangan untuk posting yang tidak memiliki gambar di dalamnya.
• monthNames : Menentukan nama-nama bulan sesuai dengan sistem penanggalan di negara Asal.
• newTabLink : Nilainya true, semua tautan akan membuka di tab/jendela baru saat diklik.
• maxResults : Jumlah maksimal posting yang akan ditampilkan.
• preload : Digunakan untuk menentukan waktu penundaan pemuatan JSON. Gunakan satuan milidetik atau cukup tuliskan "onload" agar widget ini memuat setelah keseluruhan halaman telah selesai termuat.
• sortAlphabetically : Nilai false untuk menyortir posting secara normal berdasarkan bulan terbit, true untuk menyortir posting berdasarkan alfabet.
• showNew : Nilai false untuk menyembunyikan label New! pada artikel baru. Ganti dengan angka untuk menentukan berapa banyak posting terbaru yang ingin ditandai dengan label New!. 
• newText : Markup HTML bebas untuk membuat label pada posting-posting terbaru (misalnya New! atau Terbaru!). 

Alhamdulillah, semoga widget ini bisa lebih mempercantik blog Anda, jika Anda membutuhkan bantuan, jangan segan untuk memberikan komentar di bagian bawah artikel ini.

Read More