Cara Membuat Site Map Terbaru | Daftar Isi Blog - Sebuah tantangan yang cukup menguras waktu, pikiran dan tenaga dalam membuat daftar isi blog terbaru kali ini. Desain Site Map (Daftar Isi) terbaru kali ini mungkin dapat menggantikan tempat daftar postingan yang ada pada halaman beranda (HOME) menjadi daftar isi dengan sistem sortir yang lebih menarik seperti ini:




DEMO SHOW



Pada Desain content saya menggunakan tampilan default tataan daftar artikel yang pada umumnya ada pada halaman beranda, namun pada text header, saya membuat tab dengan 3 tombol pilihan sortir untuk memudahkan pengunjung Anda dalam menjelajah semua isi artikel pada blog, termasuk postingan yang pernah Anda perbaharui.


Gambar daftar isi blogger



TAHAP PENERAPAN

<div id="table-contents">
   <div id="sitemap-menu">
     <div class="isi-content">
       <div class="sb77-left">
        <label>Cari Artikel Berdasarkan:</label>
   </div>
         <div class="sb77-right">
<select id="orderFeedBy"><option selected="" value="published">Posting Terbaru</option><option value="updated">Posting Diperbaharui</option></select>
        </div>
      </div>
   <div class="isi-content">
         <div class="sb77-left">
          <label>Mencari Artikel Berdasarkan File:</label>
         </div>
         <div class="sb77-right">
<span id="labelSorter"><select disabled=""><option selected="">Category File...</option></select></span>
         </div>
      </div>
                 <div class="isi-content">
                     <div class="sb77-left">
  <label>Temukan Dengan Mudah, Ketik Teks Anda <span style="color:red;">&#10142;</span></label>
                     </div>
          <div class="sb77-right">
    <form id="postSearcher">
 <input type="text" />
   </form>
            </div>
         </div>
      </div>
   </div>
</div>
<header id="resultDesc" style="color: white; font-weight: bold;"></header>

<ul id="feedContainer"></ul>
  <div id="feedNav">
     <span class="loadingx">Loading...
     </span>
  </div>


Berikut salinan elemen CSS yang dapat Anda edit sendiri, jika kiranya ingin tampilan yang berbeda dari yang terlihat pada tombol DEMO SHOW diatas:

