Daftar Isi Blogger Keren Dengan Tema Dan Navigasi

                                          



cara membuat daftar isi keren

1. Login pada blog
2. Pilih Page/Laman kosong
3. Masukan code berikut, pada halaman HTML bukan pada Compose

<link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_facebook-theme.css" type="text/css" />
<script type="text/javascript">
var showPostDate = true,
showComments = true,
idMode = true,
sortByLabel = false,
labelSorter = "JQuery",
loadingText = "Loading...",
totalPostLabel = "Jumlah posting:",
jumpPageLabel = "Halaman",
commentsLabel = "Komentar",
rmoreText = "Selengkapnya &#9658;",
prevText = "Sebelumnya",
nextText = "Berikutnya",
siteUrl = "http://ngeblogbarengbareng.blogspot.com",
postsperpage = 4,
numchars = 370,
imgBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQeTlH5tXvPvpcIjfaB6OBrPX_DTySAI4no8sHeV0oRoZLRTAKp5T1mwjLqD9VFuJxqM7lJPso3VZuA8mnOl5EpKYSLoSN0iq2zgdbuQRvVgihMZDxbPsLCDPHQDo5OcyX0pCpZm9pbCE/s1600/no+image.jpg";
</script>
<script type="text/javascript" src="http://fianetmu-com.googlecode.com/files/blog%20daftar%20isi.js"></script>

KETERANGAN :
Url yang berwarna kuning,itu adalah url tema daftar isi,silahkan pilih tema daftar isi dibawah ini sesuai dengan yang anda inginkan.
Dan Url yang berwarna merah silahkan ganti dengan url blog anda 

Brown theme

http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_minima-brown.css

 Black theme

http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_elegant-black-theme.css

 Diary book theme

http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_CSS3-diary-book-theme.css

 Elegan white theme

http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_minima-white-theme.css

Yellow green theme

http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_yellow-green-theme.css

 Dark red theme

http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_dark-red-theme.css

Contruction theme

http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_construction-theme.css

Nah kira-kira anda ingin memasang daftar isi dengan tema yang mana? Selamat mencoba dan happy blogging. .

Membuat Daftar Isi Dengan Jquery Accordiaon versi terbaru

untuk sobat yang mau coba coba silahkan ikuti tutorialnya di bawah ini.

1. Pastikan sobat sudah login ke akun blog sobat.
2. Pilih menu Template / Rancangan kemudian Edit HTML.
3. Cari kode ]]></b:skin> (gunakan CTRL+F)
4. Letakan Kode CSS di bawah ini,tepat di atas kode ]]></b:skin>

