Memasang Mesin Pencari 4 Dalam 1

Sesuai judul artikel kali ini, kita akan mencoba memasang 4 buah mesin pencari dalam satu kotak pencarian. Teknik ini awalnya dibuat oleh PurpleMoggy setelah melalui percobaan panjang. 4 mesin pencari yang akan kita pasang adalah ; pencarian didalam blog itu sendiri (Self Search), pencarian dengan bantuan google (Google Blog Search), pencarian dengan bantuan blogger (Blogger Search) dan pencarian dengan bantuan technorati (Technorati Search). Dengan 4 mesin pencari ini mudah-mudahan akan membantu para pengunjung (visitor) untuk menemukan apa yang mereka butuhkan.

Berikut langkah demi langkah proses pemasangan 4 mesin pencari dalam blogger :

Langkah 1
Login ke blogger account anda

Langkah 2
Panel Kontrol - Tata Letak - Edit HTML - Expand Widget
Backup terlebih dahulu blogger template anda untuk mencegah kemungkinan yang tidak kita inginkan.

Langkah 3
Cari kode dibawah ini :

</head>

Langkah 4
Letakan (copy-paste) kode dibawah ini tepat diatas kode langkah 3 :

<script type="text/javascript" src="http://hendriono.googlepages.com/search.js"></script>
<link href="http://hendriono.googlepages.com/search.css" rel="stylesheet" type="text/css"/>

Langkah 5
Simpan template anda, sruput riyen kopi plus gendis jawi...

Langkah 6
Kembali ke Tata Letak dan tambahkan Element Halaman - HTML/JavaScript dan letakan (copy-paste) kode dibawah ini didalam konten setelah itu klik tombol "Simpan" :

<div id="pm-search">
<ul>
<li id="li-h" class="pm-search-selected" onclick="selectH()">here</li><li id="li-g" class="pm-search-unselected" onclick="selectG()">google</li><li id="li-b" class="pm-search-unselected" onclick="selectB()">blogger</li><li id="li-t" class="pm-search-unselected" onclick="selectT()">technorati</li>
</ul>
<div id="pm-search-h">
<form action="http://modification-blog.blogspot.com/search" method="get">
<input id="pm-f-h" value="" name="q" size="15" type="text"/>
<input value="Search" type="submit"/>
</form>
</div>
<div id="pm-search-g">
<form action="http://blogsearch.google.com/blogsearch" method="get">
<input id="pm-f-g" value="" name="as_q" size="15" type="text"/>
<input value="Search" type="submit"/>
<input value="modification-blog.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-b">
<form action="http://search.blogger.com/" method="get">
<input id="pm-f-b" value="" name="as_q" size="15" type="text"/>
<input value="Search" type="submit"/>
<input value="modification-blog.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-t">
<form action="http://www.technorati.com/search.php" method="post">
<input id="pm-f-t" maxlength="255" name="s" size="15" type="text"/>
<input value="Search" type="submit"/>
<input value="searchlet" name="sub" type="hidden"/>
<input value="modification-blog.blogspot.com" name="from" type="hidden"/>
<input value="n" name="authority" type="hidden"/>
<input value="n" name="language" type="hidden"/>
</form>
</div>
</div>

Keterangan :

• modification-blog.blogspot.com : Alamat blog silahkan ganti dengan alamat blog anda
• Nilai 15 : adalah lebar dari kotak input keyword
• Search : nama tombol sebelah kanan kotak input silahkan ganti sesuai keinginan anda (misal : Cari)

Mudah-mudahan bermanfaat, dan jika ada bug silahkan tinggalkan komentar. Salam hangat dari Banjarsari - Ciamis - Jawa Barat - Indonesia - Bumi...

Read More

Collapse Posting with Readmore 2

Pada posting sebelumnya saya pernah menuliskan teknik pemenggalan posting dengan teknik simple/sederhana. Pada posting kali ini kita akan menggunakan teknik pemenggalan posting dengan Peekaboo. Perbedaan mendasar antara simple dengan peekaboo adalah proses loading main page. Pada teknik simple, posting halaman per halaman benar-benar di penggal sehingga ketika kita meng-klik Selengkapnya.../Readmore... melalui halaman utama (main page) maka kita akan di arahkan ke halaman baru. Sedangkan pemenggalan posting dengan peekaboo adalah teknik melipat halaman perhalaman pada halaman utama, ketika kita meng-klik Selengkapnya.../Readmore... maka kita tidak akan di arahkan ke halaman yang bersangkutan tetapi tetap berada pada halaman utama (main page) sedangkan artikel yang terlipat akan di tampilkan secara lengkap tanpa meninggalkan halaman utama.

Perhatikan illustrasi dibawah, gambar 1 (simple readmore) sedangkan gambar 2 (peekaboo readmore) :

Integrasi Selengkapnya/Readmore Jenis Peekaboo

Langkah 1
Login ke blogger
Langkah 2
Pada Panel Kontrol - Tata Letak - Edit HTML - Expand Widget
Langkah 3
Backup terlebih dahulu template blogger anda untuk menghindari kegagalan transflantasi readmore
Langkah 4
Cari kode dibawah ini menggunakan fasilitas (find) pencarian pada browser:

</head>

Langkah 5
Letakan (Copy - Paste) kode dibawah ini tepat diatas kode langkah 4:

<b:if cond="data:blog.pageType != &quot;item&quot;">
<script type="text/javascript">
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == &quot;fullpost&quot;) {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == &quot;showlink&quot;)
spans[i].style.display = 'none';
if (spans[i].id == &quot;hidelink&quot;)
spans[i].style.display = 'inline';
}
}

function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == &quot;fullpost&quot;) {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == &quot;showlink&quot;)
spans[i].style.display = 'inline';
if (spans[i].id == &quot;hidelink&quot;)
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == &quot;fullpost&quot;) {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == &quot;showlink&quot;) &amp;&amp; (found == 0))
spans[i].style.display = 'none';
}
}
</script>
</b:if>

Langkah 6
Cari kode dibawah ini:

<data:post.body/>

Langkah 7
Gantilah (Replace) kode pada langkah 6 dengan kode dibawah ini:

<div class="post-body" expr:id="&quot;post-&quot; + data:post.id">
<b:if cond="data:blog.pageType == &quot;item&quot;">
<style>#fullpost{display:inline;}</style>
<p><data:post.body></data:post.body></p>
<b:else></b:else>
<style>#fullpost{display:none;}</style>
<p><data:post.body></data:post.body></p>
<span id="showlink">
<a expr:href="data:post.url">Read More...</a>
</span>
<script type="text/javascript">
checkFull(&quot;post-&quot; + &quot;<data:post.id></data:post.id>&quot;);
</script>
</b:if>

Langkah 8
Simpan template anda, gantilah kata "Read More..." dengan kata yang anda inginkan.
Langkah 9
Nah sekarang setiap anda menuliskan artikel untuk di-posting jangan lupa sisipkan kode dibawah ini, jika tidak semua kode yang sudah kita pasang pada template tidak akan bereaksi apapun.

Postingan awal yang tampil pada halaman utama (main page)
<span id="fullpost">
Isi posting yang terpenggal dan akan tampil jika kita klik Read More.../Selengkapnya...
</span>

Selamat mencoba, semoga berhasil.....
Salam hangat dari Banjarsari - Ciamis - Jawa Barat - Indonesia - Bumi...

Read More