@FreeDomain @Review @Facebook
Gratis artikel Bang Del, daftar sekarang!
Posted by Bang Del

Blog yang Bagus Gimana Sih?

Apakah blog yang bagus menurut saya sudah bagus menurut orang lain. Apakah blog yang bagus menurut orang lain sudah bagus menurut saya. Jawaban untuk kedua pertanyaan di atas adalah belum tentu. Terkadang bagus menurut saya ternyata jelek di mata pembaca dan terkadang bagus menurut pembaca ternyata tidak bagus menurut saya. Menurut kamu blog yang bagus gimana sih?

blog yang bagus
Posted by Bang Del

Cara Promosi Blog yang Baik

Ingin blog anda terkenal? Temukan jawabannya di sini "Cara Promosi Blog yang Baik". Hampir semua pemilik blog ingin blognya menjadi terkenal dan ramai dikunjungi dengan trafik yang tinggi pula. Saya pun begitu, sama seperti anda :) Posting tentang cara promosi blog ini adalah berdasarkan pengalaman pribadi. Silahkan dibaca-baca dulu dan ambil poin-poin yang cocok buat blog anda. Semoga bermanfaat.

promosi blog
Posted by Bang Del

Jenis-Jenis Bisnis Online

Sudah sering mendengar tentang Bisnis Online ya. Saya akan memberikan sedikit ulasan tentang bisnis online dan jenis-jenis bisnis online. Barangkali anda tertarik untuk memonetisasi blog. Hitung-hitung bisa dapat dollar dari internet. Artikel ini mengulas beberapa jenis bisnis online yang sedang marak dan digandrungi para blogger.

bisnis online

Menggunakan Gambar Untuk Latar Belakang Blog

Selain menggunakan warna untuk latar belakang blog, anda juga bisa menggunakan gambar sebagai latar belakang blog. Bahasa inggris dikatakan background image untuk blog. Gambar ini bisa diatur seperti wallpaper dan dapat diatur dengan posisi vertikal atau horisontal serta model lainnya. Nah, dalam posting ini saya akan menjelaskan bagaimana anda dapat menggunakan gambar sebagai latar belakang blog dengan cara yang berbeda-beda. Biasanya gambar disimpan dalam ekstensi berformat JPEG, GIF dan BMP. Pertama sekali anda harus meng-upload gambar ke server atau tempat hosting gambar. Saya mengunakan blogger dan kadang-kadang pakai photobucket atau tinypic. Nah, banyak situs image hosting gratis, anda tinggal pilih saja di mana gambar akan diupload dan hosting.

Sebelum menggunakan gambar sebagai background untuk blog, anda harus memilih gambar yang tepat untuk blog (sesuaikan dengan template blog) dan tulis alamat penyimpanan gambar tersebut. Misalnya seperti ini http://www.HostingGambarAnda.com/namagambar.jpg sebagai alamat gambar. Nah, seperti yang saya katakan di atas, ada beberapa cara untuk menggunakan gambar sebagai latar belakang atau background image untuk blog. Oke saya urutkan sebagai berikut :
  • Gambar latar belakang menutupi seluruh halaman (repeat tiled background image)
  • Gambar latar belakang vertikal menutupi halaman (tiled the image vertically)
  • Gambar latar belakang horisontal menutupi halaman (tiled the image horizontally)
  • Gambar Latar Belakang Tidak Bergerak (fixed image background)

Gambar latar belakang menutupi seluruh halaman (repeat tiled background image)

Cara ini adalah cara yang paling sederhana dari semua model efek gambar untuk latar belakang blog. Banyak orang yang suka dengan gambar berukuran kecil sebagai latar belakang blog. Hal ini bertujuan untuk menjaga kecepatan membuka halaman blog agar tetap ringan dan cepat karena gambar yang digunakan berukuran sangat kecil. Anda dapat menggunakan google untuk mencari gambar berukuran kecil dengan keyword "tileable background" atau bisa membuatnya sendiri dengan program image editor seperti coreldraw, photoshop dan program lainnya yang dikuasai dan tersedia di komputer anda. Oke, contohnya seperti gambar di bawah ini :

