Blog Boy

Navigasi Dengan Css (2)

Apa kabar sobat?akhirnya bisa posting juga,Posting pada kali ini saya ambil dari Kang rohman,Saya terdampar di PULAU yang sangat besar loh ngacok hehe...,Menu navigasi yang akan saya buat adalah dengan menggunakan css agar hasil yang di dapat bersifat flexible dan tidak kaku.
Makin Penasaran?oke deh langsung ke KANTOR POLISI:

Untuk membuat menu tersebut silahkan sobat ikuti langkah-langkah berikut ini.

Untuk template minima klasik :

Sig in di blogger

Klik menu Template

Klik menu Edit HTML

Copy seluruh kode template yang ada lalu paste pada notepad kemudian save. ini untuk backup data bila terjadi kesalahan editting

Copy kode berikut lalu paste pada style sheet css sobat, atau bila bingung simpan saja di atas kode </style>

Copy kode berikut lalu paste pada kode template seperti di bawah ini, yang berwarna hitam adalah kode aslidan warna merah adalah kode yang harus di tambahkan :

</div>

Klik tombol Pratinjau untuk melihat hasil perubahan

Jika sudah OK, klik tombol Simpan Perubahan Template

Selesai.

Untuk template minima baru :

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data

Klik kotak kecil di samping tulisan Expand Template Widget

Tunggu beberapa saat sampai proses selesai

Copy kode berikut lalu paste pada style sheet css sobat, atau bila bingung simpan saja di atas kode ]]></b:skin>

Copy kode berikut lalu paste pada kode template seperti di bawah ini, yang berwarna hitam adalah kode asli dan warna merah adalah kode yang harus di tambahkan :

Klik tombol Pratinjau untuk melihat perubahan

Bila sudah OK, klik tombol SIMPAN TEMPLATE

Selesai.

Agar sobat lebih faham, saya akan sedikit memberi keterangan tentang kode-kode yang saya berikan, silahkan simak :

juleha{
height:25px;
text-align: center;
}

#juleha hanyalah penamaan saja, bisa di ganti dengan apa saja yang penting nyambung dengan kode yang di bawahnya, mau ibro, samson, mau tukul juga boleh kalo sobat penggemarnya.

height:25px; kode ini adalah sebagai pengatur tingginya tombol navigasi, yang saya pakai adalah sebesar 25 pixel, boleh di ganti nilainya dan sesuaikan dengan keinginan sobat.

text-align: center; kode untuk memposisikan tombol-tombol berada di tengah-tengah, jika ingin mepet di sebelah kiri ganti kata Center dengan kata left, jika ingin mepet kanan, ganti dengan right.

#juleha a{
margin:0;
font-size:1.2em;
font-weight:bold;
letter-spacing:-1px;
background-color: #cccccc;
color: #000000;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}

#juleha a penamaan agar nyambung dengan kode diatasnya, dan kode-kode di yang di tulis bawahnya adalah yang akan muncul sebelum di sorot oleh mouse pengunjung blog.

font-size:1.2em; ukuran huruf yang di pake sebesar 1.2 . jika ingin lebih besar atau lebih kecil, silahkan ganti saja nilainya.

font-weight:bold; agar link yang di tulis hurufnya di cetak tebal, jika tidak mau ganti saja tulisan bold dengan tulisan normal.

background-color: #cccccc; kode untuk membuat warna latar belakang tombol. kode warna #cccccc adalah kode untuk abu-abu, silahkan sobat ganti dengan warna yang sobat sukai.

color: #000000; kode untuk warna huruf link, #000000 adalah kode warna hitam, silahkan ganti dengan warna yang sobat sukai.

#juleha a:hover{
text-decoration:none;
background-color: #0326FC;
background-repeat: repeat-x;
color:#A7FC03;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;

#juleha a:hover adalah kode yang di harapkan ketika mouse menyorot pada kode tombol yang di definisakan oleh kode-kode yang ada di kode #juleha a.

background-color: #0326FC; kode untuk membuat warna latar belakang tombol ketika mouse menyorot. kode warna #0326FC adalah kode untuk biru, silahkan sobat ganti dengan warna yang sobat sukai.

