Cara Membuat Gadget Pencarian atau Search Engine Dengan Mudah Dalam Blog

Sebenarnya untuk Gadget pencarian atau Search Engine di dalam blog sudah ada, akan tetapi stylenya masih default atau standar. Supaya Tampilannya lebih menarik Search Enginenya di polesi dengan warna sehingga kelihatan cantik.

Dibawah ini cara untuk membuatnya:

1. Login ke Blogger

2. Masuk ke menu Tata Letak

3. Tambah Gadget

4. Pilih +HTML/JAVASCRIPT

5. Tuliskan Script dibawah ini dengan variasi gadget pencarian

6. Dan Simpan

Dibawah ini contoh kode gadget pencarian yang lebih banyak variasinya:

Variasi 1

Kode:

<style type="text/css">

#a-searchbox{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIpfeRdZza86U7xLryMDgdTpO01neWPzx07YnlOqYc6iWCXnngEiXbafHBTavdh8OlUFVo0EKxfp8ZGjMIF6sQO9WsMucG6Lv-DEH-b6-8TZGQjbVFNRVoUfWh_r0fJApFqGU0E6ugtFp/s1600/lostsector-search-box-blue.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#a-searchform{display: block;padding: 10px 12px;margin:0;}

form#a-searchform #a{padding: 6px;margin-left:20px;width: 205px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<center>

<div id="a-searchbox">

<form id="a-searchform" action="/search" method="get">

<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>

<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />

</form>

</div></center> 

Variasi 2

Kode: 

<style type="text/css">

#a-searchbox{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHJFxenqx2hdzDjQTPehIzZjxGn5lpOr-c2LWvuSWMujwxiqEqQsmV1kHekfkW0OFxRx744pywKjQrIUcYKgMHdafOQ44NhxGPxBcMp9606oA7b4zXIDH_iZfFMDQMe5Nz_hqX4OX2r72c/s1600/lostsector-search-box-darkgrey.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#a-searchform{display: block;padding: 10px 12px;margin:0;}

form#a-searchform #a{padding: 6px;margin-left:20px;width: 205px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<center>

<div id="a-searchbox">

<form id="a-searchform" action="/search" method="get">

<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>

<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />

</form>

</div></center>

Variasi 3

Kode

<style type="text/css">

#a-searchbox{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRvHjlB_hJQq0lDwRMcLlSnMktlFU6ZOKld3V22J3LVFNAAEdVjdcNPIwvyLj3Qj1NxrBm45VwDgLSJKbSP46f8wf07MbXqXgsX_fWjInvBOLDQs0vr-k85KV09QBuFJoxMeP1HQj551_j/s1600/lostsector-search-box-gray.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#a-searchform{display: block;padding: 10px 12px;margin:0;}

form#a-searchform #a{padding: 6px;margin-left:20px;width: 205px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<center>

<div id="a-searchbox">

<form id="a-searchform" action="/search" method="get">

<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>

<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />

</form>

</div></center>

Variasi 3

Kode:

<style type="text/css">

#a-searchbox{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgjwpSaeqyjpJvrQltpbeJBHw3UtsqrWfC99lj7fLgvW8STfLOD2t153Ku6QNfKJr0p4atJTYrq5qynAXcnTFc5OCHnPCyPmI2o4HP3UlQZAoOVjbgcPyvLZBWb-kkJoisYvpfmnUFg7KG/s1600/lostsector-search-box-black.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#a-searchform{display: block;padding: 10px 12px;margin:0;}

form#a-searchform #a{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<center>

<div id="a-searchbox">

<form id="a-searchform" action="/search" method="get">

<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>

<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />

</form>

</div></center>

Variasi 5

Kode:

<style type="text/css">

#a-searchbox{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkM5NvlESYCz-GQUUKnzrQauEE9puv0hOvlo9YjbuB6s4aAn_z1MDQAq65Nu9Op7epboZk1d6NbYm8CsZpF0Dz3t4tw_ECSgsNNI1s45UepfTccVMA5-HvtSZ1TeegoJih00nJyKopEi83/s1600/lostsector-search-box-red.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#a-searchform{display: block;padding: 10px 12px;margin:0;}

form#a-searchform #a{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<center>

<div id="a-searchbox">

<form id="a-searchform" action="/search" method="get">

<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>

<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />

</form>

</div></center>

Variasi 6

Kode:

