Membuat Search Engine Blog - code html search engine blog

tahukah anda jika blog bisa anda pasangi search engine atau biasa di sebut kotak pencarian informasi, caranya sangatlah mudah dan gunanya sangat bermamfaat untul memudahkan pengunjung blog anda menemukan artikel yang mereka cari dalam blog anda menggunakan fitur search engine blog seperti contoh di bawah ini ,  untuk menemukan artikel pada blog secara singkat selain menggunakan daftar isi, oh ya anda juga bisa baca artikel tentang cara membuat daftar isi blog.

jika sobat  ingin menampilkan form pencari untuk blog anda sendiri, nih ada kode praktis yang ga ada salahnya anda coba sekedar "mempercantik Blog" anda biar tampak lebih keren :-)

Hasilnya nanti akan seperti di bawah ini :

---

Sedangkan kodenya,copy paste kode di bawah ini :

<form id="searchform" action="http://blogger-marosblog.blogspot.com/search" name="searchform" method="get"> <input id="s" value="" name="q" type="text"> <input id="searchsubmit" value="Search"type="submit"> </form>

---

keterangan : ganti Kode link url blog saya http://blogger-marosblog.blogspot.com/search, dengan alamat url blog anda sendiri, tapi jangan lupa tambahin kode /search ya..

Sedangkan Value "Search"anda bisa ganti menjadi "Go" atau "Cari" atau yang lain.

demikian cara membuat search engine blog semoga bermamfaat

Cara Membuat Tex Area pada Blog - Membuat Teks Area

Rekan netter yang masih tetap ceria dan enjoi kali ini saya akan kembali berbagi informasi yang masih seputar belajar blog khususnya bagi pemula, nah kali ini temanya adalah bagaimana cara membuat tex area pada blog, "Text Area" biasanya digunakan oleh para blogger untuk menyimpan kode-kode Html/Javascript dan teks lainnya dalam kolom agar bisa di copy oleh para pengunjung yang mencari kode yang mereka inginkan.

Nah jika anda memerlukan kode html teks area anda bisa gunakan kode html silahkan anda Copy kode di bawah ini :

---

<p align="center"><textarea name="code" rows="5" cols="20" readonly>

silahkan anda masukkan kode yang anda ingin tampilkan dalam format ini..!

</textarea></p>

---

Keterangan :
rows="5", menunjukan tinggi dari kolom text area.
Cols="20", menunjukan lebar dari kolom text area.
ganti tulisan warna biru dengan kode html atau kode teks yang ingin anda muat dalam kolom seperti contoh di bawah ini anda

Hasilnya akan seperti di bawah ini :
 

silahkan anda masukkan kode yang anda ingin tampilkan dalam format ini..!

Nah demikian cara membuat teks Area atau cara membuat TEX AREA semoga artikel ini bermamfaat

Cara Mengganti Background Blog Dengan Gambar

Pada tutorial kali ini,kembali saya share info seputar blog khusus bagi teman yang ingin mengganti background Blog-nya dengan Gambar sesuka anda  nah.. bagaimana caranya mengganti background blog di blogspot? Contoh nya seperti blog saya ini,awalnya background template ini abu-abu ,berhubung saya agak bosan,ya udah mending saya ganti background nya saja biar keliatan lebih fresh .

Buat teman blogger yang mungkin udah bosan dengan tampilan blog nya, tenang sobat bisa mengatasi kejenuhan dengan mengganti background Template blognya sesuai selera dan keinginan.

baik seperti apa Cara Mengganti background Blog? kita liat dibawah ini :