color:#A7FC03; kode untuk warna huruf link ketika mouse menyorot, #A7FC03 adalah kode warna hijau terang, silahkan ganti dengan warna yang sobat sukai.

kode pembuka juleha. Apa-apa yang di simpan di bawah kode ini, mengacu kepada apa yang di definisikan oleh kode juleha.

Link 1 kode untuk membuat link.

href="#" ganti tanda pagar (#) dengan URL atau link yang ingin sobat tuliskan. contoh : jika saya ingin membuat link ke blog ini, maka tanda pagar tadi saya ganti dengan http://kolom-tutorial.blogspot.com

target"_blank" adalah kode untuk memunculkan jendela baru ketika link di klik oleh pengunjung, bila tidak ingin ada jendela baru, maka hilangkan kode ini.

Link 1 ganti tulisan ini dengan tulisan link yang sobat inginkan. contoh : untuk menuliskan blog ini saya ganti dengan kata Kolom Tutorial

jadi kira-kira link yang tadi akan menjadi seperi ini :

<a href="http://boy-malik.blogspot.com" target="_blank">Blog-Boy</a>

adalah kode penutup buat kode si juleha.

Contoh link yang saya berikan diatas adalah sebanyak lima buah link, ini bisa sobat kurangi atau bisa juga di tambah, akan tetapi jika space yang tersedia penuh maka tombol akan secara otomatis berpindah ke bawah, oleh sebab itu sesuaikanlah dengan space yang ada.

Gimana Coy?ngerti gk?gk ngerti?comment yahh :)

[Selengkapnya...]

Pasang Iklan

Pasang iklan di blog ini RELATIF MURAH HARGANYA

Harga Iklan

Harga Satu Bulannya Hanya Rp:15.000
Harga Dua Bulannya Hanya Rp:25.000
Harga Tiga Bulannya Hanya Rp:40.000
Harga Empat Bulannya Hanya Rp:50.000
Harga Enam Bulannya Hanya Rp:70.000
Harga Tujuh Bulannya Hanya Rp:85.000
Harga Delapan Bulannya Hanya Rp:95.000
Harga Sembilan Bulannya Hanya Rp:115.000
Harga Sepuluh Bulannya Hanya Rp:125.000
Harga Sebelas Bulannya Hanya Rp:140.000
Harga Satu Tahun Hanya Rp:150.000

Bonus Iklan Sesuai Harga

Iklan Satu Sampai Dengan Sepuluh Bulan +Bonus 1 Bulan Gratis Sesudah Bayar
Iklan Sebelas Bulan +Bonus 1 Kali Deskripsi Blog Pelanggan Dengan Artikel
Iklan Dua Belas Bulan +Bonus 3 Kali Deskripsi Blog Pelanggan Dengan Artikel Dan +Bonus Satu Bulan Gratis Sesudah Bayar

Syarat-Syarat Iklan

Tidak Boleh Iklan Mengandung Sarah,Porno Dan Penghinaan

Proses Pemasangan

Pelanggan Harus Membayar Dahulu Kepada Admin Dan Mendapat Persetujuan Oleh Admin,Proses Pemasangan Paling Lama 2 Hari Sesudah Bayar Jika Lebih Dari Dua Hari Iklan Belum Dipasang Pelanggan Di Anjurkan Menghubungi Admin Lewat SMS Dan Email

Formulir Pemasangan

1.)Nama Lengkap:
2.)Nama Panggilan:
3.)Tanggal Lahir:
4.)Alamat Tempat Tinggal:
5.)Waktu/Bulan Memasang Iklan:
6.)Script/Kode HTML/Css Banner/Iklan:
7.)No.Hape:
8.)Deskripsikan Singkat Blog/Site:

Kirim Ke Email:boymalik91@gmail.com
Kirim Sms Ke:02192061169

Pembayaran

No Rekening BCA:5800179566
Pembayaran Harus Sesuai Dengan Harga

[Selengkapnya...]

Tips Menghilangkan Border Image

Bagi yang suka bangat dengan gambar atau Emoticon pada kali ini saya boy malik menerapkan suatu posting yang menjelaskan menghilangkan border gambar,berikut TRIK dari saya

Contoh gambar yang mempunyai border :

Atau seperti ini :

Bandingkan dengan yang ini :

