Peta Situs Style Berbeda

- June 19, 2014



Membuat peta situs memang penting bagi web/blog karena untuk mempermudah pengunjung bernavigasi, peta situs berikut dengan style yang berbeda dari peta situs sebelumnya, silahkan disimak :




1. Login di akun anda
2. cari tag ]]></b:skin> atau </style>
3. Copy dan paste script dibawah ini letakkan diatas tag ]]></b:skin> atau </style>
4. Simpan template

     #main-wrapper {980px;}
    #tabbed-toc {  margin:-20px 0 0 0;  background-color:#F1F1F1;  overflow:hidden;  position:relative;  color:#333;}
    #tabbed-toc .loading {  display:block;  padding:5px 10px;  width:200px;  font:normal 400 14px/normal coda;  color:red;  text-align:center;}
    #tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li {  margin:0 0;  padding:0 0;  list-style:none;}
    #tabbed-toc .toc-tabs {  width:20%;  float:left;}
    #tabbed-toc .toc-tabs li a {  display:block;  font:normal 400 12px/28px coda;  height:28px;  overflow:hidden;  text-overflow:ellipsis;  color:#222;  text-transform:uppercase;  text-decoration:none;  padding:0 12px;  cursor:pointer;}
    #tabbed-toc .toc-tabs li a:hover {  background-color:#222;  color:white;}
    #tabbed-toc .toc-tabs li a.active-tab {  background-color:#666;  color:white  position:relative;  z-index:5;  margin:0 -1px 0 0;   /* cursor:text; */    }    #tabbed-toc .toc-content,    #tabbed-toc .divider-layer {      width:80%;      float:right;      background-color:white;      border-left:5px solid #181D67;      -webkit-box-sizing:border-box;      -moz-box-sizing:border-box;      box-sizing:border-box;    }
    #tabbed-toc .divider-layer {  float:none;  display:block;  position:absolute;  top:0;  right:0;  bottom:0;}
    #tabbed-toc .panel {  position:relative;  z-index:5;  font:normal normal 10px/normal coda;}
    #tabbed-toc .panel li a {  display:block;  position:relative;  font-weight:400;  font-size:12px;  color:#892412;  line-height:20px;  height:20px;  padding:0 12px;  text-decoration:none;  outline:none;  overflow:hidden;}
    #tabbed-toc .panel li time {  display:block;  font-style:italic;  font-weight:normal;  font-size:10px;  color:red;  float:right;}
    #tabbed-toc .panel li .summary {  display:block;  padding:10px 12px 10px;  font-style:italic;  border-bottom:4px solid #666;  overflow:hidden;}
    #tabbed-toc .panel li .summary img.thumbnail {  float:left;  display:block;  margin:0 8px 0 0;  padding:4px 4px;  width:72px;  height:72px;  border:1px solid #dcdcdc;  background-color:#fafafa;}
    #tabbed-toc .panel li:nth-child(even) {  background-color:#FFE8E3;}
    #tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a {  background-color:#333;  color:white;  outline:none;}
    #tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time {  background-color:#369;}
    @media (max-width:700px) {  #tabbed-toc {    border:2px solid #333;  }  #tabbed-toc .toc-tabs,  #tabbed-toc .toc-content {    overflow:hidden;    width:auto;    float:none;    display:block;  }  #tabbed-toc .toc-tabs li {    display:inline;    float:left;  }  #tabbed-toc .toc-tabs li a,  #tabbed-toc .toc-tabs li a.active-tab {    background-color:#333;  }  #tabbed-toc .toc-tabs li a.active-tab {    background-color:#444;    color:#222;  }  #tabbed-toc .toc-content {    border:none;  }  #tabbed-toc .divider-layer,  #tabbed-toc .panel li time {    display:none;  }}

5. Klik laman kemudian laman baru
6. Copy dan paste script dibawah ini di laman tersebut dalam mode HTML
7. Ganti http://infoalya.com dengan URL anda
8. Klik publikasikan

     <br />
    <div id="tabbed-toc">
    <span class="loading">Memuat...</span></div>
    <script>
    var tabbedTOC = {
        blogUrl: "http://infoalya.com", // Blog URL
        containerId: "tabbed-toc", // Container ID
        activeTab: 1, // The default active tab index (default: the first tab)
        showDates: true, // `true` to show the post date
        showSummaries: true, // `true` to show the posts summaries
        numChars: 200, // Number of summary chars
        showThumbnails: true, // `true` to show the posts thumbnails (Not recommended)
        thumbSize: 40, // Thumbnail size
        noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
        monthNames: [ // Array of month names
            "Januari",
            "Februari",
            "Maret",
            "April",
            "Mei",
            "Juni",
            "Juli",
            "Agustus",
            "September",
            "Oktober",
            "November",
            "Desember"
        ],
        newTabLink: true, // Open link in new window?
        maxResults: 99999, // Maximum post results
        preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
        sortAlphabetically: true, // `false` to sort posts by published date
        showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
        newText: " - <em style='color:red;'>Terbaru!</em>" // HTML for the "New!" text
    };
        </script>
        <script src="http://cdn.rawgit.com/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js" type="text/javascript"></script>

Share this with short URL:
Blogger
Disqus
Tinggalkan Komentar

No comments

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda

 

ketik dan enter untuk mencari