#dafis-acc {
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}
.dafis-label {
background: rgb(125,126,125);
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
color: #A1A1A1;
text-transform: uppercase;
font-weight: bold;
line-height: 2em;
margin: 1px 3px;
cursor: pointer;
outline: medium none;
overflow: hidden;
padding: 2px 10px;
text-decoration: none;
text-align: center;
}
.dafis-label:hover {
color: #F2F2F2;
}
.dafis-daf ol {
margin: 0 0 0 30px !important;
padding: 0 !important;
}
.dafis-daf ol li {
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
line-height: 1.3em;
margin: 1px 3px !important;
text-align: left;
white-space: nowrap;
}
.dafis-daf ol li a {
color: #333333 !important;
display: block;
padding-top: 5px;
padding-left: 10px;
text-decoration: none !important;
}
.dafis-daf ol li a:hover {
color: f2f2f2;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

5. kemudian cari kode </head> dan letakan script di bawah tepat di atas kode </head>

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

6. Kemudian copy scrip di bawah ini dan letakan pada postingan bagian HTML,widget,atau halaman statis.

<script type="text/javascript" src="https://hanmjlkcommunity.googlecode.com/files/Table-of-Content.js"></script>
<script src="http://hansmjlkcommunity.blogspot.com/feeds/posts/
summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Ganti Tulisan yang berwarna merah dengan URL blog sobat.

7. Setelah semuanya di lakukan kemudian pratinjau terlebih dahulu lalu save.

Pilihan Daftar Isi Menawan Untuk Blog Anda

Assalamualaikum jika kemaren saya membagikan cara membuat daftar isi dengan tema galery
Pada kesempatan ini saya akan share mengenai cara membuat daftar isi tetapi dengan tampilan sedikit berbeda dengan daftar isi daftar isi sebelumnya langkahnya tidak jauh beda dengan daftar isi yang lain lansung saja gan kita ke langkah pembuatannya....

Masuk blog anda
pilih menu laman/laman baru
kemudian pada box postingan pilih mode html

Jika sudah segera letakan kode dibawah ini pada box yang tersedia

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQPCQqxVb95jNBcCkKzXbjUrF_15Kyoz5PFHU2guFrYjCDYXZPeNWPHGdckcCG9OEGAidtWh91DfCwDDjnJ_wknRWfIdRqFwSNr0Adb3uezQ77u0B8cWscKgZ6X-DpBMHGzeRJJvOWZD0/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYtHeiJ2Xkn0bg6NdqaYE1mM7KTuE0Oqsgr1AzdPrN1MkrpuP9tCK4wd8zskCbalbEsGRhF_OU65E-iCf-2KcGZVSHEUw2Jy2-yWVLYwVOwR5CFismPEZbEDCBqqiGTD9kuoYc9FtTlfI/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs8HKTZKc2vMwF_yRioIVIrNR9C-8L6KCbfGl8IvjQPzfZnk-v-rpuJsUhyphenhyphengA_widJ-HC_0J34B-cH4Pkj1gwAXZUarWesp7RaU_h6utIYYGwV4ggA4z04tKN41uCk0L-7OXSjFbxir_A/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="https://farhanshare-blogspot-com.googlecode.com/files/sitemap%20%281%29.js" type="text/javascript"></script><script src="http://ngeblogbarengbareng.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
</div>

Catatan : untuk kode berwarna merah silahkan diganti dengan URL Blog agan 

jika sudah silahkan dipublikasikan dan lihat hasilnya

saya kira penjelasannya sudah cukup jelas selamat mencoba semoga bermanfaat...

Membuat Daftar Isi Galery Pada Blog

Pada kesempatan ini saya akan share sedikit mengenai cara membuat daftar isi galery keren di blog pada dasarnya kode yang digunakan cukup simple dan ringan jika agan berminat lansung saja ikuti langkah langkahnya dibawah ini...

Masuk blog agan

pilih menu Laman/Laman Kosong

Lalu pada Kolom postingan Pilih Mode Html

Jika Sudah Letakan kode dibawah ini pada laman yang telah tersedia

 

 

<link rel="stylesheet" type="text/css" href="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/theme/light.min.css"/>
<div id="dte-masonry-container"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/js/jquery.masonry.min.js" type="text/javascript"></script>
<script src="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/js/post.brick.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$('#dte-masonry-container').bloggerMasonry({

    // JSON Configuration
    viewMode: "summary", // Widget mode? "summary" || "thumbnail"
    homePage: "http://nama_blog.blogspot.com", // Your blog homepage
    numPosts: 10, // Number of posts to display per request
    numChars: 270, // Length of summary post
    squareImage: false, // Set thumbnail mode to square
    newTabLink: false, // Auto open links in new window/tab?
    columnWidth: 200, // Width of the image (also will resize the brick item width)
    subHeaderText: ["Diposting oleh ", "<br>pada "], // `Diposkan oleh FOO pada BAR`
    monthNames: [ // Month array
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    commentLabel: "&nbsp;", // Label text after total comments
    navText: {
        prev: "Sebelumnya", // Previous navigation label
        next: "Berikutnya", // Next navigation label
        disabled: "&times;", // Disabled navigation label
        data: ["Halaman ", " dari "] // `Halaman # dari #`
    },
    postCategory: null, // Change to a label name to sort posts by specific label
    fallbackThumb: "http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/img/meee.png", // Fallback thumbnail for posts without images
    loadingText: "Loading...", // `Loading...` text for loading indicator
    loadedText: "Loaded.", // `Loaded.` text for loading indicator
    infiniteScroll: false, // Enable infinite scroll?
    bottomTolerance: 30, // Bottom tolerance for the end of page indicator in infinite scroll

    // Shortcuts for Masonry Plugin Configuration (And Some Local Configuration)
    masonryConfig: {
        itemSelector: '.json_post',
        fadeSpeed: 400, // Speed of thumbnail fading effect
        resizeSpeed: 1000, // Speed of thumbnail resizing effect
        isAnimated: false,
        animateWithTransition: true, // Animate each brick with CSS transition instead of JQuery `.animate()`?
        animationOptions: {
            queue: false,
            duration: 1000,
            easing: null
        },
        isFitWidth: true,
        gutterWidth: 0,
        isRTL: false
    }

});
//]]>
</script>