Atau seperti ini :

Lebih asyik bukan jika gambar yang kita posting tidak mempunyai border/bingkai. Cara untuk menghilangkan border adalah sobat harus membiasakan diri menambahkan kode border="0" pada setiap gambar yang di pasang. Sebagai contoh saya mempunyai alamat gambar seperti ini :

http://amen24.googlepages.com/face5.gif

Untuk membuat gambar, bisakan menyisipkan kode border="0", contohnya :

<img src="http://amen24.googlepages.com/face5.gif" border="0">

Bagaimana jika sobat sudah menambahkan kode border="0", akan tetapi gambar masih tetap mempunyai border/kotak. Nah untuk kejadian yang satu ini, maka style sheet css sobat ada yang harus di modifikasi. Silahkan ikuti langkah-langkah berikut ini!

Untuk yang memakai template klasik :

Klik menu Template

Klik menu Edit HTML

Copy seluruh kode HTML template sobat, lalu paste pada notepad, kemudian save untuk backup apabila ada kesalahan editting

Cari kode berikut pada css sobat (ini contoh saja):

.post img

Rubah angka 1 (satu) menjadi angka 0 (nol), sehingga kodenya menjadi seperti ini :

klik tombol Simpan Perubahan Template
Selesai.

Untuk yang memakai template baru :

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data

Klik kotak kecil di samping tulisan Expand Template Widget

Tunggu beberapa saat sampai proses selesai

Cari kode berikut pada css sobat (ini contoh saja):

.post img

Rubah angka 1 (satu) menjadi angka 0 (nol), sehingga kodenya menjadi seperti ini :

Klik tombol SIMPAN TEMPLATE

Selesai.

Bagaimana sobat, mudah-mudahan expresi sobat lebih bebas karena sudah tidak di ganggu lagi dengan adanya border.

Salam buat blogger semua.

Sumber:Di Sini

[Selengkapnya...]

Pasang Banner di Header Blog

Beberapa hari yang lalu, sempat ada salah seorang sobat meninggalkan pesan Offline pada YM milik saya yang isinya kira-kira seperti ini :

"Bagaimana caranya menyimpan banner pada header blog"

Sebuah keinginan yang saya anggap wajar bagi seorang pemilik blog, karena sudah barang tentu merupakan suatu kebahagiaan tersendiri apabila banner yang sangat kita sukai dapat di tempatkan pada blog kebanggan kita. Jika ada pertanyaan lain "apakah kita bisa mengganti atau menambahkan banner sendiri kedalam blog?" jawabannya adalah bisa, akan tetapi tentunya kita harus sedikit bercape ria mengotak-atik kode template.

Lagi-lagi karena template terbagi dua yaitu template klasik dan template baru, maka saya akan membagi dua bahasan tentang bagaimana caranya menambahkan atau mengganti banner yang ada di header.

Sebelum menginjak kepada proses editting template, langkah awal tentunya sobat harus mempunyai banner yang akan di pakai. Untuk membuat sebuah banner, sobat bisa menggunakan berbagai program desain grafis yang sobat kuasai, apakah itu photoshop, coreldraw, ataupun program-program yang lainnya yang sejenis yang penting judulnya adalah program yang bisa membuat banner.

Karena template bentuknya ratusan atau bahkan mungkin ribuan, tentunya tulisan ini tidak akan bisa mewakili untuk pemakaian template, akan tetapi mungkin akan sedikit memberi gambaran bagaimana cara menambahkan atau merubah banner yang ada di header. Sebagai proyek percontohan (kaya kerjaan saja ya pake proyek segala), saya akan mengambil contoh template Minima yang di desain oleh Douglas Bowman, dan template ini merupakan template asli blogger.

Untuk Template Klasik

Seperti yang saya sebutkan di awal bahwa langkah pertama yang dilakukan adalah membuat banner, gambar banner terserah kepada sobat, mau gambar pemandangan, laut, atau photo sobat sendiri juga boleh. Langkah kedua adalah meng upload banner tersebut, bisa di upload ke blogger sendiri atau ke hosting lain. Untuk cara upload gambar sudah saya terangkan di sini dan di sini. Sebagai contoh, saya sudah upload banner di www.photbucket.com dan mempunyai alamat banner seperti ini :

