Dan yang akan saya share adalah script aslinya jadi tampilan tidak seperti yang di DTE silahkan sobat edit kembali dan sesuaikan dengan blog masing-masing, untuk lebih jelasnya dapat dilihat pada live demo di bawah ini:
Bagi sobat yang ingin mengganti sitemap yang lama dengan sitemap yang keren ini, silahkan ikuti petunjuknya di bawah ini:
1. Login ke Blogger
2. Masuk ke Rancangan lalu pilih Edit HTML
3. Centang Expand Template Widget.
4. Cari kode berikut kode ]]></b:skin> atau <style>
5. Copy dan paste kode berikut tepat di bawahnya
#table-outer {
padding:7px 10px;
margin:30px 30px 0;
}
#table-outer table {
width:80%;
margin:0;
}
#table-outer form {font:inherit;}
#table-outer td {padding:2px 2px;}
#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;
padding:4px 0 0;
}
#table-outer select[disabled] {opacity:.4;}
#post-searcher {
display:block;
margin:0;
padding:0;
}
#table-outer input,#table-outer select {
width:100%;
background-color:#111;
border:none;
display:block;
margin:0;
padding:5px 5px;
font-size:70%;
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;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}
#table-outer input:focus,#table-outer select:focus {background-color:#090909;}
#feed-container {
display:block;
clear:both;
margin:0 30px;
padding:0;
list-style:none;
overflow:hidden;
position:relative;
border:1px solid #3c3c3c;
border-top:none;
text-shadow:0 1px 0 rgba(0,0,0,.4);
}
#feed-container:after {
content:"";
display:block;
width:1px;
height:100%;
position:absolute;
top:0;
bottom:0;
left:50%;
background-color:#3c3c3c;
}
#feed-container li {
list-style:none;
margin:0;
padding:0;
border-top:1px solid #3c3c3c;
color:#999;
width:50%;
float:left;
display:inline;
}
#feed-container li .inner {
margin:15px 16px;
height:116px;
overflow:hidden;
word-wrap:break-word;
text-overflow:ellipsis;
}
#feed-container li a {
text-decoration:none;
color:#5687B8;
}
#feed-container li a:hover {
text-decoration:none;
color:#eee;
}
#feed-container li a.toc-title {font-weight:bold;}
#feed-container li .news-text {margin:10px 0 0;}
#feed-container li img {
margin:0 10px 5px 0;
padding:5px;
background-color:#222;
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0;
float:left;
}
#result-desc {
margin:0 30px;
padding:0;
border-bottom:4px solid #303030;
}
#result-desc span,#result-desc div {
display:block;
margin:0;
padding:5px 10px 7px;
color:#D64D52;
}
#result-desc div {color:inherit;}
#feed-nav {
margin:10px 30px 0;
text-align:center;
font-weight:bold;
text-transform:uppercase;
}
#feed-nav a,#feed-nav span {
background-color:#111;
padding:0;
color:#999;
text-decoration:none;
display:block;
height:30px;
line-height:32px;
}
#feed-nav a:hover,#feed-nav a:active {
background-color:black;
color:white;
}
#feed-nav span {cursor:wait;}
@media (max-width:800px) {
#feedContainer li {
float:none;
display:block;
width:auto;
height:auto;
}
#feedContainer:after {
display:none
}
}Copy dan paste kode berikut diantara kode <body>.....</body> atau di widget
<div id="table-outer">
<table border="0">
<tbody>
<tr>
<td><label for="feed-order">Urutkan artikel berdasarkan:</label>
</td>
<td><select id="feed-order">
<option selected="selected" value="published">POSTING TERBARU</option>
<option value="updated">POSTING DIPERBAHARUI</option>
</select>
</td>
</tr>
<tr>
<td><label for="label-sorter">Filter artikel berdasarkan kategori:</label>
</td>
<td><select disabled="disabled" id="label-sorter">
<option selected="selected">MEMUAT...</option>
</select>
</td>
</tr>
<tr>
<td><label for="feed-q">Cari dengan kata kunci:</label>
</td>
<td><form id="post-searcher">
<input id="feed-q" type="text" />
</form>
</td>
</tr>
</tbody>
</table>
</div>
<a style="display:none" href="http://ajatshare.blogspot.com">Blogger Widgets</a>
<header id="result-desc"></header>
<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script src="https://googledrive.com/host/0B-qFC4Ni6GSKdTZGbmdhUkUtbTA" type="text/javascript"></script>
-->
22 comments
Tambah komentarBagus! lain kali kucoba di salah satu blog kami!
Terima kasih sambutannya dan juga kunjungan ke blog saya.!
mantap gan :D
Andrekocak Blog-Gila Lirik Lagu
mantap gan :D
Gila Lirik Lagu Blogalking
wah benar-benar keren mas tampilan daftar isi nya. Tapi sepertinya ini untuk blogspot saja ya :)
terima kasih sob...!
terima kasih sob...!
kalo untuk blogspot tidak ada masalah dan untuk plafon di luar blogspot belum dicoba jeng...!
thanks gan ....sy akan coba praktekkan
silahkan sob dicoba aja...!
Ini boleh juga. Tapi sepertinya lebih cocok untuk menjadi search blog Sob?
Betul sob, mungkin karena ada search nya kali yach...!
Maaf kalau bekomentar lewaat spam maksudnya bagaimana yach!
Mantep nih blognya, keren! Salam kenal !
Label komentarnya bagus sekali, ada nomor antriannya lagi! Sip lah!
Maksudnya bukan komentar lewat spam tapi tidak komentar spam, arti spam pada blog secara garis besar memberikan informasi yang tidak dikehendaki oleh pemilik blog dan dilakukan secara berulang.
Terima sob atas kunjungannya.
Kalau script-nya dipasang di halaman, bisa enggak ya Mas? Saya masih agak takut kalau masuk Rancangan HTML. :)
Tentu bisa...! Contoh di atas yang saya buat juga di buat di halaman posting.
Thanks gan, ini yang lagi saya cari :D
Silahkan gan dicoba aja...!
terimakasih infonya broh
http://obattradisionalacemaxs.net/