Cara Membuat Daftar Isi atau Sitemap dengan Tampilan Berbeda

Cara Membuat Daftar Isi atau Sitemap dengan Tampilan Berbeda

Pada kesempatan siang ini kembali Ajatshare akan membagikan tips cara membuat daftar isi atau sitemap dengan tampilan berbeda dari biasanya. Mungkin sebagian sobat Ajatshare ada yang pernah melihat tampilan tersebut dan memang betul sekali daftar isi atau sitemap ini dipakai pakai dalam blog DTE yang scriptnya dibuat oleh Taufik Nurrohman.

Dan yang akan saya share  adalah script aslinya jadi tampilan tidak seperti yang di DTE silahkan sobat edit kembali dan sesuaikan dengan blog masing-masing, untuk lebih jelasnya dapat dilihat pada live demo di bawah ini:

#table-outer { padding:7px 10px; margin:30px 30px 0; } #table-outer table { width:80%; margin:0; } #table-outer form {font:inherit;} #table-outer td {padding:2px 2px;} #table-outer label { font-weight:bold; color:#999; text-shadow:0 1px 0 rgba(0,0,0,.4); display:block; text-align:right; margin:0 10px 0 0; padding:4px 0 0; } #table-outer select[disabled] {opacity:.4;} #post-searcher { display:block; margin:0; padding:0; } #table-outer input,#table-outer select { width:100%; background-color:#111; border:none; display:block; margin:0; padding:5px 5px; font-size:70%; text-transform:uppercase; color:#777; outline:none; -webkit-box-shadow:inset 0 1px 3px black,0 1px 0 #444; -moz-box-shadow:inset 0 1px 3px black,0 1px 0 #444; box-shadow:inset 0 1px 3px black,0 1px 0 #444; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; } #table-outer input:focus,#table-outer select:focus {background-color:#090909;} #feed-container { display:block; clear:both; margin:0 30px; padding:0; list-style:none; overflow:hidden; position:relative; border:1px solid #3c3c3c; border-top:none; text-shadow:0 1px 0 rgba(0,0,0,.4); } #feed-container:after { content:””; display:block; width:1px; height:100%; position:absolute; top:0; bottom:0; left:50%; background-color:#3c3c3c; } #feed-container li { list-style:none; margin:0; padding:0; border-top:1px solid #3c3c3c; color:#999; width:50%; float:left; display:inline; } #feed-container li .inner { margin:15px 16px; height:116px; overflow:hidden; word-wrap:break-word; text-overflow:ellipsis; } #feed-container li a { text-decoration:none; color:#5687B8; } #feed-container li a:hover { text-decoration:none; color:#eee; } #feed-container li a.toc-title {font-weight:bold;} #feed-container li .news-text {margin:10px 0 0;} #feed-container li img { margin:0 10px 5px 0; padding:5px; background-color:#222; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; float:left; } #result-desc { margin:0 30px; padding:0; border-bottom:4px solid #303030; } #result-desc span,#result-desc div { display:block; margin:0; padding:5px 10px 7px; color:#D64D52; } #result-desc div {color:inherit;} #feed-nav { margin:10px 30px 0; text-align:center; font-weight:bold; text-transform:uppercase; } #feed-nav a,#feed-nav span { background-color:#111; padding:0; color:#999; text-decoration:none; display:block; height:30px; line-height:32px; } #feed-nav a:hover,#feed-nav a:active { background-color:black; color:white; } #feed-nav span {cursor:wait;} @media (max-width:800px) { #feedContainer li { float:none; display:block; width:auto; height:auto; } #feedContainer:after { display:none } }

