Cara Membuat Kotak atau Form Pencarian di Blog

Minggu, 06 November 2011

Cara Membuat Kotak atau Form Pencarian di Blog - Halo sobat Blogger, pada kesempatan kali ini, kita akan membahas tentang fitur blog yang sangat penting. Fitur pencarian ini tentu akan mempermudah pengunjung blog kita untuk menemukan artikel atau postingan yang ada atau telah dipublish.

Sebenarnya, topik ini sudah banyak dipublis oleh sobat-sobat blogger, terutama yang udah senior dalam dunia blogger. Tapi saya harus mempostingnya karena postingan mendatang, akan membahas topik yang sama tetapi dengan tingkatan yang relatif lebih tinggi (karena kita sudah menggunakan kode style). Kemudian, selanjutnya lagi akan menjurus pada bagaimana cara membuat menu pencarian atau kotak pencarian seperti yang ada di AnekaNEWS.com ini.

Jadi, sebelum kita membahas yang lebih tinggi (ini khusus untuk sobat yang baru bergabung di dunia blogger), kita terlebih dahulu akan membahas kode dasar dalam membuat kotak atau form pencarian di blog blogspot alias blogger.

Karena ini adalah dasar, maka tentu caranya sangat simpel, cukup COPY dan PASTE kode berikut di GADGET HTML blog sobat:

<center>
<form action='/search' id='s' method='get'>
<input name='s' onblur='if (this.value == &quot;&quot;) {this.value = &quot;cari di sini...&quot;;}' onfocus='if (this.value == &quot;cari di sini...&quot;) {this.value = &quot;&quot;}' type='text' value='cari di sini...'/>
<input class='searchbutton' name='searchsubmit' type='submit' value='go'/>
</form>
</center>

Nah, SIMPAN GADGET lalu lihat hasilnya. Cukup sederhana, tapi ini sudah bisa kita gunakan sebagai kotak pencarian.

JANGAN LUPA, Insya Allah postingan berikutnya saya akan membahas tentang CARA MEMPERCANTIK KOTAK ATAU FORM PENCARIAN DI BLOG sesuai selera kita masing-masing. KEMUDIAN, kesempatan berikutnya lagi, Insya Allah secara khusus saya akan membahas CARA MEMBUAT MEMBUAT KOTAK ATAU FORM PENCARIAN yang "LEBIH SERIUS", mungkin seperti yang ada di situs AnekaNEWS.com ini.

Read Post | komentar

Cara Membuat Efek Marquee pada Gadget Bawaan Blogger

Selasa, 25 Oktober 2011

Cara Membuat Efek Marquee pada Gadget Bawaan Blogger - Apakah sobat sudah paham tentang "marquee"? Jika sobat yang belum paham, silahkan sobat browsing di Google, sangat banyak sobat blogger yang memberikan banyak teknik seputar marquee. Secara singkat dan dengan bahasa "aneh", marquee itu adalah 'fitur' yang bergerak ke kiri, ke kanan, ke atas, ke bawah, bolak balik, apakah itu teks, gambar, atau apa saja yang ingin dibuat bergerak atau berjalan.

Apa yang akan saya bahas di artikel ini? Tentunya juga seputar marquee, yang membedakan adalah karena saya akan memaparkan hasil coba-coba-an saya  tentang marquee pada gadget / widget bawaan blogger. Pada teknik marquee yang banyak dijelaskan di blog lain, termasuk blog sahabat saya di atas, itu menjelaskan teknik marquee yang akan dipasang pada "gadget HTML". Sementara artikel ini akan memaparkan hasil utak-atik alias percobaan pada gadget bawaan blogger seperti LABEL / KATEGORI, LINK LIST, ATAU APA SAJA SELAIN GADGET HTML. Bagaimana cara agar gadget bawaan blogger dapat berefek marquee? Itulah pertanyaan inti dalam postingan ini.

Jika kita hendak membuat teks berjalan di blog kita, biasanya kita harus memasang kode tertentu kemudian dipasang atau dipaste pada Gadget HTML. Bagaimana jika kita hendak membuat marquee pada gadget Label (kategori) atau gadget lainnya? Kita harus membuatnya di dalam halaman "Edit Template". Pada kasus yang akan ku jelaskan, saya akan membuat efek marquee pada Label atau Kategori dengan efek "bergerak dari bawah ke atas kemudian berhenti jika teks disentuh denga kursor". Langkah-langkahnya adalah sebagai berikut:

1. Log in dengan akun blogger sobat kemudian masuk pada halaman "Rancangan" > Edit HTML, Setelah itu centang pada kotak "Expand Template Widget", Download Lengkap Template (untuk jaga-jaga jangan sampai gagal)

2. Tekan CTRL F atau F3 pada keyboar sobat (gunakan Mozila) kemudian ketik 'Label1' (pake kutip tidak pake spasi). Jika sudah ketemu, perhatikan kode di bawah ini dan sesuaikan dengan kode yang ada dalam template sobat.

<b:widget id='Label1' locked='false' title='Categories' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
<marquee align='center' direction='up' height='250' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
  <div class='widget-content'>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
        </b:if>
        <span dir='ltr'/>
      </li>
    </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</marquee>
</b:includable>
</b:widget>

Warna Biru adalah id gadget Label atau kategori
Warna Merah adalah kode marquee bergerak dari bawah ke atas kemudian berhenti ketika disentuh kursor
Warna Hitam adalah kode bawaan atau default blogger, tidak usah diubah.

