Sitemap Seo Responsive

Cara membuat pattern Sitemap SEO Responsive

Halo teman semua kali ini saya akan memperlihatkan tips dan trik cara membuat Sitemap pada sebuah spider web log yang pasti akan kalian terapkan atau gunakan pada sebuah spider web log atau website semoga terliat lebih rapih dalam Grouping sebuah Label pada artikel kalian.

Sitemap yaitu sebuah halaman yang bertujuan untuk mengklompokan sebuah artikel semoga praktis untuk di saluran sesuai dengan judul atau lable yang kalian buat.

Analogika ini sama menyerupai daftar isi pada sebuah majalah, buku atau tabloid yang memiliki daftar listing pembahasan yang ingin kalian jumpai atau yang ingin kalian baca terlebih dahulu, secara terstruktur dan praktis pengaksesan nya.

Sitemap bergotong-royong banyak Versinya namun kali ini saya akan membagikan script Sitemap SEO Responsive dan cara pengaplikasiannya atau cara penerapannya pada spider web log kalian. 

Tentunya tidak susah dan cenderung mudah, selain itu sitemap pada spider web log termasuk salah satu syarat terciptanya atau terbentunya sebuah website sejenis Blog atau Wordpress, umumnya sitemap yang biasa dibuat bertujuan untuk mengenalkan navigasi semoga kalian mampu mencari atau memilih artikel apa yang anda kegendaki.

Gambar diatas yaitu pola bentuk diagram Peta Situs atau biasa disebut Sitemap atau juga mampu disebut Daftar Isi, dalam gambar diatas mampu dipahami bahwa diagram ini bermaksud untuk mengenalkan daftar keseluruhan isi artikel pada sebuah website dinamis atau pun wordress dan Blog.

Salah satu Sitemap yang paling sering orang gunakan yaitu sama menyerupai spider web log ini gunakan, kenapa saya gunakan Design atau tampilan Sitemap yang menyerupai di spider web log ini, alasannya yaitu yaitu terlihat dinamis dan terlihat profesional saja, mungkin masih banyak design-design Sitemap yang mampu kalian jumpai di dunia maya. 

Langsung aja saya akan memperlihatkan Script Sitemap SEO Responsive yang mampu saya bagikan ke kalian nih sobat, perhatikan isi tulisannya jangan sampai salah ketik atau salah contoh.

Sitemap Responsive Versi 1 : 

<style type="text/css">

#toc{

width:99%;

margin:5px auto;

border:1px corporation #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 corporation #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,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 src="https://makingdifferent.github.io/blogger-widgets/sitemappage.js" type="text/javascript"></script>

<script src="https://lastyoungboy.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">

</script></div>

Kemudian Sitemap Responsive SEO Versi two :

<style type="text/css">

.tabbed-toc {margin:0 auto;background-color:#2f77bd;box-shadow: 0 0 7px rgba(5, 5, 5, 0.34);overflow:hidden;

position:relative;color:#333;border: 1px corporation #9C9C9C;}

.tabbed-toc .loading {display:block;padding:10px 12px;font:normal bold 12px/normal Helmet,FreeSans,Sans-Serif;

color:white;}

.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 12px/28px Helmet,Freesans,Sans-Serif;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:uppercase;text-decoration:none;

padding:7px 15px;cursor:pointer;box-shadow: 0px 1px 1px rgb(255, 255, 255);}

