On the blogger

Menambahkan Fasilitas Form Search

Kategori Blog » HTML, Javascript, Tips dan Trik, Widget

Email this Post | Post Feed | Comment Feed | View blog reactions
5 Komentar | Link ke posting ini

Lewat email yang dikirimkan kepada saya, ada seseorang (anonim) bertanya "Bagaimana caranya membuat atau menambahkan fasilitas Form Search di bagian sidebar blog, agar para visitor bisa melakukan pencarian konten post yang terdapat pada blog?".

Lewat email pula, saya menjawab pertanyaan orang tersebut, namun sayang sekali ternyata alamat email tersebut tidak ada.

Jadi karena alasan itulah saya mencoba untuk menuliskan tentang cara memasang atau menambahkan Fasiltas Form search di bagian sidebar blog.

Mudahan-mudahan saja, orang tersebut berkunjung kembali ke blog ini dan membaca tulisan ini, dan selain itu, semoga tips dan trik kali ini bisa membantu bagi kamu atau blogger yang lainnya.

Oke guys, kita langsung saja ke topik pembahasannya.

Adapun kode yang saya gunakan untuk membuat Form Search pada bagian kanan sidebar blog ini adalah (sebenarnya) menggunakan kode HTML, dan dengan bantuan Javascript, saya mengacak kode HTML tersebut sedemikian rupa, namun bukan berarti kode tersebut tidak bisa berfungsi. Hasilnya akan sama kok seperti menggunakan HTML.

(*Note: tentunya saya mempunyai alasan tersendiri mengapa saya mengacak kode tersebut)

Di bawah ini ada 2 kode yang bisa kamu pilih salah satunya untuk menambahkan Form Search pada blog kamu.

1. Ini adalah kode HTML yang telah saya Encript :


<script>
<!--
document.write(unescape("%3Cscript%3E%0D%0A%3C%21--%0D%0Adocument.write%28unescape%28%22%3Cform%20action%3D%22http%3A//urlblog.blogspot.com/search%22%20method%3D%22get%22%3E%0D%0A%3Cinput%20name%3D%22q%22%20size%3D%2225%22%20type%3D%22text%22/%3E%0D%0A%3Cinput%20value%3D%22Search%22%20name%3D%22submit%22%20type%3D%22submit%22/%3E%0D%0A%3C/form%3E%22%29%29%3B%0D%0A//--%3E%0D%0A%3C/script%3E"));
</script>

2. Ini adalah kode HTML yang aslinya (sebelum di Encript)

Caranya :

» Setelah Login dalam blogger.com, langsung ke halaman tab "Page Element" (Elemen Halaman). Kemudian klik "Add page Element" (Tambahkan sebuah Elemen Halaman) di bagian sidebar blog kamu (bisa dikanan atau dikiri). Pilih "Elemen Html/Javascript", lalu masukkan salah satu kode yang ada di atas. (Ingat, jangan kedua-duanya, karena sebenarnya style outputnya sama).

Save atau Simpan hasil perubahan elemen tersebut kemudian lihat hasilnya pada bagian sidebar dari blog kamu.

*Note : ganti teks yang berwarna merah dengan URL dari blog kamu.

Thank's buat seseorang yang di sana...:D

Selamat Mencoba.....

Tips Memodifikasi Navbar pada blogger.com

Kategori Blog » Blogger, CSS, Tips dan Trik

Email this Post | Post Feed | Comment Feed | View blog reactions
4 Komentar | Link ke posting ini

Seperti gambar Favicon, secara standar blogger.com juga telah menyertakan tampilan Navbar secara otomatis pada setiap template yang akan digunakan oleh para pengguna blogger.com.

Tampilan Navbar itu sendiri mempunyai beberapa fungsi yang dapat memudahkan para pengguna blogger.com, diantaranya :

1. Mempunyai fasilitas mesin pencari blog yang memudahkan kamu untuk melakukan pencarian terhadap suatu blog (blogger.com) berdasarkan query yang kamu ketikkan.

2. Menjadi penghubung antara blog yang dibuat sebelum dan sesudah blog kamu dibuat.

