1. Login ke blog milik sobat

2. Klik Rancangan

3. Klik Edit HTML

4. Kemudian cari kode css berikut ini:

/*Header
===================================
*/#header-wrapper{
width:900px;
margin:0 auto 0px;
background:$bgheader color url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}
#header-inner{
width:900px; background-position:center;
margin-$start Side:auto;
margin-$end Side:auto;
}
#header{
margin:0px;
text-align:left;
color:$page title color;
}

5. hapus kode di atas, lalu ganti dengan kode berikut ini :

/*Header
===================================
*/#header-wrapper{
width:900px;
margin:0 auto 0px;
background:$bg header color url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}
#head-inner{
width:600px;
background-position:left;
margin-left:auto;
margin-right:auto;
float:left;
}
#header{
margin:0px;
text-align:left;
color:#ffcc66;
}
#r_head{
width:300px;
float:left;
padding-top:10px;
}

6. kemudian kebawah lagi dan temukan kode css seperti ini:

<div id='header-wrapper'>
<b:section class='header id='header' maxwidgets='1' show add element='no'>
<b:widget id='Header1'> locked='true' title='TestBlog(Header)' type='Header1'/>
</b:section>
</div>

hapus kode diatas dan gasnti dengan kode di bawah ini:

<div id='header-wrapper'>
< div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' show add element='no'>
<b:widget id='Header1' locked='true' title='TestBlog(Header)' type='header'/>
<b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

7. Klik Simpan

Selesailah kita membuatnya...

Selengkapnya

Label/Kategori: Blog tutorial

Membuat background gambar pada postingan

Pada postingan yang lalu kita pernah membahas soal Mengganti Background Warna Pada Postingan, maka pada postingan kali ini kita akan membahas soal mengganti background gambar pada postingan, jika sobat ingin mempunyai background postingan berupa gambar, langkah pertama yang harus di ingat yaitu sobat harus punya gambar yang akan di jadikan background. Trus gambar tersebut harus di upload ke hosting tempat menyimpan gambar. Bagi yang belum punya hostingan gambar gratis silahkan sobat daftar dulu di http://www.photobucket.com dan jangan lupa untuk meng copy alamat url gambar yang di upload tersebut.
Ketika sobat akan memulai untuk membuat postingan, pilih tab Edit HTML jangan pilih Compose. Awali postingan anda dengan

<div style="background:url('http://arisyudha.hexat.com/images/aryu_06.jpg') no-repeat;">
tuliskan text yang sobat ingin beri background gambar disini dan akhiri dengan kode
</div>

Ganti alamat url yang berwarna merah dengan alamat gambar yang ingin sobat jadikan background. Penggunaan kode no-repeat tentu saja apabila gambar memiliki ukuran besar dan tidak mau di tampilkan berulang-ulang.
Seperti halnya pada background dengan warna.

Sebagai contoh, saya ingin membuat posting dengan background yang beralamat di http://arisyudha.hexat.com/images/aryu_06.jpg

maka hasilnya akan seperti ini :

membuat background gambar pada postingan
Membuat background gambar pada postingan
Membuat background gambar pada postingan
Membuat background gambar pada postingan
Membuat background gambar pada postingan

Mudah bukan...? Sekarang lihat postingan sobat yang sudah di beri background gambar.

Selengkapnya

Label/Kategori: Blog tutorial

Memodifikasi search engine/ kotak pencarian

Apa itu search engine..?
Search engine adalah sebuah kotak pencarian yang memudahkan pengunjung mencari apa yang ingin mereka cari dalam blog sobat, search engine kini sudah di tambahkan oleh team blogger untuk memudahkan para blogger yang ingin memasang kotak pencarian didalam blog mereka, caranya seperti ini:


1. Masuk ke blog milik sobat

2. Klik Rancangan

3. Klik elemen laman

4. Kemudian klik laman bertulisankan "kotak penelusuran"

5. Tambahkan ke blog

6. Selesai


Tetapi ada juga para blogger yang ingin kotak pencariannya di modifikasi oleh mereka sendiri, karena kotak yang sudah di sediakan oleh blogger tidak bisa di rubah..

Nah, para postingan kali ini kita akan membahas cara memodifikasi kotak komentar dengan karya kita sendiri, selain mempercepat pencarian didalam blog kita, juga bisa membuat para pengunjung betah dengan keindahan blog kita..

Buat sobat yang ingin memasang kotak pencarian buatan kita sendiri silahkan ikuti langkah - langkahnya berikut ini:


1. Login ke blog sobat

2. Klik Rancangan

3. Klik elemen laman

4. Tambah elemen laman

