Tutorial More on this category »
MS. Office More on this category »
Tokoh dan Penemu More on this category »

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 :

  



  • Login dengan akun masing-masing
  • Pilih lama
  • Buat lama baru
  • Beri judul sesuai dengan keinginan sahabat blogger
  • Kopi tempel kode dibawah ini dalam mode HTML
  • 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.
Blogger
Disqus

Tidak ada komentar

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

Copyright © 2013. INFOALYA.COM - All Rights Reserved | Template Created by Kompi Ajaib Proudly powered by Blogger