Membuat Site Map Cantik Dan Ringan Di Blogger

Selamat berjumpa kembali di Blog Berbagi Tips Blogger, pada artikel kali ini saya akan berbagi cara membuat Site Map atau daftar isi Blog kepada Anda para pengunjung setia.

Halaman Daftar isi adalah begitu penting bagi sebuah Blog, ini akan memudahkan pengunjung untuk meng-explorasi isi Blog Anda, bahkan para pengunjung akan dengan cepat mendapatkan artikel yang mereka cari. Apalagi untuk Blog yang sudah mempunyai artikel yang sangat banyak, tentu Daftar isi Blog sangat membantu mereka menelusuri semua postingan Anda. Dan yang terakhir dengan adanya Site Map, Blog Anda akan tampil lebih Profesional tentunya.


Mari kita mulai membuat Site Map Blog ini, kali ini saya membuatnya di sebuah Halaman Statis :


1). Setelah login di Blogger, segera Anda Klik pada Tab Laman >> Laman Baru >> Pada Mode HTML >> Beri Judul yang relevan (Misal : Daftar Isi)


2). Kemudian ambil kode HTML di bawah ini lalu Paste di Area Postingan Laman.

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px 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:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-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:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 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://berbagitipsblogger.blogspot.co.id/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

3). Kemudian Silakan Terbitkan Postingan Anda dan lihat Hasilnya. Kini Site Map Cantik Dan Ringan sudah ada di Blog Anda. Selamat mencoba.

Contoh Halaman Dengan Site Map di atas! http://www.subaru-bali.web.id

Search Post

Label :