Membuat Daftar Isi dengan Pilihan Sortir Part 2

Membuat Daftar Isi dengan Pilihan Sortir Part 2

Membuat Daftar Isi dengan Pilihan Sortir Part 2

infoalya.com

Membuat daftar isi yang menarik dapat memberikan suasana menyenangkan bagi pengunjung blog, selain mempermudah pengunjung saat mencari artikel yang dibutuhkan juga dapat menambah keindahan blog kita.
Dibawah ini langkah-langkah untuk membuat daftaar isi dengan pilihan sortir di blogspot
  • Saya anggap anda sudah berada di dashboard masing-masing, klik tempate kemudian temukan tag </style>  jika sudah ketemu copy lalu pastekan kode dibawah ini tepat diatas tag </style>

#table-outer table {

width: 100%;
margin:0;
padding:0;
}
#table-outer input, #table-outer select {
padding: 4px;
font: inherit;
border: 2px solid rgba(177, 0, 0, 0.26);
width: 170px;
box-sizing: border-box;
}
#table-outer select {
cursor:pointer;
}
#resultDesc {
margin-bottom:10px;
 }
#feedContainer {
overflow: hidden;
margin-top: 20px;
}
#feedContainer strong {
font-size: 10px;
}
#feedContainer, #feedContainer li {
padding: 0;
margin: 0;
list-style: none;
}
#feedContainer li {
float: left;
width: 50%;
margin-bottom: 10px;
position: relative;
z-index: 0;
}
#feedContainer .inner {
padding: 8px;
margin: 0 5px;
position: relative;
background-color: #FFFFFF;
border: 1px solid rgba(177, 0, 0, 0.26);
border-radius: 2px;
height: 133px;
}
#feedContainer img {
float: left;
margin: 0 8px 0 0;
max-width: 100%;
border: 1px solid #C7C7C7;
padding: 3px;
}
#feedContainer .toc-title {
max-height: 33px;
overflow: hidden;
}
#feedContainer .toc-title:hover {
text-decoration:underline;
}
#feedContainer .news-text {
font-size:11px;
}
#feedNav a, #feedNav span {
display: block;
text-align: center;
color: #FFFFFF;
text-decoration: none;
background-color: #AF0606;
padding: 5px;
width: 95%;
margin: 0 auto;
border-radius: 2px;
}
#feedContainer .date {
position: absolute;
bottom: 0;
right: 0;
background-color: #AF0606;
color: #FFFFFF;
font-size: 9px;
padding: 3px 2px;
width: 75px;
}
#feedContainer .date .dd {
font-size: 15px;
line-height: 18px;
font-weight: bold;
}
#feedContainer .date span {
display: inline-block;
line-height: 12px;
text-align: center;
margin-left: 5px;
}
  • Selanjutnya save template.
  • Setelah template tersimpan, lanjutkan dengan klik laman, tambah laman baru kemudian copy dan paste kode dibawah ini pada mode HTML

<div id="table-outer">

<table><tbody>
<tr><td><label>Urutkan posting berdasarkan:</label></td><td><select id="orderFeedBy"><option selected="" value="published">Posting terbaru</option><option value="updated">Posting diperbaharui</option></select></td></tr>
<tr><td><label>Filter posting berdasarkan kategori:</label></td><td><span id="labelSorter"><select disabled=""><option selected="">Loading...</option></select></span></td></tr>
<tr><td><label>Cari dengan kata kunci:</label></td><td><form id="postSearcher">
<input type="text" /></form>
</td></tr>
</tbody></table>
</div>

<header id="resultDesc"></header>
<ul id="feedContainer"></ul>
<div id="feedNav">
Loading...</div>
<script src="https://googledrive.com/host/0BwOEXSweKsSzWDJvZ0FOWFNMNmc" type="text/javascript"></script>

  • Klik publikasikan jika selesai.

  • Silahkan rubah warna, font dan lain-lain sesuai dengan keinginan anda, jika ada kesulitan silahkan tanyakan pada kolom komentar, terima kasih.

    Share On:

    You Might Also Like:

    Disqus
    Blogger
    Pilih Sistem Komentar Yang Disukai

    0 Comment

    Add Comment

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

    https://infoalya.com

    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!

    ×
    ×
    ×