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...

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

Buka blogger > template > edit HTML

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
}
}

Lalu Save

Memasang Sitemap

Buka blogger > laman > laman baru > HTML

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>

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.

sumber code

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.

Wednesday, March 25, 2015