Modifikasi Sitemap Abu Farhan, Cantik..!

Modifikasi Sitemap Abu Farhan

Alhamdulillah..., akhirnya bisa juga update potingan seputar Tutorial blogspot, setelah hampir satu bulan tidak update. Postingan terakhir RF tentang cara membuat Related post Thumbnail dengan efek Marque dan Tooltip, yang belum menyimak silahkan lihat disini Related Posts Keren..!.

 
Tidaklah  berlebihan kalau dibahasakan bahwa Sitemap/Table of contents dari Mr. Abu Farhan ini sangat terkenal dan menjadi sumber inspirasi dari beberapa para blogger untuk memodifikasinya dengan berbagai sytle, salah satu style dari modifikasi tersebut akan kita lihat dibawah ini.

Langkah-langkah pembuatannya seperti biasa, buatkan laman baru atau masukkan dalam postingan isi dalam Edit HTML lalu masukkan kode dibawah ini.

<style type="text/css">
/*Outer Border
------------------*/
#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);}

/*Label Color and Background
------------------*/
.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{text-transform:uppercase;}

/*Latest Post Info
------------------*/
.new{color:#FF5F00;font-weight:bold;font-style:italic}

/*Post Title List
------------------*/
.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 type="text/javascript" src="http://dvslabs.googlecode.com/files/customizable-TOC.js"></script>
<script src="http://yourblogname.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Setelah itu ganti http://yourblogname.blogspot.com dengan alamat link Sobat.

Demo

Sumber : D-Artchitext (http://www.intert3chmedia.net).

Semoga Bermanfaat.