Disini kita mengambil contoh pada background body di template blog kita, cari kode body { Nah di sana terdapat kode background,

body{
background:#ded8c0;
color:#28261A;
font:12px verdana,arial,Sans-erif;
text-align:left;
margin:0;
line-height:1.6em;
}

Setiap blog terkadang agak berbeda sih Backgroundnya, nah untuk mengganti backborund misal dengan background / gambar ini :

http://4.bp.blogspot.com/-dNS6cFsK2M4/TuwkW0K4RJI/AAAAAAAAAYk/hsaP92g98TI/s1600/wallpaper.jpg

Maka kalian cukup menambahkan url (http://4.bp.blogspot.com/-dNS6cFsK2M4/TuwkW0K4RJI/AAAAAAAAAYk/hsaP92g98TI/s1600/wallpaper.jpg) repeat-x;  pada background tersebut.

Jadi :

body{
background:#ded8c0 url(http://4.bp.blogspot.com/-dNS6cFsK2M4/TuwkW0K4RJI/AAAAAAAAAYk/hsaP92g98TI/s1600/wallpaper.jpg) repeat-x;
color:#28261A;
font:12px verdana,arial,Sans-erif;
text-align:left;
margin:0;
line-height:1.6em;
}

Gambar Background kamu juga bisa tetap walaupun scroll mouse kamu gerakkan ke atas atau kebawah. Tinggal kamu ganti repeat-x; menjadi repeat-x top left fixed;

Atau yang paling saya suka adalah menggunakan gambar kecil namun bisa menjadi besar dan tetap. Yakni kamu cari dulu gambar kecil, setelah itu seperti biasa, tinggal kamu rubah repeat-x; menjadi repeat scroll 0 0;

Nah demikian artikel tentang "Cara mengganti background blog dengan gambar", semoga bermanfaat.

Cara Membuat Contact Us di Blogspot - Tips Blogger

Kali ini saya akan memberikan Tips Blogger yang mana mungkin akan sangat berguna untuk blog anda. tutorial Cara membuat Contact Us di blogspot atau wordpress yaitu dengan bantuan situs atau website pembuat kode html contact form. Saya rasa semua blogger pasti "memberikan menu contact us pada blog" mereka. Form ini yaitu memberi layanan untuk memberi Customer Service atau apalah istilahnya yang jelas layanan ini sangat penting untuk blog anda.

Cara Membuat Contact Us di Blog

• Siapkan email anda untuk proses pendaftaran.
  Kunjungi http://123contactform.com dan lakukan pendaftaran disana, ingat pilihlah yang gratis.
• Atau bisa juga langsung sign in mith google.
• Klik "my form" >> klik "+New Form" >> klik "Contact Form"
• Beri judul pada menu contact Anda lalu edit sesuka hati anda

• Kalau sudah klik publish form dan pilih Blogger

 

• copypaste kode html seperti contoh diatas di postingan atau laman yang anda buat
• Selamat anda sudah memiliki fitur Contact Us

 Sekian semoga artikel tentang Cara Membuat Contact Us ini bermamfaat

Cara Membuat Daftar Isi Blog - Daftar Isi Blog dengan Scroll

Daftar isi blog adalah sebuah fitur untuk memudahkan pengunjung mengeksplorasi isi sebuah blog tujuannya agar pengunjung bisa mengetahui seluruh isi postingan dari sebuah blog. Daftar isi Blog biasanya ada yang berdasarkan label atau kategori ada juga yang berdasarkan tanggal publikasi artikel.

namun pada kesempatan kali ini saya akan membahas bagaimana "cara membuat daftar isi dengan scroll" atau biasa juga dengan sebutan tombol gulir. contoh Gambar di bawah ini

Membuat daftar isi sederhana dengan Scroll atau tombol gulir

Daftar isi Blog dengan scroll ini tampilannya sangat sederhana dan tidak begitu banyak berat loadingnya. Menampilkan arsip atau isi blog berdasarkan tanggal dan bulan posting artikel. Cara membuatnya cukup mudah, bisa sobat masukkan di halaman statis, postingan, sidebar atau footer sekalipun. Khusus di halaman statis dan postingan harus masuk ke menu HTML (bukan compose). Silakan sobat copy kode berikut ini:

<div style="background-color: none; border: 1px solid #CCC; height: 400px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 95%;"><div align="center"><span style="font-size: medium;">Daftar Isi</span></div><script src="http://julak-project.googlecode.com/files/dafisiscroll%20.js"> </script><script src="http://blogger-marosblog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"> </script></div>

Jangan lupa mengganti nama blog saya blogger-marosblog (kode warna hijau) dengan nama blog sobat blogger sendiri. Silahkan masukkan/ paste di sidebar atau footer.

Catatan;

• Untuk ukuran tinggi lihat angka 400px silakan dimodifikasi
• untuk lebar kotak daftar isi ditunjukkan dengan angka 95% jadikan 100% atau dikurangi.
• Kata Daftar Isi bisa sobat ganti juga

sekian .semoga artikel cara membuat daftar isi Blog bermamfaat sampai jumpa di lain kesempatan

Cara membuat kotak Komentar Facebook Pada Blogspot

teman blogger yang lagi semangat kalau mau ada komentar di blognya dan bisa di share di facebook teman bisa baca artikel ini bagaimana Cara membuat kotak komentar Facebook di blog blogspot, cara membuatnya sangat mudah. ikuti saja petunjuk yang saya share di sini oke.  

Seperti biasa anda masuk dulu ke Account Blogger, klik Rancangan >> Edit HTML. Jangan lupa centang kotak expand widget template. Setelah terbuka kotak Edit HTML cari kode berikut <b:includable id='status-message'> dan diatas kode tersebut sobat akan menemukan kode ini </b:includable>

agar lebih cepat mendapatkan kode yang saya maksud diatas tekan tombol cntl + F kemudian copy paste kode ini <b:includable id='status-message'> kedalam kotak pencarian

Tahap selanjutnya Copy paste Kode dibawah ini dan letakan diatas kode  </b:includable>

<b:if cond="data:blog.pageType == &quot;item&quot;"> <div id='fb-root'/>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

<fb:comments expr:href='data:post.url' num_posts='5' width='500'/>

</b:if>

Langkah Terakhir Save Template anda dan selesai sehingga hasilnya jika anda membuka halaman postingan  seperti tampilan dibawah.