cloud_background
Untuk membuat gambar ini dengan repeat tiled background, maka yang perlu dilakukan adalah dengan masuk ke blog dengan id blog anda dan tuju edit HTML. Carilah kode yang mirip dengan kode di bawah ini :
body {
background: $bgcolor;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Nah, anda hanya perlu menambahkan kode untuk background image sperti yang saya tandai dengan warna merah seperti di bawah ini :
body {
background:url(http://www.HostingGambarAnda.com/namagambar.jpg);
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Ganti URL gambar dengan lokasi penyimpanan gambar anda. Perintah di atas akan membuat gambar secara berulang menutupi seluruh halaman depan blog anda seperti gambar di bawah ini :

tiled_background
Gambar latar belakang vertikal menutupi halaman (tiled the image vertically)

Mirip dengan cara pertama. Carilah kode seperti di atas dan atur pada bagian background. Tambahkan alamat url penyimpanan gambar anda. Untuk perintah background diulang vertikal maka tambahkan kode "y" seperti berikut :
body {
background:url(http://www.HostingGambarAnda.com/namagambar.jpg) repeat-y;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Dengan menggunakan contoh gambar yang sama maka hasilnya akan seperti di bawah ini :

tiled_vertical
Gambar latar belakang horisontal menutupi halaman (tiled the image horizontally)

Hampir sama dengan cara vertikal, hanya saja yang perlu ditambahkan adalah perintah dengan tambahan kode "x" seperti berikut :
body {
background:url(http://www.HostingGambarAnda.com/namagambar.jpg) repeat-x;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Masih dengan contoh yang sama, maka hasilnya dapat dilihat seperti di bawah ini :

tiled_horizontal
Gambar latar belakang tidak bergerak (fixed image background)

Maksudnya adalah, gambar latar belakang tidak ikut bergerak ketika anda menggerakkan kursor (scroling) ke atas bawah. Untuk ini biasanya digunakan gambar berukuran besar. Nah, sebagai contoh saya menggunakan gambar di bawah ini untuk latar belakang :

pantai_background
Untuk memastikan gambar tidak berulang seperti pada tiga model sebelumnya, maka perlu ditambahkan perintah "no-repeat" pada background. Selain itu perlu ditambahkan perintah "fixed" supaya gambar tidak bergerak ketika kursor digerakkan ke atas bawah. Berikut penulisan kode lengkap dengan tambahan yang saya beri pada warna merah :
body {
background:url(http://www.HostingGambarAnda.com/namagambar.jpg) no-repeat;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-attachment: fixed }

Dan hasilnya seperti di bawah ini.

fixed_background
Menggabungkan warna dan gambar untuk latar belakang

Jika anda memilih cara vertikal dan cara horisontal maka area yang belum tertutupi otomatis akan berwarna putih. Nah, untuk mengganti warna putih tersebut, anda hanya perlu menambahkan kode warna yang sesuai dengan gambar latar belakang cukup dengan penambahan kode seperti ini :
background: $bgcolor url(http://www.HostingGambarAnda.com/namagambar.jpg) repeat-x;

Ganti nilai kode warna dan sesuaikan dengan gambar tadi yang menjadi latar belakang. Misalnya seperti kode di bawah ini :
background: #81F7F3 url(http://www.HostingGambarAnda.com/namagambar.jpg) repeat-x;

Silahkan bereksperimen dengan kode warna yang saya buat agar perpaduannya bisa cocok.

Mengatur posisi gambar latar belakang pada template blog

Secara default, gambar latar belakang akan dimulai dari sudut kiri atas halaman, terlepas dari bagaimana anda mengatur gambar latar belakang berulang/repeat atau tidak berulang. Namun anda dapat menentukan di mana posisi gambar ingin ditempatkan hanya dengan menambahkan variabel untuk spesifikasi latar belakang. Berikut adalah contoh penempatan posisi gambar latar belakang seperti yang saya beri warna merah:
background: #81F7F3 url(http://www.HostingGambarAnda.com/namagambar.jpg) variabel posisi di sini no-repeat;

Silahkan ganti nilai variabel untuk posisi gambar di atas dengan pilihan perintah di bawah ini :
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right
Misalnya anda ingin menempatkan gambar berada di atas tengah dan tidak bergerak atau fixed image, maka anda bisa menggunakan perintah ini :
background; url(http://www.HostingGambarAnda.com/namagambar.jpg) no-repeat top center;

Anda juga bisa mengatur posisi awal dari gambar latar belakang dengan menggunakan persentase pada sumbu X atau Y, atau dengan menentukan jarak dalam pixel dari bagian atas atau kiri halaman. Namun hasilnya akan sangat tergantung dari browser dan resolusi layar yang dipakai pengguna internet. Browser yang berbeda akan menampilkan desain blog yang berbeda pula. Tutorial background ini bisa anda modifikasi lagi dengan kreatifitas sendiri wink. Misalnya anda ingin membuat background pada sidebar, header dan footer blog. Bahkan anda bisa membuat background image untuk posting blog, serta modifikasi lainnya. Intinya, kode-kode untuk membuat latar belakang yang harus ditambahkan hampir sama dengan kode CSS background image seperti di atas. Mudah-mudahan tutorial ini dapat membantu dalam memahami cara menggunakan gambar latar belakang untuk blog dan efek penempatan gambar tersebut. Seperti biasa, jika anda merasa tutorial ini bermanfaat, silahkan memberikan komentar di bawah ini. Terima kasih.

Related Post:


Top Blogs or My Zimbio or Bookmark and Share

13 comment:

milanisti indonesia said...

puanjaaaaaaaaaang banget tutorialnya bang..btw mantap nih infonya..thanks

Bandit Pangaratto said...

nice tutiroal bang...

tapi fic=xed imagenya sedikit mmbuat loding blogny lambat..

hehehhe

hryh77 said...

wew.. keren juga nih..
test drive dulu ah he..he..

Yiehaa said...

Boleh juga idenya.
Untuk tips lainnya click disini ya..! :))

andritea said...

top share deh pokonya.. full tutorial nih... god job bangdel...

new said...

wah bagus ini! bole nanya ga? bisa ga gambar itu d strech jadi tidak ada bagian putih di sekitarnya??

dedi said...

Mantaaaaappppp.... jd tau trik baru.. btw boleh tanya bang, kalau buat background sebelah kanan dan kiri beda bisa ndak? saya utak-atik css.nya tp ndak ketemu2 rahasianya... coba macem2 gak tampil juga..

Teknologi dan Komputer said...

sqs

Anggi Grunge Sebastian said...

nyobain ah

playboylasut said...

di templet ane gambarnya jadi ga nutup semuanya....jadi sebagian2 aja, yg lain tetep masih pake gambar yg lama..atau mesti di ganti semua yah?? kira2 apa namanya apa aja yg mesti d ganti,,,,bingung nih newbie...

Intan Liana Inna said...
This comment has been removed by the author.
tamada said...

makasih banget gan, berhasill.. berhasil.. berhasil.. horeee..

Anonymous said...

:D

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Post a Comment

Terima kasih, komentar anda sangat berarti bagi Bang Del. Isi pendapat anda tentang blog ini di Testimoni. Tinggalkan pesan di Blogroll untuk tukaran link.

Link Exchange | Blog Directory

Link Exchange Directory of Top Sites Dmegs.com
SEO friendly web directory of top sites & blogs organized by topic into categories and presented according to relevance ofwebsite. Submit your website free.

Tukar Link dan Promosi Website
Webkios Direktori Indonesia, katalog website untuk tukar link dan promosi gratis. Tambahkan website anda sekarang juga di direktori kami.

Increase your PageRank
The Search Engine Optimization Experiment - Increase your PageRank.

Blogarama - The Blog Directory
Get Listed At One Of The Largest FREE Blog Directories Online. Let People Find And Rate Your Blog In The Blog Directory!

2RSS.com :: RSS directory
2RSS.com :: RSS feeds, RSS directory, RSS software, RSS scripts, RSS articles, RSS syndication, XML, RDF, news.
 

Followers

Recent Comments