Cara Menciptakan Halaman Sitemap Keren Dan Responsive - Bagi Template

Sabtu, 24 Juni 2017

Cara Menciptakan Halaman Sitemap Keren Dan Responsive


Kali duarebu.com ingin mengembangkan tips lagi nih yaitu Cara Membuat Halaman Sitemap Keren dan Responsive sebelumnya aku juga sudah menciptakan halaman sitemap tetapi kurang menarik, maka dari itu aku ingin buat ulang dengan versi beda tentunya.

Sitemap ini berkhasiat untuk mempermudah pengunjung untuk mencari artikel yang ingin dibaca dan secara otomatis sudah dalam label.

Untuk kesudahannya sanggup dilihat dibawah ini.

Versi Mobile

Versi Desktop


Gimana tertarik ?

Jika merasa tertarik silakan baca hingga final yah.

Cara Membuat Halaman Sitemap

Caranya cukuplah gampang kok simak baik-baik apa yang aku jelaskan dibawah.

● Silakan anda login terlebih dahulu pada blog anda.

● Lalu buat halaman statis baru.


● Lalu ubah Compose menjadi HTML


● Copy arahan html dibawah ini kedalam halaman statis tadi.

  <div id="bp_toc" style="max-height: 1800px; overflow-x: auto; overflow: scroll;">  </div>  <script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.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>  <style scoped="" type="text/css">  #comments,#Label1,#FollowByEmail1 {display:none;}  #HTML3 {visibility:hidden;}  /* CSS Full Sitemap */  #bp_toc{background:#31a2db;color:#666;margin:0 auto;padding:4px;}  span.toc-note{padding:20px;margin:0 auto;display:block;text-align:center;color:rgba(255,255,255,.5);font-size:1.6rem;text-transform:uppercase;font-weight:700;line-height:normal}  .toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}  .toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}  .toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}  #bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:0;border-bottom:1px solid rgba(0,0,0,0.1);}  #bp_toc tr:nth-child(1) a {color:#666;}  #bp_toc td.toc-header-col1{background-color:#fff;}  #bp_toc td.toc-header-col2{background-color:#fff;}  #bp_toc td.toc-header-col3{background-color:#fff;}  #bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:0}  #bp_toc td.toc-entry-col1{background-color:#fff;font-weight:700}  #bp_toc tr:nth-child(odd) td.toc-entry-col1{background-color:#f8f8f8}  #bp_toc td.toc-entry-col2{background-color:#fff;}  #bp_toc tr:nth-child(odd) td.toc-entry-col2{background-color:#f8f8f8}  #bp_toc td.toc-entry-col3{background-color:#fff;}  #bp_toc tr:nth-child(odd) td.toc-entry-col3{background-color:#f8f8f8}  #bp_toc td a{color:#666;}  .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:13px;  text-decoration:none;color:#aaa;font-family:&#39;Roboto&#39;;font-weight:700;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 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}  .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}  .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#cdb280;}  #bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}  .toc-entry-col1 {counter-increment:rowNumber;}  #bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}  </style> 


● Jangan lupa beri judul SITEMAP kemudian anda Save dan lihat hasilnya.

Kode diatas aku dapatkan dari templatenya Arlina Design, jadi jikalau anda memakai template dari Arliana Design tidak perlu repot-repot membuatnya lagi.

Thanks sekian dan terimakasih.
Jangan lupa klik 1 iklan = pertanda bahwa anda itu cerdas.
Sumber https://www.duarebu.com/
Comments


EmoticonEmoticon

:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)
Notification
This is just an example, you can fill it later with your own note.
Done