cara membuat daftar isi yang menarik

Bookmark and Share
Cara Membuat Daftar isi Menarik Pada BLOG
Salam Blogger, kali ini saya akan sedikit membahas tentang tutorial membuat daftar isi blog di blogger dengan JQuery. Cara membuat daftar isi dengan jquery yang satu ini ternyata banyak disukai oleh para pengunjung dan tentunya SEOrang blogger. karena dengan daftar isi ini sangat keren dan cantik untuk dilihat, disamping itu tampilan ini lebih disukai daripada daftar isi dengan fungsi scroll lihat gambar tampilan daftar isi dibawah ini! Gimana bagus kan Screenshoot daftar isinya.


    Gambar daftar isi yang akan dibuat


Nah,keren kan tampilanya? jika kamu ingin melihat demonya langsung silahkan klik disini. lalu bagaimana cara membuat daftar isi dengan jquery tersebut? ikuti langkah-langkah dibawah ini!


    Login ke blogspot.
    Klik Design/Rancangan.
    Edit HTML.
    Kemudian letakan kode dibawah ini di atas kode ]]>

        #dafis-acc{
        font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
        font-size:12px;
        color:#333;
        background:#ffffff;
        }
        .dafis-label {
        background: url("http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/d/bg4.gif") repeat-x scroll 0 0 #E1F4FB;
        border: 1px solid #2F94BA;
        color: #FFFFFF;
        cursor: pointer;
        font-weight: bold;
        line-height: 1.4em;
        margin: 1px 3px;
        outline: medium none;
        overflow: hidden;
        padding: 2px 10px;
        text-decoration: none;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
        vertical-align: baseline;
        white-space: nowrap;
        }
        .dafis-label:hover {
        background: url("http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/d/bg2.gif") repeat-x scroll 0 0 #E1F4FB;
        color: #003366;
        }
        .dafis-daf ol {
        margin: 0 0 0 30px !important;
        padding: 0 !important;
        }
        .dafis-daf ol li {
        background-color: #C9E9F4;
        border: 1px solid #339DC6;
        line-height: 1.5em;
        margin: 1px 3px !important;
        text-align: left;
        white-space: nowrap;
        }
        .dafis-daf ol li a {
        color: #333333 !important;
        display: block;
        padding-left: 10px;
        text-decoration: none !important;
        }
        .dafis-daf ol li a:hover {
        background: none repeat scroll 0 0 #7BC4DF;
        border-left: 5px solid #333333;
        padding-left: 5px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
        }

    Copy kode dibawah ini dan letakkan diatas kode

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">

    Tapi jika di blogmu sudah ada kode seperti ini maka kamu boleh meninggalkan langkah no 5 ini.
    Jika sudah,copy dan paste kode dibawah ini,boleh kamu letakkan dalam postingan maupun widget blog kamu.

        <script type="text/javascript" src="http://infonetmu.googlecode.com/files/Acc1.js"></script>
        <script src="http://boytriks.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

   .

Mudah bukan? sulit ya? ya sudah,kalo mau yang gampang silahkan kamu copy kode dibawah ini,letakkan dipostingan kamu lalu terbitkn..

    <style type="text/css">
    #dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; 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: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://infonetmu.googlecode.com/files/Acc1.js" type="text/javascript"></script>
    <script src="http://boytriks.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>.
"Sekian tips dari saya, moga bermanfaat"
Kirimkan Ini lewat EmailBlogThis!Berbagi ke TwitterBerbagi ke Facebook

{ 0 komentar... Views All / Send Comment! }

Poskan Komentar