Cara Menambahkan Widget Sitemap di Blog ~ Bions And Friend

<div class="post-body entry-content" id="post-body-167828503328043798">

<div style="display:block;text-align:center;margin:20px auto;">

<ins data-adsbygoogle-status="done" class="adsbygoogle" style="display: block; height: 60px;" data-ad-client="ca-pub-8157970016855352" data-ad-slot="2732282823" data-ad-format="auto"><ins id="aswift_1_expand" style="display:inline-table;border:none;height:60px;margin:0;padding:0;position:relative;visibility:visible;width:624px;background-color:transparent"><ins id="aswift_1_anchor" style="display:block;border:none;height:60px;margin:0;padding:0;position:relative;visibility:visible;width:624px;background-color:transparent"><iframe marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&&s.handlers,h=H&&H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_1" name="aswift_1" style="left:0;position:absolute;top:0;" frameborder="0" height="60" width="624"></iframe></ins></ins></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-HR656qqZrUI/VPOwRs8eQxI/AAAAAAAACE4/ncRIIH8nQWU/s1600/Cara-Menambahkan-Sitemap-di-Blog.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Menambahkan Widget Sitemap di Blog" src="http://3.bp.blogspot.com/-HR656qqZrUI/VPOwRs8eQxI/AAAAAAAACE4/ncRIIH8nQWU/s1600/Cara-Menambahkan-Sitemap-di-Blog.png" style="border: none;" title="Cara Menambahkan Widget Sitemap di Blog"></a></div><br>
<b><a href="http://arlinadesign.blogspot.com/2015/03/cara-menambahkan-widget-sitemap-di-blog.html">Cara Menambahkan Widget Sitemap di Blog</a></b> - Sebetulnya tutorial cara menambahkan widget sitemap atau daftar isi postingan blog yang akan Saya bagikan ini sudah pernah Saya buat. Namun mungkin blog tersebut jarang dikunjungi jadi akan Saya bagikan kembali disini.<br>
<a name="more"></a><br>
Adapun keuntungan menambahkan widget sitemap ini adalah agar blog tampil lebih profesional dari sebelumnya. Selain itu, pengunjung juga bisa melihat dan mencari semua artikel blog kita dengan mudah. Tentunya itu akan menambah nilai plus untuk blog jika pengunjung membuka artikel tertentu pada widget sitemap ini.<br>
<br>
Ok langsung saja, cara penerapannya pun sangat mudah. Silakan ikuti beberapa langkah di bawah ini :<br>
<br>
<b>Pertama, buka Blogger > Laman > Buat Laman baru > Terapkan kode di bawah ini pada tab HTML</b><br>
<br>
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"><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></code></pre><br>
<b>Kemudian publikasikan laman.</b><br>
<br>
<b>Selanjutnya, klik Template > Buka Edit Template > </b><b>Terapkan kode</b><b> di bawah ini tepat sebelum  <kbd></style></kbd></b><br>
<br>
<pre data-codetype="CSSku" title="CSS"><code class="language-css">/* 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;}</code></pre><br>
Tentukan penggunaan font dan warna sesuai blog sobat.<br>
<b><br>
</b> <b>Terakhir, simpan template. </b><br>
<br>
<br>
Jika di blog sobat sudah terdapat ratusan artikel, ada baiknya membatasi tinggi halaman dengan menambahkan style pada kode pertama. Misal seperti ini :<br>
<br>
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"><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></code></pre><br>
Silakan tentukan nilai <i>max-height</i> di atas sesuai keinginan.<br>
<br>
<div id="wrap"><a href="http://codepen.io/arlinadesign/full/VYJpEx/" class="arlina-btn arlina-button arlina-buttona icon-result" rel="”nofollow”" target="_blank"><span>Result</span></a><br>
</div><br>
Demikian mengenai <b><a href="http://arlinadesign.blogspot.com/2015/03/cara-menambahkan-widget-sitemap-di-blog.html">Cara Menambahkan Widget Sitemap di Blog</a></b>, semoga bermanfaat.<br>
<br>

<div style="display:block;text-align:center;margin:20px auto;">

<ins data-adsbygoogle-status="done" class="adsbygoogle" style="display: block; height: 60px;" data-ad-client="ca-pub-8157970016855352" data-ad-slot="2732282823" data-ad-format="auto"><ins id="aswift_2_expand" style="display:inline-table;border:none;height:60px;margin:0;padding:0;position:relative;visibility:visible;width:624px;background-color:transparent"><ins id="aswift_2_anchor" style="display:block;border:none;height:60px;margin:0;padding:0;position:relative;visibility:visible;width:624px;background-color:transparent"><iframe marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&&s.handlers,h=H&&H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_2" name="aswift_2" style="left:0;position:absolute;top:0;" frameborder="0" height="60" width="624"></iframe></ins></ins></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="clear"></div>
</div>

Bions And Friend

Cara Menambahkan Widget Sitemap di Blog

Pageviews last month

Popular Posts