5. Cari dan Klik laman bertuliskan HTML/JAVA SCRIPT

6. Lalu paste kan kode di bawah ini didalam kolom yang sudah disediakan

<p align="left"><form id="searchthis" action="http://lovelizzers.blogspot.com/search" style="display:inline;"method="get"><strong>Apa Yang Anda Cari Di Blog Ini<br /></strong><input id="b-query" maxlength="255" name="q" size="20" type="text" /><input id="b-searchbtn" value="CARI..!" type="submit" /></form></p>

Ganti tulisan yang berwarna biru dengan alamat blog sobat
Sedangkan tulisan yang berwarna merah bisa sobat ganti dengan tulisan apa saja
yang sobat inginkan

7. Klik simpan selesai

Sekarang lihat blog sobat dengan karya sobat sendiri...!

Selengkapnya

Label/Kategori: Blog tutorial

Memasang tanggalan/kalender di blog

Untuk memasang sebuah kalender kita bisa memanfaatkan berbagai situs penyedia kalender gratisan. Situs seperti ini sangatlah banyak, tentunya mereka berlomba dengan menampilkan kalender-kalender yang menarik untuk di lihat. Agar tidak terlalu bingung mencarinya, saya berikan contoh satu saja
yaitu www.free-blog-content.
Silahkan coba sobat kunjungi situs tersebut !
Kalender yang di sediakan sangat beragam. Silahkan klik kategori yang ada untuk memilih bentuk kalender yang sobat sukai, kemudian copy kode yang di berikan di bawah gambar kalender lalu paste pada notepad untuk nanti keperluan di simpan di blog. salah satu contoh gambar yang di sediakan seperti ini



Untuk cara memasangnya seperti ini :

1. Sign in di blog milik sobat bukan milik saya..!!

2. Klik menu Rancangan

3. Klik menu Elemen Laman

4. Klik tulisan Tambahkan sebuah Elemen Laman

5. Klik tombol bertuliskan HTML/
JavaScript

6. Copy kode yang tadi telah ada di notepad lalu paste pada kolom yang di sediakan

7. Klik tombol SIMPAN PERUBAHAN

8. Pindahkan elemen yang baru di buat pada tempat yang sobat inginkan, lalu klik tombol SIMPAN

9. Selesai.

Selengkapnya

Label/Kategori: Blog tutorial

Membuat link dalam bentuk text

Apa itu link...?
Link adalah suatu teks atau
gambar yang berisi sebuah alamat url, jika di klik maka akan membawa kita ke alamat url yang ada didalam link tersebut. link tersebut bisa berbentuk sebuah ataupun sebuah gambar.
sebagai contoh, saya akan membuat link dalam bentuk tulisan seperti ini "ingin tau tentang cara membuat text area" silahkan sobat "KLIK DISINI"

Jika sobat meng klik link yang bertuliskan "KLIK DISINI" tersebut, maka sobat akan diarah ke halaman dimana artikel tersebut berada.

Cara membuatnya sangat mudah, dan tidak membutuhkan waktu yang lama, begini cara membuatnya...!

<a href="http//lovelizzers.blogspot.com/2010/06/membuat-text-area.html">Klik Disini</a>

text berwarna biru sobat ganti dengan alamat milik sobat, sedangkan text berwarna merah bisa sobat ganti sesuai keinginan sobat contohnya klik disini, next, atau sama seperti alamat url tersebut.

Selengkapnya

Label/Kategori: Blog tutorial

Cara buat contact form

Contact form berfungsi untuk menghubungkan sobat dengan pengunjung dimana pada contact form tersebut dapat pengunjung dapat menghubungi sobat melalui sebuah email, entah untuk bertanya pada sobat ataupun ingin sekedar bersilaturahmi dengan sobat.
Di internet banyak sekali provider yang menyediakan CONTACT FORM secara gratis, tapi kali ini kita akan membahas cara membuat contact form di http://emailmeform.com

Untuk membuatnya ikutilah cara berikut ini :

1. Silahkan kunjungi situs http://www.emailmeform.com

2. Klik Sign up

3. Isilah form yang ada dengan data diri anda :
First Name : isi dengan nama depan
Last Name : isi dengan nama belakang
Username : isi dengan username yang di inginkan
Password : isi dengan kata sandi
Retype Password : isi ulang kata sandi
Your Email : isi dengan alamat email anda

5. Klik tombol Sign up

6. Buka email kiriman dari EmailMeForm untuk verifikasi

7. Setelah proses verifikasi selesai, silahkan klik tulisan click here untuk menuju halaman panel anda.

8. Klik tulisan Create new form

9. Ada beberapa form yang perlu di sisi :

