Cara Membuat Daftar Isi Blog (SiteMap). Salah Satu fungsi dari sitemap ini adalah untuk memudahkan visitor/pengunjung, Mesin Pencari Maupun Pemilik Blog sendiri Untuk menjelajahi dan menelusuri secara lengkap Artikel artikel yang pernah diposting. dengan begitu pengunjung akan merasa lebih nyaman karena konten konten yang mereka cari akan lebih mudah untuk di temukan.
Banyak sekali Model tampilan SiteMap/Daftar Isi, kali ini saya akan berbagi Tentang bagaimana membuat SiteMap Berdasarkan Label Dengan Sangat Mudah Karena SiteMap ini nantinya akan Muncul secara otomatis dan proses pemasanganyapun Tanpa harus Utak atik Template.
Cara Membuat SiteMap/Daftar Isi Blog Berdasarkan Label:
1. Masuk ke Account Blogger Anda.
2. Pilih Tata Letak /LayOut.
3. Pilih Add gadget/ Tambahkan Gadget.
4. Pilih Html/Java Script.
5. Copy dan Pastekan Kode di bawah ini:
<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:3px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:2px solid #3908D5;
border-radius:15px;-moz-border-radius:7px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#F0EBFE;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#423668 0%,#2F2C3A 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>
<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://arpusa.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
#toc{
width:99%;
margin:5px auto;
border:3px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:2px solid #3908D5;
border-radius:15px;-moz-border-radius:7px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#F0EBFE;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#423668 0%,#2F2C3A 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>
<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://arpusa.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
6. Klik Save/Simpan. Lihat Hasilnya.
Catatan:
Silahkan Utak atik sendiri ya Warna Background. Border dll. Sesuai keinginan Sobat dan jangan pernah takut untuk Mencoba. Untuk memudahkan mencari Kode warna Anda bisa Kunjugi
Tool Otomatis Kode Warna Html Pada Blog / Website
SELAMAT MENCOBA.. HAPPY BLOGGING..
Artikel Terkait
Tidak ada komentar:
Posting Komentar