.tabbed-toc .toc-tabs li a:hover {background-color:#4086E0;color:white;box-shadow: 0 0 7px rgba(0,0,0,.7);}

.tabbed-toc .toc-tabs li a.active-tab {background-color:#FFF;color:black;box-shadow: 0 0 7px rgba(0,0,0,.7);

z-index:5;margin:0 -1px 0 0;/* cursor:text; */}

.tabbed-toc .toc-content,.tabbed-toc .toc-line {width:80%;float:right;background-color:white;border-left:5px corporation #1E84BC;box-sizing:border-box;}

.tabbed-toc .toc-line {float:none;display:block;position:absolute;top:0;right:0;bottom:0;box-shadow:0 0 7px rgba(0,0,0,.7);}

.tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px/normal Helmet,FreeSans,Sans-Serif;}

.tabbed-toc .panel li a {display:block;position:relative;font-weight:bold;font-size:12px;color:#000;line-height:20px;padding: 10px 12px;

text-decoration:none;outline:none;overflow:hidden;}

.tabbed-toc .panel li fourth dimension {display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right;}

.tabbed-toc .panel li .summary {display:block;padding:10px 12px 10px;font-style:italic;

border-bottom:4px corporation #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 corporation #dcdcdc;background-color:#fafafa;}

.tabbed-toc .panel li:nth-child(even) {background-color:#66A9FF}

.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:white;outline:none;}

.tabbed-toc .panel li.bold a:hover,

.tabbed-toc .panel li.bold a:hover fourth dimension {background-color:#222}

.post ol li::before {content: none;}

.post ol li {margin:0;}

@media (max-width:700px) {

.tabbed-toc {border:2px corporation #333}

.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:#2f77bd;box-shadow:2px 0 7px rgba(0,0,0,.4);}

.tabbed-toc .toc-tabs li a.active-tab {background-color:white;color:#333;}

.tabbed-toc .toc-content {border:none}

.tabbed-toc .toc-line,

.tabbed-toc .panel li fourth dimension {display:none}

.tabbed-toc .panel li a{height: auto;}

</style>

<div class="tabbed-toc" id="tabbed-toc">

<span class="loading">Memuat…</span></div>

<script>

var tabbedTOC = {

blogUrl: "https://lastyoungboy.blogspot.com", // Blog URL

containerId: "tabbed-toc", // Container ID

activeTab: 1, // The default active tab index (default: the commencement tab)

showDates: false, // `true` to present the postal service date

showSummaries: false, // `true` to present the posts summaries

numChars: 200, // Number of summary chars

showThumbnails: false, // `true` to present the posts thumbnails (Not recommended)

thumbSize: 40, // Thumbnail size

noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // Influenza A virus subtype H5N1 "no thumbnail" URL

monthNames: [ // Array of calendar month names

"Januari",

"Februari",

"Maret",

"April",

"Mei",

"Juni",

"Juli",

"Agustus",

"September",

"Oktober",

"November",

"Desember"

],

newTabLink: true, // Open link inward novel window?

maxResults: 99999, // Maximum postal service results

preload: 0, // Load the feed afterwards 0 seconds (option => fourth dimension inward milliseconds || "onload")

sortAlphabetically: true, // `false` to form posts past times published date

showNew: 7, // `false` to cover the "New!" grade inward nigh recent posts, or define how many recent posts are to live marked

newText: ' &ndash; <em style="color:red;">New!</em>' // HTML for the "New!" text

};

</script>

<script src="https://cdn.jsdelivr.net/gh/tovic/dte-project@2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>

Sitemap Responsive Versi iii : 

<script style="text/javascript" src="https://cdn.rawgit.com/mowdot/mysitemap/master/sitemapku.js"></script>

<script src="https://lastyoungboy.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Nah untuk pemasangan script diatas sangat praktis dan mampu kalian terapkan sekarang atau untuk coba-coba sendiri sekarang di spider web log kalian semua.

1. Login Blog menyerupai biasa

2. Masuk pada pagian Page dalam trend bahasa inggris atau Halaman dalam trend bahasa indonesia.

3. Buat Halaman baru 

4. Beri judul halaman sebagai Sitemap, Daftar Isi, Peta Situs atau yang lainnya terserah kehendak kalian suka. 

5. Dan masukan Script yang kalian mau atau kalian suka. 

  

6. Jangan lupa kalian isikan Deskripsi Penelusuran di penggalan kanan atas sebagai search engine di google untuk mengenalkan Sitemap kalian, lalu mampu kalian langsung Save atau Publish.

Catatan : 

Dalam membuat Sitemap ini, tentunya kalian harus melakukan pembuatan Sitemap pada Google search Console terlebih dahulu, semoga praktis di Crawl pada mesin Index google, disamping itu, jikalau kalian sudah atau mampu menampilkan halaman Sitemap menyerupai di atas, jikalau belum melakukan pembuatan Sitemap di Google Master atau Google Searc Consol maka google tidak mampu mengindex artikel kalian di google search engine. 

Baca Juga :

- Cara Cepat Terindex Google 

Itulah beberapa Script Sitemap SEO Responsive yang mampu saya berikan ke kalian para teman blogger, untuk pattern tampilannya kalian mampu coba satu persatu, mana yang menurut kalian cocok dan anggun itu yang mampu kalian gunakan selanjutnya, saya sengaja tidak memperlihatkan tampilan sitemapnya alasannya yaitu yaitu mampu kalian coba dan terapkan sendiri untuk bahan pembelajaran pada Sitemap atau Daftar Isi yang kalian coba.

Bagikan Artikel ini