Mau tau cara buat yang seperti ini, silahkan klik disini

widget by Kianhome
KianHome - Sebuah gambar dalam setiap artikel bisa memberi penejelasan akan maksud keseluruhan dari isi artikel itu sendiri, jadi tidak heran bila ada pepatah yang mengatakan bahwa, "Gambar bisa bicara".

Sama seperti yang k'ian maksud dari judul tutorial kali ini "", maka pokok bahasan kita adalah gambar / foto yang ada didalam postingan blog kita. meskipun banyak yang mengatakan merubah tampilan gambar itu cukup sulit, apalagi harus mengutak-atik blog.

Jawabannya memang benar, tapi tidak sesulit yang dibayangkan.. untuk awal kita akan bahas mengenai dasar dari pembangunan gambar dalam postingan kita..

Pengkodean Gambar
Dalam membangun gambar biasanya langsung menggunakan kode CSS pada body post, dengan contoh kode berikut :
.post img{padding:5px; /*--untuk jarak pada sisi gambar--*/
border:1px solid #e5e5e5; /*--garis tepi pada sisi gambar--*/
margin:5px;/*--untuk jarak gambar sisi tulisan--*/
}
Dari contoh kode diatas sebenarnya cukup jelas apa yang kita buat dalam style untuk gambar postingan, dan hal ini masih tergolong standart untuk style dengan efek yang unik. sebagai contoh lihat gambar dibawah ini :

Mengenal Border / Garis Tepi
Cara paling mudah dalam memberi style atau efek kepada gambar bisa melalui border atau garis tepi. mulai dari jenis, ukuran hingga warna cukup memberi pengaruh. dasar kode border sendiri biasanya :
border:ukuran dlm pixel jenis garis warna garis;
bisa diterapkan sebagai berikut :
border:1px solid #F7621D;
Penjelasan :
1px = untuk ukuran garis tepi, jika ingin merubah cukup mengganti angka menjadi (2px, 3px, atau lebih )
solid = jenis dari garis tepi yang dimuat, jika ingin merubahnya bisa dilihat disini
#F7621D = warna dari garis tepi itu sendiri, jika kamu ingin merubahnya bisa dilihat disini
Jika kamu sudah cukup paham kita akan coba mengganti bordernya pada gambar yang dimaksud :
Dari contoh diatas k'ian merubah kode bordernya menjadi :
border : 4px solid #f7651d;
Mudah bukan..???

Efek dengan Background
Efek dengan background bisa kita bagi menjadi dua, dengan warna saja atau dengan menggunakan gambar. kenapa dengan gambar bisa..?? ya memang bisa, karena jenis gambar sendiri bisa kita tentukan menjadi background (layar belakang) atau gambar utama (layar utama). untuk kode nya sendiri masih sama hanya kita menambahkan sedikit kode untuk backgroundnya :
.post img{padding:5px; /*--untuk jarak pada sisi gambar--*/
border:1px solid #e5e5e5; /*--garis tepi pada sisi gambar--*/
margin:5px;/*--untuk jarak gambar sisi tulisan--*/
background:yellow;}
Lihat contoh berikut :

Jika dirasa kurang puas kita bisa merubah ukuran paddingnya agar terlihat lebih penuh,
dimana pada gambar pertama padding yang digunakan adalah : 5px;, kemudian pada gambar kedua menggunakan padding :10px;, kamu bisa menentukan besaran dari padding yang
kamu anggap paling cocok.

Selanjutnya dengan background gambar:
Jika pada kode pertama kita menggunakan background warna, sekarang kita akan coba dengan background gambarnya, perhatikan yang harus diubah :
.post img{padding:5px; /*--untuk jarak pada sisi gambar--*/
border:1px solid #e5e5e5; /*--garis tepi pada sisi gambar--*/
margin:5px;/*--untuk jarak gambar sisi tulisan--*/
background:url (alamat gambar yang dimaksud);}
Sehingga hasilnya seperti yang diatas, jika sudah dirasa cukup puas maka bisa langsung kamu simpan.

Share to :

Related Post :


About the Author :

K'ian is a designer, web tutorial design, and blogging enthusiasts. Tutorial blog debut the first time when entering college, when I get to know the world wide internet and so much more. Now I work at one of the state trading company, a job that would conflict with the world of blogging and web design. Today remains a serious manage blog " Kolam Blogging Tips | Kianhome ".

3 Response to "Efek dan style untuk Gambar pada Blogspot"

  1. waah cantiik bangeet

    oh ya,, udah lama nih kian gak mampir.. ditunggu kedatangan dan komentarnya di blog saya yaa ...Replay

     

  2. M - Azka Said,

    Wow kk wow, lebih stylist ijin coba gan thanks. ...Replay

     

  3. UNEJ Said,

    Mantabs tipsnya gan, salam kenal n kunjungan dari : UNEJ Jember. ...Replay

     

Post a Comment

Blog ini menganut sistem "Dofollow", Silahkan Tinggal komentar, saran, kritik disini.. apapun itu jangan SPAM ok..


Berita Terkini

Friend Follower's

Tips Health

Techno

Hot Nasional

Celebrity

My Blog List

Recent Comment

© Copyright 2011 | Dikelola sepenuhnya oleh : Kiancoi
KianHome Member of PlanetBlog | SitusBersih | Support on Mozilla Firefox and Google Crome Browser
Home | Posts RSS | Comments RSS | Sexy Blog |