Bikin asyik Blogmu

Mengganti Image Pada Background

Mengganti Atau Menambahkan Image Pada Background : Jika pada kesempatan yang lalu, telah dijelaskan cara mengganti warna pada background maka kali ini, Tips dan Trik Blog akan menjelaskan cara mengganti image pada background. Pada prinsipnya, tips ini tidak berbeda jauh dengan tips sebelumnya, hanya mengganti kode warna dengan image (alamat URL image). Jika tertarik, silakan ikuti tipsnya berikut ini.

Sebelum melanjutkan, sebaiknya kita baca postingan tentang cara mengganti warna background terlebih dahulu karena tips kali ini masih berhubungan dengan tips tersebut. Jika sudah, mari kita lanjutkan kepada tips mengganti image pada backround berikut ini.

Yang perlu saya tekankan lagi adalah jangan lupa untuk melakukan pem-backup-an terlebih dahulu untuk mengatisipasi hal-hal yang tidak kita inginkan.

Langkah-langkah mengganti image pada background adalah sebagai berikut.

Pertama, seperti biasanya, lakukan login ke http://blogger.com hingga masuk Dasbor >> Edit HTML
Kedua, cari kode css body, dengan format seperti di bawah ini.

body {
……………..
……………..
}

Untuk mengganti atau menambahkan image pada background, kita harus menambahkan atau mengganti kode dengan format berikut pada tag body tersebut.

background-image: url(alamat_URL_image)

Catatan :

alamat_URL_image adalah alamat image yang sudah kita upload pada photo hosting. Sebagai contoh seperti di bawah ini.

body {
background-image:url(http://www.geocities.com/yono_pati/blue.jpg);
…………..
………….
}

Jika menginginkan, kita dapat mengganti atau menambahkan image background pada sidebar yang berbeda dan formatnya seperti di bawah ini.

#sidebar-wrapper {
background-image:url(alamat_URL_image);
........
........
}

Jika menginginkan image background pada bodi postingan yang berbeda, kita dapat menuliskannya dengan format seperti di bawah ini.

#main-wrapper {
background-image:url(alamat_URL_image);
…………
…………
}

Ketiga, simpan template
Keempat, selesai

