2 Cara Membuat Efek Bayangan Di Gambar Blog

2 Cara Membuat Efek Bayangan Di Gambar Blog

Cara mudah membuat dan menambahkan serta memasang efek bayangan shadow pada gambar blogger - Pernahkah anda mampir di situs web blog orang lain dan melihat gambar di konten blog mereka seperti ada bayangan , baik itu di postingan atau halaman lainya ? .  Saya rasa anda pasti pernah melihatnya , Sebenarnya tutorial pemasanganya itu pada blog sangatlah mudah karena tinggal menambahkan CSS saja pada bagian template .

Efek shadow merupakan salah satu cara blogger untuk mendesain dan mempercantik tampilan halaman mereka, itu bertujuan untuk menarik perhatian pengunjung blog supaya lebih betah dan sering mampir ke blog kita . Dengan Cara menambahkan efek bayangan tersebut di blog anda akan memungkinkan untuk anda mempunyai pengunjung tetap karena tidak jenuh dengan tampilan blog anda , tetapi ingat Bahwa itu juga harus disertai dengan artikel yang terupdate serta berkualitas.
Cara Membuat Efek Bayangan Di Gambar Blog
Baiklah cukup basa basinya dan sekarang saya akan berikan tutorialnya pada anda, saya akan memberikan 2 cara membuat efek bayangan yang keren serta caranya yang mudah untuk anda pasang di blog , jika anda tertarik silahkan ikuti langkah - langkahnya dibawah berikut

Cara Membuat Efek Bayangan Gambar Blog Dengan Mudah

Efek Pertama
Kalau cara yang saya bagikan pertama ini untuk membuat semua gambar yang berada di dalam postingan blog dengan otomatis mempunyai efek shadow , jadi sobat tak perlu lagi untuk memasukkan satu persatu kode pada tag div gambar dengan manual , karena hal tersebut sangat membuat waktu.
  1. Saya harap anda sudah login di akun blogger anda terlebih dahulu.
  2. Lalu pilih menu Template => Edit Html 
  3. Selanjutnya anda cari kode]]></b:skin>
  4. Kemudian masukkan kode berikut untuk menampilkan efek shdwonya di post gambar , caranya dengan memasang kode dibawah ini tepat diatas kode ]]></b:skin>
    .post-body img{background:#FFF;/* background color around the image */
    padding:15px;/* The Space Between Border and Image */
    border-radius:50% 0;/* Rounded border */
    box-shadow:0 0 15px #000;/* Shadow */
    -moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s}
    .post-body img:hover{border-radius:0;/* This removes the border roundness (value 0) */
    -moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;cursor:pointer}
  5. Lalu anda simpan Template dan lihat hasilnya
Efek Kedua
Cara berkut ini hanya menampilkan efek bayangan pada gambar tertentu saja , maka jangan anda mengikuti cara pertama diatas , gunakanlah cara yang kedua ini , karena cara ini mempergunakan cara manual , yang fungsinya untuk memberikan efek bayangan pada gambar yang diinginkan.
  1. Ketika meng upload gambar pada postingan blog , di bagian HTML ( bukan pada compose ) anda akan menemukan kode gambar seperti berikut
    <div class="separator" style="clear: both; text-align: center;">
    Kode Gambar Blog
    </div>
  2. Lalu anda tambahkan kode box-shadow: 3px 3px 8px #000; ke dalam kode
    <div class="separator" style="clear: both; text-align: center;">
  3. Sehingga penampilan kodenya akan berubah seperti berikut  :
    <div class="separator" style="box-shadow: 3px 3px 8px #000; clear: both; text-align: center;">
  4. Sebaiknya anda pratinjau terlebih dahulu , jika efek banyanganya muncul maka anda tinggal publikasikanya saja
Demikianlah artikel mengenai 2 Cara Gampang Membuat serta Menambahkan Efek Bayangan Pada Semua Gambar di Blogger . anda dapat memilih salah satu cara diatas yang anda inginkan , jika anda ingin menampilkan otomatis sebaiknya anda gunakan opsi pertama , Tetapi jika ingin yang manual silahkan sobat ikuti cara kedua. demikian tutorial desain blog untuk memberikan efek shadow pada image blog sobat dan semoga bermanfaat

Saya merupakan anak ke 8 dari 8 bersaudara, berwatak keras kepala dan sangat mencintai dunia blogging serta desain.
"Love My Mom"

Previous
Next Post »