Web form Name : isi dengan nama yang anda inginkan, atau
biarkan saja juga bisa

Recipients Email : isi dengan alamat email yang akan
menerima pesan.

Spam Email address : isi dengan alamat email yang di inginkan untuk menerima pesan spam

Thank you page : isi dengan alamat URL blog anda.

Number of fields : biarkan 4 saja.

10. Klik next terus, jika tidak ada lagi yang ingin di rubah

11. Klik Finish

12. Klik GET THE HTML CODES

13. Copy kode yang ada pada text area dan paste kan di elemen sobat, di postingan bisa di gadget juga bisa

Selamat mencoba...!

Selengkapnya

Label/Kategori: Blog tutorial

Cara menghilangkan icon obeng dan tang

Quick Edit adalah cara cepat pada blog anda, quick edit bergambar obeng dan tang. Berfungsi untuk melakukan editing terhadap elemen blog, tinggal meng klik saja icon nya dan kita bisa langsung mengeditnya. Icon tersebut
sebenarnya hanya bisa di lihat apabila kita sedang login ke blogger saja, sedang pengunjung yang lain tidak bisa melihat icon tersebut.
Namun ternyata ada beberapa blogger yang tidak suka dengan
kehadiran icon tersebut dan ingin menghapusnya. Apakah kita bisa menghapus icon tersebut?
Jawabannya tentu saja bisa, dan sangatlah gampang karena kita hanya melakukan perintah agar icon itu tidak di munculkan dengan hanya manambahkan sedikit kode pada kode CSS template kita. Ingin tahu kodenya seperti apa,
nih ini dia kodenya, coba pasang saja di Style Sheet CSS anda :

.quickedit{
display:none;
}

Caranya seperti ini :
1. Login ke blogger
2. Klik Rancangan
3. Klik tab Edit HTML
4. Cari kode seperti ini :
]]></b:skin<
5. Copy paste kode dibawah ini tepat di atas kode yang tadi :

.quickedit{
display:none;
}

6. Klik Simpan template
7. Selesai.
Mudah kan...? Sekarang lihat blog sobat sudah tidak ada icon quick edit..

Selengkapnya

Label/Kategori: Blog tutorial

Memasang pesan selamat datang di blog

Ketika kita berkunjung ke blog orang, kita tidak langsung masuk ke halaman blog yang timbul adalah sebuah script alert, script alert ini bisa sebuah kata atau ucapan seperti ucapan "SELAMAT DATANG DI BLOG SAYA"
setelah kita membaca script tersebut barulah kita masuk ke halaman tersebut.
Untuk memasang fasilitas alert di blog sangatlah mudah. Contoh script yang di pasang seperti ini :

<script language='JavaScript'>alert("Selamat datang di blog saya");</script>

ganti tulisan "selamat datang di blog saya dengan tulisan yang sobat inginkan,
jika sobat ingin menambahkan script tambahkan sesuai dengan keinginan. Misal
ingin memasang dua buah script alert, maka scriptnya jadi seperti ini :

<script language='JavaScript'>alert("Selamat datang di blog saya");</script<
<:script language='JavaScript'>alert("dan selamat menikmati");</script>

mudah bukan..?

Untuk memasangnya di blog sobat, ikuti langkah-langkahnya berikut ini:
1. Login ke blogger.
2. Klik Rancangan.
3. Klik tab Edit HTML
4. Cari kode </head>
5. Copy paste kode dibawah ini di atas kode </head>

<script language='JavaScript'>alert(Selamat datang di blog saya);</script>

ganti kata "Selamat datang diblog saya" dengan kata yang sobat inginkan
8. Klik tombol SIMPAN TEMPLATE.
9. Selesai. Silahkan buka blog sobat dan lihat hasilnya.

Selengkapnya

Label/Kategori: Blog tutorial

Membuat text area

Apa itu text area..?
Text area adalah sebuah kotak yang didalamnya berisi text atau kode-kode HTML.
Text area ini berfungsi untuk menyimpan text atau tulisan dengan membentuk area baru. Biasanya text sengaja diberikan kepada pengunjung blog agar bisa di copy.
Untuk membuat text area,

sebagai contoh silahkan sobat lihat text area di bawah
ini :

Tulislah text ataupun kode-kode sebanyak mungkin untuk di copy oleh pengunjung sobat

Nah untuk membuat text area seperti diatas, copy dan simpan kode dibawah ini agar sobat bisa membuat text area

<p align="center"><textarea name="code" rows="6" cols="20">Tulis text atau kode-kode yang ingin di tampilkan didalam text area</textarea></p>

Keterangan :
Tulisan yang berwarna putih sobat ganti dengan text ataupun sebuah kode yang ingin sobat masukkan di dalam textarea tersebut

rows="6" adalah tinggi dari text area, jika sobat ingin lebih tinggi ganti angka tersebut dengan angka yang lebih tinggi nilainya.

Cols="20", adalah lebar dari text area. Jika sobat ingin text area yang lebih lebar, ganti angka tadi dengan angka yang lebih besar nilainya.

Selamat mencoba...!

Selengkapnya

Label/Kategori: Blog tutorial

Memasang jam di blog

Jam adalah salah satu aksesori yang blog yang bisa mempercantik blog kita untuk di lihat. Jam ini bisa anda dapatkan secara gratis pada situs
http://www.clocklink.com
bagi sobat yang ingin blognya di pasang jam, silahkan
ikuti langkah-langkah berikut :
1. Silahkan kunjungi situs http://www.clocklink.com atau Klik Disini
2. Jika sudah berada pada situs tersebut, silahkan klik tulisan Want a clock on your Website ?
3. Silahkan anda melihat-lihat dulu model dari jam yang tersedia, yaitu mulai dari Analog, Animal, Animation, dll
4. Jika di rasa sudah menemukan model jam yang anda sukai
5. Klik Accept
6. Pilih waktu yang sesuai dengan tempat anda di samping tulisan TimeZone.
7. Set ukuran jam yang anda sukai di samping tulisan size
8. Copy kode HTML yang di berikan pada notepad
9. Paste kode HTML yang di copy tadi pada tempat yang sobat inginkan di elemen blog sobat
10. Selesai
Sekarang lihat blog sobat, sangat mudah bukan
Selamat mencoba

Selengkapnya

Label/Kategori: Blog tutorial

Cara mengganti favicon

Favicon adalah sebuah icon ataupun gambar yang menjadi ciri khas bagi si pemilik blog, yang dapat menbedakan blog milik kita dengan blog orang lain dengan sebuah icon.
favicon ini terdapat di sudut kiri blog sobat, di navbar, ataupun di addres bar.
jika sobat ingin merubah favicon tersebut dengan icon milik sobat, ikuti langkah berikut :

1. Sobat harus memiliki sebuah hosting gambar atau sebuah penympanan online untuk gambar milik sobat, buat sobat yang tidak mempunyai hosting gambar ataupun tempat penyimpanan file gambar di internet sobat bisa mendaftarkan diri sobat di
http://www.ziddu.com
atau juga bisa klik disini

Caranya:
1. Klik alamat tersebut diatas
2. Klik register untuk mulai pendaftaran
3. Masukan data diri anda pada kolom nama, email, dan password milik sobat
4. Klik Daftar, selesai
setelah sobat bergabung sobat sudah dapat meng upload gambar milik sobat. Ketika gambar milik sobat sudah tersimpan, maka secara otomatis alamat url gambar tersebut akan muncul, dan jangan lupa untuk meng copy alamat url milik sobat...

Sebagai contoh saya mempunyai alamat url gambar milik saya di http://s737.photobucket.com/arisyudha/aris%20yudha%20album/icon.jpg

2. Login ke blogger milik sobat
3. Klik rancangan/tata letak
4. Edit html
5. Kemudian masukan kode di bawah ini tepat diatas kode </head>

< href='
http://s737.photobucket.com/arisyudha/aris%203yudha%20album/icon.jpg'rel='shortcut icon'/>

ganti kata yang berwarna putih dengan alamat url milik sobat

6. Klik save template.
Selasai, Mudah bukan ?
Silahkan lihat hasil yang sudah sobat buat.

Selengkapnya

Label/Kategori: Blog tutorial

Cara membuat text berjalan

Text berjalan adalah sebuah kalimat yang dijalankan oleh sebuah kode html, kode ini di namakan kode "MARQUEE".
Text berjalan dapat di pasang di semua elemen. Di kolom postingan, di sidebar maupun di footer.
Untuk membuat text berjalan, sangatlah mudah, sebagai contoh, saya akan membuat kalimat ini

"membuat text berjalan"

untuk membuat text tersebut berjalan sobat hanya menambahkan kode "MARQUEE" diawal dan diakhir kalimat yang ingin dibuat berjalan, contohnya seperti ini

<marquee align="center" direction="right" height="200" scrollamount="2" width="40%">membuat text berjalan</MARQUEE>

Dan hasilnya akan seperti ini :


membuat text berjalan

Sobat juga bisa menambahkan kode tersebut sebagai kata penutup di blog sobat agar terlihat lebih menarik...
Selamat mencoba...!

Selengkapnya

Label/Kategori: Blog tutorial