remoxp

Blog yang bagus tidak hanya memiliki penampilan yang mengesankan, tetapi juga memiliki navigasi yang baik sehingga pengunjung dapat menjelajahi blog dengan mudah. Salah satu komponen di dalam blog yang dapat membantu pengunjung untuk menjelajahi blog adalah Daftar Isi atau Table Of Content, daftar isi merupakan halaman yang berisi daftar artikel-artikel dib log kita dengan lengkap. Dulu saya pernah memberikan tutorial membuat daftar isi di blog, tapi dengan penampilan yang sangat sederhana. Sekarang saya akan memberikan tutorial cara membuat diblog dengan java script buatan http://modification-blog.blogspot.com/, yang memiliki penampilan yang elegan dan keren. Untuk contoh atau demonya anda bisa melihat gambar di bawah ini atau dengan membuka daftar isi blog forantum ini. Tunggu apalagi sobat.... Ayo kita membuatnya, cara membuatnya adalah sebagai berikut:

 LANGKAH 1

• 1. Login ke blogger.

• 2. Masuk ke Rancangan dan pilih Edit HTML

• 3. Letakkan kode di bawah ini, di atas kode ]]></b:skin>

#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/AVvXsEgAJLHI0Az82CIWkLJYNz1wJZeVKXbkDX9XLjbWBvT0i3jM0Ybt6qzbG_LwASVZS2fcwzik5QR4sx_ZRp5PPWa409mPaZExBp9AO4WoJRZWR27wL37-ye5-x6w7-BZfRjijfGcLQLdYpoA/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/AVvXsEg-l9alw_8m5PPjgRFRZE5Sq_1wugCKVn5cX05QzYpvA8VT9Ijhp6kZwWfm58xhcIUGr28qNHSqL6UZGfboTA0XkY4JHJUpinFiXbO19FWnmx0-N3GPoKmVVnJOGCdpplTFsk3S6RUbcYo/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/AVvXsEjFXTCfZMI9HpwWnUNI9CwGc50RRguCZ2WPW548v2zBFOWnbqyQoG5050Wzap1k2SiLrEJq7GbP6owEKLqh5Kl-ixpMLtSOYIyMGH3gXIFlQbEdCepTG6RZWJT2j6pnxyUPeLWz5VWmTI8/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); } 

• 4. Selenjutnya cari kode </head>, lalu letakkan kode dibawah ini diatas kode </head>.

 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>

• 5. Simpan template.

LANGKAH 2

• 1. Klik menu Posting, kemudian masuk ke Entri baru. Masukkan kode di bawah ini pada postingan, caranya seperti membuat postingan seperti biasa tetapi dalam mode Edit HTML.

<script type="text/javascript" src="http://hensblog.googlecode.com/files/dafis_accv1.js"></script>
<script src="http://NAMABLOGANDA.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Penting !!!: Ubah NAMABLOGANDA dengan nama blog sobat sendiri...

• 2. Klik Terbitkan.....

Selesai...... Sekarang blog anda mempunyai daftar isi atau table of content, semoga pengunjung blog betah berkunjung ke blog sobat.

Free Template Blogger collection template Hot Deals SEO

Free Template Blogger collection template Hot Deals SEO

Bagi anda yang tidak puas dengan tutorial saya tentang Membuat Daftar Isi Otomatis jadi kalau di tutorial yang satu ini saya akan membuat anda lebih puas lagi. Bila di artikel yang saya sebutkan diatas saya hanya membuat daftar isi yang hanya dengan judul artikel tanpa skin seperti punya saya, mungkin ini sangat berguna dan berfungsi sekali untuk blog anda karena akan memperindah blog anda,dalam pencarian juga akan tampil seperti ini nanti,langsung saja dah.

Ikuti langkah-langkah dibawah ini:

• Login ke Blogger kemudian Layout/Tata Letak terus Edit HTML

• Centang pada Expand Template Widget

 <b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/><b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if> 

• Cari kode yang berwarna hijau

• Langkah selanjutnya anda hanya perlu mengganti kode yang berwarna hijau dengan kode dibawah ini.

<div style='padding:6px 0 6px 5px;border-right:1px solid #000;border-bottom:1px solid #000;margin-bottom:2px;background:#DCDCDC;color:#000000;'>
<data:post.title/></div></a>

NOTE : Bila anda ingin menggantinya anda hanya perlu merubah kode yang berwarna merah dengan kode warna yang anda sukai. Kode warna bisa dilihat di Mengetahui Kode Warna

Sumber: risz-panic.blogspot.com

Free Template Blogger collection template Hot Deals SEO

Membuat Dafatar Isi Otomatis. Ya, kali ini akan membuat Membuat Dafatar Isi Otomatis. Sekali jalan, terus-menerus update sendiri. Jadi, jika kita melakukan postingan baru maka secara otomatis judul blog yang baru akan langsung masuk ke dalam daftar isi tanpa harus melakukan edit pada layout blog kita.

Dengan trik mudah, hemat, praktis, memasang daftar isi pada blog jadi semakin fun dan tanpa konsentrasi yang tinggi. Mau coba, ikuti cara-cara membuat daftar isi berikut :


1. Masuk ke akun blogger
2. Pilih menu tata letak / Layout
3. Pilih tambah gadget
4. Pilih html/javascript
5. COPy-PASte kode di bawah ini :

<a href="http://forantum.blogspot.com/search?max-results=200" target="_blank"><span style="font-weight:bold;">DAFTAR ISI</span>&raquo;</a>

Ket :

* http://forantum.blogspot.com diganti dengan alamat blog anda.
* results=200 diganti dengan jumlah yang anda inginkan, angka 200 menunjukkan jumlah judul yang akan di tampilkan.

6. Klik SAVE

@Tambahan:
Baiknya kode tersebut berada di menu blog. 

Free Template Blogger collection template Hot Deals SEO