Jumat, 12 Desember 2014

Daftar Isi Menarik Dengan Pilihan Sortir di Blog

Baca Juga :

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.




Previous Post
Next Post

post written by:

  • 4 Comment
  • Comment

4 Comments

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

    BalasHapus
  2. 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

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

    BalasHapus
    Balasan
    1. 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

      Hapus

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