<style type="text/css">

#a-searchbox{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpCYszf7VCxq8DpezI4jy0dF83UArg3OD635kxIsrjFE2VLvxklLEa7YMJkLK6oU8uoEphjlKVRhbFlPecGTcC6VCjVp7kmur46NursspiI7s2FR9PCVjW9RjRwY4_JZuHQV6wKs9wDffP/s1600/lostsector-search-box-yellow.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#a-searchform{display: block;padding: 10px 12px;margin:0;}

form#a-searchform #a{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<center>

<div id="a-searchbox">

<form id="a-searchform" action="/search" method="get">

<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>

<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />

</form>

</div></center>

Read More

Cara Menampilkan Banner Animasi Dalam Blog

Contoh Banner

Terkadang Barnner animasi lebih menarik dibandingkan dengan animasi biasa yang diam dan statis. Oleh karena itu banyak pebisnis dalam promosi atau jasanya lebih suka lewat online menggunakan banner animasi.

Dibawah ini langkah-langkah cara membuat Banner Animasi adalah sebagai berikut:

1. Buka Situs www.flashvortex.com

2. Klik menu Banner

3. Klik "CLICK HERE TO EDIT THIS"

3. Pilih ukurannya (300x250 untuk kotak, 728x90 untuk banner panjang, misalnya saya pilih 300x250)

5. Atur Kata-kata yang akan ditampilka.
6. Atur juga warnanya
7. Atur link tujuan ketika ketika banner tersebut di klik
8. Jika sudah, silahkan Anda klik tombol Generate Animation
9. Silahkan Anda Copy kode yang diberikan
10. Sekarang Login ke Blogger

11. Masuk ke menu Tata Letak

12. Tambah Gadget

13. Pilih +HTML/JAVASCRIPT

14. Isi judul dan masukkan script yang tadi sudah anda copy

15. Dan Simpan

Read More

Cara Memasang Gadget Alexa Rank Dalam Blog

Apa sih Alexa itu...?

Alexa Rank adalah peniliaian ranting dari Alexa yang merupakan seuatu perusahaan yang mengindeks website di seluruh dunia dan menilai sebuah website dengan ranting tertentu sesuai dengan tingkat popularitas atau pageview dari website itu.

Untuk saat ini, perusahaan (adsense) yang mempertimbangkan ranting Alexa sebuah wibesite sebelum dijadikan mitra kerja. Jadi hal ini wajib bagi Anda untuk memasangnya di blog. Langkah-langkahnya adalah sebagai berikut:

1. Silahkan pilih bentuk yang diinginkan.

<a href="http://www.alexa.com/siteinfo/alamat Blog Anda"><script src="http://xslt.alexa.com/site_stats/js/s/c?url=alamat Blog Anda" type="text/javascript"></script></a>

<a href="http://www.alexa.com/siteinfo/Alamat Blog Anda"><script src="http://xslt.alexa.com/site_stats/js/s/c?url=Alamat Blog Anda" type="text/javascript"></script></a>

<a href="http://www.alexa.com/siteinfo/Alamat Blog Anda"><script src="http://xslt.alexa.com/site_stats/js/s/b?url=Alamat Blog Anda" type="text/javascript"></script></a> 

2. Login ke Blogger

3. Masuk ke menu Tata Letak

4. Tambah Gadget

5. Pilih +HTML/JAVASCRIPT

6. Tuliskan Script diatas yang anda sukai

7. Dan Simpanlah.

Untuk lebih jelasnya Anda bisa mempelajari disini

Read More

Kode HTML Peniliaan Postingan dengan Jempol

Jempol (suka)

Gadget ini sangat penring juga untuk mengetahui berapa jumlah orang yang suka dengan postingan kita dan sebaliknya siapa saja orang yang tidak suka dengan postingan kita. Berikut langkah-langkahnya:

1. Login ke Blogger

2. Lalu Klik Menu Template

3. Klik tombol edit HTML

4. Kemudian cari kode </body>

5. Tuliskan kode dibawah ini tepat diatas kode <data:post.body>
========================================================================

<b:if cond='data:blog.pageType == &quot;item&quot;'

<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title' view='score'></div>

</b:if>

========================================================================
 6. Letakan juga diatas kode </body>
=====================================

<script src="http://js-kit.com/ratings.js"></script>

=====================================

7. Dan Simpan Tamplate

Read More