 |
Berikut cara pemasangannya :
Buka Template > Edit HTML > Lalu pastekan kode CSS di bawah ini tepat diatas ]]></b:skin> atau </style>
#search-form-feed {
width:200px; /* lebar kotak penelusuran */
position:relative;
margin:0 0 10px;
padding:0;
font:normal normal 11px/normal Arial,Sans-Serif;
color:#333;
}
#feed-q-input {
display:block;
width:100%;
border:2px solid #bbb;
background-color:white;
padding:5px;
font:normal bold 13px/normal Tahoma,Arial,Sans-Serif;
color:#ccc;
margin:0;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
-moz-box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#feed-q-input:focus {
border-color:#0D6786;
color:#333;
outline:none;
-webkit-box-shadow:0 0 5px #153E95,0 0 7px #153E95;
-moz-box-shadow:0 0 5px #153E95,0 0 7px #153E95;
box-shadow:0 0 5px #153E95,0 0 7px #153E95;
}
#search-result-container {
width:400px;
height:300px;
overflow:auto;
position:absolute;
top:100%;
right:0;
z-index:999;
background-color:#E5EDF7;
border:2px solid white;
padding:10px 10px 0;
margin:10px 0 0;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
display:none;
}
#search-result-container mark {
background-color:yellow;
color:black;
}
#search-result-container a {
text-decoration:none;
color:#0D3E71;
font-weight:bold;
font-size:12px;
display:block;
}
#search-result-container a:hover {color:#052748}
#search-result-container h4 {
margin:0 0 10px;
font:normal bold 12px/normal "Trebuchet MS",Trebuchet,Tahoma,Arial,Sans-Serif;
color:#B50001;
}
#search-result-container ol {
background:transparent;
border:none;
margin:0 0 10px;
padding:0;
}
#search-result-container li {
margin:0 0 1px;
padding:7px 8px;
list-style:none;
border:1px solid #B7C1CE;
background-color:white;
overflow:hidden;
word-wrap:break-word;
}
#search-result-container li img {
display:block;
float:left;
margin:0 10px 4px 0;
border:1px solid #B7C1CE;
background-color:#F5F5F5;
padding:2px;
}
#search-result-loader {
position:absolute;
top:100%;
left:5px;
z-index:999;
background-color:#0D6786;
color:white;
padding:3px 5px;
margin:-2px 0 0;
font:normal bold 10px/normal Arial,Sans-Serif;
-webkit-border-radius:0 0 3px 3px;
-moz-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
display:none;
}
Save, kemudian masuk ke halaman tataletak dan tambahkan sebuah elemen halaman HTML/JavaScript dan kemudian copy semua kode dibawah dan pastekan ke dalamnya:
<div id="search-form-feed">
<form action="/search" onsubmit="return updateScript();">
<input name="q" type="text" placeholder="Telusuri..." id="feed-q-input" onkeyup="resetField();"/>
</form>
<div id="search-result-container"></div>
<div id="search-result-loader">Loading...</div>
</div>
<script>
//<![CDATA[
var searchFormConfig = {
url: "http://nama_blog.blogspot.com", // URL Blog
numPost: 9999, // Jumlah maksimal temuan
summaryPost: true, // `true` jika ingin menampilkan deskripsi posting
summaryLength: 400, // Jumlah karakter ringkasan posting
resultTitle: "Hasil penelusuran untuk kata kunci", // Judul hasil pencarian
noResult: "No result", // Deskripsi `tak ditemukan`
resultThumbnail: true, // `true` untuk menampilkan thumbnail posting
thumbSize: 40, // Ukuran & resolusi thumbnail
fallbackThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC" // Fallback thumbnail untuk posting tak bergambar
};
//]]>
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/blogger-quick-search.js"></script>
Terakhir save dan lihat hasilnya
0 komentar :
Post a Comment
PEDOMAN KOMENTAR
Ayo berpartisipasi membangun budaya berkomentar yang baik. Mohon tidak memberikan komentar bermuatan penghinaan atau spam, Kita semua menyukai muatan komentar yang positif dan baik.
Kolom komentar tersedia untuk diskusi, berbagi ide dan pengetahuan. Hargai pembaca lain dengan berbahasa yang baik dalam berekspresi. Setialah pada topik. Jangan menyerang atau menebar nuansa kebencian terhadap suku, agama, ras, atau golongan tertentu.
Pikirlah baik-baik sebelum mengirim komentar.