Membuat Halaman Daftar Isi - Hallo sob kaliini saya di beri kesempatan untuk memposting sebuah postingan, yang berisi tutorial yaitu Membuat Halaman Daftar Isi.
Contoh Halaman Daftar Isi :
Membuat halaman daftar isi pada blog, akan mempermudah pengunjung melihat artikel artikel kita.
Dalam tutorial kali ini saya akan memberikan cara membuat daftar isi dengan tampilan yang lebih menarik san keren. dan juga dilengkapi dengan fitur sortir berdasarkan label dan posting yang telah diperbaharui.
Contoh Halaman Daftar Isi :
 |
| Contoh Halaman Daftar Isi |
Dalam tutorial kali ini saya akan memberikan cara membuat daftar isi dengan tampilan yang lebih menarik san keren. dan juga dilengkapi dengan fitur sortir berdasarkan label dan posting yang telah diperbaharui.
Langkah Pemasangannya pada blog
2. Tekan CTRL+f dan cari kode </style> atau ]]></b:skin> .
3. Salin CSS Berikut dan Letakkan diatas kode </style> atau ]]></b:skin> .
line-1-11line-1-22line-1-33line-1-44line-1-55line-1-66line-1-77line-1-88line-1-99line-1-1010line-1-1111line-1-1212line-1-1313line-1-1414line-1-1515line-1-1616line-1-1717line-1-1818line-1-1919line-1-2020line-1-2121line-1-2222line-1-2323line-1-2424line-1-2525line-1-2626line-1-2727line-1-2828line-1-2929line-1-3030line-1-3131line-1-3232line-1-3333line-1-3434line-1-3535line-1-3636line-1-3737line-1-3838line-1-3939line-1-4040line-1-4141line-1-4242line-1-4343line-1-4444line-1-4545line-1-4646line-1-4747line-1-4848line-1-4949line-1-5050line-1-5151line-1-5252line-1-5353line-1-5454line-1-5555line-1-5656line-1-5757line-1-5858line-1-5959line-1-6060line-1-6161line-1-6262line-1-6363line-1-6464line-1-6565line-1-6666line-1-6767line-1-6868line-1-6969line-1-7070line-1-7171line-1-7272line-1-7373line-1-7474line-1-7575line-1-7676line-1-7777line-1-7878line-1-7979line-1-8080line-1-8181line-1-8282line-1-8383line-1-8484line-1-8585line-1-8686line-1-8787line-1-8888line-1-8989line-1-9090line-1-9191line-1-9292line-1-9393line-1-9494line-1-9595line-1-11line-1-22line-1-33line-1-44line-1-55line-1-66line-1-77line-1-88line-1-99line-1-1010line-1-1111line-1-1212line-1-1313line-1-1414line-1-1515line-1-1616line-1-1717line-1-1818line-1-1919line-1-2020line-1-2121line-1-2222line-1-2323line-1-2424line-1-2525line-1-2626line-1-2727line-1-2828line-1-2929line-1-3030line-1-3131line-1-3232line-1-3333line-1-3434line-1-3535line-1-3636line-1-3737line-1-3838line-1-3939line-1-4040line-1-4141line-1-4242line-1-4343line-1-4444line-1-4545line-1-4646line-1-4747line-1-4848line-1-4949line-1-5050line-1-5151line-1-5252line-1-5353line-1-5454line-1-5555line-1-5656line-1-5757line-1-5858line-1-5959line-1-6060line-1-6161line-1-6262line-1-6363line-1-6464line-1-6565line-1-6666line-1-6767line-1-6868line-1-6969line-1-7070line-1-7171line-1-7272line-1-7373line-1-7474line-1-7575line-1-7676line-1-7777line-1-7878line-1-7979line-1-8080line-1-8181line-1-8282line-1-8383line-1-8484line-1-8585line-1-8686line-1-8787line-1-8888line-1-8989line-1-9090line-1-9191line-1-9292line-1-9393line-1-9494line-1-9595#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;
}
4. Klik Simpan Template
5. Kembali ke dasboard Blogger
6. Sekarang pilih menu Laman
7. Dan buat Laman Baru
8. Silahkan Beri Judul laman
9. Salin kode berikut dan letakkan Pada markup HTML Post bukan Compose
line-2-11line-2-22line-2-11line-2-22<div id="table-outer"><table><tr><td><label>Urutkan posting berdasarkan:</label></td><td><select id="orderFeedBy"><option value="published" selected>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></table></div><header id="resultDesc"></header><ul id="feedContainer"></ul><div id="feedNav">Loading...</div>
<script src="https://googledrive.com/host/0B-GXzRKoPbNnR3N0Z0dMQ0lDYWM" type="text/javascript"></script>
10. Simpan Template dan lihat pratinjau hasilnya,
Semoga Bermanfaat Salam Blogger. . .
Terima Kasih telah membaca artikel tentang Cara Membuat Halaman Daftar Isi Keren . Silahkan baca artikel lainnya di daftar isi.
Judul :
Cara Membuat Halaman Daftar Isi Keren
.
Ditulis oleh :
Unknown
.
Pada hari :
Tuesday 12 August 2014
.
Rating Blog :
5
dari 5
Syarat berkomentar :
1. Tidak boleh mencantumkan link aktif ( auto delete )
2. Tidak boleh mengandung SARA, pornografi,dsb.
3. Budayakan berkomentar dengan sopan dan menghargai pendapat orang lain.
ConversionConversion EmoticonEmoticon