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.

·
Share On Whatsapp Or Line:
Previous
Next Post »

10 comments

Click here for comments
March 26, 2015 at 9:53 PM ×

wah mantap ini bisa belajar bikin site map :D

Reply
avatar
March 26, 2015 at 9:56 PM ×

wahh keren gan, perlu dicoba nih...

Reply
avatar
March 26, 2015 at 9:57 PM ×

pas skali sama yang saya butuhkan thanks gan

Reply
avatar
March 27, 2015 at 5:57 AM ×

Iya Malahan Sitemap berguna Bagi ke SEO An BLog Ente!!! :j :j

Reply
avatar
March 27, 2015 at 5:59 AM ×

Wah ...!!! Harus Dicoba Atuhh!!!! :c :c :c

Reply
avatar
April 23, 2015 at 9:38 AM ×

semoga berguna bagi blog baru ane gan

Reply
avatar
April 24, 2015 at 5:34 AM ×

Ya Mudah Mudahan Gan!!! :b :b

Reply
avatar

NB: Blogger Yang Bijak Selalu Meninggalkan Jejak!!!


Thank You!!! Please Jangan Lupa Follow My Blog !!!

[+] Berkomentarlah Dengan Baik Dan Sopan serta Jangan Meninggalkan Spam!!!
[+] Komentar membangun lebih disukai
[+] Kami wajib menghapus komentar yang melecehkan, kasar, dan bertendensi SARA.
[+] Untuk Memasukan Kode HTML Ke Kolom Komentar Anda Perlu Parse Dulu Kode tersebut Dengan Cara Klik Tombol conversion
[+] Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
[+] Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
[+] Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
[+] Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>
ConversionConversion EmoticonEmoticon

Thanks for your comment