Cara Membuat Daftar Isi di Blog


http://hendrasuhendra176.blogspot.com/2014/05/cara-membuat-daftar-isi-di-blog.html


Bismillah...

Jum'at, 02 Mei 2014

Assalamu'alaikum sobat blogger...

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. 



Langsung saja kita ikuti langkah berikut :

LANGKAH 1 :

Pertama membuat daftar isi di blog.

1. Masuk ke akun Blogger Anda di SINI
2. Klik menu Pages. Lihat gambar 1.

http://hendrasuhendra176.blogspot.com/2014/05/cara-membuat-daftar-isi-di-blog.html
Gambar 1

3. Klik New Pages. Lihat gambar 2.

http://hendrasuhendra176.blogspot.com/2014/05/cara-membuat-daftar-isi-di-blog.html
Gambar 2

4. Pilih HTML, jangan pilih Compose. Lihat gambar 3.

 
http://hendrasuhendra176.blogspot.com/2014/05/cara-membuat-daftar-isi-di-blog.html
Gambar 3

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&amp;alt=json-in-script&amp;callback=loadtoc">
</script>


Ganti tulisan warna merah dengan alamat blog Anda.

6. kalau sudah, klik Publish. Lihat gambar 3.

http://hendrasuhendra176.blogspot.com/2014/05/cara-membuat-daftar-isi-di-blog.html
Gambar 3

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
2. Klik menu -> Layout. Lihat gambar 1.

http://hendrasuhendra176.blogspot.com/2014/05/cara-membuat-daftar-isi-di-blog.html
Gambar 1


3. Pilih -> Add Gadget. Lihat gambar 2.

http://hendrasuhendra176.blogspot.com/2014/05/cara-membuat-daftar-isi-di-blog.html
gambar 2



4. Pilih -> Add HTML/Java Script. Lihat gambar 3.

http://hendrasuhendra176.blogspot.com/2014/05/cara-membuat-daftar-isi-di-blog.html
Gambar 3

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="http://4.bp.blogspot.com/-btThtilNthE/T6dLHDZq9tI/AAAAAAAAAiw/E6bSVbOCeH4/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, Google+, RSS dan Daftar Isi. Namun Anda dapat menambah/mengurangi menu pada blog sesuai dengan kebutuhan Anda.

6. Klik -> Save. Lihat gambar 4.

http://hendrasuhendra176.blogspot.com/2014/05/cara-membuat-daftar-isi-di-blog.html
Gambar 4


7. Klik -> Save Arrangement. Lihat gambar 5.

http://hendrasuhendra176.blogspot.com/2014/05/cara-membuat-daftar-isi-di-blog.html
Gambar 5



8. Selesai.

Tampilannya akan tampak seperti gambar berikut : PREVIEW


Demikian tutorial bagaimana cara membuat daftar isi sekaligus menu sederhana di blog. Di lain waktu saya akan bagi tip dan trik tutorial blog.

Semoga bermanfaat buat sobat blogger semuanya.


1 comments:

makasih gan ane juga mau buat nih

kunjung balik gan di http://aldiebanz.blogspot.com

Reply

Post a Comment