Cara Menambahkan Widget Sitemap Arlina Design di Blog

Cara Menambahkan Widget Sitemap Arlina Design di Blog - Sebenarnya tutorial ini sudah banyak yang mempublikasikannya, tapi kali ini saya akan menulis ulang tentang tutorial tersebut untuk mempermudah pemasangan widget tersebut.

Cara Menambahkan Widget Sitemap Arlina Design di Blog


Pertama, buka Blogger > Laman > Laman Baru > Masukan kode di bawah ini pada tab HTML
<div id="bp_toc"> </div> <script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/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> <style scoped="" type="text/css"> #comments {display:none;} </style>
Kemudian klik publikasikan laman.

Selanjutnya, klik Tema > Edit HTML > Terapkan kode di bawah ini sebelum tag </style> berakhir
/* CSS Full Sitemap */ #bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;} span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;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;} .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:'Open Sans';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:#e76e66;} #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;} td.toc-entry-col2 {background:#fafafa;}

Terakhir, simpan template.

Anda bisa mengubah warna sesuai dengan warna dasar blog anda, jika blog sobat memiliki ratusan artikel pikah arlina design menyarankan untuk menggunakan kode di bawah ini.

<div id="bp_toc" style="max-height:1300px;overflow:scroll;overflow-x:auto;"> </div> <script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/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> <style scoped="" type="text/css"> #comments {display:none;} </style>
Kemudian anda edit untuk max-height di atas, sesuaikan dengan berapa banyak artikel anda.

Demikian mengenai Cara Menambahkan Widget Sitemap Arlina Design di Blog.

2 Responses to "Cara Menambahkan Widget Sitemap Arlina Design di Blog"

  1. Izin berkunjung dan nyimak artikelnya ya gan?

    ReplyDelete
    Replies
    1. Silahkan gan.. banyak artikel bermanfaat disini..

      Delete