Membuat efek gambar di blog dengan css

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). 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 https://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.

 

Semoga Bermanfaat
Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Artikel Lainnya

  • Cara Membagi halaman hasil cetak printer dengan css
    Jika kita mencetak sebuah halaman web yang isinya panjang, biasanya hasil cetaknya bersambung menjadi beberapa halaman yang tidak pasti bagian-bagianya. Bisa saja satu halaman terdiri dari beberapa bagian bahasan atau format yang berbeda sehingga menyulit
  • Membuat Background motif unik dengan CSS3
    Barusan habis jalan-jalan ke situs seberang, ketemu tutorial membuat motif gambar background yang sangat unik dibuat cuma dengan css3. Memang luar biasa tak pernah terbayangkan kalau hasilnya bisa mirip dengan sebuah gambar yang dibuat dengan aplikasi seperti photoshop.
  • Menggunakan banyak background gambar dengan css
    Berkreasi tiada batas itu yang tentunya kita harapkan bisa dilakukan dengan css. Banyak hal yang anda bisa lakukan agar tampilan sebuah halaman bisa lebih menarik dengan bantuan css. Kira bisa atur gambar, text atau objek lainya dengan cukup mudah. Termasuk mengatur gambar latar/background yang berikut ini saya sampaikan yaitu bagaimana menampilkan banyak gambar sebagai latar dari halaman web.
  • Membuat menu dropdown dengan css
    Membuat dropdown menu dengan css. Banyak sekali variasi menu web/blog yang bisa dibuat dengan css, ada bentuk menu tulisan maupun gambar biasa, dan ada juga bentuk-bentuk menu dropdown/menu bercabang secara horizontal atau vertikal. Pembuatanya juga bervariasi, ada yang menggunakan javascript, ada juga menggunakan jquery, bahkan ada yang membuat menu dari flash. Pada tulisan ini anda akan mengetahui bagaimana cara membuat menu dropdown horizontal murni dibuat dengan css. Silahkan anda simak.
  • Efek gambar grayscale dengan css
    Beberapa waktu lalu saya pernah tulis tutorial tentang Membuat efek gambar dengan css, yang membahas tentang bagaimana caranya menambahkan efek glow, berputar, dan transparan. Pada tutorial kali ini saya akan berbagi tentang bagaimana membuat efek gambar grayscale atau hitam putih dengan css.

Kiriman terbaru