Sitemap Blog Ala Arlina dan CB Blogger

Sitemap pastinya sudah tidak terdengar asing lagi di kuping kalian yang hobinya atau passionnya blogging. Mendengar namanya saja sudah barang tentu langsung tanggap apa itu sitemap, apa fungsinya untuk blog dan apa manfaatnya bagi pengguna.

Nah itu sudah ada penampakannya, bagus kan? Elegan ya sudah pasti, siapa dulu yang buat, ahlinya..

Itu Mimin yang buat??? Wah jago banget kodingnya, makannya apaan sih min?

Ya sudah pasti bukanlah. Kalau yang rancang kodenya sih makanannya nasi, makanya dia pinter dan jago koding. Kalau saya yang makan piringnya, makanya ga bisa - bisa:)

Kalau tertarik memakai sitemap model ini, silakan salin dan tempelkan kode - kode berikut ke dalam laman blog kalian:

.table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 0 1px #eee;}

.table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #eee;transition:initial;}

.table-of-content .toc-header:hover{background-color:#fdfdfd;}

.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}

.table-of-content .toc-header.active{color:#fc4f3f}

.table-of-content .toc-header.active:before{border-color:#fc4f3f transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}

.table-of-content .loading{display:block;padding:15px;text-decoration:blink}

.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}

.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#fcfcfc!important;transition:initial;border-bottom:1px solid #e9e9e9;border-top:1px solid #fff;}

.table-of-content li:first-child(border-top:0}

.table-of-content li:last-child(border-bottom:0}

.post ol li a,.post ol li a:link{color:#444!important;text-decoration:none;font-size:86%;transition:initial}

.post ol li a:visited{color:#999;transition:initial}

.post ol li a:link:hover,.post ol li a:visited:hover{color:#fc4f3f;text-decoration:underline;transition:initial}

.post ol li:before{display:none}

ol {text-shadow:initial;}

.post a:link {color:#444!important;}

</style>

<br />

<span class="loading">Memuat konten...</span></div>

var toc_config = {

url: 'https://progooglesite.blogspot.co.id/',

containerId: 'table-of-content',

showNew: 5,

newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#fc7569;padding:1px 6px 2px 6px;line-height:normal;float:right;border-radius:3px;text-transform:uppercase;">baru</strong>',

sortAlphabetically: {

thePanel: true,

theList: true

maxResults: 9999,

activePanel: 0,

slideSpeed: {

down: 400,

up: 400

slideEasing: {

down: null,

up: null

slideCallback: {

down: function() {},

up: function() {}

clickCallback: function() {},

jsonCallback: '_toc',

delayLoading: 0

};

</script>

</div>

Catatan: Ganti alamat blog (warna orange) menjadi alamat blog sobat.

Selain sitemap tersebut, berikut ini juga merupakan sitemap elegan yang pernah digunakan oleh sebut saja CB yang berbaik hati memberikan kode peta situs dengan tampilan sebagai berikut:

Kodenya memang lumayan panjang tapi sangat layak dicoba di blog kalian dan rasakan sensasi elegannya. Berikut kodenya:

<div 1px="1px" solid="solid" style="height:auto; overflow: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; width: auto;">
<style>
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top, #888, #575757);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');

}

.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}

.list-ganjil{
background-color:#F6F6F6;
}

.headactive{
color: #fef4e9;
border: 2px solid white !important;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
</style>

<script type="text/javascript">
var showNew = true,
accToc = true,
openNewTab = true,
maxNew = 10,
baru = "Baru!",
sDownSpeed = 600,
sUpSpeed = 600;
</script>

<script type="text/javascript">
var postTitle = new Array(),
postUrl = new Array(),
postMp3 = new Array(),
postDate = new Array(),
postLabels = new Array(),
postBaru = new Array(),
sortBy = 'titleasc',
tocLoaded = false,
postFilter = '',
numberfeed = 0;

function loadtoc(_0xd19fxc) {
function _0xd19fxd() {
if ('entry' in _0xd19fxc['feed']) {
var _0xd19fxe = _0xd19fxc['feed']['entry']['length'];
numberfeed = _0xd19fxe;
ii = 0;
for (var _0xd19fxf = 0; _0xd19fxf < _0xd19fxe; _0xd19fxf++) {
var _0xd19fx10 = _0xd19fxc['feed']['entry'][_0xd19fxf];
var _0xd19fx11 = _0xd19fx10['title']['$t'];
var _0xd19fx12 = _0xd19fx10['published']['$t']['substring'](0, 10);
var _0xd19fx13;
for (var _0xd19fx14 = 0; _0xd19fx14 < _0xd19fx10['link']['length']; _0xd19fx14++) {
if (_0xd19fx10['link'][_0xd19fx14]['rel'] == 'alternate') {
_0xd19fx13 = _0xd19fx10['link'][_0xd19fx14]['href'];
break;
};
};
var _0xd19fx15 = '';
for (var _0xd19fx14 = 0; _0xd19fx14 < _0xd19fx10['link']['length']; _0xd19fx14++) {
if (_0xd19fx10['link'][_0xd19fx14]['rel'] == 'enclosure') {
_0xd19fx15 = _0xd19fx10['link'][_0xd19fx14]['href'];
break;
};
};
var _0xd19fx16 = '';
if ('category' in _0xd19fx10) {
for (var _0xd19fx14 = 0; _0xd19fx14 < _0xd19fx10['category']['length']; _0xd19fx14++) {
_0xd19fx16 = _0xd19fx10['category'][_0xd19fx14]['term'];
var _0xd19fx17 = _0xd19fx16['lastIndexOf'](';');
if (_0xd19fx17 != -1) {
_0xd19fx16 = _0xd19fx16['substring'](0, _0xd19fx17);
};
postLabels[ii] = _0xd19fx16;
postTitle[ii] = _0xd19fx11;
postDate[ii] = _0xd19fx12;
postUrl[ii] = _0xd19fx13;
postMp3[ii] = _0xd19fx15;
if (_0xd19fxf < maxNew) {
postBaru[ii] = true;
} else {
postBaru[ii] = false;
};
ii = ii + 1;
};
};
};
};
};
_0xd19fxd();
sortBy = 'titleasc';
sortPosts(sortBy);
sortlabel();
tocLoaded = true;
displayToc2();
document['write']('');
};

function sortlabel() {
sortBy = 'orderlabel';
sortPosts(sortBy);
var _0xd19fx19 = 0;
var _0xd19fxf = 0;
while (_0xd19fxf < postTitle['length']) {
temp1 = postLabels[_0xd19fxf];
firsti = _0xd19fx19;
do {
_0xd19fx19 = _0xd19fx19 + 1;
} while (postLabels[_0xd19fx19] == temp1);;
_0xd19fxf = _0xd19fx19;
sortPosts2(firsti, _0xd19fx19);
if (_0xd19fxf > postTitle['length']) {
break;
};
};
};

function sortPosts(sortBy) {
function _0xd19fx1b(_0xd19fx1c, _0xd19fx1d) {
var _0xd19fx1e = postTitle[_0xd19fx1c];
postTitle[_0xd19fx1c] = postTitle[_0xd19fx1d];
postTitle[_0xd19fx1d] = _0xd19fx1e;
var _0xd19fx1e = postDate[_0xd19fx1c];
postDate[_0xd19fx1c] = postDate[_0xd19fx1d];
postDate[_0xd19fx1d] = _0xd19fx1e;
var _0xd19fx1e = postUrl[_0xd19fx1c];
postUrl[_0xd19fx1c] = postUrl[_0xd19fx1d];
postUrl[_0xd19fx1d] = _0xd19fx1e;
var _0xd19fx1e = postLabels[_0xd19fx1c];
postLabels[_0xd19fx1c] = postLabels[_0xd19fx1d];
postLabels[_0xd19fx1d] = _0xd19fx1e;
var _0xd19fx1e = postBaru[_0xd19fx1c];
postBaru[_0xd19fx1c] = postBaru[_0xd19fx1d];
postBaru[_0xd19fx1d] = _0xd19fx1e;
};
for (var _0xd19fxf = 0; _0xd19fxf < postTitle['length'] - 1; _0xd19fxf++) {
for (var _0xd19fx19 = _0xd19fxf + 1; _0xd19fx19 < postTitle['length']; _0xd19fx19++) {
if (sortBy == 'titleasc') {
if (postTitle[_0xd19fxf] > postTitle[_0xd19fx19]) {
_0xd19fx1b(_0xd19fxf, _0xd19fx19);
};
};
if (sortBy == 'titledesc') {
if (postTitle[_0xd19fxf] < postTitle[_0xd19fx19]) {
_0xd19fx1b(_0xd19fxf, _0xd19fx19);
};
};
if (sortBy == 'dateoldest') {
if (postDate[_0xd19fxf] > postDate[_0xd19fx19]) {
_0xd19fx1b(_0xd19fxf, _0xd19fx19);
};
};
if (sortBy == 'datenewest') {
if (postDate[_0xd19fxf] < postDate[_0xd19fx19]) {
_0xd19fx1b(_0xd19fxf, _0xd19fx19);
};
};
if (sortBy == 'orderlabel') {
if (postLabels[_0xd19fxf] > postLabels[_0xd19fx19]) {
_0xd19fx1b(_0xd19fxf, _0xd19fx19);
};
};
};
};
};

function sortPosts2(_0xd19fx20, _0xd19fx21) {
function _0xd19fx22(_0xd19fx1c, _0xd19fx1d) {
var _0xd19fx1e = postTitle[_0xd19fx1c];
postTitle[_0xd19fx1c] = postTitle[_0xd19fx1d];
postTitle[_0xd19fx1d] = _0xd19fx1e;
var _0xd19fx1e = postDate[_0xd19fx1c];
postDate[_0xd19fx1c] = postDate[_0xd19fx1d];
postDate[_0xd19fx1d] = _0xd19fx1e;
var _0xd19fx1e = postUrl[_0xd19fx1c];
postUrl[_0xd19fx1c] = postUrl[_0xd19fx1d];
postUrl[_0xd19fx1d] = _0xd19fx1e;
var _0xd19fx1e = postLabels[_0xd19fx1c];
postLabels[_0xd19fx1c] = postLabels[_0xd19fx1d];
postLabels[_0xd19fx1d] = _0xd19fx1e;
var _0xd19fx1e = postBaru[_0xd19fx1c];
postBaru[_0xd19fx1c] = postBaru[_0xd19fx1d];
postBaru[_0xd19fx1d] = _0xd19fx1e;
};
for (var _0xd19fxf = _0xd19fx20; _0xd19fxf < _0xd19fx21 - 1; _0xd19fxf++) {
for (var _0xd19fx19 = _0xd19fxf + 1; _0xd19fx19 < _0xd19fx21; _0xd19fx19++) {
if (postTitle[_0xd19fxf] > postTitle[_0xd19fx19]) {
_0xd19fx22(_0xd19fxf, _0xd19fx19);
};
};
};
};

function displayToc2() {
var _0xd19fx19 = 0;
var _0xd19fxf = 0;
document['write']('<div id="daftar-isi">');
while (_0xd19fxf < postTitle['length']) {
temp1 = postLabels[_0xd19fxf];
document['write']('<div class="sublabel">');
document['write']('<div class="judul-label">' + temp1 + '</div>');
document['write']('<div class="judul-list"><ol>');
firsti = _0xd19fx19;
var _0xd19fx24 = 'odd';
do {
if (_0xd19fx24 == 'odd') {
document['write']('<li class="data-list list-ganjil">');
_0xd19fx24 = 'even';
} else {
document['write']('<li class="data-list list-genap">');
_0xd19fx24 = 'odd';
};
if (openNewTab) {
document['write']('<a href="' + postUrl[_0xd19fx19] + '" target="_blank">' + postTitle[_0xd19fx19] + '</a>');
} else {
document['write']('<a href="' + postUrl[_0xd19fx19] + '">' + postTitle[_0xd19fx19] + '</a>');
};
if (showNew) {
if (postBaru[_0xd19fx19] == true) {
document['write'](' - <strong>' + baru + '</strong>');
};
};
document['write']('</li>');
_0xd19fx19 = _0xd19fx19 + 1;
} while (postLabels[_0xd19fx19] == temp1);;
_0xd19fxf = _0xd19fx19;
document['write']('</ol></div></div>');
sortPosts2(firsti, _0xd19fx19);
if (_0xd19fxf > postTitle['length']) {
break;
};
};
document['write']('</div>');
};
$(function () {
if (accToc) {
$('#daftar-isi .judul-list')['slideUp']();
$('#daftar-isi .judul-label:first')['addClass']('headactive')['next']()['slideDown'](sDownSpeed);
$('#daftar-isi .judul-label')['css']('cursor', 'pointer');
$('#daftar-isi .judul-label')['click'](function () {
if ($(this)['next']()['is'](':hidden')) {
$('#daftar-isi .judul-label')['removeClass']('headactive')['next']()['slideUp'](sUpSpeed);
$(this)['toggleClass']('headactive')['next']()['slideDown'](sDownSpeed);
};
});
};
});
</script>
<script src="/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
</div>

Sitemap - sitemap ini dua - duanya sama - sama bagus dan elegan, tapi ya kembali lagi ke selera sobat masing - masing apakah sesuai ataukah tidak. Selamat mencoba:)

Tips dan Trik

Wednesday 8 November 2017

Sitemap Blog Ala Arlina dan CB Blogger

Wednesday 8 November 2017

Sitemap Blog Ala Arlina dan CB Blogger

Related Posts