King Files

Membuat Search Box Blogspot Dengan Mudah dan Cepat

Search Box adalah sebuah tool yang bisa dikatakan wajib ada pada sebuah website atau pun blog agar pengunjung mudah untuk mencari dan menemukan artikel yang mereka butuhkan di dalam website atau blog kita. Namun terkadang ketika kita mendownload template entah itu blogspot atau yang lain setelah kita pasang ternyata tidak ada tombol search tersebut padahal kita sudah suka dengan desain template tersebut dan hanya karena tidak fitur search box kita jadi kecewa berat.

Tapi tenang, Versifull punya solusi jitu untuk hal ini. Kali ini saya akan membagikan sebuah cara untuk membuat search box secara manual di blogspot kita, dan tentunya tampilannya ya lumayan lah ga jelek jelek amat ko, dan bisa dimodifikasi jika kalian bisa atau mahir edit script nya, hehe

Ok ga usah banyak omong langsung ajah ikuti langkah - langkahnya berikut :

1. Masuk ke Blogger anda

2. Klik Layout (Kalo bahasa Inggris) atau Tata Letak (Kalau bahasa Indonesia)

3. Klik Add Gadget atau Tambah Gadget di tempat kita akan menambahkan tombol search nanti

4. Pilih HTM/Java Script

5. Copy script dibawah ini :

<!-- KODE SEARCH BOX VERSIFULL RESPONSIF  -->
<style>
#search-box {
position: relative;
width: 100%;
margin: 15px 0px 20px 0;
}

#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>

<div id=search-box>
<form action=/search id=search-form method=get target=_top>
<input id=search-text name=q placeholder=Search here... type=text/>
<button id=search-button type=submit><span>Search</span></button>
</form>
</div> 

6. Kemudian Paste di HTML/Java Script yang kita buat tadi

7. Simpan

8. Selesai

Lihat hasilnya Search Box sudah muncul di blog kita. Untuk contoh langsungnya bisa kalian lihat di blog Versifull ini ada Search Box nya :)

Baca juga : Cara Pasang Iklan Adsense di dalam Postingan

Sekian tutorial tentang Cara Membuat Search Box Blogspot Dengan Mudah dan Cepat. Semoga dapat membantu dan menambah wawasan kita semua. Jangan lupa like dan sharenya atau jika ada pertanyaan dan saran bisa berkomentar dengan bahasa yang baik dan sopan.

Available link for download

Menambah Scroll Box di sidebar Blogspot

Menambah Scroll Box
coba lihat pada sidebar sebelah kanan, pada kategori Berita Bisnis...disitu saya menambahkan sebuah scroll box untuk kotak iklan dari kumpul blogger sehingga iklan yang tampil seolah-olah bisa diatur sedemikian rupa sehingga terlihat rapi

secara default jika script dari kumpul blogger langsung dipasang maka tampilannya akan melebar dan panjang kebawah dan terlihat nggak rapi, maka dari itu agar terlihat rapi kode dari kumpul blogger harus dimasukkan ke sebuah element HTML yaitu scroll box.

berikut ini adalah cara untuk menambahkannya:
- login ke blogger
- masuk ke tataletak dan tambahkan sebuah widget untuk javascript/html
- widget bisa diletakkan di sidebar atau body
- copast kode berikut ini :
<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee"> --masukkan kode kumpulblogger disini--</div>
- masukkan kode tersebut diatas pada widget javascript/html yang baru saja anda tambah
- letakkan kode kumpulblogger sebelum tag penutup dari "div"
- simpan
Keterangan :
- overflow:auto --> kode ini akan membuat scroll box otomatis memanjang kebawah jika isinya melebihi ukuran standart
- width -->digunakan untuk mengatur lebar dari scroll box
- height --->digunakan untuk mengatur tinggi dari scrool box
- padding --->digunakan untuk mengatur spasi
- border -->mengatur garis tepi, jika bernilai 1 maka garis tepi (kotak) akan dimunculkan
- solid --> warna






Share

Available link for download

Mengatasi LIKE BOX Facebook Yang Bermasalah

Beberapa hari yang lalu, saya sempat merubah template blog ini dengan template baru, dan ketika saya mau memasukkan widget "LIKE BOX Facebook" tiba-tiba tidak muncul, hal ini disebabkan karena FB  melakukan upgrade kode-kode HTMLnya, sekarang Facebook mewajibkan kita memasang kode tersebut di dalam blog kita. karena sebab itulah saya kepengen share masalah ini.


Langkahnya :

masuk ke plugin Like Box :
http://developers.facebook.com/docs/reference/plugins/like-box/
dan isi lah form disana sesuai dengan formatnya.

• Facebook Page URL : isi dengan URL Facebook Halaman sobat 
• Width : lebar form yang diinginkan (sesuaikan dengan blog sobat) 
• Height : tinggi form 
• Show Faces : [centang] jika menginginkan profil teman kelihatan 
• Border Color : [kosongi saja] 
• Stream : [kosongi saja, jika sobat tidak menginginkan status di pasang] 
• Header : [kosongi saja, supaya tidak menampakkan tulisan "Temukan kita di Facebook"]

setelah semua selesai, silahkan klik "Get Code", maka akan muncul gambar seperti di bawah ini (perbesar lah gambarnya dengan cukup menge-klik saja) :

Setelah ini, coba copy-paste code no. 1 (a) di bawah tag pembuka <body> blog sobat,

jika ternyata mengalami masalah seperti gambar di atas ini, coba ganti saja code dari facebook :

js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&appId=32*************";

diganti

js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1;app Id=32*************";

Setelah "Simpan Template" dan sobat tinggal membuat widget HTML di halaman rancangan, dan masukkan kode plugin like box yang no. 2 (b).

Available link for download