Iklan

Cara Membuat Widget DAFTAR ISI atau SITEMAP di Blogger KEREN

Salam Blogger, Artikel Bloggingpasuruan kali ini tentang “Cara Membuat Widget DAFTAR ISI atau SITEMAP di Blogger KEREN  “ . Sitemap (Daftar Isi) adalah halaman di blog Anda di mana semua posting disusun sesuai dengan jenis kategori atau label, dan menunjuk  link ke semua posting yang diterbitkan di blog Sobat. Sitemap (Daftar Isi) penting bagi semua blogger untuk memiliki widget ini. Blog tampak terlihat profesional, dan membantu pengunjung blog Sobat dan pembaca untuk menavigasi melalui posting blog Anda.


Cara Membuat Widget DAFTAR ISI atau SITEMAP di Blogger KEREN

Berikut ini adalah script yang menghemat waktu dan membantu untuk memperbarui semua posting baru yang dibuat di blog Anda ke sitemap Anda (Daftar Isi) halaman secara otomatis. Script ini akan menampilkan semua tulisan yang dibuat di blog Anda di bawah kategori tertentu mereka (Label). Widget ini juga dilengkapi dengan CSS & Jquery untuk membuatnya menarik.

Langkah Membuat Sitemap Otomatis (Daftar Isi) berdasarkan Kategori.

1. Tambahkan kode CSS di bawah ini untuk template Anda.
Hal ini dapat dilakukan dengan masuk ke Blogger >>> Template, gunakan (CTRL + F) untuk mencari ]]> </ b: skin> dalam template Anda dan kemudian paste kode CSS di bawah ini sebelum tag ]]> </ b: skin >


/*--------Widget Daftar isi blog oleh http://bloggingpasuruan.blogspot.com-----*/
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top,  #888,  #575757);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
    color: #fef4e9;
    border: 2px solid white !important;
    background: #1C8DFF;
    background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));
    background: -moz-linear-gradient(top,  #9dc2e7,  #438cd2);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');
}


Kemudian Simpan Template Anda setelah memasukkan CSS

2. Buat Halaman: untuk membuat halaman baru, masuk ke Blogger >>> Pages >>> New Page. Sekarang beri judul halaman seperti "Daftar Isi" "Site Maps" atau judul yang Anda inginkan. Klik tombol EDIT HTML pada layar modus Compose, sekarang paste kode di bawah di dalamnya.

<script src=" https://daftar-isi-bloggingpasuruan-blogspot-com.googlecode.com/svn/pasuruansityemap.js "></script>
<script src="http://bloggingpasuruan.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src=" https://daftarisi-bloggingpasuruan-blogspot-com.googlecode.com/svn/pasuruansitemap01.js " type="text/javascript"></script>


Pastikan Anda mengubah http://bloggingpasuruan.blogspot.com ke URL blog Anda sendiri dan kemudian mempublikasikan halaman. Kunjungi link halaman untuk melihat blog sitemap yang baru Sobat buat (Daftar Isi).

Sitemap (Daftar Isi) Kustomisasi


Cara Membuat Widget DAFTAR ISI atau SITEMAP di Blogger KEREN


Warna kategori ketika dalam mode aktif berwarna biru sementara ketika tidak aktif tampak abu-abu gelap.

Jadi untuk mengubah modus aktif, hanya mengubah # 9dc2e7 dan # 438cd2. Berikut adalah alat warna generator yang akan membantu Anda untuk memilih kode warna terbaik yang Anda cintai.

Jika Anda mengalami kesulitan dalam proses pengaturan Sitemap blog Anda, jangan ragu untuk menggunakan kotak komentar di bawah.

Saya akan sangat berterima kasih jika sobat Blogger berkenan meninggalkan komentar, saran atau tambahan informasi serta pertanyaan seputar artikel Cara Membuat Widget DAFTAR ISI atau SITEMAP di Blogger KEREN.  Semoga bermanfaat dan terima kasih..

Next
Prev Post
Previous
Next Post

1 comment: