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. Salah satu contohnya adalah situs ini : http://www.free-blog-content.com.
kalender yang di sediakan sangat beragam. Silahkan klik kategori yang ada untuk memilih bentuk kalender yang disukai, kemudian copy kode yang di berikan di bawah gambar kalender lalu paste di Edit HTML --> Add Gadget --> HTML/Java Script.
Selesai!!
Menambahkan Kalender di blog kita
Jumat, 22 Januari 2010
Cara Membuat Background di setiap Postingan berbeda-beda Backgroundnya.
Dalam membuat background ada dua alternatif jenis background, yang satu adalah menggunakan warna saja sebagai background, dan yang satunya lagi menggunakan gambar sebagai backgroundnya. Untuk jelasnya mari kita lihat tutorial blog yang satu ini.
A. Cara Membuat Background dengan Latar Belakang Warna saja.
Agar warna background postingan bisa berbeda-beda setiap postingan, yang harus dilakukan adalah :
Ketika anda akan memulai untuk membuat postingan, pilih tab Edit HTML jangan pilih Compose.
Awali postingan anda dengan kode seperti ini :
<div style="background:kode_warna_disini;">
Dan diakhir postingan, harus di tutup dengan kode seperti ini :
</div>
Ganti tulisan kode_warna_disini dengan kode warna yang anda inginkan.Karena kode ini merupakan Style dari CSS, maka tentu saja bukan hanya warna background yang bisa
anda tentukan, warna hurup, jenis hurup, perataan posting, dan lain-lain pun bisa anda tentukan.
B. Mengganti Background Postingan Blog kita dengan Gambar
Nah jika postingan anda ingin mempunyai background berupa gambar, langkah pertama yang harus di ingat yaitu anda harus punya gambar yang akan di jadikan background. Trus gambar tersebut harus di upload ke hosting tempat menyimpan gambar.
Ketika anda akan memulai untuk membuat postingan, pilih tab Edit HTML jangan pilih Compose. Awali postingan anda dengan kode seperti ini :
<div style="background:url(alamat_gambar_disini) no-repeat;">
Dan diakhir postingan, harus di tutup dengan kode seperti ini :
</div>
Ganti tulisan alamat_gambar_disini dengan alamat gambar yang ingin anda tampilkan.
Penggunaan kode no-repeat tentu saja apabila gambar yang anda miliki memiliki ukuran
besar dan tidak mau di tampilkan berulang-ulang.
Seperti halnya pada background dengan warna, kode inipun bisa anda tambah-tambahin sesuai dengan keinginan.
Membuat Cursor Animasi di Blog Kita
Agar blog yang kita bikin itu tampak lebih menarik, kita bisa mempermak blog kita dengan menambahkan sebuah cursor animasi. Untuk membuat sebuah kursor animasi yang pertama kita harus lakukan adalah membuat animasi kursornya, yang berukuran kecil. Bisa membuatnya pakai macromedia flash atau kalau tidak bisa, kita googling aja buat mencari cursor animasi yang gratis.
Setelah itu upload file animasi yang sudah didapatkan di situs hosting gambar gratis misalnya di photobucket.com
Langkah selanjutnya sisipkan gambar animasi untuk kursor dengan format kodenya seperti ini :
cursor: url("alamat gambar kursor");
Selanjutnya yang harus di lakukan adalah memasukan kode di atas ke dalam kode template. Langkah-langkahnya adalah sebagai berikut :
-- Klik menu Template
-- Pilih Edit HTML
-- Sisipkan kode kurdor animasi tersebut di kode berikut :
body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
maka keseluruhan kode akan menjadi begini :
body{
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
cursor: url("http://24rohman.googlepages.com/dragon3.ani");
}
-- Klik Save
Selesai dah, sekarang coba lihat blog Anda.
Selamat Mencoba...^^
Bikin iFrame di blog kita
Apa itu iFrame?? Fungsinya buat apa??
iFrame, dengan menggunakan iFrame kita bisa menampilkani isi blog orang lain di blog kita. Untuk lebih jelasnya silakan perhatikan langkah-langkah memsang iFrame di blog kita....^^
Perintah dasar dari sebuah iFraame adalah sebagai berikut :
<iframe> .... isi dari iframe .... </iframe>
Beberapa atribut yang sering di pasang dalam iframe adalah :
ALIGN="left/right" ----- Untuk mengatur posisi iframe
WIDTH="lebar" ----------- Mengatur lebar IFRAME dalam pixel atau persen
HEIGHT="tinggi" ---------- Untuk mengatur tinggi dari iframe dalam pixel atau persen
FRAMEBORDER="garis pembatas" ------- Untuk memberi garis pembatas
SCROLLING="auto/yes/no" ------ Untuk memberi atau tidak memberi scrolling pada iframe
SRC="url yg ingin di tampilkan" ------- alamat sumber yang ingin di tampilkan pada iframe
Agar lebih paham, nih contoh pembuatannya :
Misalkan disini saya akan menampilkan isi dari salah satu blog punyaq (hehehe...^^)
maka contoh kodenya adalah sebagi berikut :
<iframe align="left" frameborder="0" src="http://cengenggirl.blogspot.com/"
width="500" height="300" scrolling="no">
</iframe>
maka hasilnya akan seperti ini :
klu misalkan ingin tampilannya bisa scrolling maka kodenya adalah sebagai berikut :
<iframe align="left" frameborder="10" src="http://cengenggirl.blogspot.com/"
width="500" height="300" scrolling="auto">
</iframe>
maka hasilnya akan seperti ini :
Gimana?? Menarik kan?? Tapi kalau teman-teman mau menampilkan isi dari blog seseorang jangan lupa minta izin dulu yah sama pemilik blognya.
Okay!!! ^^
Menghilangkan Navigasi Bar
Kamis, 21 Januari 2010
Yoha, apa kabar, all?? Ketemu lagi di tips buat para blogger pemula...
Nah, biasanya dalam sebuah blog kan ada navigasi bar yang ada tulisan search blog dan sebagainya. Itu mungkin sangat membosankan, Karena itu disini saya akan memposting cara menyembunyikan navigasi bar tersebut.
Caranya :
1. sign in ke blogger.com seperti biasa
2. Klik tab Template===>Edit HTML
3. Sekarang tremukan code HTML seperti dibawah:
/* Header
-----------------------------------------------
*/
Jika kode HTML diatas sudah ketemu, sikalhkan copy dan paste code HTML dibawah ini.
Nambah: Silahkan copy cede tersebut dibawah code */
INILAH CODE HTML nya!
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
atau pakai kode yang dibawah ini, pakai salah satu aja yoo:
#navbar-iframe {
display: none;
}
Yaps!! Selesai deh, coba lihat blog Anda sekarang....
^^
Semoga Bermanfaat.....^^
Cara Memasang Iklan di Blog kita
Biasanya dalam sebuah blog, kan banyak yah iklan-iklan yang dipasang. Entah itu adalah iklan yang membahas tentang blognya ataupun iklan produk perusahaan lain.
Pada kesempatan kali ini, saya akan membahas cara memasang iklan di blog kita.
Langkah-langkahnya adalah :
1.Anda buat dulu gambar space iklan nya
2.Lalu anda upload ke situs picture sharing seperti photobucket.com.Jika sudah nanti anda akan mendapatkan kode html dari gambar tersebut.
3.Lalu anda masuk ke TATA LETAK --> ELEMENT HALAMAN --> HTML/JAVASCRIPT
4.Anda masukkan kode html tersebut didalam nya.
5.Selesai...
Anda bisa banyaknya space iklan sesuai dengan yang anda ingin kan.Sebaiknya disesuaikan dengan lebar dari sidebar anda
Anda buat dulu halaman yang berisi informasi mengenai iklan anda.Anda bisa membuat postingan khusus mengenai informasi untuk memasang iklan di blog anda,anda juga bisa membuat halaman form kontak.
Sekian dan Terima Kasih.....^^
SelamatMencoba ^^
Cara Membuat Menu Horizontal
Menu Horizontal adalah menu yang ada homenya, contact us, seperti di blog ini. Mau tahu cara bikinnya??
Oke, langsung aja, tanpa basa basi saya akan membahas langkah-langkahnya :
1.Anda masuk dulu ke situs CSS menu generator di CSSPORTAL.COM
2.Anda pilih menu yang anda suka,sebagai contoh untuk anda, saya pilih menu yang pertama,lalu klik.
3.Lalu anda akan mendapatkan kode CSS nya :
HTML CODE :
<div id="tabs31">
<ul>
<li><a href="#" title=""><span>Home</span></a></li>
<li><a href="#" title=""><span>About Us</span></a></li>
<li><a href="#" title="" class="current"><span>Services</span></a></li>
<li><a href="#" title=""><span>Our Work</span></a></li>
<li><a href="#" title=""><span>Contact Us</span></a></li>
</ul>
</div>
Nah, di atas kan ada tanda #, ganti tanda itu dengan nama blog Anda, dan Home, Services, Contact us serta About us bisa diganti dengan nama menu sesuka hati Anda
dan
CSS Code :
/* ^^^^^^^^ BELOW IS THE CODE FOR THE MENU ^^^^^^^^^^ */
#tabs31{position:relative;display:block;height:39px;font-size:11px;font-weight:bold;background:transparent url(images/bgOFF1.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;border-top:4px solid #B30000;}
#tabs31 ul{margin:0;padding:0;list-style-type:none;width:auto;}
#tabs31 ul li{display:block;float:left;margin:0;}
#tabs31 ul li a{display:block;float:left;color:#666;text-decoration:none;padding:11px 20px 0 20px;height:23px;background:transparent url(images/bgDIVIDER1.gif) no-repeat top right;}
#tabs31 ul li a:hover,#tabs31 ul li a.current{color:#B30000;background:#fff url(images/bgON1.gif) no-repeat top right;}
/* ^^^^^^^^ ABOVE IS THE CODE FOR THE MENU ^^^^^^^^^^ */
4.Nah sekarang kita tinggal pasang saja kode diatas.Caranya:
- Masuk ke TATA LETAK --> EDIT HTML (beri tanda centang pada kotak expand text widget)
- Letakkan seluruh kode pada HTML KODE di bawah kode :
<div id='upper-wrapper'>
bla..bla..bla...
</div>
- Letakkan kode CSS diatas kode :
]]></b:skin>
4.Selesai...
Anda juga harus mendownload source nya pada situs nya agar tampilan sesuai dengan yang ada pada gambar.Tapi kalau saya tidak,malas download dan upload nya.Jadi tidak apa-apa kalaupun ga di download.
Selamat mencoba...
Kalau ada yang bingung,tanya aja melalui kolom komentar ya!
Terimakasih
Langganan:
Postingan (Atom)
