Selamat datang di blog kumpulan sitemap keren blogger. Pada kesempatan kali ini saya akan berbagi tutorial membuat sitemap yang keren dan responsive. Sebelumnya juga saya membuat sitemap seperti situs IDNTHEME, dan kali ini pun masih sama dari blog arlina, yaitu sitemap tabel of content.
Sitemap ini dibuat dengan gaya table dan flat design yang keren, sehingga cocok untuk menaikan SEO untuk blogger kamu. Cara pasangnya sangat mudah. Cukup simak tutorial berikut dan praktikan.
Cara Membuat Sitemap Blogger Keren
Petama buka dahulu dashboard blogger.com lalu pilih menu dan simpan kode berikut tepan diatas tag </head>.
<style>
/* CSS Sitemap */
#bp_toc{background:transparent;width:100%;color:#999;margin-top:10px;margin:0 auto;padding:5px}
.toc-header-col1{padding:15px!important;line-height:15px;background-color:#f56954;width:250px;transition:all 0.3s ease-in-out}
.toc-header-col2{padding:15px!important;line-height:15px;background-color:#2c323c;width:75px;transition:all 0.3s ease-in-out}
.toc-header-col3{padding:15px!important;line-height:15px;background-color:#252a32;width:125px;transition:all 0.3s ease-in-out}
.toc-header-col1:hover,.toc-header-col2:hover,.toc-header-col3:hover{opacity:0.9}
.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:15px;text-transform:lowercase;text-decoration:none;color:#fff;font-family:'Viga';font-weight:400;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{padding:10px;font-size:92%;;transition:all 0.3s ease-in-out}
.toc-entry-col1:hover,.toc-entry-col2:hover,.toc-entry-col3:hover{background:#fdfdfd}
.toc-entry-col1:nth-child(odd),.toc-entry-col2:nth-child(odd),.toc-entry-col3:nth-child(odd){padding:10px;font-size:92%}
.toc-entry-col1:nth-child(even),.toc-entry-col2:nth-child(even),.toc-entry-col3:nth-child(even){padding:10px;font-size:92%}
.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{text-decoration:none;color:#666;transition:all 0.3s ease-in-out}
.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover{color:#f56954}
span.toc-note{padding:10px;margin:10px 0;display:inline-block;background:#fff;color:#666}
#bp_toc table{width:100%;margin:0 auto;border-collapse:collapse;border-spacing:0;border-color:transparent}
#bp_toc tr:nth-child(even){background:#fafafa}
#bp_toc tr:nth-child(odd){background:#f5f5f5}
</style>
Selanjutnya kembali ke dashboard. Lalu buak halaman baru dan masukan kode untuk sitemap berikut ini:
<div id="bp_toc">
Loading Sitemap. Please wait....</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/1c3be39e/sitemap-content.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">
#outer-wrapper {width:100%;max-width:1000px;margin:0 auto;padding:0;text-align:left;float:none;background-position:center!important;}
#post-wrapper {width:100%;max-width:1000px;margin:0 auto;text-align:left;float:none;background-position:center!important;}
.post-body,.post{background-position:center!important;}
#blog1,#artikel,.blog-posts{background-position:center!important;}
.banner,#footer-wrapper,#comments,#sidebar-wrapper,#header-wrapper,#menu-wrapper {display:none;margin-top:0;margin:0;}
.post-inner {padding:0 0 0 0;margin:20px auto;}
</style>
Jika sudah publish halaman sitemap dan lihat testnya, kamu juga bisa melihatnya seperti pada demo berikut ini
Sponsor
Populer
-
Selamat datang kembali dengan saya di blog kumpulan sitemap blog keren dan SEO. Sebelumnya saya juga sudah membuat tutorial membuat sitemap ...
-
Selamat datang kembali dengan saya di kumpulan sitemap blogger keren dan SEO. Kali ini saya juga akan membuat tutorial daftar isi dengan t...
-
Selamat datang kembali bersama saya admin blog kumpulan sitemap keren, kali ini saya akan berbagi desain sitemap ala blog rakinformasi on c...
-
Selamat datang kembali dengan saya di Kumpulan Sitemap Blogger Keren dan SEO. Pada sebelumnya saya sudah update artikel tutorial sitemap da...
-
Selamat datang di blog keren dan kece kumpulan sitemap blog yang akan selalu berbagi sitemap-sitemap terbaru dan unik. Kali ini gue akan be...
0 Comments