Daftar Isi dengan Navigasi per Label

- November 05, 2015

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.rawgit.com/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 this with short URL:
Blogger
Disqus
Tinggalkan Komentar

No comments

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

 

ketik dan enter untuk mencari