Catatan : silahkan anda ganti  kode berwarna kuning dengan Url blog anda

Selesai Terakhir silahkan di Publikasikan gan....

Selamat mencoba semoga bermanfaat.....

Membuat Daftar Isi Sederhana Untuk Blog Dengan Scroll

 

Kali ini saya akan share mengenai cara membuat daftar isi untuk blog anda ya mungkin daftar isi ini ngak terlalu keren tapi bisa agan coba sendiri di blog caranya sangat gampang sekali untuk lebih jelasnya ikuti langkah dibawah ini...

Masuk blog anda
kemudian pilih menu laman/laman baru
jika sudah letakan kode dibawah ini pada box yang telah tersedia
dan perlu diingat kode ini diletakan pada mode html bukan compose berikut kodenya..

<div style="-moz-border-radius: 7px 7px 7px 7px; background-color: Lightseagreen; border: 0px solid rgb(33, 33, 33); height: 500px; margin: 0px; overflow: auto; padding: 10px; text-align: left; width: auto;" >
<div id="cl_option">
Loading.... </div>
<div id="cl_content_list">
</div>
<script type="text/javascript">
var jumlah_kata_dalam_ringkasan = 500;
</script>
<script src="http://wanblogs.googlecode.com/files/widget%20daftar%20isi.js">
</script>
<script src="http://ngeblogbarengbareng.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=9999">
</script> </div>
<div style="clear: both;" >
</div> 

Catatan : kode yang warna merah silahkan diganti dan sesuaikan dengan template anda kode warna merah pertama menyatakan warna background daftar isi dan yang kedua menyatakan alamat url blog anda...
http://ngeblogbarengbareng.blogspot.com/
Saya rasa sudah cukup jelas penjelasanya selamat mencoba semoga bermanfaat.........

Membuat Daftar Isi Keren Dengan Tema Galeria

Satu lagi Widged Menarik Untuk Blog Anda gan yang ingin membuat daftar isi lebih pariatif bisa mencobanya.... postingan kali ini saya akan membagikan suatu tips yaitu membuat daftar isi dengan tema galeria jika penasaran bentuknya seperti apa maka sobat bisa mencoba langkah - langkah dibawah ini..

Masuk Blog Sobat
kemudian pilih menu laman/laman kosong

Jika sudah Pada kolom postingan pilih mode Html

Kemudian copas kode dibawah ini pada Html tersebut

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-gallery-default-theme.css" type="text/css"></link>
<h4 id="loading">Loading...</h4>
<script type="text/javascript">
var enableMasonry = true,
    idMode        = true,
    showPostDate  = true,
    byLabels      = false,
    labelName     = "Mengenai",
    pBlank        = "http://2.bp.blogspot.com/-RdWht36FTLI/TrsqFbSraFI/AAAAAAAABO4/rTjPm97uO34/s1600/dte-darkblue.png";
    text          = "Komentar",
    numposts      = 999,
    showSpeed     = 1000,
    sDownSpeed    = 400,
    sUpSpeed      = 400,
    loadingItem   = "Loading item...",
    errorText     = "Opps...",
    home_page     = "http://ngeblogbarengbareng.blogspot.com/";
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/blogger-gallery-widget-rev1.js"></script>

Catatan : hapus kode yang saya tandai dengan warna merah jika sebelumnya sudah ada pada Template agan
        untuk kode berwarna biru ganti dengan alamat blog sobat


Sekian untuk Daftar isi galeria nya silahkan dicoba bila anda berminat 
semoga bermanfaat........

Daftar isi