Sebagai contoh, kita akan mengganti image background pada template Minima, milik Blogspot. Pada template tersebut, kita dapat menemukan kode css body-nya adalah seperti di bawah ini.

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Untuk menambahkan image background (misalkan dengan alamat_URL “http://www.geocities.com/yono_pati/blue.jpg”) adalah menjadi seperti di bawah ini.

body {
background:$bgcolor;
background-image:url(http://www.geocities.com/yono_pati/blue.jpg);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Untuk menambahkan image pada background sidebar, cari kode css sidebar, seperti di bawah ini.

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Misalkan, kita ingin menambahkan image (dgn alamat_URL "http://www.freebackgrounds.com/back-283.gif") tambahkan kode yang berwarna merah, sehingga menjadi seperti di bawah ini.

#sidebar-wrapper {
background-image:url(http://www.freebackgrounds.com/back-283.gif);
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Untuk mengganti/menambah image background pada bodi postingan, cari kode css main-wrapper, seperti di bawah ini.

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Misalkan kita ingin menambahkan image background (dgn alamat_URL "http://www.geocities.com/yono_pati/batahijau.gif) maka tambahkan kode yang berwarna merah sehingga menjadi seperti di bawah ini.

#main-wrapper {
backgroung-image:url(http://www.geocities.com/yono_pati/batahijau.gif);
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Begitu juga jika kita ingin menambahkan image pada header dan footer maka kita harus menambahkan kode "background-image:url(alamat_URL_image)" pada kedua kode css tersebut.

Hasilnya, seperti screenshot di bawah ini.



PERINTAH PERULANGAN IMAGE (REPEAT BACKGROUND IMAGE)

Secara default, image akan ditampilkan secara berulang-ulang untuk memenuhi seluruh halaman blog. Misalkan kita mempunyai image berupa gambar buku kecil maka seluruh halaman akan diisi penuh dengan gambar-gambar buku kecil tersebut hingga memenuhi seluruh halaman blog. Jika menginginkan, kita dapat melakukan kustomasi terhadap perulangan image tersebut dengan pilihan perintah sebagai berikut.

background-repeat:no-repeat;

Dengan perintah tersebut maka tidak ada pengulangan image yang ada.

background-repeat:repeat-x;

Dengan perintah tersebut, image akan ditampilkan berulang-ulang secara horizontal.

background-repeat:no-repeat;

Dengan perintah tersebut, image akan ditampilkan berulang-ulang secara vertical.


MENENTUKAN POSISI IMAGE BACKGROUND (POSITION BACKGROUND IMAGE)

Jika menginginkan, kita dapat menentukan posisi image pada posisi tertentu di dalam suatu halaman blog. Kombinasi posisi dapat dipilih adalah di antara berikut ini.

top left;
top center;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right;

Contoh formatnya adalah seperti di bawah ini.

background-position:center center;

Dengan perintah tersebut, image akan berada pada posisi tengah baik secara horizontal maupun vertikal.

Selain itu, kita juga dapat menentukan posisi dengan prosentase atau dalam pixel tertentu, seperti di bawah ini di mana x adalah mewakili nilai horizontal sedangkan y mewakili nilai vertical.

x% y%
xpx ypx

Sebagai contoh, jika kita menginginkan image berada pada posisi 20% secara horizontal dan 10% vertical maka formatnya adalah sebagai berikut.

background-position:20% 10%;

MEMBUAT IMAGE BACKGROUND STATIS

Secara default, image background akan bergerak mengikuti pergerakan scroll baik ke atas maupun ke bawah. Jika menginginkan, kita dapat membuat image tersebut menjadi statis atau tidak bergerak ketika kita melakukan scroll terhadap halaman blog. Perintahnya adalah sebagai berikut.

background-attachment:fixed;

APLIKASI SEMUA PERINTAH

Jika kita memasukkan semua unsur perintah seperti yang telah kita bahas di atas maka kita akan mendapati kode khusus untuk image pada tag body adalah sebagai berikut.

body {
background-image:url(http://www.geocities.com/yono_pati/blue.jpg);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
}

Jika menginginkan, kita dapat meringkas perintah-perintah tersebut menjadi seperti di bawah ini tentunya dengan hasil yang sama.

body {
background: url(http://www.geocities.com/yono_pati/blue.jpg) no-repeat center center fixed;
}

Dengan deklarasi seperti itu, image blue.jpg akan ditampilkan satu kali (tidak berulang), dengan posisi ditengah-tengah baik secara horisontal maupun vertikal dengan status statis (walaupun discroll, image tidak akan bergerak).

Selamat Mencoba namun jangan lupa untuk melakukan backup terlebih dahulu!!

Manfaat Dasar Sebuah Blog Bagi Diri Sendiri

Sebagian besar orang di masa kini tahu apa itu sebuah blog, sebagian kecilnya kemudian tergerak untuk membuat sebuah blog, dan sebagian lebih kecil lainnya jatuh cinta lebih dalam terhadap blog. Saya pernah membahasnya di blog pribadi saya “Blogging, Microblogging & Fast Blogging”, disana saya membedakan antara blogging, microblogging dan fastblogging.

Pada dasarnya ketiga hal tersebut sama prinsipnya, yaitu menuangkan pikiran ke dalam bentuk lain berupa tulisan dengan media internet. Jika anda sendiri adalah seorang blogger mungkin anda pernah ditanya sama seperti saya oleh teman anda “Kenapa menulis blog?” Apa yang anda katakan ke teman anda mungkin berbeda dengan jawaban saya ataupun blogger yang lain, karena memang setiap orang punya alasan sendiri untuk menulis sebuah blog ataupun tidak.

Sebagian orang menjawab karena saya ingin mencoba mendapatkan penghasilan dari menulis blog (blog for income), saya ingin memasarkan produk/jasa saya melalui blog (blog for marketing), saya ingin mengekspresikan pemikiran saya melalui blog (blog for personal expression), saya ingin memberitahu orang lain bahwa saya seperti apa (blog for personal branding), saya ingin menumpahkan kekesalan saya (blog for stress release), saya ingin membagi ilmu/karya/pengalaman saya ke orang lain (blog for sharing), saya ingin mencari orang-orang yang menyukai hobby/kegiatan yang sama dengan saya (blog for community) dan mungkin masih banyak beberapa alasan lainnya.

Saya ingin sharing pendapat saya mengenai alasan kenapa saya menulis sebuah blog, saya bukan blog addict, saya juga bukan pro blogger, saya mungkin sama seperti sebagian besar orang yang menulis blog jika mood sedang bagus (atau mungkin ketika mood tidak bagus dan ingin me-release stress), ketika saya ada waktu, ketika saya tidak bisa tidur, ketika saya diperjalanan jauh dan tidak ingin menghabiskan waktu dengan sia-sia, ketika saya dirumah sendirian, dan lainnya.

Tujuan saya menulis blog mengalami beberapa peralihan, dari awalnya mengenal internet dan membuat website pribadi (dulu di geocities & joomla, sekarang sudah tidak ada) saya menulis blog untuk personal expression, kemudian saya berpikir memanfaatkan blog untuk personal branding juga sampai akhirnya saya menemukan satu alasan lagi yang saya temukan justru ketika orang lain menanyakan hal diatas kepada saya.

Saya menulis blog juga untuk kepentingan diri saya sendiri. Coba bayangkan ketika anda berusia 80 tahun nanti (saya berharap kita masih hidup, sehat dan bahagia) kemudian anda menemukan tulisan blog anda kemudian anda membacanya… saya pikirkan dan rasakan momen tersebut akan sangat menyenangkan… anda akan diajak flash back mengingat kembali masa-masa anda muda dulu, anda akan terlibat secara emosi kembali ketika anda membaca blog anda… ya benar secara emosi karena biasanya ketika anda menulis, anda menuangkan pikiran anda, anda akan terlibat lebih dalam secara emosi… Ketika anda marah, anda akan menuliskannya dengan perasaan marah dan bisa saja dengan menggebu-gebu melampiaskannya kedalam tulisan anda… ketika anda sedih, anda mungkin menulisnya sambil menangis dan penuh harap akan ada orang lain yang mengerti anda diluar sana… atau ketika anda sedang begitu bahagianya, anda ingin memberitahukan kepada dunia “Hey I’m the happiest man in the world now!”… dan masih banyak lagi emosi-emosi lainnya…

Anda bisa saja flash back ke masa lalu dengan sebuah gambar di foto atau gambar bergerak di video… tetapi tetap ada perbedaan ketika anda menuangkan pikiran dalam tuisan dengan beberapa media tersebut… mungkin jika anda menulis sebuah diary fenomena yang akan anda rasakan akan sama… hanya saja mungkin anda harus membawa diary anda kemanapun anda pergi, sedangkan blog anda bisa menuliskannya di belahan dunia manapun selama anda bisa terhubung dengan internet.

Jadi sudah tahukah alasan anda kenapa menulis sebuah blog?