Membuat Daftar isi Blog dengan CSS3

Selamat siang sobat Blogger, setelah kita membahas tentang bagaimana membuat  Blue Button With Css selanjutnya kita akan berbicara mengenai pembuatan daftar isi/Site map sebuah blog. tema kita kali ini adalah Membuat Daftar isi Blog dengan CSS3, seperti pada gambar dibawah ini:

VIEW A DEMO

Untuk penerapannya sangat mudah sekali,
1. Seperti biasa Login dulu ke akun Blogger sobat
2. Kemudian klik "Buat Entri Baru"
3. Klik HTML jangan Compose
4. Kopi Paste Kode Dibawah ini :

<style type="text/css">
#dafis-acc{
font-family:dicotmedium;
font-size:14px;text-align:center;
background:url(IMAGE) #111;
padding:2px 0;
border-bottom:15px double #666;border-left:10px double #252525;border-top:15px double #666;border-right:10px double #252525;
}
.dafis-label{-moz-transition: all 0.65s ease-in-out;-webkit-transition: all 0.65s ease-in-out;
background:#1d1d1d;
font-weight:normal;font-size:15px;
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:#D4D4D4;text-shadow:2px 1px 8px #000, 0px -1px 3px #000, 2px 2px 2px #000;
border-bottom:5px double #252525;border-left:5px solid darkred;border-top:5px double #111;border-right:5px solid darkred;
}
.dafis-label:hover{text-shadow:0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red;
background:url(http://2.bp.blogspot.com/-O5lRjDu4AjE/UPOTANDMQRI/AAAAAAAAA0Y/DqXzWX5O7qg/s1600/kolomtutorial-blood.gif) top #111;
border-bottom:5px double #252525;border-left:5px solid blue;border-top:5px double #111;border-right:5px solid yellow;
}
.dafis-daf ol{
margin:0 0 0 30px !important;
padding:0 !important;
}
.dafis-daf ol li{
background:#111;
line-height:1.5em;font-family:gisha;text-shadow:1px 1px 0px #000;
margin:1px 3px !important;
white-space:nowrap;
text-align:left;
border:1px solid #252525;
}
.dafis-daf ol li a{
text-decoration:none;
display:block;color:#fff !important;
padding-left:10px;
border-left:5px solid blue;
}
.dafis-daf ol li a:hover{
background:#1d1d1d;color:#fff !important;
border-left:5px solid darkred;
padding-left:5px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<!-- Content - http://joens-tutorial.blogspot.com/ - Start --><script src='http://joens-tutorial.googlecode.com/files/kolomtutorialakauttadafis.js.txt' type='text/javascript'/></script><script type="text/javascript" src="http://joens-tutorial.googlecode.com/files/kolomtutorialakauttadaftarisi2.js.txt"></script><script src="http://joens-tutorial.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script><!-- Content - http://joens-tutorial.blogspot.com/ - End -->

Note :
Ganti Link  http://joens-tutorial.blogspot.com/ Dengan alamat blog sobat
Semoga Artikel ini bermanfaat, jangan lupa komentarnya, hehhehheh


13 Responses to "Membuat Daftar isi Blog dengan CSS3"

  1. om saya mau tanya qok saya bales reply di comment blog saya eror terus gmna caranya om biar bisa bls rply?thanks

    ReplyDelete
    Replies
    1. Itu udah bisa ko, saya lihat di :
      http://cescmufti.blogspot.com/2013/01/pengertian-juhud.html?showComment=1358559606522#c2789142201319559674

      Delete
  2. Ini Mas Bro yang saya mau terapkan di blog saya, keren. Blog saya lom ada sitemapnya

    ReplyDelete
    Replies
    1. Silakan mas, di pakai aja...
      thank atas kunjungannya

      Delete
  3. numpang pakai ya mas..maklum lg belajar nih..izin sedot ilmunya..

    ReplyDelete
  4. izin pake gan..wkkwkwk
    nice nice

    ReplyDelete
  5. om ganteng ajarin bikin praktis daftar isi yang kayak om dong..tu yg di pojok kanan..makasih ya.

    ReplyDelete
    Replies
    1. ini tutornya silakan download :
      http://joens-tutorial.googlecode.com/files/Daftar%20isi%20sederhana.txt

      Delete
  6. Keren, thanks dah share ya :)


    Daftar Terbaik

    ReplyDelete
  7. sangat menarik dan bermanfaat sekali,,, terimakasih ilmunya semoga bermanfaat. salam kenal dari ikhram.com situs booking dan cari paket biro umroh nomer satu di indonesia

    ReplyDelete
  8. numpang pakai ya mas..maklum lg belajar nih..izin sedot ilmunya..

    =======================
    obat herbal untuk menyembuhkan azoospermia bisa anda coba, karena banyak yang sudah membuktikan, banyak juga yang berhasil

    new Amoorea, Sabun Muka yang Bagus untuk pria berminyak

    Skincerity, cara menghilangkan kerutan dibawah mata dengan cepat

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami M. Alex Joenaedi

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Visit Kabar Sehat