Peta Situs Style Berbeda

Peta Situs Style Berbeda

Peta Situs Style Berbeda



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 https://infoalya.com dengan URL anda
8. Klik publikasikan

     <br />
    <div id="tabbed-toc">
    <span class="loading">Memuat...</span></div>
    <script>
    var tabbedTOC = {
        blogUrl: "https://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="https://www.staticaly.com/gh/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js" type="text/javascript"></script>


Share On:

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

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

https://infoalya.com

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - https://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Info Alya? Keep us running by whitelisting Info Alya in your ad blocker.

This is how to whitelisting Info Alya in your ad blocker.

Thank you!

×
×
×