'Sitemap' atau daftar isi merupakan bagian penting dalam hal navigasi, agar pengunjung dapat menjelah dengan baik di blog kita. Blog ini yang menggunakan 'template classic' sangat membutuhkan 'Sitemap' tersebut. Karena tidak memiliki 'widget' arsip, seperti halnya 'template XML' di Blogger.
Kini telah banyak jenis 'Sitemap' yang dikembangkan untuk Blogger. Salah satunya 'Sitemap' yang dibuat Abu Farhan yang berjudul 'Table of Contents Categorized by Dates (by Archived) for Blogger'. 'Sitemap' tersebut yang kemudian digunakan untuk blog ini dengan sedikit modifikasi tampilannya.
Karena ingin membuat tampilan 'Sitemap' kearah samping (horizontal), maka diputuskan menggunakan alamat baru, khusus untuk 'sitemap' ini. Alamat 'sitemap' tersebut: http://deconstructioncode-sitemap.blogspot.com/.
Pada template 'Sitemap' ini pun menggunakan 'template classic', dan difungsikan secara statis. Jadi seluruh source aslinya dihapus dan digantikan dengan source baru yang hanya berupa CSS dan HTML, serta Javascript 'Sitemap'.
Keseluruhan 'source' yang digunakan di 'Sitemap' ini adalah:
<!DOCTYPE html>
<html lang="en-ID">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Daftar Isi Code-code-an</title>
<link href="http://lh4.ggpht.com/_dfnTVAxeWMI/StRF0PyfQcI/AAAAAAAACig/JujEkhm566E/s800/favico.gif" rel="icon" type="image/x-icon"/>
<link href='http://lh4.ggpht.com/_dfnTVAxeWMI/StRF0PyfQcI/AAAAAAAACig/JujEkhm566E/s800/favico.gif' rel='icon' type='image/vnd.microsoft.icon'/>
<style type="text/css">
*{margin:0; padding:0;}
body { background:#333; color:#fff; font-family: Verdana, "Bitstream Vera Sans", sans-serif;font-size: 75%; border-top:8px solid #222}
a:link { color:#fff; text-decoration:none;}
#daftarisi {float:left; width:8000px; margin-left:20px}
#daftarisi h1 { font-family:georgia,serif; font-size:72px; font-weight:normal; letter-spacing:5px; color:#111; text-shadow:1px 1px 1px #444; padding-top:20px}
#daftarisi h2 { font-family:georgia,serif; font-size:42px; margin:0 40px 30px}
#daftarisi h2 a {color:#ddd !important; font-weight:normal; letter-spacing:6px}
#daftarisi h2 a:hover {color:#999 !important}
#daftarisi h3 {font-family:"Adobe Caslon Pro","Hoefler Text",Georgia,Garamond,Times,serif; font-size:18px; letter-spacing:4px; padding-bottom:10px}
#daftarisi h3 a {color:#CF2626 !important;}
#daftarisi li { text-indent: -20px; list-style:none; padding-bottom:8px; margin-left:20px}
#daftarisi li a {line-height:18px; }
#daftarisi li a:hover { background:brown}
#Wtoc {padding-bottom:20px; font-size:10px; color:#CF2626 !important;}
.toc {float:left; width:300px; margin:0 20px 20px 0; padding-right:10px; border-right:1px solid #444}
</style>
</head>
<!-- <body><div></div> -->
<body>
<div id='daftarisi'>
<h1>Daftar Isi</h1>
<h2><a title="Home Page" href="http://deconstructioncode.blogspot.com/">Code-code-an</a></h2>
<p><small>Catatan: Gunakan "Control F" (pada keyboard) untuk mempercepat pencarian.</small></p>
<br/>
<script type="text/javascript" src="http://blogspotcode.googlecode.com/files/di.js"></script>
<script src="http://deconstructioncode.blogspot.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script>
</div>
</body>
</html>
0 comments:
Posting Komentar