Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Cara Membuat Widget Search Box Alexa di Blog

Widget Search Box Alexa
Cara Membuat Widget Search Box Alexa di Blog – mungkin sudah banyak blogger yang tahu akan hal ini. untuk membuat widget search box di blog untuk dipasang pada sidebar blog maupun bagian lainnya tidak terlalu sulit untuk dilakukan. Memang sepertinya jarang dari para blogger yang menggunakan widget search box alexa di blognya sebagai kotak pencarian utama pada blog tersebut, namun jika anda mungkin berminat untuk memasangnya kedalam blog tentu langkah ini sangat mudah. Tampilan dari widget search box alexa ini juga cukup menarik dan tentu tidak kalah dengan tampilan widget search box lainnya. Bentuk widget yang ramping dan minimalis tentu terkesan cantik untuk melengkapi desain blog menjadi lebih berwarna. Seperti apa tampilan dari widget search box alexa ini, bisa terlebih dahulu bisa dilihat seperti yang tertera pada demo. Selanjutnya untuk memasang widget search box ini ke blog, maka berikut adalah tutorial Cara Membuat Widget Search Box Alexa di Blog.

1. Login ke akun blogger.
2. Lalu copy kode dibawah ini.
<style>
.balexa {
font: bold 12px Tahoma, Geneva, sans-serif,"times new roman";
color: #fff;
background: #0361d2;
border-radius: 5px 5px 5px 5px;
padding: 7px 15px;
cursor:pointer;
margin: 5px 0 0 3px auto;
}
.balexa:active {
cursor:wait;
position: relative;
top: 2px;
}
.balexa::-moz-focus-inner {
border: none;
padding: 0;
margin: 0;
}
.blsbox {
border: 1px solid #D3D3D3;
border-radius: 4px;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.blsbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
</style>
<form method="get" action="http://www.alexa.com/data/details/traffic_details" target="_blank">
<input class="blsbox" name="url" maxlength="255" size="40" type="text" onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter the Url...&quot;;}'
onfocus='if (this.value == &quot;Enter the Url...&quot;) {this.value = &quot;&quot;}'
type="text" value="Enter the Url..." />
<input value="Alexa" type="submit" class="balexa" /></form>
3. Selanjutnya klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode disitu kemudian klik Simpan dan selesai. Cukup sudah sampai disini untuk Cara Membuat Widget Search Box Alexa di Blog.

DEMO:

Berlangganan artikel via email

45 Response to "Cara Membuat Widget Search Box Alexa di Blog"

Wah keren juga nih mas Andes Cara Membuat Widget Search Box Alexa di Blognya, boleh juga nih dicoba hehe... Makasih tutorialnya :)

Balas

wah...baru tau nih kalau ada search alexa. kreatif banget

Balas

Wah, ilmu baru nih. Saya sudah mencoba demonya. :D

Balas

wah keren nih untuk mempercantik tampilan blog dengan widget alexa

Balas

jadi lebih mudah ya kalau cek rank alexa

Balas

kalau buat toko online apa cocok ya ?

Balas

entar pencariannya masuk ke semua blog apa cuma blog yang dikasi widget itu.

Balas

Nice sharing. Thanks!

Balas

mas anthoni kalo muji orang paling pinter banget :D
hohoho

Balas

ini juga, malah lebih lihay. top level :)
hohoho

Balas

saya juga baru mencoba kaos kaki baru mas :D
hohoho

Balas

ini memang buat blog mas, jangan buat mempercantik wajah :D
hohoho

Balas

nilai 100 buat mas gosip game :D
hohoho

Balas

bukan hanya toko online mas, pasar online juga cocok :D
hohoho

Balas

bukan hanya ke semua blog tapi sampai ujung lubang belut juga ketemu, ini menggunakan mesin orong2 :D
hohoho

Balas

thanks balik bang cikgu !!!
yesss menang tongkat satpamku lebih banyak :D
hohoho

Balas

ga pernah bisa comment kreatif kalo udah mampir ke blog mas andes mah,
yang ada pasrah bengong ga ngerti . haahha ,,.
blm paham alexa gtu mas, tapi coba nanti di cari tau dulu ;D

Balas

bener mas sangat minimalis tapi kelihat dinamis dan gak terlalu narcis... :)

Selain itu...kalo pasang widget ini...nantinya kita ndak perlu lagi pasang alexa toolbar di menu browsing ya mas..

kran...eh keren deh :)

Balas

sama tuh...sama admin yg di atas sy...hehe :)

Balas

kalo ini...sy sepakat :)

Balas

kalo ini saya...sepakat :)

Balas

saya ding...nih lagi nyoba sepatu baru :)

Balas

daftar sekolah online juga bisa ding.. :D

Balas

hehe maklum mba, bisanya cuma kyak gini posting seadanya.

ntar lama2 juga ngerti kok mba, biar blm paham tapi soal cinta mba iin luar biasa :D
hahaselole..

Balas

ini nih kumat nihh, udah minimalis keliatan dinamis gak terlalu narcis.. pula. hadududuhhh lengkap banget sih mas budi mujinya.
hohoho extra josss deh..

Balas

keren gan blognya :)

good share sob ;) , patut dicoba!

Balas

Ini memang penting sekali gan, dan sebaiknya memang perlu menggunakannya
terima kasih sudah berbagi

Balas

makin dramatis.

Balas

.. bisa dipake buat cari orang ilang juga.

Balas

#modus
hahaha.. abaikan mbak :D .

Balas

Selamat siang mas andes,,apakabarnya semoga sehat selalu

Balas

trims yea mas tas ilmunya ni,,
salam sukses ja yea bang,,
dan juga salam silaturahmi ni bang :)

Balas

ok nih mas widgetnya alexanya...kalau saya pakai add ons tool bar alexa ama webrank di firefox buat liat langsung ranking tiap2 blog yang saya kunjungi

Balas

templatenya ganti ya?

Balas

Wah keren ini mas, ijin nyoba di blog yg 1 saya mas

Balas

begitu ya mas, cukup simpel ya masangnya...

Balas

hahaha *masih sempet ngakak duluan aku miz*
itu kan bukan termasuk tutorial pundi2 modus

Balas

Yang penting optimis deh hehe....

Balas

keren mas..mau check rank alexa jadi tidak perlu mengunjungi situsnya, cukup disini aja.

Balas

mau komen 3 huruf aja deh buat blog ini "WOW"

Balas

Assalam muallaikum wr wb..salam wah mantap nikh Mas Artikel nya ini termasuk
bisa menurunkan Rank Alexa juga ya Mas..? Trima kasih salam sukses
Karrysta™ | Berbagi Inspirasi Dan Pengetahuan

Balas

bisa apalagi nyari cewe orang heuheu

Balas

terimakasih gan atas infonya salam kenal yah gan
maaf gan numpang promonya yah
rajalistrik.com ialah toko online kami yang menjual produk-produk teknik industri terbesar, terlengkap, termurah, dan terpercaya di Indonesia yang menawarkan lebih dari 200.000 item produk dari kurang lebih 200 merek. rajalistrik.com berupaya memudahkan Anda untuk mendapatkan produk-produk teknik yang Anda inginkan dengan jaminan orisinalitas, kemudahan bertransaksi, kecepatan pengiriman, dan harga yang kompetitif.http://rajalistrik.com/

Balas

Kotak alexa, keren keren...

Template blog nya keren, gan...
Kunjungan balik yah... Salam blogger...

Balas

blog yang kreatif :) salam blogger Kang

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Cara Membuat Widget Search Box Alexa di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode