Daftar Isi Paling Jelek Width Navigasi

B

eberapa waktu lalu saat jalan jalan ke negeri tetangga sempet ngeliat Daftar isi nya sangat keren dan kreatif bahkan disitu ada salah satu temen Rohis Face book menjadi komentar pertama berawal dari situlah kang mahfid punya inisiatif untuk membuat sitemap/daftar isi yang sangat kreatif tersebut untuk lebih jelasnya tentang daftar isi tersebut silahkan sobat bisa klik tombol sitemap yang ada di blog ini (tempatnya di atas) atau buat sobat yang malas buat ngeklik apa lagi kasih KOMENTAR silahkan lihat contoh gambar nya di bawah ini :

Coba sobat lihat tanda lingkaran merah itulah yang di namakan Navigasi,sobat bisa tampilkan keselurahan hasil postingan sobat di daftar isi Paling Jelek ini ,sobat juga bisa tampilkan sesuai label tertentu.....!!!bingung yachhh maklum ADMIN bukan tipe seorang guru yang bisa menjelaskan sesuat yang mudah di mengerti jadi harap maklum...:).
Oke untuk cara membuat nya :

1. Saya anggap sudah ngerti tentang HTML jadi langsung saja cari kode ]]></b:skin>masukkan kode css ini tepat di atas kode ]]></b:skin> berikut kode nya

   #luar {
     font:normal 11px/14px Arial,Sans-Serif;
     color:#666;
     text-align:left;
     margin:0px auto;
     padding:15px;
     background:#333
    }
   #loadingscript {
     background:transparent url('http://reader-download.googlecode.com/files/ajax-loader.gif') no-repeat 50% 46%;
     padding:10px;
     font:bold 20px Georgia,Serif;
     color:black;
     height:400px;
     text-indent:-9999px;
   }
   .background {
     margin:0px auto 5px;
     height:auto;
     background-color:green;
     overflow:hidden;
     display:block;
   }
   
   .background h6 {
     margin:0px auto 2px;
     font:bold 14px Arial,Sans-Serif;
      text-transform:none;
     color:white;background:brown;padding:10px
   }
   .background h6 a {
     color:white;
     text-decoration:none;
     text-shadow:0px 1px 0px rgba(0,0,0,0.3);
   }
   .background img {
     float:left;
     height:72px;
     width:72px;
     margin:2px 10px 2px 0px;
     -webkit-box-shadow:none;
     -moz-box-shadow:none;
     box-shadow:none;
     background-color:orange;
     border:1px solid red;
     padding:4px;
   }
   .background .luar {
     padding:10px;
     background-color:#FEECBF;
     border-top:1px solid #e5e5e5;
       border-bottom:3px solid #e5e5e5;
     -webkit-box-shadow:inset 0px 1px 0px white;
     -moz-box-shadow:inset 0px 1px 0px white;
     box-shadow:inset 0px 1px 0px white;
   }
   .background .bawah {
     clear:both;
     border:1px solid #EAE7DB;
     padding:5px 10px;
     margin:10px 0px 0px;
     background-color:#FAFAE7;
     color:#4B86C1;
     overflow:hidden;
   }
   .background .bawah a.itemrmore {
     font-weight:bold;
     color:#895F30;
     float:right;
     text-decoration:none;
   }
   .background .bawah a.itemrmore:hover {
     color:#9BB009;
     text-decoration:underline;
   }
   #itempager {border:0px solid blue;
     padding:10px 20px;background:#fff
   }
   #pagination, #totalposts {
     color:#999;
     font:bold 10px Verdana,Arial,Sans-Serif;
     padding:0px;
     margin-bottom:10px;
     text-align:center;
   }
   #pagination span, #pagination a {
     border:1px solid #e5e5e5;
     color:white;
     display:inline;
     margin:0 1px;
     padding:2px 5px;
     text-indent:0px;
     background-color:#8899D0;
     text-decoration:none;
   }
   #pagination span.actual,
   #pagination a:hover {
     background-color:#7483BC;
   }
   #pagination span.hidden {
     display:none;
   }
   #paginationt{bottom:0px;left:0px;text-align:right;color:red;}

2. Lalu Save template selanjutnya taruh kode berikut di postingan atau di laman berikut kode nya

   <script type="text/javascript">
       var showPostDate   = true,
       showComments   = true,
       idMode         = false,
       sortByLabel    = false
       labelSorter    = "jquery",
       totalPostLabel = "Jumlah posting:",
       loadingText    = "Loading...",
       jumpPageLabel  = "Halaman",
       commentsLabel  = "Komentar",
       rmoreText      = "Selengkapnya &#9658 &#9658;",
       prevText       = "&laquo;",
       nextText       = "&raquo;",
       postsperpage   = 10,
       siteUrl        = "http://your- blog.blogspot.com",
       numchars       = 370,
       imgBlank       = "http://png-1.findicons.com/files/icons/101/old_school/128/globe.png";
   
   </script>
   <script type="text/javascript" src="http://karinafoto-project.googlecode.com/files/tableconten.js"></script>

Perlu diperhatikan: untuk merubah sesuai label silahkan ganti text yang di blog merah menjadi seperti ini :
  sortByLabel =true dan
  labelSorter = "sesuaikan dengan label",
Selamat berexperiment dan berpusing Ria terimakasih sama yang sudah komentar

Sumber Info :www.dte.web.id/