You must enable Javascript in your browser to run or open this site.

Gambar di Artikel dengan Tampilan Bayangan

Sesuai judul artikel ini, merubah gambar uploadan pada posting atau artikel dengan tampilan berbeda, yaitu dengan bayangan. Mungkin sudah ada beberapa template dengan bawaan cara seperti ini, namun tidak ada salahnya jika cara ini diulang kembali disini hehe. Kembali ke perkara ini, cara ini sangat bagus karna dengan cara ini sobat bisa memperindah tampilan gambar pada artikel dan semua browser support pastinya. Seperti apa sih tampilan bayangan tersebut? Nih kita lihat contoh dibawah.
Nah, sobat bisa lihat contoh gambar diatas. Sebelah kiri tidak menunjukan bayangan apapun, sedangkan yang kanan bayangan terlihat jelas. Apakah sobat mau menghias artikel sobat dengan bayangan seperti itu? Mari simak liputan dibawah ^^ hehe.

• Pertama tama buka blogger sobat dengan password dan id tentunya

• Saat di dashboard, klik rancangan/design → edit html → centrang expand widget template

• Cari kode yang mirip berikut dengan ctrl + f agar lebih mudah
.post-body img {
padding: 5px 10px 10px 5px;
}
• Tambahkan kode background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuW2eRSvyDv1Ijw3GQ2AczvK6C4wNzrKYxQRe2yeRG0vCwjeNXotSMc25vTLsOGKwodyoWVGe1eTKnIXU-tckYm4bpRp4-Uv9OTYG132cGrS5PX8-wodhfpekbpFDIQ1RxZ4d7Htj2To0/s1600/background.png) no-repeat right bottom; dan menjadi seperti berikut
.post-body img {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuW2eRSvyDv1Ijw3GQ2AczvK6C4wNzrKYxQRe2yeRG0vCwjeNXotSMc25vTLsOGKwodyoWVGe1eTKnIXU-tckYm4bpRp4-Uv9OTYG132cGrS5PX8-wodhfpekbpFDIQ1RxZ4d7Htj2To0/s1600/background.png) no-repeat right bottom;
padding: 5px 10px 10px 5px;
}
kurang lebihnya bisa sobat edit edit lagi

• Save Template dan lihat hasilnya!

Kurang lebihnya terimakasih atas kunjungan sobat, baik ke blog maupun ke postingan ini :). Perlihatkan tampilan terbaik sobat! :D

4 comments

  1. q juga pake efek ini.. tp klo mo lebih ringan bs pake css juga

    BalasHapus
  2. @Karlz : Okee sob... ini bukannya CSS juga ya?? :D

    BalasHapus
  3. ukuran gambarnya kira berapa? bila ukuran gambarnya besar pengaruhnya di mana sob..aku pernah bikin template cuma gambarnya gagal jadi nggak diterusin..hehehe

    BalasHapus
  4. Untuk kakak dan abel : Ukuran apanya ya? Ukuran filenya kecil 3.32kb, ukuran gambarnya sih besar 828x837 pengaruh sepertinya melihat dari pengalaman saya tidak ada.., tetapi kalo kakak dan abel pakai itu, besar ukuran gambarnya mengikuti gambar yang diupload...

    BalasHapus