Cara Membuat Daftar Isi Keren Di Blog

Tips And Trik Trik Blog

AkuDuluAnak.Tk - Selamat malam minggu kawan-kawan :D . Di malam minggu ini saya akan memberi tutorial bagaimana membuat daftar isi yang keren seperti dibawah ini screenshotnya :D

• Demo

Cara pemasangan :

• Login Blogger
• Tambah posting baru atau laman baru
• Masuk ke tab HTML
• Copy kode dibawah ini dan pastekan di situ :D

   <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://indraahmadrobani.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>

• Publikasikan dan kita lihat hasilnya

Bagikan

Jangan lewatkan

Cara Membuat Daftar Isi Keren Di Blog

4/ 5

Oleh Rijal Imnida

Rijal Imnida 19:59 Komentar