Sedikit Info Seputar
Cara Membuat Sitemap atau Daftar Isi Otomatis di Blog
Terbaru 2017
- Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Cara Membuat Sitemap atau Daftar Isi Otomatis di Blog, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang
Artikel BLOGGER,
Artikel CSS,
Artikel JavaScript,
Artikel SEO, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
Cara Membuat Sitemap atau Daftar Isi Otomatis di Blog
Terbaru
link: Cara Membuat Sitemap atau Daftar Isi Otomatis di Blog
Berbagi Cara Membuat Sitemap atau Daftar Isi Otomatis di Blog Terbaru dan Terlengkap 2017
Sitemap / Daftar isi adalah Tempat dimana sebuah halaman menyimpan beberapa Link / Tautan yang mentaut ke Halaman-halaman / Postingan-postingan di Blog itu sendiri .. dan pada kesempatan ini saya akan memberitahukan 2 Langkah mudah Cara Membuat Sitemap / Daftar Isi Otomatis di Blog / Blogger / Blogspot ..Lihat DEMO →
Berikut Tutorial / Cara-cara nya :
1. Simpan bumbu CSS dibawah sebelum Tag </head> pada halaman EDIT HTML :
<style type="text/css">
#tabbed-toc {
margin:0 auto;
background-color:#d5d5d5;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4);
overflow:hidden;
position:relative;
color:#000;
}
#tabbed-toc .loading {
display:block;
padding:5px 10px;
font:normal bold 12px Tahoma,Sans-Serif;
color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
margin:0 0;
padding:0 0;
list-style:none;
}
#tabbed-toc .toc-tabs {
width:20%;
float:left;
}
#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold 10px/28px Tahoma,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#000;
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
background-color:#e9e9e9;
color:black;
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#444444;
color:white;
-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
box-shadow:-2px 2px 2px rgba(0,0,0,.5);
position:relative;
z-index:5;
margin:0 -1px 0 0;
/* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width:80%;
float:right;
background-color:white;
border-left:5px solid #444444;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
-moz-box-shadow:0 0 7px rgba(0,0,0,.7);
box-shadow:0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
position:relative;
z-index:5;
font:normal normal 10px Tahoma,Sans-Serif;
}
#tabbed-toc .panel li a {
display:block;
position:relative;
font-weight:bold;
font-size:11px;
color:#4d4d4d;
line-height:20px;
height:20px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden;
}
#tabbed-toc .panel li time {
display:block;
font-style:italic;
font-weight:normal;
font-size:10px;
color:#666;
float:right;
}
#tabbed-toc .panel li .summary {
display:block;
padding:10px 12px 10px;
font-style:italic;
border-bottom:4px solid #275827;
overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px 4px;
width:72px;
height:72px;
border:1px solid #dcdcdc;
background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
background-color:#eee;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
background-color:#c2c2c2;
color:none;
outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
background-color:#222;
}
@media (max-width:700px) {
#tabbed-toc {
border:2px solid #333;
}
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none;
display:block;
}
#tabbed-toc .toc-tabs li {
display:inline;
float:left;
}
#tabbed-toc .toc-tabs li a,
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#224C19;
-webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
-moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
box-shadow:2px 0 7px rgba(0,0,0,.4);
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color:white;
color:#333;
}
#tabbed-toc .toc-content {
border:none;
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
display:none;
}
}
</style>
2. Lalu Edit & Simpan bumbu JavaScript dibawah ini di Halaman / Postingan blog anda! ketika menulis post tekan tombol HTML → Paste → Simpan !
<div id="tabbed-toc"><span class="loading">Loading...</span></div> <a style="display:block;text-align:right;font:normal bold 8px Tahoma,Sans-Serif;text-decoration:none;margin:9px;" href="http://rian-nurherdian.blogspot.com/2013/01/cara-membuat-sitemap-atau-daftar-isi.html" title="Cara Membuat Sitemap / Daftar isi di Blog seperti ini ?">Sitemap Widget!</a> <script type="text/javascript"> var tabbedTOC = { blogUrl: "http://alamat-blog-anda.blogspot.com", containerId: "tabbed-toc", activeTab: 1, showDates: false, showSummaries: false, numChars: 200, showThumbnails: false, monthNames: [ "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember" ], newTabLink: true, maxResults: 99999, preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload") }; </script> <script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js"></script>
Keterangan : Ganti dengan Alamat Blog anda , pada text yang di beri background kuning pada bumbu JavaScript di atas ..
3. Selesai .. selamat Mencoba! dan semoga bermanfaat .. #enjoy blogging ^-^
Itulah sedikit Artikel Cara Membuat Sitemap atau Daftar Isi Otomatis di Blog terbaru dari kami
Semoga artikel Cara Membuat Sitemap atau Daftar Isi Otomatis di Blog yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Cara Membuat Sitemap atau Daftar Isi Otomatis di Blog