Urutkan artikel berdasarkan: POSTING TERBARU POSTING DIPERBAHARUI
Filter artikel berdasarkan kategori: MEMUAT…
Cari dengan kata kunci:

    Bagi sobat yang ingin mengganti sitemap yang lama dengan sitemap yang keren ini, silahkan ikuti petunjuknya di bawah ini:

    1. Login ke Blogger
    2. Masuk ke Rancangan lalu pilih Edit HTML
    3. Centang Expand Template Widget.
    4. Cari kode berikut kode ]]></b:skin> atau <style>
    5. Copy dan paste kode berikut tepat di bawahnya

    #table-outer {
      padding:7px 10px;
      margin:30px 30px 0;
    }
    #table-outer table {
      width:80%;
      margin:0;
    }
    #table-outer form {font:inherit;}
    #table-outer td {padding:2px 2px;}
    #table-outer label {
      font-weight:bold;
      color:#999;
      text-shadow:0 1px 0 rgba(0,0,0,.4);
      display:block;
      text-align:right;
      margin:0 10px 0 0;
      padding:4px 0 0;
    }
    #table-outer select[disabled] {opacity:.4;}
    #post-searcher {
      display:block;
      margin:0;
      padding:0;
    }
    #table-outer input,#table-outer select {
      width:100%;
      background-color:#111;
      border:none;
      display:block;
      margin:0;
      padding:5px 5px;
      font-size:70%;
      text-transform:uppercase;
      color:#777;
      outline:none;
      -webkit-box-shadow:inset 0 1px 3px black,0 1px 0 #444;
      -moz-box-shadow:inset 0 1px 3px black,0 1px 0 #444;
      box-shadow:inset 0 1px 3px black,0 1px 0 #444;
      -webkit-box-sizing:content-box;
      -moz-box-sizing:content-box;
      box-sizing:content-box;
    }
    #table-outer input:focus,#table-outer select:focus {background-color:#090909;}
    #feed-container {
      display:block;
      clear:both;
      margin:0 30px;
      padding:0;
      list-style:none;
      overflow:hidden;
      position:relative;
      border:1px solid #3c3c3c;
      border-top:none;
      text-shadow:0 1px 0 rgba(0,0,0,.4);
    }
    #feed-container:after {
      content:"";
      display:block;
      width:1px;
      height:100%;
      position:absolute;
      top:0;
      bottom:0;
      left:50%;
      background-color:#3c3c3c;
    }
    #feed-container li {
      list-style:none;
      margin:0;
      padding:0;
      border-top:1px solid #3c3c3c;
      color:#999;
      width:50%;
      float:left;
      display:inline;
    }
    #feed-container li .inner {
      margin:15px 16px;
      height:116px;
      overflow:hidden;
      word-wrap:break-word;
      text-overflow:ellipsis;
    }
    #feed-container li a {
      text-decoration:none;
      color:#5687B8;
    }
    #feed-container li a:hover {
      text-decoration:none;
      color:#eee;
    }
    #feed-container li a.toc-title {font-weight:bold;}
    #feed-container li .news-text {margin:10px 0 0;}
    #feed-container li img {
      margin:0 10px 5px 0;
      padding:5px;
      background-color:#222;
      -webkit-border-radius:0;
      -moz-border-radius:0;
      border-radius:0;
      float:left;
    }
    #result-desc {
      margin:0 30px;
      padding:0;
      border-bottom:4px solid #303030;
    }
    #result-desc span,#result-desc div {
      display:block;
      margin:0;
      padding:5px 10px 7px;
      color:#D64D52;
    }
    #result-desc div {color:inherit;}
    #feed-nav {
      margin:10px 30px 0;
      text-align:center;
      font-weight:bold;
      text-transform:uppercase;
    }
    #feed-nav a,#feed-nav span {
      background-color:#111;
      padding:0;
      color:#999;
      text-decoration:none;
      display:block;
      height:30px;
      line-height:32px;
    }
    #feed-nav a:hover,#feed-nav a:active {
      background-color:black;
      color:white;
    }
    #feed-nav span {cursor:wait;}
    @media (max-width:800px) {
    #feedContainer li {
    float:none;
    display:block;
    width:auto;
    height:auto;
    }
    #feedContainer:after {
      display:none
    }
    }

    Copy dan paste kode berikut diantara kode <body>…..</body> atau di widget

    <div id="table-outer">
      <table border="0">
        <tbody>
        <tr>
          <td><label for="feed-order">Urutkan artikel berdasarkan:</label>
          </td>
          <td><select id="feed-order">
            <option selected="selected" value="published">POSTING TERBARU</option>
            <option value="updated">POSTING DIPERBAHARUI</option>
            </select>
          </td>
        </tr>
        <tr>
          <td><label for="label-sorter">Filter artikel berdasarkan kategori:</label>
          </td>
          <td><select disabled="disabled" id="label-sorter">
            <option selected="selected">MEMUAT...</option>
            </select>
          </td>
        </tr>
        <tr>
          <td><label for="feed-q">Cari dengan kata kunci:</label>
          </td>
          <td><form id="post-searcher">
            <input id="feed-q" type="text" />
            </form>
          </td>
        </tr>
      </tbody>
    </table>
    </div> 
    <a style="display:none" href="http://ajatshare.blogspot.com">Blogger Widgets</a>
    <header id="result-desc"></header>
    <ul id="feed-container"></ul>
    <div id="feed-nav">
    </div>
    <script src="https://googledrive.com/host/0B-qFC4Ni6GSKdTZGbmdhUkUtbTA" type="text/javascript"></script>
    Tags: , , ,
    Previous Post

    Cara Agar Kata Kunci Yang Kita Buat Menjadi SEO Friendly

    Next Post

    Tips Cara Membatalkan Janji Dengan Sopan…!!!

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Hosting Unlimited Indonesia
    Hosting Unlimited Indonesia
    Advertisements
    0

    Your Cart