Masih di Variasi Blogger share Cara Membuat Daftar Isi Menurut Label Terbaru Part 3 cekidot , Silahkan sobat Copy Paste kode script Daftar Isi Buku advancedToc di bawah ini simpan di blog sobat
<style type='text/css'>
#resultDesc {
margin:0 30px;
padding:0 0;
border-bottom:4px solid #31353e;
display:none;
}
#resultDesc span {
display:block;
margin:0 0;
padding:5px 10px 7px;
color:#D64D52;
}
#feedContainer {
display:block;
clear:both;
margin:0 30px;
padding:0 0;
overflow:hidden;
position:relative;
border:1px solid #3d464f;
border-top:none;
text-shadow:0 1px 0 rgba(0, 0, 0, .4);
}
#feedContainer:after {
content:"";
display:block;
width:1px;
height:100%;
position:absolute;
top:0;
bottom:0;
left:50%;
background-color:#3d464f;
}
#feedContainer li {
list-style:none;
margin:0 0;
padding:0 0;
border-top:1px solid #3d464f;
color:#999;
width:50%;
float:left;
display:inline;
}
#feedContainer li .inner {
margin:15px 16px;
height:120px;
overflow:hidden;
word-wrap:break-word;
text-overflow:ellipsis;
}
#feedContainer li a {
text-decoration:none;
color:#5687B8;
}
#feedContainer li a:hover {
text-decoration:none;
color:#eee;
}
#feedContainer li a.toc-title {
font-weight:bold;
font-size:12px;
margin:0 0;
}
#feedContainer li .news-text {
margin:10px 0 0
}
#feedContainer li a img {
margin:0 10px 0 0;
padding:4px 4px;
background-color:#222;
border:1px solid #111;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 1px 0 #444;
-moz-box-shadow:0 1px 0 #444;
box-shadow:0 1px 0 #444;
float:left;
}
#feedNav {
margin:10px 30px 0;
text-align:center;
font:normal bold 12px/30px Verdana, Arial, Sans-Serif;
}
#feedNav a, #feedNav span {
background-color:#111;
padding:0 0;
color:#999;
text-decoration:none;
display:block;
}
#feedNav a:hover, #feedNav a:active {
background-color:black;
color:white;
border:none !important;
}
#feedNav span {
cursor:wait
}
#table-outer {
padding:7px 10px;
margin:30px 30px 0;
}
#table-outer input {
display:inline-block;
vertical-align:top;
margin:0 2px 0 0;
padding:0 0;
}
#table-outer table {
border:none
}
#table-outer td {
padding:2px 2px;
border:none;
}
#table-outer label {
font-weight:bold;
color:#999;
text-shadow:0 1px 0 rgba(0, 0, 0, .4);
display:block;
text-align:right;
margin:0 10px 0 0;
}
#table-outer select[disabled] {
opacity:.4
}
#postSearcher {
display:block;
margin:0 0;
padding:0 0;
}
#postSearcher input, #table-outer select {
width:180px;
background-color:#111;
border:none;
display:block;
margin:0 0;
padding:5px 5px;
font:normal normal 10px Tahoma, Verdana, Arial, Sans-Serif;
text-transform:uppercase;
color:#777;
outline:none;
-webkit-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
-moz-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
}
#postSearcher input {
width:170px;
padding:5px 5px;
}
#postSearcher input:focus, #table-outer select:focus {
background-color:#090909
}
@media (max-width:800px) {
#feedContainer li {
float:none;
display:block;
width:auto;
height:auto;
}
#feedContainer:after {
display:none
}
}
</style>
<script type='text/javascript'>
//<![CDATA[
var tocConfig = {
url: "http://variasiblogger.blogspot.com/",
feedNum: 5,
labelName: false,
numChars: 100,
thumbWidth: 40,
navText: "Berikutnya ▼",
frontText: "Atas ⇑",
resetToc: "Reset",
noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_1RUIq2vmyQ0TU_WUeJlf32m_kVzMJRbsIV1DE-xzeHTs56zauEevjrocO9vMYavDkIl6hwVcAV6391WEGhtE9c_5oCabmX-Og-lYMa4ZRuT4FREkcrYLGzNKn5SV-It0uj6kO0igyd4/s1600/no+images+Variasi+Blogger.jpeg",
loading: "<span>Memuat...</span>",
searching: "<span>Mencari...</span>",
noResult: "Tak Ditemukan"
};
//]]>
</script>
<div id="table-outer">
<table border="0">
<tbody>
<tr>
<td>
<label for="orderFeedBy">Urutkan artikel 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 for="labelSorterSelect">Filter artikel berdasarkan kategori:</label>
</td>
<td><span id="labelSorter"><select id="labelSorterSelect" disabled><option selected>MEMUAT...</option></select></span>
</td>
</tr>
<tr>
<td>
<label for="feed-q-box">Cari dengan kata kunci:</label>
</td>
<td>
<form id="postSearcher">
<input type="text" id="feed-q-box">
</form>
</td>
</tr>
</tbody>
</table>
</div>
<header id="resultDesc"></header>
<ul id="feedContainer"></ul>
<div id="feedNav"></div>
<script type="text/javascript" src="https://sites.google.com/site/variasibloggerblogspotcom/widget_variasi_blogger_blogspot_com/Variasi-Blogger-advancedToc.js"></script>
Untuk penyimpanan kode script di atas dengan cara silahkan log in terlebih dahulu di blog sobat , klik Tata Letak >> klik Tambahkan Gadget >> klik HTML/JavaScript Kemudian Copy Paste kode Script diatas atau bisa juga menyimpan kode script di postingan atau laman blogs sobat kemudian simpan dan lihat hasilnya Semoga bermanfaat
Catatan :
- Silahkkan ganti teks berwarna merah diatas http://variasiblogger.blogspot.com/ dengan alamat blogs sobat
- feedNum 5 Ganti nilainya menjadi, misal 10 jika sobat ingin menampilkan jumlah artikel lebih dari 5
- labelName false / Nama label Jika bernilai false, akan menampilkan artikel berdasarkan posting terbaru. Dan jika sobat ingin menampilkan berdasarkan kategori ganti nilainya menjadi nama label sobat, misal Tentang Widget
- numChars 100 Digunakan untuk menentukan jumlah potongan snippet posting
- thumbWidth 40 Digunakan untuk menentukan ukuran besar kecil thumbnail / gambar posting
- navText Berikutnya Digunakan untuk memanggil posting berikutnya
- frontText Atas Digunakan untuk memberitahukan jika postingan sudah mencapai batas
- resetToc Reset ???
- noImage https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_1RUIq2vmyQ0TU_WUeJlf32m_kVzMJRbsIV1DE-xzeHTs56zauEevjrocO9vMYavDkIl6hwVcAV6391WEGhtE9c_5oCabmX-Og-lYMa4ZRuT4FREkcrYLGzNKn5SV-It0uj6kO0igyd4/s1600/no+images+Variasi+Blogger.jpeg Digunakan untuk menggantikan posting yang tidak memiliki gambar
- loading Memuat Tulisan yang akan muncul pada saat posting selanjutnya terpanggil
- searching Mencari Sedang mencari postingan
- noResult Tak Ditemukan Posting tidak ditemukan
Untuk melihat contoh Daftar Isi Menurut Label Terbaru Part 3 silahkan klik DEMO
SUMBER
Masih di Variasi Blogger share Cara Membuat Daftar Isi Menurut Label Terbaru Part 3 cekidot , Silahkan sobat Copy Paste kode script Daftar Isi Buku advancedToc di bawah ini simpan di blog sobat
<style type='text/css'>
#resultDesc {
margin:0 30px;
padding:0 0;
border-bottom:4px solid #31353e;
display:none;
}
#resultDesc span {
display:block;
margin:0 0;
padding:5px 10px 7px;
color:#D64D52;
}
#feedContainer {
display:block;
clear:both;
margin:0 30px;
padding:0 0;
overflow:hidden;
position:relative;
border:1px solid #3d464f;
border-top:none;
text-shadow:0 1px 0 rgba(0, 0, 0, .4);
}
#feedContainer:after {
content:"";
display:block;
width:1px;
height:100%;
position:absolute;
top:0;
bottom:0;
left:50%;
background-color:#3d464f;
}
#feedContainer li {
list-style:none;
margin:0 0;
padding:0 0;
border-top:1px solid #3d464f;
color:#999;
width:50%;
float:left;
display:inline;
}
#feedContainer li .inner {
margin:15px 16px;
height:120px;
overflow:hidden;
word-wrap:break-word;
text-overflow:ellipsis;
}
#feedContainer li a {
text-decoration:none;
color:#5687B8;
}
#feedContainer li a:hover {
text-decoration:none;
color:#eee;
}
#feedContainer li a.toc-title {
font-weight:bold;
font-size:12px;
margin:0 0;
}
#feedContainer li .news-text {
margin:10px 0 0
}
#feedContainer li a img {
margin:0 10px 0 0;
padding:4px 4px;
background-color:#222;
border:1px solid #111;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 1px 0 #444;
-moz-box-shadow:0 1px 0 #444;
box-shadow:0 1px 0 #444;
float:left;
}
#feedNav {
margin:10px 30px 0;
text-align:center;
font:normal bold 12px/30px Verdana, Arial, Sans-Serif;
}
#feedNav a, #feedNav span {
background-color:#111;
padding:0 0;
color:#999;
text-decoration:none;
display:block;
}
#feedNav a:hover, #feedNav a:active {
background-color:black;
color:white;
border:none !important;
}
#feedNav span {
cursor:wait
}
#table-outer {
padding:7px 10px;
margin:30px 30px 0;
}
#table-outer input {
display:inline-block;
vertical-align:top;
margin:0 2px 0 0;
padding:0 0;
}
#table-outer table {
border:none
}
#table-outer td {
padding:2px 2px;
border:none;
}
#table-outer label {
font-weight:bold;
color:#999;
text-shadow:0 1px 0 rgba(0, 0, 0, .4);
display:block;
text-align:right;
margin:0 10px 0 0;
}
#table-outer select[disabled] {
opacity:.4
}
#postSearcher {
display:block;
margin:0 0;
padding:0 0;
}
#postSearcher input, #table-outer select {
width:180px;
background-color:#111;
border:none;
display:block;
margin:0 0;
padding:5px 5px;
font:normal normal 10px Tahoma, Verdana, Arial, Sans-Serif;
text-transform:uppercase;
color:#777;
outline:none;
-webkit-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
-moz-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
}
#postSearcher input {
width:170px;
padding:5px 5px;
}
#postSearcher input:focus, #table-outer select:focus {
background-color:#090909
}
@media (max-width:800px) {
#feedContainer li {
float:none;
display:block;
width:auto;
height:auto;
}
#feedContainer:after {
display:none
}
}
</style>
<script type='text/javascript'>
//<![CDATA[
var tocConfig = {
url: "http://variasiblogger.blogspot.com/",
feedNum: 5,
labelName: false,
numChars: 100,
thumbWidth: 40,
navText: "Berikutnya ▼",
frontText: "Atas ⇑",
resetToc: "Reset",
noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_1RUIq2vmyQ0TU_WUeJlf32m_kVzMJRbsIV1DE-xzeHTs56zauEevjrocO9vMYavDkIl6hwVcAV6391WEGhtE9c_5oCabmX-Og-lYMa4ZRuT4FREkcrYLGzNKn5SV-It0uj6kO0igyd4/s1600/no+images+Variasi+Blogger.jpeg",
loading: "<span>Memuat...</span>",
searching: "<span>Mencari...</span>",
noResult: "Tak Ditemukan"
};
//]]>
</script>
<div id="table-outer">
<table border="0">
<tbody>
<tr>
<td>
<label for="orderFeedBy">Urutkan artikel 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 for="labelSorterSelect">Filter artikel berdasarkan kategori:</label>
</td>
<td><span id="labelSorter"><select id="labelSorterSelect" disabled><option selected>MEMUAT...</option></select></span>
</td>
</tr>
<tr>
<td>
<label for="feed-q-box">Cari dengan kata kunci:</label>
</td>
<td>
<form id="postSearcher">
<input type="text" id="feed-q-box">
</form>
</td>
</tr>
</tbody>
</table>
</div>
<header id="resultDesc"></header>
<ul id="feedContainer"></ul>
<div id="feedNav"></div>
<script type="text/javascript" src="https://sites.google.com/site/variasibloggerblogspotcom/widget_variasi_blogger_blogspot_com/Variasi-Blogger-advancedToc.js"></script>
Untuk penyimpanan kode script di atas dengan cara silahkan log in terlebih dahulu di blog sobat , klik Tata Letak >> klik Tambahkan Gadget >> klik HTML/JavaScript Kemudian Copy Paste kode Script diatas atau bisa juga menyimpan kode script di postingan atau laman blogs sobat kemudian simpan dan lihat hasilnya Semoga bermanfaat
Catatan :
- Silahkkan ganti teks berwarna merah diatas http://variasiblogger.blogspot.com/ dengan alamat blogs sobat
- feedNum 5 Ganti nilainya menjadi, misal 10 jika sobat ingin menampilkan jumlah artikel lebih dari 5
- labelName false / Nama label Jika bernilai false, akan menampilkan artikel berdasarkan posting terbaru. Dan jika sobat ingin menampilkan berdasarkan kategori ganti nilainya menjadi nama label sobat, misal Tentang Widget
- numChars 100 Digunakan untuk menentukan jumlah potongan snippet posting
- thumbWidth 40 Digunakan untuk menentukan ukuran besar kecil thumbnail / gambar posting
- navText Berikutnya Digunakan untuk memanggil posting berikutnya
- frontText Atas Digunakan untuk memberitahukan jika postingan sudah mencapai batas
- resetToc Reset ???
- noImage https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_1RUIq2vmyQ0TU_WUeJlf32m_kVzMJRbsIV1DE-xzeHTs56zauEevjrocO9vMYavDkIl6hwVcAV6391WEGhtE9c_5oCabmX-Og-lYMa4ZRuT4FREkcrYLGzNKn5SV-It0uj6kO0igyd4/s1600/no+images+Variasi+Blogger.jpeg Digunakan untuk menggantikan posting yang tidak memiliki gambar
- loading Memuat Tulisan yang akan muncul pada saat posting selanjutnya terpanggil
- searching Mencari Sedang mencari postingan
- noResult Tak Ditemukan Posting tidak ditemukan
Untuk melihat contoh Daftar Isi Menurut Label Terbaru Part 3 silahkan klik DEMO
SUMBER
{ 0 komentar... read them below or add one }
Posting Komentar