Daftar Isi Menarik Dengan Pilihan Sortir di Blog

- December 12, 2014

Daftar Isi dengan pilihan sortir menarik untuk dicoba, sebelum dipasang pada blog sobat baiknya lihat demo dulu ya..... :d


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 : http://www.teafuhaje.net/2014/07/cara-membuat-daftar-isi-di-blog-dengan.html

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

Atau gunakan kode dibawah ini.




Share this with short URL:
Blogger
Disqus
Tinggalkan Komentar

4 comments

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

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

 

ketik dan enter untuk mencari