http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif

dan gambar bannernya seperti ini ( gambarnya dalam skala kecil):

Untuk cara penempatannya silahkan ikuti langkah-langkah berikut :

Klik menu Template

Klim menu Edit HTML

Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save, ini sebagai backup data apabila kita melakukan kesalahan dalam proses edtitting template

Sisipkan kode berikut pada style sheet css sobat. Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan

/* Header ----------------------------------------------- */
@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background:url(http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif) no-repeat top center;
}
}

Jika sobat ingin menghapus garis yang berada di tepi banner, sobat harus menghapus kode berikut :

Klik tombol Pratinjau untuk melihat perubahan

Jika sudah OK, klik tombol Simpan Perubahan Template

Selesai.

Untuk template baru

Bagi sobat pengguna template baru, bisa menggunakan dua cara.

Cara pertama :

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data

Klik kotak kecil di samping tulisan Expand Template Widget

Tunggu beberapa saat sampai proses selesai

Tambahkan kode berikut pada style sheet css sobat.Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan

background:url(http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif)no-repeat top center;

Klik tombol Pratinjau untuk melihat perubahan yang ada

Bila sudah OK, klik tombol SIMPAN TEMPLATE

Selesai.

Langkahnya diatas sama dengan yang di template klasik.

Cara kedua :

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data

Klik kotak kecil di samping tulisan Expand Template Widget

Tunggu beberapa saat sampai proses selesai

cari kode berikut pada template sobat :

Klik tombol SIMPAN TEMPLATE

Nah itu langkah pertama, langkah selanjutnya adalah :

Klik menu Elemen Halaman

KLik tulisan Edit yang ada pada elemen Header

Tunggu beberapa saat

Pilih radio button yang ada di samping tulisan dari komputer Anda

Klik tombol Browse...

Pilih banner yang telah di buat yang ada pada komputer sobat

Tunggu beberapa saat sampai proses selesai.

Gambar banner sobat akan di tampilkan

Klik tombol SIMPAN PERUBAHAN

Selesai.

Nah silahkan sobat lihat hasilnya!

jika sobat merasa banner tersebut, maka sobat bisa menggantinya lagi, ulangi saja langkah-langkah di atas.

Ok sobat, mungkin pembahasan tentang cara mengganti banner sudah selesai, untuk melihat contoh blog yang sudah saya tambahkan banner silahkan klik di sini. Pembahasan diatas adalah untuk menambahkan hanya satu banner saja, apabila sobat tertarik membuat banner yang bisa berubah-ubah, silahkan baca di sini. Untuk melihat contohnya silahkan klik di sini

Selamat mencoba sobat !

Sumber:Klik Disini

BAGI YANG MAU PESEN BANNER/HEADER DENGAN YANG AHLINYA KLIK GAMBAR DI BAWAH INI

[Selengkapnya...]

Jasa Pembuatan Header/Banner

Alhamdulillah,Akhirnya kini boy-malik.blogspot.co m Meluncurkan JASA PEMBUATAN HEADER/BANNER,Tenang kami akan menghargai dengan sangat MURAH & TERJANGKAU,Berikut Harga Pembuatan HEADER Blog:

Harga Pembuatan HEADER Blog
1.)Harganya $1 Atau SENILAI Rp.10.000

Harga Pembuatan BANNER Blog

1.)Harganya $0,5 Atau SENILAI Rp.5.000

Berminat?Silahkan Kontak/Hubungi Kami:
1.)Email Kami: boymalik91@gmail.com (Email)
2.)Sms/Telepon Ke No: 02192061169 (Hape)

Pembayaran Melalui:
1.)No Rekening:5800179566 (Cash)
2.)Kirim Pulsa Ke No:02192061169 (Pulsa)

Pembayaran Harus Sesuai Dengan Harga

Proses Pekerjaan:
1.)Proses bekerja membuat HEADER/BANNER jika kami telah MENDAPAT Uang nya
2.)Proses Bekerja akan Memakan waktu sekitar 1 s/d 2 hari Jika Lebih dari dua hari Silahkan Kontak Kami

MURAH BUKAN?Tunggu Apa Lagi?Cepat PESANNNN !

Berikut Contoh Header Bikinan Saya: