Cara Membuat Sitemap Responsive Di Blogger


Cara membuat Sitemap responsive di Blogger - Hallo sobat blogger sekalian, selamat datang kembali di blog bang ariel ini, pada kesempatan kali ini Bang Ariel akan membagikan tutorial Cara membuat sitemap di Blogger, Bagi sobat yang ingin tahu cara nya, mari simak baik-baik artikel jni.

Cara Membuat Sitemap Di Blogger


1. Silahkan login pada akun blogger kalian masing-masing.

2. Silahkan buat halaman baru > Dan tambahkanlah kode di bawah di tab Html

<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&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
<b:if cond="data:blog.pageType == &quot;http://www.ariel.web.id/p/sitemap.html&quot;"> <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> </b:if>
Note : Ganti www.ariel.web.id dengan alamat blog kalian.

3. Lalu silahkan kalian simpan.

Selanjutnya agar tampilan dari sitemap terlihat lebih responsive, kita harus menambahkan CSS, mari kita lanjut ke step penambahan CSS

Silahkan Buka Blogger > Template > Edit Html, Tambahkan semua kode di bawah ini, Tepat diatas kode  ]]></b:skin> atau </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}

Silahkan kalian simpan Template.
Dan cobalah kalian lihat hasil nya :) .

Begitulah cara membuat Sitemap Responsive di Blogger, Jika kalian memiliki pertanyaan, silahkan kalian sisipkan pada kolom komentar yang telah saya sediakan.

Jika menurut kalian ada kesalahan kata yang telah saya ucapkan, mohon sekiranya untuk di maafkan, karena 100% sama sekali tidak saya sengaja.

Penutup

Akhir kata, demikian artikel cara membuat Sitemap di Blogger yang bisa sampaikan kepada kalian semua, semoga bisa menjadi manfaat tersendiri untuk kalian semua, Jangan lupa untuk selalu mengunjungi Blog Bang Ariel ini, cukup sekian dari saya.

Terimakasih.

Berlangganan Via Email

Suka dengan artikel di atas? nggak ada salahnya untuk berlangganan artikel terbaru dari blog ini langsung via email.