Dari kode di atas, yang kita tambahkan adalah kode yang berwarna merah (perhatikan letak pemasangannya, ini akan gagal jika salah tempat), sobat dapat menggantinya dengan kode marquee dengan efek yang lain, misalnya bergerak ke kanan atau ke kiri. Setelah itu, klik Save Template.

Nah, sangat mudah kan? Jika ada masalah, silahkan berkomentar, jika ini berhasil silahkan dinikmati.

Read Post | komentar

Cara Membuat Buku Tamu di Blogger

Cara Membuat Buku Tamu di Blog Blogger - Halo sobat blogger, berhubung sudah ada beberapa sobat kita yang bertanya "Bagaimana membuat Buku Tamu di blogger?", maka saya memutuskan untuk membuat tutorial sederhana ini.  Sebenarnya sudah banyak sobat blogger yang telah memposting tentang topik yang serupa dengan cara membuat buku tamu di blog, tapi tidak masalah, soalnya sudah beberapa kali ditanya, g enak aja, hihihi.

Kita langsung saja ya sob:

1. Login di blogger dengan aku sobat
2. Masuk pada menu "Rancangan"
3. "Tambah Gadget" >> Pilih Gadget HTML
4. Pastekan kode berikut ini:

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:210px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i275.photobucket.com/albums/jj300/H4L4LYI/cepotgift.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #000000;
background:#999999;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www7.cbox.ws/box/?boxid=370377&amp;boxtag=antrop&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#DBE2ED 1px solid;" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=370377&amp;boxtag=antrop&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#DBE2ED 1px solid;border-top:0px" id="cboxform"></iframe></div>
</div>
<!-- END CBOX -->

<font size="2">
<div style="text-align:right">
<a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</font></div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

5. Klik Simpan dan selesai. 

Catatan:

Kode yang berwarna merah diganti dengan kode CBOX milik sobat. Jika belum mengerti cara membuat CBOX, silahkan sobat browsing sendiri di google ya :) Sudah sangat banyak sobat blogger yang membuat postingan tentang CBOX.

Read Post | komentar

Cara Memasukkan Gambar pada Postingan Blog

Cara Memasukkan Gambar di Postingan Blog - Melengkapi tutorial yang telah diterbitkan, kali ini kita akan berbagi soal cara menyisipkan atau memasukkan gambar pada postingan blog. Untuk membuat postingan klik link ini "cara membuat atau memasukkan tulisan ke dalam blog", untuk memasukkan video silahkan klik link ini "cara memasukkan atau menyisipkan video ke dalam blog".

Membuat posting dengan menyisipkan gambar di dalamnya sama halnya ketika kita berurusan dengan program Microsoft Office Word, kita hanya perlu untuk mengklik tombol browse, yang bertujuan untuk mengambil gambar dari PC komputer/ flash disk kita. langkah-langkahnya adalah sebagai berikut:

a. Klik icon Tambah Gambar:

b. Akan Muncul Kotak dialog BROWSE:

Keterangan:

1. Tombol Browse, untuk mengambil gambar di PC kompuiter, 2. Untuk menyipkan gambar dengan metode URL, 3. Menu pengaturan letak gambar, 4. Menu pengaturan Ukuran gambar, 5. Kotak "Gunakan Tata Letak Ini" harus anda centang, 6. Tombol untuk mulai mengunggah gambar, 7. Tombol untuk membatalkan pengunggahan.

Karena kita sedang ingin mengunggah/ menyisipkan gambar dari komputer, maka bagian yang ditandai dengan no.2 kita abaikan.

c. Mulai langsung dengan meng-klik tombol Browse (yang ditandai dengan no.1, di gambar atas), dan akan muncul kotak browse ke explore:

Keterangan:

1. File yang anda pilih, 2. dan namanya akan muncul di kotak "File Name", 3. Selanjutnya untuk memulai menyisipkan gambar, klik "Open". Dan kli tombol:

d. Tunggu proses pengunggahan selesai sampai muncul tulisan "gambar anda telah selesai". Selanjutnya klik tombol "selesai"

Dan sekarang, gambar telah tersisipi ke dalam postingan anda.

e. Cara lain memosting gambar dengan Kode HTML.

Ada cara lain untuk memosting gambar, yaitu dengan menggunakan kode HTML:

<img src='http://savepageaspdf.pdfonline.com/pdfonline/img/save_as_pdf.gif' alt='Save as PDF' />

Dan seperti ini hasilnya:

Jadi, apabila anda ingin memosting suatu gambar, tinggal menyesuaikan dengan URL gambar yang ingin anda posting dengan mengganti URL yang berwarna Hijau. Tulisan yang ditebalkan itu adalah keterangan dari gambar anda. Apabila anda memosting gambar masjid, maka keterangannya 'masjid', seperti itu contohnya.

*) Tulisan ini diambil (telah diedit) dari blog blogger senior t4belajarblogger.blogspot.com.

Read Post | komentar

Memahami Kode-Kode Dasar HTML

Kamis, 06 Oktober 2011

Memahami Dasar-Dasar HTML - Bagi sobat-sobatku yang ingin mempelajari HTML mulai dari dasar, silahkan baca atau mendownloadnya di sini (tunggu samapai halaman ini loading dengan sempurna):

Cara Membuat Website Dengan HTML!!!

Read Post | komentar