Langsung ke konten utama

Nampilin gambar animasi transparan di blogger

Hari ini nyoba masukin kaoani (animasi emoticon) ke blog ini dari anikaos.comanikaos.com. Pake cara tradisional aja, salin dan tempel URL gambarnya.
Pas di jalanin loh loh loh.... Gambar yang aslinya tembus pandang koq jadi ada kotak putihnya. Otak atik gambarnya ga pengaruh .
Curiga CSS-nya nih. Masa sih mesti ngubek-ngubek templatenya , males banget!!
Ga pake lama, langsung tulis "transparent gif blogger" di kotak pencarian google tersayang.
Nemu http://www.google.com/support/forum/p/blogger/thread?tid=05e499cf8c706edb&hl=en yang memang ngebahas ni permasalahan. Ada mbak Merliny yang ngejelasin penyelesaiannya.
Katanya sih masalah ini cuma muncul kalo kita make template "Simple" atau "Watermark" doang.
Jalan keluarnya pun ternyata sederhana aja, edit templatenya, trus cari:

.BlogList .item-thumbnail img {
padding: 5px;

background: #fff;

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

trus ganti deh #fff jadi transparent

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 5px;

background: transparent;

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}



setelah di uji... ahaaaa....!!! Kotak putihnya hilang, tapi koq tetep ada kotak yang membayang yah...
hmmm... ternyata tinggal nol kan aja ukuran bayangannya

dari:

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);


menjadi:

-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .5);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .5);

Lihat lagii...h... SELESAI!!!

Komentar

Postingan populer dari blog ini

Memasang Android 4.4 KitKat di Samsung Galaxy W (Wonder) GT-I8150

Membuat backup Singkronisasikan handphone (contact, dll) Saya membuat backup SMS dengan SMS To Text, dan riwayat panggilan dengan Call Logs Backup and Restore Download Download Android SDK Tools Windows: http://dl.google.com/android/installer_r22.3-windows.exe Linux: http://dl.google.com/android/android-sdk_r22.3-linux.tgz Android SDK Tools juga terdapat dalam pake Android SDK Windows 32 bit: http://dl.google.com/android/adt/adt-bundle-windows-x86-20131030.zip Linux 32 bit: http://dl.google.com/android/adt/adt-bundle-linux-x86-20131030.zip Download ClockworkMod (CWM) Recovery Versi minimal untuk memasang CM 11 adalah versi 6.0.4.4. Jika menggunakan versi yang dibawah/sebelum itu, akan muncul pesan kesalahan "set_metadata_recursive: some changes failed" pada saat memasang CM nantinya. Download versi versi 6.0.4.5 di http://goo.im/devs/arco/ancora/cwm/recovery-clockwork-6.0.4.5-ancora.zip Download CyanogenMod (CM) 11 http://goo.im/devs/arco/ancor...

Perbandingan hasil findElements() Selenium yang menggunakan (XPath)[index] versus Xpath

Object hasil findElements() dari XPath dengan index lebih konsisten daripada yang didapat dari iterasi hasil findElements() XPath tanpa index. #selenium #web #automation

Memberi Border Putih Pada Foto (HTML + CSS)

Bagaimana cara membuat foto jadi terlihat memiliki border putih di blogger? Yang seperti ini? Cara termudahnya adalah memilih template yang menyediakan fasilitas untuk itu.. Ada cara lain? Ada sih, kalo bersedia mau agak repot... Pada saat mem-posting, di editornya PILIH tampilan HTML lalu untuk membuat foto yang ber-border putih ketik kode yang kira-kira seperti berikut ini <div id="background" style="background-color:gray;text-align:center;padding:10px 10px 10px 10px"> <div id="border" style="display: inline-block;background-color:fff;padding: 8px 8px 8px 8px"> <img src=http://twitpic.com/show/thumb/tq7m5.jpg" /> </div> </div> Penggunaan attribute id pada div di contoh ini tidak berpengaruh apa-apa hanya untuk mempermudah mengikuti penjelasan saja, jadi boleh dihapus. Pertama, jika border-nya nanti berwarna putih maka background/ ruang diluar diluar border itu sebaiknya diberi w...