Daftar Isi dengan Navigasi per Label

Daftar Isi dengan Navigasi per Label

Daftar Isi dengan Navigasi per Label

infoalya.com

Assalamu'alaikum sahabat infoalya.com, hari ini admin akan berbagi sedikit ilmu yang admin dapatkan dari  _seocips.com tentang daftar isi dengan navigasi per label. Baiklah daripada panjang lebar basa baasinya mending langsung disimak saja langkah-langkahnya dibawah ini :

Untuk penerapan di blog sahabat blogger pastinya sudah sangat paham, seperti biasanya kopi tempel kode dibawah ini pada laman statis dalam mode HTML, tahapannya antara lain :

  1. Login dengan akun masing-masing
  2. Pilih lama
  3. Buat lama baru
  4. Beri judul sesuai dengan keinginan sahabat blogger
  5. Kopi tempel kode dibawah ini dalam mode HTML
  6. Klik publikasikan jika selesai

<style type="text/css">
#toc-outer { background:#fff  no-repeat 50% 50%; color:black; font:normal 11px/14px Arial,Sans-Serif; height:auto; margin:0 auto; overflow:hidden; padding:0; text-align:left; }
#loadingscript { background:transparent url(' http://3.bp.blogspot.com/-Z0w4M80kNoE/Tz4_RrLC4fI/AAAAAAAACJY/2mQ2yk5hCdU/s1600/loading.gif' ) no-repeat 50% 45%; font-weight:bold; font-size:20px; height:345px; padding:30px 0; text-align:center; text-indent:-99999px; }
.itemposts { background-color:#fff; border:1px solid #ccc; float:right; height:130px; margin:0 1% 5px; overflow:hidden; position:relative; padding:1%; width:45%; }
.itemposts h6 { border-bottom:1px solid #333; color:#333; font:bold 11px/16px Sans-Serif; height:15px; margin:0 0 5px; overflow:hidden; padding:2px 6px !important; text-transform:none; }
.itemposts h6 a:hover { color:#AD3000; text-decoration:none; }
.itemposts img { background-color:#fff; border:1px solid #ccc; float:left; height:75px; margin:0 7px 5px 0; padding:3px; width:75px; z-indent:99999px; }
.itemposts .iteminside {}
.itemposts .itemfoot { border-top:1px solid #333; padding:3px; clear:both; background-color:#fff; color:333; overflow:hidden; }
.itemposts .itemfoot a.itemrmore { color:#333; float:right; font-weight:bold; text-decoration:none; }
.itemposts .itemfoot a.itemrmore:hover { text-decoration:underline; }
#itempager { clear:both; padding:10px 0; }
#halaman,#totalposts { color:#000; display:block; font:bold 10px Verdana,Arial,Sans-Serif; margin-bottom:10px; text-align:center; padding:0; }
#halaman span,#halaman a { background-color:#666; color:#fff; display:inline; margin:0 1px; padding:3px 5px; text-indent:0; text-decoration:none; }
#halaman a:hover { background-color:#333; }
#halaman span.actual { background-color:black; }
#halaman span.hidden { display:none; }
</style>
<script type="text/javascript">
//<![CDATA[
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = true,
    labelSorter    = "Tutorial",
    loadingText    = "Loading...",
    totalPostLabel = "14",
    jumpPageLabel  = "10",
    commentsLabel  = "Komentar",
    rmoreText      = "Selengkapnya ►",
    prevText       = "Prev",
    nextText       = "Next",
    siteUrl        = "http://www.infoalya.com/",
    postsperpage   = 14,
    numchars       = 150,
    imgBlank       = "http://2.bp.blogspot.com/-h3nR4rhdgKY/VdsoaaVAKyI/AAAAAAAAHGs/6zGbptjAnfI/s1600/download.jpg";
//]]>
</script>
<script src="https://cdn.staticaly.com/gh/samhidayat/javas/master/dafisiperlabel.js"></script>


Ya itu langkah-langkahnya untuk membuat daftar isi dengan navigasi berdasarkan label, semoga membawa manfaat.
1. URL berwarna merah ganti dengan URL sahabat infoalya.com
2. Warna biru ganti dengan label yang diinginkan
3. untuk yang lainnya silahkan sesuaikan.

Share On:

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda

https://infoalya.com

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - https://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Info Alya? Keep us running by whitelisting Info Alya in your ad blocker.

This is how to whitelisting Info Alya in your ad blocker.

Thank you!

×
×
×