Wednesday, March 25, 2015

Membuat SiteMap Di Blog Design Flat Style

sitemap desain flat terbaru 2015 Muiz-Techno
Selamat Malam menjelang pagi, ayeuna saya mau membagikan artikel mengenai Tutorial Membuat Daftar isi (Sitemap) Di Halaman Blog dengan Style Ala Design Flat. Ohh sebelumnya ada yang tau gak design flat itu??,.... kalau mau tau baca dibawah...

sitemap desain flat terbaru 2015 Muiz-Techno
Design Flat adalah tren style WEB/Blog masa kini, dengan paduan warna yang membuat bLOG/WEB Indah dipandang mata, Apalagi kalau pakai background blur searasi banget dahh semuannya!!,.
Okk langsung saja ikuti cara memasangnya..

Memasang CSS

  1. Buka blogger > template > edit HTML
  2. Cari kode ]]></b:skin>, taruh kode dibawah ini tepat diatas kode ]]></b:skin>
    /*Sitemap by blogfwa.blogspot.com
    ----------------------------------------------- */
    
    #tabbed-toc {
    width:99%;
    margin:0 auto;
    background-color:#111;
    -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
    -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
    box-shadow:0 1px 3px rgba(0,0,0,.4);
    overflow:hidden;
    position:relative;
    color:#333
    }
    
    #tabbed-toc .loading {
    display:block;
    padding:5px 10px;
    font:normal bold 10px Arial,Sans-Serif;
    color:#FFF
    }
    
    #tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li {
    margin:0;
    padding:0;
    list-style:none
    }
    
    #tabbed-toc .toc-tabs {
    width:20%;
    float:left
    }
    
    #tabbed-toc .toc-tabs li a {
    display:block;
    font:normal bold 10px/28px Arial,Sans-Serif;
    height:28px;
    overflow:hidden;
    text-overflow:ellipsis;
    color:#ccc;
    text-transform:uppercase;
    text-decoration:none;
    padding:0 12px;
    cursor:pointer
    }
    
    #tabbed-toc .toc-tabs li a:hover {
    background-color:#444;
    color:#FFF
    }
    
    #tabbed-toc .toc-tabs li a.active-tab {
    background-color:#e74c3c;
    color:#FFF;
    -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
    -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
    box-shadow:-2px 2px 2px rgba(0,0,0,.5);
    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:#FFF;
    border-left:5px solid #e74c3c;
    -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;
    -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
    -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
    box-shadow:0 0 7px rgba(0,0,0,.7)
    }
    
    #tabbed-toc .panel {
    position:relative;
    z-index:5;
    font:normal normal 10px Arial,Sans-Serif
    }
    
    #tabbed-toc .panel li a {
    display:block;
    position:relative;
    font-weight:700;
    font-size:11px;
    color:#333;
    line-height:30px;
    height:30px;
    padding:0 12px;
    text-decoration:none;
    outline:none;
    overflow:hidden
    }
    
    #tabbed-toc .panel li time {
    display:block;
    font-style:italic;
    font-weight:400;
    font-size:10px;
    color:#666;
    float:right
    }
    
    #tabbed-toc .panel li .summary {
    display:block;
    padding:10px 12px;
    font-style:italic;
    border-bottom:4px solid #275827;
    overflow:hidden
    }
    
    #tabbed-toc .panel li .summary img.thumbnail {
    float:left;
    display:block;
    margin:0 8px 0 0;
    padding:4px;
    width:72px;
    height:72px;
    border:1px solid #dcdcdc;
    background-color:#fafafa
    }
    
    #tabbed-toc .panel li:nth-child(even) {
    background-color:#f1f1f1;
    font-size:10px;
    color:#fff
    }
    
    #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:#FFF;
    outline:none
    }
    
    #tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time {
    background-color:#222
    }
    
    @media (max-width:700px) {
    #tabbed-toc {
    background-color:#fff;
    border:0 solid #888
    }
    
    #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:#111;
    color:#ccc;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4)
    }
    
    #tabbed-toc .toc-tabs li a.active-tab {
    background-color:#DF1010;
    color:#fff
    }
    
    #tabbed-toc .toc-content {
    border:none
    }
    
    #tabbed-toc .divider-layer,#tabbed-toc .panel li time {
    display:none
    }
    }

    
    
  3. Lalu Save

Memasang Sitemap

  1. Buka blogger > laman > laman baru > HTML
  2. Masukan kode dibawah ini, kedalamnya
    <div id="tabbed-toc">
    <span class="loading">Loading...</span></div>
    <br />
    <script type="text/javascript">
    var tabbedTOC = {
        blogUrl: "http://muiztech.blogspot.com/", // Blog URL
        containerId: "tabbed-toc", // Container ID
        activeTab: 1, // The default active tab index (default: the first tab)
        showDates: false, // `true` to show the post date
        showSummaries: false, // `true` to show the posts summaries
        numChars: 200, // Number of summary chars
        showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
        thumbSize: 40, // Thumbnail size
        noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
        monthNames: [ // Array of month names
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December"
        ],
        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;'>New!</em>" // HTML for the "New!" text
    };
    </script>
    <script src="https://googledrive.com/host/0B2H3MJwpj5ZVNkJwaVF3SEV4cjg/tabbed-toc.js" type="text/javascript"></script>
    
  3. Lalu Save
Nb: ubah URL Warna merah dengan URL blog sobat.

incoming search.
trik memasang daftar isi design flat di blog,trik menambahkan daftar isi di blog design flat,daftar isi design flat,daftar isi design flat,sitemap design flat,trik memasang daftar isi di blog design flat,membuat blog design flat,apa itu design flat,pengertian design flat,design flat adalah,desain flat adalah,sitemap desain flat,membuat daftar isi desain flat,Muiz-Techno Desain Flat,design flat trend desainer masa sekarang, Kumpulan kode warna desain flat,kumpulan sitemap desain flat,trik membuat sitemap/daftar design flat.

loading...

Anda Sedang Membaca Artikel Tentang Membuat SiteMap Di Blog Design Flat Style Dan Artikel Ini URL Permalinknya Adalah https://muiztech.blogspot.com/2015/03/membuat-sitemap-di-blog-design-flat.html, Saya Harap Artikel Ini Bisa Bermanfaat Bagi Anda Yang Membacanya.


NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner

loading...