Cara Menciptakan Halaman Indeks, Arsip, Atau Daftar Isi Blog

 Indeks atau Arsip ini seolah-olah dengan halaman  Cara Membuat Halaman Indeks, Arsip, atau Daftar Isi Blog
HALAMAN Indeks atau Arsip ini seolah-olah dengan halaman Daftar Isi Blog (Sitemap). Hanya saja, daftar judul posting ditampilkan menurut bulan dan tanggal publikasi. Demonya dapat dilihat di Indeks.

Karena hakikatnya sama, maka arahan di bawah ini dapat juga dipakai untuk menciptakan halaman khusus daftar isi blog (sitemap).

Nama halamannya juga dapat Indeks, Arsip, Daftar Isi, atau Sitemap. Bebas lah.

Fungsi halaman indeks ini sebagai navigasi sekaligus internal links yang memudahkan kita dan pengunjung untuk membuka-buka halaman blog kita.

Cara Membuat Halaman Indeks, Arsip, atau Daftar Isi Blog

Marik kita mulai menciptakan Membuat Halaman Indeks, Arsip, atau Daftar Isi Blog:
1. Klik "Page" > "New Page"
2. Langsung isi judul dengan "Indeks"
3. Klik mode HTML. Perhatikan gambar berikut ini.

 Indeks atau Arsip ini seolah-olah dengan halaman  Cara Membuat Halaman Indeks, Arsip, atau Daftar Isi Blog


Isi judul dan klik HTML:

 Indeks atau Arsip ini seolah-olah dengan halaman  Cara Membuat Halaman Indeks, Arsip, atau Daftar Isi Blog



4. Copas arahan berikut ini di kolom Content:

<script type="text/javascript"> function LoadTheArchive(TotalFeed)  {     var PostTitles = new Array();     var PostURLs = new Array();     var PostYears = new Array();     var PostMonths = new Array();     var PostDays = new Array();     if("entry" in TotalFeed.feed)      {  var PostEntries=TotalFeed.feed.entry.length;  for(var PostNum=0; PostNum<PostEntries ; PostNum++)   {      var ThisPost = TotalFeed.feed.entry[PostNum];      PostTitles.push(ThisPost.title.$t);      PostYears.push(ThisPost.published.$t.substring(0,4));      PostMonths.push(ThisPost.published.$t.substring(5,7));      PostDays.push(ThisPost.published.$t.substring(8,10));      var ThisPostURL;      for(var LinkNum=0; LinkNum < ThisPost.link.length; LinkNum++)       {   if(ThisPost.link[LinkNum].rel == "alternate")    {       ThisPostURL = ThisPost.link[LinkNum].href;       break   }      }      PostURLs.push(ThisPostURL);  }     }     DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays); }  function DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays) {     var MonthNames=["January","February","March","April","May","June","July","August","September","October","November","December"];     var NumberOfEntries=PostTitles.length;      var currentMonth = "";     var currentYear = "";      for(var EntryNum = 0; EntryNum < NumberOfEntries; EntryNum++)     {  NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum],10)-1]   if (currentMonth != NameOfMonth || currentYear != PostYears[EntryNum]) {   currentMonth = NameOfMonth;   currentYear = PostYears[EntryNum];    document.write("<div class='dateStyle'><br />" + currentMonth+" "+currentYear+" </div>");  }    document.write('<a href ="'+PostURLs[EntryNum]+'"><div class=dayStyle>'+parseInt(PostDays[EntryNum],10)+":&nbsp;&nbsp;</div> "+PostTitles[EntryNum]+"</a><br />");     } } </script>  <script src="http://YOURBLOGHERE.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=LoadTheArchive" /> </script>  <!--CUSTOMIZATION--> <style type="text/css"> .dateStyle {      color:#000;      font-weight:bold;      font-size: 15px;      font-family: Arial, sans-serif;      margin: 0; }  .dayStyle {      color:#000;      font-weight:bold;      font-family: Arial, sans-serif;      display: inline-block; }  </style>

5. Ganti alamat blognya dengan url blog Anda.
6. Publish!

Sumber

0 comments: