Membuat efek gambar di blog dengan css

Diposting oleh Muhammad Iqbal on Jumat, 10 Agustus 2012

efek gambar dengan css

CSS sangat felxibel bisa digunakan untuk banyak keperluan, berbagai media, semua platform dan semua sistem pengelola konten (wordpress, blogger, joomla dll). Bagaimana cara Membuat efek gambar di blog dengan css? Penggunaanya juga sangat mudah sehingga kita bisa brekreasi dengan tulisan maupun gambar. Kali ini saya akan berbagi cara bagaimana menyisipkan efek gambar dengan css pada blogger.
Untuk menyisipkan css di blogger ada dua cara :
  1. Menyisipkan css pada template
  2. Menyisipkan css pada posting
Kedua cara ini sebenarnya hampir sama, yang berbeda hanya penempatan kode cssnya saja. Saya coba buat contoh menyisipkan css untuk membuat efek gambar.

Menyisipkan css pada template

Pertama masuk ke menu template
menambahkan css pada template blog
Klik tombol Ubahsesuaikan
menambahkan css pada template blog
Pilih tinggat lanjut
menambahkan css pada template blog
Kemudian isikan kode css yang akan ditambahkan misal :

.post img {
    margin: 30px;
    border: 5px solid #eee;
    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
.post img:hover {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
}
Lalu simpan dengan menekan tombol Terapkan ke Blog.
Kode css diatas berfungsi untuk menambahkan efek gambar pada semua posting (sesuai template).

Menyisipkan css pada posting

Untuk cara kedua, css kita sisipkan pada bagian posting dengan langkah :
Pertama buat posting baru atau edit posting yang sudah ada
efek css pada posting blog
Masukkan gambar yang akan diberi efek, boleh diupload atau coba dari situs saya, pilih from url trus isikan http://www.zainalhakim.web.id/zainal-web.id.png, lalu tekan add selected
efek css
Jika gambar sudah muncul, kemudian tekan tombol HTML (seperti pada lingkaran merah)
efek css pada posting blog


Pada bagian HTML editor, sisipkan kode css yang akan digunakan
efek css pada posting blog
Contoh berikut kede css untuk merubah gambar yang berada dalam area <div id="contoh1">...</div> (anda bisa sesuaikan)
#contoh1 img {
    margin: 30px;
    border: 5px solid #eee;
    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
#contoh1 img:hover {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
}
kemudian tambahkan : <div id="contoh1"> sebelum perintah <img... dan tambahkan </div> setelah <img ... />
Kode diatas dianjurkan hanya untuk satu gambar, jika digunakan banyak gambar anda bisa ubah #contoh menjadi .contoh dan <div class="contoh1">
Kemudian simpan dan publikasikan. Silahkan lihat halaman blog anda.
Jika ada masukan, atau pertanyaan jangan sungkan mengisi komentar halaman ini. Dan jika ini berguna untuk anda silahkan berbagi dengan yang lain.

Demikian turitorial Membuat efek gambar di blog dengan css
Semoga Bermanfaat

Ditulis Oleh : Muhammad Iqbal ~ Turitorial Blog

Anda sedang membaca sebuah artikel yang berjudul Membuat efek gambar di blog dengan css. Terimakasih atas kunjungannya dan semoga artikel ini dapat bermanfa'at.

:: Thank you for visiting ! ::

Comments
0 Comments

{ 0 komentar... read them below or add one }

:) :( ;) :D ;;-) :-/ :x :P :-* =(( :-O X( :7 B-) :-S #:-S 7:) :(( :)) :| /:) =)) O:-) :-B =; :-c :)] ~X( :-h :-t 8-7 I-) 8-| L-) :-a :-$ [-( :O) 8-} 2:-P (:| =P~ :-? #-o =D7 :-SS @-) :^o :-w 7:P 2):) X_X :!! \m/ :-q :-bd ^#(^ :ar!

Bagaimana Pendapat Sobat Semua Tentang Artikel Di Atas???

Untuk menambahkan yahoo emotion pada komentar sobat adalah dengan cara menyertakan kode yahoo emotion diatas pada komentar yang sedang ditulis contohnya kode seperti ini :) yang terdapat di atas kotak komentar ini

Panduan Memberi Komentar
1.Masukan komentar anda
2.Lalu pada kata 'beri komentar sebagai' , pilih account yang anda punya, bagi yang belum mempunyai account pilih Name/url, isi nama anda dan Kosongkan URL atau isi dengan alamat facebook anda(untuk mengetahui alamat facebook anda silahkan login ke facebook dan pilih profile anda, anda dapat melihat alamat Facebook anda di atas, contoh alamat Facebook punya saya http://www.facebook.com/profile.php?id=1823916177
3.dan kemudian Publikasikan
4.Selesai dan anda tinggal menunggu komentar anda muncul
Semoga bermanfa'at.

 
^ Back to Top