Attractive Alexa search box for Blogger and websites

Lihat dan hitung, seberapa banyak aplikasi Android yang Anda instal di smartphone Anda? 

Pernahkah terbersit di benak Anda bagaimana cara membuat aplikasi-aplikasi tersebut?

Apakah Anda Saat Ini Ingin Sekali Bisa Bikin Aplikasi Android Sendiri? Seperti aplikasi game edukasi, media pembelajaran, aplikasi berbasis sensor, aplikasi multimedia, dan lain sebagainya?

Tetapi

1. Tidak Ngerti Coding

2. Tidak Tahu Computer Programming

3. Tidak Paham Bahasa Pemrograman Android

4. Dan Sama Sekali Bukan Lulusan IT?

Jangan Khawatir ...

Ternyata, bikin aplikasi Android itu SANGAT MUDAH, bahkan bagi Pemula sekalipun.

Sekarang Anda bisa bikin aplikasi Android dengan Cepat, bahkan TANPA HARUS CODING.

Tak peduli apapun latar belakang Anda, bikin aplikasi Android itu MUDAH, semudah bermain Puzzle.

Anda Hanya Perlu 4 Langkah berikut ini :

1. Drag & drop komponen-komponen yang dibutuhkan

2. Percantik tampilan aplikasi dengan mengatur layout dan desain tampilan

3. Susun blok-blok kode programnya, dan

4. Build aplikasi Anda jadi file instalasi *.APK

Lantas, Bagimana Cara Memulainya?

Mudah kok, karena sudah hadir untuk Anda Di Sini :

"Video Tutorial Android Tanpa Coding untuk Pemula"

Video tutorial yang membahas cara membuat aplikasi Android dengan sangat MUDAH, CEPAT, & TANPA CODING menggunakan tools App Inventor 2. 

Good day for everyone! Today I post a nice widget tutorial.This widget tutorial is about Alexa. It is not necessary to explain about Alexa Inc.Before this post, I posted a widget tutorial, How to display Alexa traffic rank badge blog and website.In this time i give you an Attractive Alexa Traffic Rank Search Box.It shows every available search queries like in Alexa. I created this Search box using CSS and HTML. Adding this widget on your blog or website you can attract more visitors and grow your readerships and also give new experience for your readers.Follow bellow steps to add Alexa search box widget on blogger easily.

Demo

1.) Sign in to your blogger account.
2.) Go to Blogger Dashboard >>Page Element( Layout ).
3.) Now Click on "Add Gadget" and then Select on "HTML/JavaScript".
4.) Now Paste Bellow codes on 'HTML/JavaScript'

<style>
.border { border: 1px#ccc;border-style:solid; margin:1em 4em 0em 1em;width:90%;padding:10px 2px 3px 5px;-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;}
.border:hover{
-moz-box-shadow: inset 1px 1px 10px 1px rgba(001, 001, 222, 0.4);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(001, 001, 222, 0.4);
box-shadow: inset 1px 1px 10px 1px rgba(001, 001, 222, 0.4);
}
.balexa {
font: bold 12px Tahoma, Geneva, sans-serif,"times new roman";
font-style: normal;
color: #ffffff;
background: #186adf;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #15a299;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 7px 15px;
cursor:pointer;
margin: 5px 0 0 3px auto;
}
.balexa:active {
cursor:wait;
position: relative;
top: 2px;
}
.balexa::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}

.blsbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
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>
<div class='border'>
<form method="get" action="http://www.alexa.com/data/details/traffic_details" target="_blank" rel="nofollow">
<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>
</div>

Recommend : Show or Hide widgets in Any Pages In Blogger

5.) Now Save your "HTML/JavaScript".

I think that this widget would be helpful for you.If you want to know anything about this Alexa search box widget, Feel free to ask me anything via comment.Happy and blessing buddies :)

Pengelola Blog : ABDUL WAHAB

Judul : Attractive Alexa search box for Blogger and websites
Ditulis oleh : Kejutan Internet pada hari
Rating Blog : 5 dari 5
Terima kasih Anda telah membaca artikel tentang Attractive Alexa search box for Blogger and websites
Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman anda.
Namun jangan lupa harap memberikan link aktif dofollow yang mengarah ke URL ini ya
https://kejutaninternet.blogspot.com/2013/03/attractive-alexa-search-box-for-blogger.html

Dan Terima kasih sekali lagi atas kunjungan Anda.

Kritik dan saran atau apapun bisa anda sampaikan melalui kotak komentar.
Dan mohon maaf jika komentar atau pertanyaan tidak bisa cepat saya respon,
karena Saya tidak bisa selalu online selama 24 Jam.


Mau Di Buatkan Blog Siap Pakai Seperti Ini ?.

Artikel Terkait