<style type="text/css">
/*sitemap sortir post design with menu show
css value='sitemap-menu','sb77-code'
link="http://sahabatblogger77.blogspot.com"
Author design: devy indriyani*/
#main-wrapper {background:transparent;}
h2.post-title {border-top:1px solid #444;border-bottom:1px solid #444;color:#000;}
.post-body {margin:4px 0px;border:none;color:#000;text-shadow:none;}
#blog-pager, .breadcrumbs {display:none;}
.comments {border:none}
#main-wrapper {box-shadow:none}
#sitemap-menu{
  border-bottom: 4px solid #080;
  color: black;
  overflow: hidden;
  padding: 3px 0;}

.isi-content{overflow:hidden}
.sb77-left{
  float:left;
  height: 22px;
  line-height: 20px;
  text-align: left;
  width: 49%;}

.sb77-right{float:right;width:50%}
.isi-content select{width:100%;border:1px dotted #ccc;padding:1px;background-color:#39f;color:white}
.isi-content input{border:0;outline:0;margin:0;width:100%;background:#ddd;}
.isi-content form{padding:0;}
ul#feedContainer,ul#feedContainer li{margin:0;list-style:none;padding:0;overflow:hidden}
ul#feedContainer li{
  background-color: #d9ead3;
  border: 1px solid #cccccc;
  display: block;
  float: left;
  height: 95px;
  margin: 5px;
  padding: 10px 10px;
  position: relative;
  width: 44.0%;}

.inner img{
  background:#cccccc;
  border: 2px solid #080;
  float: left;
  margin: 4px 6px 0 0;
  padding: 2px;
  box-shadow:
  inset 1px 1px 4px rgba(0,0,0,0.5),
  0 2px 3px rgba(0,0,0,0.6);}

.toc-title{font-family:'Coda';font-size:14px;color: blue !important;}
.inner strong{font-weight:normal;font-size:10px;color:#b30000}
.news-text{font-size:11px;line-height:13px;color:#000000 !important}

#feedNav .next,#feedNav .front,#feedNav .loadingx, #feedNav span{
  width:100%;
  display:block;
  text-align:center;
  height:30px;
  line-height:30px;
  background-color:#080;
  color:white;}

@media only screen and (min-width:768px) and (max-width:989px){ul#feedContainer li {height: 108px;width: 100%;margin: 0}}
@media only screen and (max-width:767px){ul#feedContainer li {height: 108px;width: auto;margin: 0}}
@media only screen and (max-width:479px){ul#feedContainer li {width: auto;margin: 0;height: 135px;}}
</style>

<script src="https://s-blogger77.googlecode.com/svn/trunk/siteMap-style-menu-show.js"></script>
<script>
document.body.oncontextmenu=function() {return false;}
var tocConfig = {
    url: "http://URL-Anda.blogspot.com",
    feedNum: 14,
    labelName: (window.location.hash && window.location.hash != '#0' && window.location.hash != '#search') ? encodeURIComponent(window.location.hash.substr(1)) : false,
    numChars: 100,
    thumbWidth: 70,
    navText: "Load More &#9660;",
    frontText: "Top &uArr;",
    noImage: "http://1.bp.blogspot.com/-kjOxg7UqWTs/UW_X2JC8O6I/AAAAAAAAA_k/3KYB6uDKvFI/s1600/512px-No_image_available.svg.png",
    loading: "<span>Memuat...</span>",
    searching: "<span>Mencari...</span>",
    noResult: "Tak Ditemukan"
};
</script>



Mungkin Anda juga suka dengan Tampilan yang berbeda di:

Daftar menu Artikel Blog - SAHABAT BLOGGER 77

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Cara Membuat Site Map Terbaru | Daftar Isi Blog
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

14 komentar

  1. wah keren mbak demonya... ntar bisa keenakan ya mbak pengunjung kalau daftar isinya lebih jelas hehehe :d

    thanks sharingnya :)

    BalasHapus
  2. Keren mbak, hehe...
    Makasi udah berbagi :)

    BalasHapus
  3. wah... cocok banget nih, blog saya belum saya kasih sitemap, sepertinya sitemap ini keren juga, tapi kalau boleh tau ini valid html 5 nggak, soalnya saya lagi pengin valid-validan, hehehe...

    BalasHapus
  4. benar..tdk sia2 bikinnya mba..memang bagus..!

    div pembuka tidak membaca di laman ,..penempatannya di situ kan Mba..?

    BalasHapus
  5. keren , ijin coba di blog saya yah mba

    BalasHapus
  6. tutorial nya sederhana..tapi mudah dipahami dan hasilnya luarbiasa bagus.....keep happy blogging always...salam dari Makassar :-)

    BalasHapus
  7. makasih mbak sudah mau berbagi ilmunya
    kunjungi kami di www.168sdbet.com

    BalasHapus
  8. weis keren, daftar isiku masih beberapa biji, ntar klo dah banyak pasti tak praktekin..

    BalasHapus
  9. betah di blog devi main dari tadi ga mau pulang, :d

    BalasHapus
    Balasan
    1. hehe..!! tapikan tutorial Devy bebas kok dibawa pulang,

      Hapus
  10. Cakep-cakep artikelnya.... seperti yang punya blog.... :)

    BalasHapus
  11. klo kategori nya cuma 1 pilihan saja gimana

    BalasHapus
  12. mantapp.. izin untuk mamakainya di http://deuniv.blogspot.co.id/p/daftar-isi_15.html?m=1#0

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK