Cara Membuat Daftar isi Didalam Postingan Blog

Cara Membuat Daftar isi Didalam Postingan BlogCara Membuat Daftar isi Didalam Postingan BlogCara Membuat Daftar isi Didalam Postingan BlogCara Membuat Daftar isi Didalam Postingan BlogCara Membuat Daftar isi Didalam Postingan BlogCara Membuat Daftar isi Didalam Postingan BlogCara Membuat Daftar isi Didalam Postingan BlogCara Membuat Daftar isi Didalam Postingan BlogCara Membuat Daftar isi Didalam Postingan BlogCara Membuat Daftar isi Didalam Postingan BlogCara Membuat Daftar isi Didalam Postingan Blog Cara Membuat Daftar isi Didalam Postingan BlogCara Membuat Daftar isi Didalam Postingan BlogCara Membuat Daftar isi Didalam Postingan BlogCara Membuat Daftar isi Didalam Postingan BlogCara Membuat Daftar isi Didalam Postingan BlogCara Membuat Daftar isi Didalam Postingan BlogCara Membuat Daftar isi Didalam Postingan BlogCara Membuat Daftar isi Didalam Postingan Blog

1. Login Ke Akun Blogger Anda
2. Lalu Pilih Post > New Entri > HTML
3. Lalu Copy & Paste Kode di bawah ini :
<style>
#daftar-isi-body
{
         width:760px!important;
         height:600px!important;
         padding:30px 40px;
         margin:0 auto;
}
 #daftar-isi-wrap
{
         margin: 0 auto;
}
 .box-posting
{
         background-image:url(http://2.bp.blogspot.com/--BFLnpEqqJo/T29UMckXRKI/AAAAAAAAHp4/Fv2ND6h5E10/s1600/bg-box.png);
         background-position:bottom center;
         background-repeat:no-repeat;
         overflow:hidden;
         cursor:pointer;
         float:left;
         height:140px;
         width:248px;
         margin:-50px 0 0 0;
}
 .box-posting img
{
         height:46px;
         width:46px;
         float:left;
         margin:20px 0 0 25px;
         background-color:#2E0700;
         border:1px solid #2E0700;
         -webkit-border-radius: 30px;
         -moz-border-radius: 30px;
         border-radius: 50%;
}
 .box-posting .judul-posting
{
         float:left;
         height:35px;
         margin:0;
         width:220px;
}
 .box-posting .judul-posting a
{
         font-family:arial,Serif !important;
         color:#774A34!important;
         text-shadow:0 0 1px rgba(0,0,0,0.9);
         margin:-40px 0 0 80px;
         display:block;
         font-size:13px !important;
         line-height:18px!important;
         font-weight:bold !important;
}
 .box-posting .judul-posting a:hover
{
         color:#333!important;
}
 .box-posting:hover
{
         border-left-color:#C6EB04;
}
 #totales
{
         text-align:center;
         color:#774A34 !important;
         text-shadow:0 1px rgba(0,0,0,0.2);
}
 #loadingscript
{
         color:#444;
         font-family:Century Gothic;
         font-size:100px;
         letter-spacing:-10px;
         text-align:center;
         text-shadow:-5px 0 1px #444;
}
 #paginacion
{
         color:#BBB;
         font-size:24px;
         font-weight:bold;
         height:35px;
         line-height:28px;
         padding:0;
         margin:0 auto;
         text-align:center;
}
 #paginacion span,#paginacion a
{
         display:inline-block;
         font-size:13px !important;
         line-height:24px;
         font-weight:bold;
         margin:0 1px;
         width:25px;
         height:25px;
}
#paginacion a, #paginacion span.actual
{
         background-image:url(http://1.bp.blogspot.com/-0u7I-EN6dZ8/T29UNSCkOZI/AAAAAAAAHqI/oA09qcWANNs/s1600/page-link.png);
         background-position:top center;
         background-repeat:no-repeat;
         color:#250700 !important;
         text-shadow:0px 1px 0px rgba(255,255,255,0.1);
}
 #paginacion span.actual
{
         color:#774A34 !important;
}
 #paginacion a:hover
{
         color:#FFF !important;
}
 #paginacion .nextprev-link,
 #paginacion span.nextprev-link
{
         border:none;
         color:#250700 !important;
         text-shadow:0px 1px 0px rgba(255,255,255,0.1);
         width:100px;
         background-image:url(http://3.bp.blogspot.com/-qbK0wwxnWu4/T29UM7vOfFI/AAAAAAAAHqA/-CK44ujORw8/s1600/nextprev.png);
         background-position:top center;
         background-repeat:no-repeat;
}
</style>
<script type="text/javascript">
                  var jumlahposting = 18;
                  var urlblog = "http://ahmadrijal-blog.blogspot.com";
                  var minpaginas = 5;
                  var maxpaginas = 10;
                  var thumbs = "http://upload.wikimedia.org/wikipedia/commons/6/66/Colour_wheel_(black_background).JPG";
                                            </script>
<script language="javascript" src="http://hanjs.googlecode.com/files/sitemaps.js"></script>
Note :

  1. Ganti kode yang berwarna hitam dengan URL blog anda masing masing.
  2. Ganti kode yang Berwarna Orange dengan gambar anda sendiri

2Coment :

  1. wuiih, artikel bagus ini, tapi itu kenapa engga dicoba warna fontnya disesuaikan sama background. agak bikin pusing juga kalo warnanya mati gitu.

    BalasHapus
  2. @daka oke bang makasih sarannya,,!!

    BalasHapus