Daftar Sitemap Keren 2016 - Sesuai Judul kali ini Gue akan memberikan 5 Design Sitemap Terbaru & Keren Untuk Blogger.
Keuntungan menggunakan sitemap ini adalah blog Sobat akan tampil lebih profesional dari sebelumnya. Selain itu, pengunjung juga bisa melihat dan mencari semua artikel blog kita dengan mudah tanpa perlu membuka per-halaman. Tentunya itu akan memberikan nilai + untuk blog jika pengunjung membuka artikel tertentu pada widget sitemap ini.
Oke tanpa panjang lebar lagi, langsung ke TKP.
Keuntungan menggunakan sitemap ini adalah blog Sobat akan tampil lebih profesional dari sebelumnya. Selain itu, pengunjung juga bisa melihat dan mencari semua artikel blog kita dengan mudah tanpa perlu membuka per-halaman. Tentunya itu akan memberikan nilai + untuk blog jika pengunjung membuka artikel tertentu pada widget sitemap ini.
Oke tanpa panjang lebar lagi, langsung ke TKP.
Ala ArlinaDesign
CODE
<div id="bp_toc">
</div>
<script src="https://arlina-design.googlecode.com/svn/blogtoc.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style> Kode CSS taruh di atas </style>
/* CSS Full Sitemap */
#bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:'Open Sans';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;} Ala DTE
Kode
<link rel="stylesheet" href="http://dte-project.googlecode.com/svn/trunk/tabbed-toc-skin.css"/>
<div id="tabbed-toc"><span class="loading">Memuat...</span></div>
<script>
var tabbedTOC = {
blogUrl: "http://laros.web.id", // 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: "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;'>New!</em>" // HTML for the "New!" text
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/tabbed-toc.js"></script> Ala Ficripebriyana
Kode
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><link href="https://googledrive.com/host/0B685uqap5sAIQWVXbHMyZ2ozX0U/sitemap.css" rel="stylesheet"></link>
<div class="table-of-content" id="table-of-content">
<span class="loading">Loading...</span></div>
<script>
var toc_config ={url:'http://laros.web.id',containerId:'table-of-content',showNew:10,newText:' - <strong style="font-weight:bold;font-style:italic;color:red;">News !!!</strong>',sortAlphabetically:{thePanel:true,theList:true}
,maxResults:9999,activePanel:1,slideSpeed:{down:400,up:400}
,slideEasing:{down:null,up:null}
,slideCallback:{down:function(){}
,up:function(){}}
,clickCallback:function(){}
,jsonCallback:'_toc',delayLoading:0}
;</script>
<script src="https://ficri-pebriyana-js.googlecode.com/svn/sitemap.js"></script> Ganti kode http://laros.web.id dengan alamat blog Sobat.
Jika kode <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"/> sudah ada di blog sobat, Hapus Saja.
Jika kode <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"/> sudah ada di blog sobat, Hapus Saja.
Ala Abu Farhan
Kode
<style type="text/css">
#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;padding:1px 0 2px 11px;background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));border:1px solid #2D96DF;border-radius:4px;box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#FF5F00;font-weight:bold;font-style:italic}
.postname{font-weight:normal;background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>
<div id="toc"><script type="text/javascript" src="http://dvslabs.googlecode.com/files/customizable-TOC.js"></script>
<script src="http://yourblogname.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div> Ala ArlinaDesign ke 2
Kode
<div id="table-outer">
<table><tbody>
<tr><td><label>Sort posts by : </label></td><td><select id="orderFeedBy"><option selected="" value="published">New post</option><option value="updated">Post updated</option></select></td></tr>
<tr><td><label>Filter posts by category : </label></td><td><span id="labelSorter"><select disabled=""><option selected="">Loading...</option></select></span></td></tr>
<tr><td><label>Search by keyword : </label></td><td><form id="postSearcher">
<input type="text" /></form>
</td></tr>
</tbody></table>
</div>
<header id="resultDesc"></header>
<ul id="feedContainer"></ul>
<div id="feedNav">
Loading...</div>
<script src="https://arlina-design.googlecode.com/svn/tocs.js" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style> Kode CSS taruh di atas Kode </style>
/* CSS Sitemap */
#table-outer table {width:100%;margin:0;padding:0;}
#table-outer input, #table-outer select {padding:4px;font:inherit;border:2px solid #eceeee;width:170px;box-sizing:border-box;}
#table-outer select {cursor:pointer;outline:none}
#table-outer input:focus{outline:none}
#resultDesc {margin-bottom:10px;}
#feedContainer {overflow:hidden;margin-top:20px;}
#feedContainer strong {font-size:10px;}
#feedContainer, #feedContainer li {padding:0;margin:0;list-style:none;}
#feedContainer li {float:left;width:50%;margin-bottom:10px;position:relative;z-index:0;}
#feedContainer .inner {padding:8px;margin: 0 5px;position:relative;background-color:#fff;height:133px;}
#feedContainer img {float:left;margin: 0 8px 0 0;max-width:100%;padding:2px;}
#feedContainer .toc-title {max-height:33px;overflow:hidden;}
#feedContainer .toc-title:hover {text-decoration:underline;}
#feedContainer .news-text {font-size:11px;}
#feedNav a, #feedNav span {display:block;text-align:center;color:#fff;
text-decoration:none;background-color:#222;padding:5px;width:95%;margin: 0 auto;transition:all 0.3s linear;}
#feedNav a, #feedNav span:hover {background-color:#eea956;transition:all 0.3s linear;}
#feedContainer .date {display:none;position:absolute;bottom:0;right:0;background-color:transparent;color:#fff;font-size:9px;padding:3px 2px;width:35px;}
#feedContainer .date .dd {font-size:9px;line-height:5px;font-weight:bold;}
#feedContainer .date span {display:inline-block;line-height:5px;text-align:center;
margin-left:5px;} Itulah Daftar Sitemap Keren 2016. Untuk kali ini Laros hanya bisa men-share 5 saja. Nanti jika ada waktu lagi Gue akan menambahkan lagi daftar sitemap-nya. Semoga bermanfaat
