How to put it on the blog . Open your page editor and paste the code below.
<style type="text/css">
#resultDesc {
margin:0;
padding:0 0;
color:#999;
font-weight:bold;
}
#resultDesc span {
margin:0 auto;
padding:5px 10px 7px;
color:#D64D52;
}
#feedNav,#feedNav:hover {
margin:0 auto;
height:34px;
line-height:34px;
text-align:center;
color:#fff;
font:bold 12px/30px Arial,Sans-Serif;
background-color:#3c3c3c;
border-top:1px solid #444;
-webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
-moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}
#feedNav a,#feedNav span {
color:#999;
padding:0;
text-decoration:none;
}
#feedNav:hover {
color:white;
background-color:#444;
}
#feedNav:active {background-color:#527915;}
#feedNav span {cursor:wait;}
#table-outer {
height:30px;
text-align:center;
padding:0;
margin:15px 20px 0;
}
#table-outer #orderFeedBy {float:left;}
#table-outer #postSearcher {float:right;}
#table-outer input {
display:inline-block;
vertical-align:right;
margin:0 2px 0 0;
padding:0 0;
}
#table-outer select[disabled] {opacity:.4;}
#postSearcher input,#table-outer select {
width:33%;
background-color:#111;
border:none;
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 {
width:33%;
padding:0;
}
#postSearcher input {
width:96%;
padding:5px 5px;
}
#postSearcher input:focus,#table-outer select:focus {background-color:#090909;}
#tabbed-toc {
width:100%;
margin:5px auto 0;
background-color:#333;
border-left:1px solid #222;
border-right:1px solid #444;
border-top:1px solid #222;
border-bottom:1px solid #444;
overflow:hidden;
position:relative;
color:#888;
}
#tabbed-toc .loading {margin:20px 47%;}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li {
margin:0 0;
padding:0 0;
list-style:none;
}
#tabbed-toc #labelSorteres {
width:20%;
float:left;
margin:0 auto;
}
#tabbed-toc #labelSorter ul {
position:relative;
margin-top:-36px;
background-color:#333;
}
#tabbed-toc #labelSorter li a,#tabbed-toc #labelSorteres #loadCat li a {
display:block;
font:bold 10px/28px Helmet,Freesans,Sans-Serif;
height:34px;
line-height:34px;
overflow:hidden;
text-overflow:ellipsis;
color:#CCC;
border-top:1px solid #444;
border-left:1px solid #444;
border-bottom:1px solid #222;
border-right:1px solid #222;
text-transform:uppercase;
text-decoration:none;
padding:0 10px;
margin:0;
cursor:pointer;
}
#tabbed-toc #labelSorteres #loadCat .allowed,#tabbed-toc #labelSorter .allowed {cursor:not-allowed;}
#tabbed-toc #labelSorter li a:hover {
outline:none;
background-color:#3c3c3c;
color:white;
}
#tabbed-toc #labelSorter li a.active-tab {
color:#C4DEF0;
font-size:13px;
font-weight:bold;
outline:none;
z-index:1;
padding:0 10px;
margin:0;
background-color:#3c3c3c;
}
#tabbed-toc #labelSorter li a.active-tab:hover {cursor:not-allowed;}
#tabbed-toc #labelSorter .disabled,#tabbed-toc #labelSorter .disablet {display:none;}
#tabbed-toc .feedline {
width:80%;
float:right;
text-align:left;
margin:0 auto;
padding:0;
background-color:#333;
border-bottom:1px solid #222;
}
#tabbed-toc #feedContainer {background-color:#333;}
#tabbed-toc #feedContainer li {
float:left;
width:100%;
margin:0 auto;
list-style:none;
background-color:#333;
font:10px Helmet,Freesans,Sans-Serif;
-webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
-moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}
#tabbed-toc #feedContainer li.bold {width:50%;}
#tabbed-toc #feedContainer li time {
display:block;
font-style:italic;
font-weight:normal;
font-size:10px;
color:#666;
float:right;
}
#tabbed-toc #feedContainer li a.item-title {
display:block;
position:relative;
font-weight:normal;
font-size:13px;
color:#999;
border-top:1px solid #444;
border-bottom:1px solid #222;
height:34px;
line-height:34px;
padding:0 12px;
text-transform:uppercase;
text-decoration:none;
outline:none;
overflow:hidden;
}
#tabbed-toc #feedContainer li a.item-title:hover,#tabbed-toc #feedContainer li a.item-title:focus {
color:#999;
outline:none;
border-left:4px solid #066696;
-webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
-moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}
#tabbed-toc #feedContainer li .summary {
display:block;
height:50px;
padding:10px 12px 10px;
font-style:italic;
color:#ccc;
border-top:1px solid #444;
border-bottom:1px solid #222;
overflow:hidden;
}
#tabbed-toc #feedContainer li .summary img.thumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px 4px;
width:72px;
height:72px;
border:1px solid #3c3c3c;
background-color:#292929;
}
#tabbed-toc #feedContainer li .itemfoot {
clear:both;
height:34px;
line-height:34px;
padding:0 10px;
color:#666;
border-top:1px solid #444;
border-bottom:1px solid #222;
overflow:hidden;
position:relative;
}
#tabbed-toc #feedContainer li .itemfoot a.itemrmore {
float:right;
font-weight:bold;
color:#3B5998;
text-decoration:none;
}
#tabbed-toc #feedContainer li .itemfoot a.itemrmore:hover {
color:#555;
background-color:transparent;
text-decoration:none;
border-color:transparent;
}
</style>
<div id="table-outer">
<select id="orderFeedBy">
<option value="published" selected>POSTING TERBARU</option>
<option value="updated">POSTING DIPERBAHARUI</option>
</select><span id="resultDesc"></span>
<form id="postSearcher">
<input type="text" id="feed-q-box" value="" autocomplete="off" onkeyup="resetField();" />
</form>
</div>
<div id="tabbed-toc"><span id="labelSorteres"><div id="loadCat"></div><div id="labelSorter"><li class="toc-tab-item"><a class="allowed" href="javascript:changeSort(0);">SEDANG MEMUAT LABEL...</a></li></div></span>
<div class="feedline">
<ul id="feedContainer"></ul>
<div id="feedNav"></div>
</div>
</div>
<script type="text/javascript">
var tocConfig = {
url: "http://ashprincesskawaii.blogspot.co.id", // Ganti nilainya menjadi URL blog anda
feedNum: 12, // Jumlah posting yang tampil
numChars: 100, // Jumlah ringkasan posting
thumbWidth: 40, // Ukuran thumbnail posting
newTabLink: true, // Membuka link pada tab baru
showDates: true, // Menampilkan tanggal publis
labelName: false, // Menentukan label yang akan di tampilkan
showSummaries: true, // Menampilkan ringkasan posting
showThumbnails: true, // Menampilkan thumbnail posting
navText: "Berikutnya ▼", // Memuat artikel lainnya
frontText: "Kembali ke Awal ⇑", // Artikel sudah mencapai batas
moreText: "Selengkapnya ►", // Readmore atau baca selengkapnya
loading: "<span>Memuat Content...</span>", // Sedang memuat content
searching: "<span>Mencari...</span>", // Sedang mencari content
noResult: "Tak Ditemukan", // Content tidak di temukan
loadCat: "Sedang Memuat Label...", // Memuat label
resetCat: "Reset Ulang Category...", // Reset label
noImage: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==", // Artikel tanpa gambar
monthNames: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"] // Bulan terbit artikel
};
</script>
Then save. Well done...
0 Comments:
Posting Komentar