3. Memudahkan visitor untuk membuat blog pada blogger.com (jika mereka belum mempunyai blog dan berkeinginan untuk membuat blog)

4. Untuk Login kedalam blogger.com, dan sebagainya.

Dan meskipun tampilan Navbar telah tersedia secara otomatis pada setiap template blogger.com, bukan berarti kita tidak bisa memodifikasi tampilan Navbar tersebut. Karena blogger.com, 100% memberikan kebebasan kepada kita untuk memodifikasi tampilan template yang ada termasuk Navbar.

Nah, sekarang tentunya kamu ingin mengetahui bagaimana caranya memodifikasi tampilan Navbar pada blogger.com ?

Untuk memodifikasi tampilan Navbar blogger.com, ada 2 cara yang bisa kamu lakukan, yaitu :

A. Modifikasi standar blogger.com,
Mengapa saya menyebutkan demikian ? Karena pada cara ini yang dapat kamu lakukan hanyalah mengubah tampilan warna pada Navbar yang telah tersedia pada template blog kamu.

Caranya adalah :

1. Setelah Login kedalam blogger.com, klik "Layout"

2. Pada halaman tab "Page Elements" (Elemen Halaman) klik "Edit" yang terdapat pada bagian Navbar.

3. Setelah Popup Window Navbar terbuka, pilih salah satu tampilan warna Navbar yang kamu inginkan dengna meng-klik radio button yang tersedia.

4. Terakhir klik "Save Your Template" (Simpan Perubahan). Lalu lihat hasilnya dengan meng-klik "View Blog" atau Preview (Pratinjau).

B. Modifikasi Navbar dengan CSS.

Cara ini merupakan cara yang dapat dikatakn paling banyak digunakan oleh para blogger. Dengan menggunakan Style CSS, ada tiga (3) cara yang bisa kamu lakukan untuk memodifikasi tampilan Navbar blogger.com. Antara lain :

1. Menghilangkan Navbar
Caranya adalah tambahkan Style CSS di bawah ini kedalam template blog kamu.

/* NAVBAR STYLES
----------------------------------------------- */
#navbar {
height:0px;
visibility:hidden;
display:none;
}

*Note: Letakkan class CSS diatas diantara tag <head> dan tag </head>.

2. Show Navbar onmouseover
Caranya adalah tambahkan class CSS di bawah ini kedalam template blog kamu.

/* NAVBAR STYLES
----------------------------------------------- */
#navbar-iframe {
opacity:0.0;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100, FinishedOpacity=100)
}

*Note: Letakkan class CSS diatas diantara tag <head> dan tag </head>. (Hasilnya bisa kamu lihat pada blog ini, coba arahkan cursor mouse ke bagian paling atas dari blog ini)

3. Membuat tampilan Navbar menjadi Transparant
Untuk cara yang ketiga ini, hasil dari tampilan Navbar yang akan kamu peroleh adalah Navbar akan terlihat transparant. Caranya juga sama seperti kedua cara yang diatas.

/* NAVBAR STYLES
----------------------------------------------- */
#navbar-iframe {
opacity:0.2;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:0.5;
filter:alpha(Opacity=100, FinishedOpacity=50)
}

Simpan perubahannya kemudian lihat hasilnya di blog kamu.

Semoga Tips dan trik ini bisa membantu kamu.

Selamat mencoba....

Add Recent Comments

Kategori Blog » Blogger, Tips dan Trik, Widget

Email this Post | Post Feed | Comment Feed | View blog reactions
3 Komentar | Link ke posting ini

Setelah kamu menambahkan Widget buat Posting blog terbaru kamu, maka sekarang melalui artikel ini (caranya bisa kamu lihat disini), kamu juga bisa menambahkan widget untuk komentar - komentar terbaru pada setiap posting blog kamu.

The Recent Comments Widget displays recent comments in your sidebar.

Bagaimana caranya...?

Langsung aja klik tombol "Add Recent Comments to Blog" berikut ini untuk menambahkan widget "Recent Comments" ke dalam blog kamu.

Note : Thank's to Hans and Hackospere for this Widget.