sponsor

sponsor

Slider

Materi dan Tutorial Khusus Untuk Membuat Situs Web Dan Blog Bagi Pemula Hingga Tingkat Mahir. Gambar tema oleh kelvinjay. Diberdayakan oleh Blogger.

Posts

Recent Tube

Business

Technology

Life & style

Games

Sports

Fashion

Cara membuat sitemap atau daftar isi keren ringan sangat di blog

Cara membuat sitemap atau daftar isi keren ringan sangat di blog


1. Buka blogger.com.
2. Masuk dengan akun sobat.
3. Pilih Laman, kemudian pilih Laman kosong


Membuat Laman Kosong 

4. Setelah itu Pilih HTML disamping Compose

Menaruh Script di Laman 

5. Kemudian copy dan pastekan script di bawah ini  :

<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/AVvXsEjP_ue4R0BYdUm8X2-4djN3IvrBeeh7jw9-NB5ce_vlReso7r2Fc7VRphp2EhL_wWvsJbH_NZISxRMmBryFRzjEcY3UzqBaVTOUBjrxA2yDpyaits7yjIezkVEIdR8hK2a89IqQDTsj5yM/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/AVvXsEjjJK_Hwg9m3C-TZR7LJAGtCSLnA_qwewvJnOvG9HaYsthgoK-e8htQm1ZlOrS83iAhuv2Ds9ncCr26jL7ghzoaobiZlcFfxwQABk3LEaPnEictuuiECIq7rBa6zaxk-Qxcxf3fEtcoBVI/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/AVvXsEidz_N_tMO6I5pPcnnKIOYRTo9mEC81mQIpvtn-46AmxzEeue53kXlUO0eFVBVcy1GXdoHY9_nGP6N-Y04XabGbIlA3gcPuUSeKKxC-HSbw5mdP3RJJYzJ0Jf3vHi0Tsd6-t1HrsgnU4JE/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://ilmu-blog.googlecode.com/files/sitemap.js" type="text/javascript"></script><script src="http://jahetbungas.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
</div>

Keterangan : Gantilah yang berwarna merah dengan URL blog sobat

6. Kemudian simpan dan selesai lau lihatlah hasilnya. Keren kan ??. Semoga bermanfaat

Widget Daftar Isi Akordion dengan Sortir Label

Widget Daftar Isi Akordion dengan Sortir Label


Buat widget daftar isi ini dengan mengikuti langkah-langkah berikut:
Pertama-tama klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong:


Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <link rel="stylesheet" href="http://dte-project.googlecode.com/svn/trunk/accordion-toc-skin.css"/> <div id="table-of-content" class="table-of-content"><span class="loading">Memuat...</span></div> <div class="credit-link"><a href="http://www.dte.web.id/2012/02/widget-daftar-isi-akordion-dengan.html" title="Accordion TOC by Taufik Nurrohman">&#9654; Accordion TOC</a></div> <script>
var toc_config = { url: 'http://aneuk-mumang.blogspot.com/',
containerId: 'table-of-content',
showNew: 10,
newText: ' - <strong style="font-weight:bold;font-style:italic;color:red;">Baru!</strong>',
sortAlphabetically: {
thePanel: true,
theList: true
},
maxResults: 9999,
activePanel: 1,
slideSpeed: {
down: 400,
 up: 400
},
slideEasing: {
down: null,
up: null
},
slideCallback: {
down: function() {},
up: function() {}
},
clickCallback: function() {},
jsonCallback: '_toc',
delayLoading: 0
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/accordion-toc-1.js"></script>
Ganti URL http://aneuk-mumang.blogspot.com/ dengan alamat blog Anda, lalu klik tombol Publikasikan.


 
Semoga Berhasil
Sub: DTE

Widget Daftar Isi Tabulasi untuk Blogger

Widget Daftar Isi Tabulasi untuk Blogger



Cara membuat Widget Daftar Isi Tabulasi untuk Blogger di blog anda sangant musah.
Salin kode di bawah ini kemudian letakkan di dalam formulirnya:
Untuk Paduan Pembuatan klik DI SINI
<link rel="stylesheet" href="http://dte-project.googlecode.com/svn/trunk/tabbed-toc-skin.css"/>
<div id="tabbed-toc"><span class="loading">Memuat...</span></div>
<script>
var tabbedTOC = {
    blogUrl: "http://aneuk-mumang.blogspot.com", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/tabbed-toc.js"></script>
Gantin URL "http://aneuk-mumang.blogspot.com" dengan URL anda
Semoga sukses