CARA MEMBUAT WIDGET DAFTAR ISI ( SITEMAP ) DI BLOG


ONEPOIN.COM - Disini saya akan membagikan sebuah tutorial yang sangat bagus ya menurut saya ya sesuai dengan judulnya saya akan membagikan tutorial cara membuat Widget DAFTAR ISI dengan tampilan yang Keren di blogger , jika sobat penasaran sobat bisa mengikuti langkah-langkahnya di bawah ini :

  • Masuk ke akun blogger sobat masing-masing
  • Pilih Menu Laman ===> Buat Lama Baru ===> COPY kode di bawah ini dan PASTE kan ke dalam "Laman Baru" yang anda buat tadi.
  • KET : PASTE kan 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 Publikasikan Laman
  • Setelah itu Pilih Menu Template ===> Edit Template ===>  Masukkan kode di bawah ini tepat di atas kode </style>

/* CSS Full Sitemap */
#bp_toc {background:#2980B9;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#fff;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;}

  • Setelah itu simpan Template dan lihat hasilnya tara mudah bukan :D
  • Untuk melihat hasilnya sobat bisa melihat disini DAFTAR ISI
  • Warna bisa anda sesuaikan dengan template blog anda masing-masing.

Subscribe to receive free email updates:

0 Response to "CARA MEMBUAT WIDGET DAFTAR ISI ( SITEMAP ) DI BLOG"

Post a Comment