CARA MEMBUAT SITEMAP OTOMATIS KEREN PADA BLOGGER

CARA MEMBUAT SITEMAP OTOMATIS KEREN PADA BLOGGER

Selamat Datang kembali lagi setelah sekian lama gak ngepost cuy :D . Postingan kali ini akan membahas tips blog Bagaimana cara membuat Peta Situs otomatis pada sebuah blog dengan tampilan yang keren tentunya karena keberadaan peta sius ini sangat penting untuk seorang blogger . 

Sitemap atau Peta Situs mirip seperti Daftar Isi yang menampilkan semua postingan anda yang ada pada blog atau situs berdasarkan kategori label blog misal label software , label game , label tutorial dan label trik tips komputer akan ditampilkan dalam bentuk daftar isi lengkap sehingga memudahkan pengunjung dalam me navigasi artikel blog anda.

Sitemap adalah salah satu alat bantu untuk para webmaster yang mempermudah dalam pengenalan peta situs di dalam website. Dengan begitu, mesin google dengan mudah menjelajah dan meraih halaman-halaman yang ada di dalamnya. Sama halnya dengan webiste pada umumnya, blog juga memerlukan sitemap agar mesin pencari dengan mudah mendeteksi konten di dalamnya. Dalam sistem sitemap ini pengguna dapat melakukan submit peta web berbasis XML langsung ke Google yang akan membantu Google mengindeks halaman web dengan mudah.

Cara Membuat Sitemap Daftar Isi Otomatis pada Blog :

1. Login pada Dashboard anda , pilih menu laman dan buat laman baru dengan judul misalnya Daftar isi

Buat Laman Baru

2. Masukkan Script berikut dalam mode HTML , ganti yang berwarna merah dengan URL blog anda silahkan dipilih tampilan Daftar ISi yang anda inginkan :

Pilih Mode HTML

Sitemap 1 : Source Code 

<style type="text/css">

#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;

-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

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: #3498DB;

border:1px solid #2D96DF;

border-radius:4px;-moz-border-radius:4px;

-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;

-moz-box-shadow:3px 3px 1px #bbb;-webkit-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:#fff;margin-left: 35px;}

.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}

</style>

<div id="toc">

<script src="https://cdn.rawgit.com/penaindigo/Pena-Indigo-Code/a134f9de/sitemappenaindigo.js" type="text/javascript"></script>

<script src="http://www.gabriels.tech/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">

</script></div>Hasilnya :

Sitemap 1

Sitemap 2 : Source Code

<div dir="ltr" style="text-align: left;" trbidi="on">

<br /></div><div 1px="1px" solid="solid" style="height: 320px; overflow: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; width: auto;">

<link href="https://sites.google.com/site/republicofnote/script/SitemapV2.css" media="screen" rel="stylesheet" type="text/css" />

<script src="https://sites.google.com/site/republicofnote/script-1/daftarisipackv2.js"></script>

<script src="http://www.gabriels.tech/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

<script type="text/javascript">

var accToc=true;

</script>

<script src="https://sites.google.com/site/republicofnote/script-1/daftarisiv2.js" type="text/javascript"></script></div>

Hasilnya :

Sitemap 2

 Sitemap 3 : Source Code 

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
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;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-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,center 60,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 src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://www.gabriels.tech/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Hasilnya : 

Sitemap 3

3.  Simpan dan lihat hasilnya , jika anda kurang puas silahkan cari di google 

Demikian postingan mengenai Cara Mudah Membuat Daftar Isi Otomatis pada Blog semoga bermanfaat , jika ada yang ingin menambah silahkan .

Author : Gabriel

Share this

Related Posts