Cara Membuat Daftar Isi di Blog
Sudah sangat banyak artikel yang menerangkan mengenai tatacara bagaimana cara membuat daftar isi di blog Anda. Tapi tidak ada salahnya saya akan membagi tips caranya, meskipun sangat sederhana, tapi mudah-mudahan dapat memberikan manfaat. karena seperti kita ketahui bersama, bahwa daftar isi di blog itu sangat berguna bagi para pembaca dalam mencari artikel-artikel pada blog kita.
LANGKAH 1 :
Pertama membuat daftar isi di blog.
1. Masuk ke akun Blogger Anda di SINI
5. Paste kode script berikut :
<script src="http://tugasku4u.googlecode.com/files/Daftar-Isi-Keren.js">
</script>
<script src="http://hendrasuhendra176.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>
<script src="http://tugasku4u.googlecode.com/files/Daftar-Isi-Keren.js">
</script>
<script src="http://hendrasuhendra176.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>
Ganti tulisan warna merah dengan alamat blog Anda.
Selesai.
Daftar isi akan secara otomatis update setiap Anda membuat artikel baru di blog. Pada tahap ini daftar isi sebenarnya sudah jadi, namun apabila Anda akan menaruhnya dalam menu pada blog, ikuti langka berikutnya.
LANGKAH 2 :
Pertama sekali harus membuat menu sederhana pada blog.
1. Masuk akun blogger Anda di SINI
5. Paste kode script berikut :
<style type="text/css">
/* Menu horizontal untuk Blogger http://hendrasuhendra176.blogspot.com/*/
div.topbar {
height: 7px;
background: #f6ac14;
}
ul.claybricks {
font-weight: bold;
width: 100%;
background: #FED88A;
padding: 6px 0 6px 0;
margin: 0;
text-align: left;
font-family: calibri;
}
ul.claybricks li {
display: inline;
}
ul.claybricks li a {
color: black;
padding: 6px 8px 4px 8px;
margin-right: 20px;
text-decoration: none;
}
ul.claybricks li a:hover, ul.claybricks li a.selected {
color: white;
background: #5d4137;
background: -moz-linear-gradient(top, #5d4137 0%, #41251b 12%, #2c0f05 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137), color-stop(12%,#41251b), color-stop(100%,#2c0f05));
background: -webkit-linear-gradient(top, #5d4137 0%,#41251b
12%,#2c0f05 100%);
background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959;
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 17px;
padding-bottom: 6px;
}
/* http://hendrasuhendra176.blogspot.com*/
</style>
<div class="topbar">
</div>
<ul class="claybricks">
<li><a href="http://hendrasuhendra176.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJx0hox8qulUPc7LYu_8L9wryTyZphhADCMla-pB8V_MMWYJYoHrJhe4dRV9DaqLGboVNZpO4sBiv_62vLHM7XeFd_MC52AHhNfucDf9rKb2HkoOY6Esy8sWKHHNML_MnkC542HP7FOhcn/s320/home.png" /></a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Google+</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Daftar Isi</a></li>
</ul>
<style type="text/css">
/* Menu horizontal untuk Blogger http://hendrasuhendra176.blogspot.com/*/
div.topbar {
height: 7px;
background: #f6ac14;
}
ul.claybricks {
font-weight: bold;
width: 100%;
background: #FED88A;
padding: 6px 0 6px 0;
margin: 0;
text-align: left;
font-family: calibri;
}
ul.claybricks li {
display: inline;
}
ul.claybricks li a {
color: black;
padding: 6px 8px 4px 8px;
margin-right: 20px;
text-decoration: none;
}
ul.claybricks li a:hover, ul.claybricks li a.selected {
color: white;
background: #5d4137;
background: -moz-linear-gradient(top, #5d4137 0%, #41251b 12%, #2c0f05 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137), color-stop(12%,#41251b), color-stop(100%,#2c0f05));
background: -webkit-linear-gradient(top, #5d4137 0%,#41251b
12%,#2c0f05 100%);
background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959;
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 17px;
padding-bottom: 6px;
}
/* http://hendrasuhendra176.blogspot.com*/
</style>
<div class="topbar">
</div>
<ul class="claybricks">
<li><a href="http://hendrasuhendra176.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJx0hox8qulUPc7LYu_8L9wryTyZphhADCMla-pB8V_MMWYJYoHrJhe4dRV9DaqLGboVNZpO4sBiv_62vLHM7XeFd_MC52AHhNfucDf9rKb2HkoOY6Esy8sWKHHNML_MnkC542HP7FOhcn/s320/home.png" /></a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Google+</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Daftar Isi</a></li>
</ul>
- Ganti tulisan warna merah dengan alamat blog Anda.
- Ganti tulisan (#) warna biru dengan alamat link di blog Anda. Saya hanya membuat 5 menu (tanpa sub-menu), Home, About Me, RSS dan Daftar Isi. Namun Anda dapat menambah/mengurangi menu pada blog sesuai dengan kebutuhan Anda.
6. Klik -> Save. Lihat gambar 4.
Gambar 4 |
7. Klik -> Save Arrangement. Lihat gambar 5.
Gambar 5 |
8. Selesai.
Demikian tutorial bagaimana cara membuat daftar isi sekaligus menu sederhana di blog. Di lain waktu saya akan bagi tip dan trik tutorial blog.
Baca juga artikel menarik lainnya :
- Cara Membuat Kode Warna di Blog
- Cara Membuat Deskripsi di Bawah Judul Postingan Pada Mesin Pencari
- Cara Membuat Next Page Simpel di Blog
- Cara Membuat Artikel Blog Tanpa Login ke Blogger
- Cara Membuat Kode Warna di Blog
- Cara Membuat Deskripsi di Bawah Judul Postingan Pada Mesin Pencari
- Cara Membuat Next Page Simpel di Blog
- Cara Membuat Artikel Blog Tanpa Login ke Blogger
Semoga bermanfaat buat sobat blogger semuanya.
Posting Komentar untuk "Cara Membuat Daftar Isi di Blog"