Daftar Isi Menarik Dengan Pilihan Sortir di Blog

Daftar Isi Menarik Dengan Pilihan Sortir di Blog

Daftar Isi Menarik Dengan Pilihan Sortir di Blog

Daftar Isi dengan pilihan sortir menarik untuk dicoba


bagaiman, menarik bukan ?
jika ingin membuat simak langkah-langkah dibawah.

Masuk di dashboard klik laman kemudian buat laman baru, masukkan kode dibawah ini pada mode HTML. Jika selesai silahkan publikasikan.

<style scoped="scoped" type="text/css">
.post-body li{background:none}
table outer {padding-top:10px;}
#tablesitemap{color:white;overflow:hidden;padding:3px;margin-bottom:15px;
background-color:#F96A6A;
border-bottom:4px #FB2E2Esolid;
}
.isinyaxc{overflow:hidden}
.leftnya{float:left;width:50%;text-align:right;padding-right:5px;height:25px;line-height:25px}
.rightnya{float:left;width:48%lmargin:3px 0}
.isinyaxc select{width:100%;border:0;padding:1px;background-color:#FFFCFC;color:#040404}
.isinyaxc input{border:0;outline:0;margin:0;width:100%}
.isinyaxc form{padding:3px 0}
ul#feedContainer,ul#feedContainer li{margin:0;list-style:none;padding:0;overflow:hidden}
ul#feedContainer li{position:relative; padding:0 4px; width:47%; margin:0 0.6% 10px 0.5%; display:inline-block; 
float:left; background-color:#FFFFFF; border:1px solid #FF4F4F;height:100px}
.inner img{float:left;margin-right:6px; padding:2px; margin-top:4px; border:1px solid #D2CECE}
.toc-title{}
.inner strong{font-weight:normal;font-size:10px;display:none}
.news-text{font-size:10px;line-height:15px}
#feedNav .next,#feedNav .front,#feedNav .loadingx, #feedNav span{width:100%;display:block;text-align:center;height:30px;line-height:30px;background-color:#FF4F4F;


@media only screen and (min-width:768px) and (max-width:989px){ul#feedContainer li {height: 108px;}}
@media only screen and (max-width:767px){ul#feedContainer li {height:108px;width:auto;}}
@media only screen and (max-width:479px){ul#feedContainer li {width:100%;margin: 0 0 10px 0;height: 135px;}}
</style>
<div id="table-outer">
<div id="tablesitemap">
<div class="isinyaxc">
<div class="leftnya">
<label>Urutkan:</label></div>
<div class="rightnya">
<select id="orderFeedBy"><option selected="" value="published">Tulisan Terbaru</option><option value="updated">Tulisan Diperbaharui</option></select></div>
</div>
<div class="isinyaxc">
<div class="leftnya">
Kategori</div>
<div class="rightnya">
<span id="labelSorter"><select disabled=""><option selected="">Memuat...</option></select></span></div>
</div>
<div class="isinyaxc">
<div class="leftnya">
<label>Cari Artikel</label></div>
<div class="rightnya">
<form id="postSearcher">
<input type="text" /></form>
</div>
</div>
</div>
</div>

<header id="resultDesc"></header>

<ul id="feedContainer"></ul>
<div id="feedNav">
<span class="loadingx">Loading...</span></div>
<script src="http://hosting-kode-blogger.googlecode.com/svn/trunk/advanced-toc.js" type="text/javascript"></script>

<script type="text/javascript">
var tocConfig = {
 url: "http://www.infoalya.com",
 feedNum: 10,
 labelName: (window.location.hash && window.location.hash != '#0' && window.location.hash != '#search') ? encodeURIComponent(window.location.hash.substr(1)) : false,
 numChars: 250,
 thumbWidth: 36,
 navText: "Berikutnya ▼",
 frontText: "Atas ▲",
 noImage: "http://2.bp.blogspot.com/-rmvFL2JlLS0/Ud9BQGoFyqI/AAAAAAAAAkw/KDSKLEX40x0/s1600/manfaat-kopi-untuk-kulit+copy.png",
 loading: "<span>Memuat...</span>",
 searching: "<span>Mencari...</span>",
 noResult: "Tidak Ditemukan"
};
</script>

</div>

Terima Kasih untuk :
mas Malik : _teafuhaje.net/2014/07/cara-membuat-daftar-isi-di-blog-dengan.html

mas Pandu : _panduaji.net/2014/09/cara-membuat-daftar-isi-di-blog.html

Atau gunakan kode dibawah ini jika kode diatas tidak bekerja.



DEMO

Share this:

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

4 Comments Add Comment

artikel yg menarik....
namun sy lebih menyukai bentuk daftar isi punya infoalyaDOTcom, khususnya kombinasi warnanya...
kalau diperkenankan, bagaimana kodenya... terima kasih

Balas

Assalamu'alaikum War. Wab
Sebelumnya terima kasih telah berkunjung di infoalya.com, untuk panduannya bisa dilihat pada link dibawah ini, semoga manfaat.

www.infoalya.com/2014/06/membuat-daftar-isi-dengan-pilihan.html

Balas

Pak Sam. Masalahnya Pak salam ini harus setor file apa saya hehehehe.

Balas

pakta kepala sekolah pak (PKG kepala sekolah), dalam bentuk scan pean email ke saya ya di sh@infoalya.com

untuk panduannya bisa lihat disini pak :

http://www.infoanda.in/2015/04/penilain-kinerja-kepala-sekolah-oleh.html

Balas
Add Comment

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

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!

×
×
×