Pembaruan Terakhir (26-05-2023)
  • Update script: membuat notifikasi semua komentar di blogger (mode popup)
  • Spesifikasi: src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/user53cm.js'

  • Toast notif disertai Text-to-speech
  • Cukup klik 1 kali maka mode responsif akan aktif (sebelumnya dua kali kik)
  • Sekarang komentar telah di tambahkan beberapa fitur custom segera periksa

Cara membuat loading text ditengah gambar menggunakan CSS diblogger

views

Hello sobat IcloudZer Kali ini admin akan memberikan informasi seputar blogging, karena mungkin sebagian dari kamu bertanya tanya, bagaiamana sih membuat atau menampilkan text didalam sebuah gambar, ketika gambar belum memuat tampilan seluruhnya

Info: Mungkin bisa dibilang juga sebagai Loading gambar dengan disertai text ditengahnya

Jangan khawatir kami akan menjabarkan serta menjelaskan kepada anda mengenai hal tersebut, oh jika kamu mengetahui hal baru dari blog kami yakni icloudice.com Jangan ragu ya untuk membagikan artikel kami ini, mudah-mudahan bisa bermanfaat

Loading Gambar (Text in Image

Bang mengapa ya disebut dengan loading image? Mungkin karena textnya akan muncul sebelum gambar memuat secara seluruhnya, itulah mengapa disebut dengan loading image dengan disertai Text ditengahnya

Memakai kode CSS

Pembuatan loading gambar disertai text ditengahnya sepenuhnya dibuat menggunakan unsur kode CSS, sehingga tidak membuat performa situs blog anda menurun, maksudnya situs blog anda akan tetap stabil

Contoh Tampilan

Sebagai contoh agar tidak penasaran kamu bisa melihat contoh tampilan dari loading gambar disertai text ditengahnya sebagai berikut :

Info: Bagaimana dengan tampilannya keren bukan, seperti kerennya diriku ini hehehe ๐Ÿ˜

Kode CSS

Berikut ini adalah kode CSS yang bisa kamu gunakan untuk membuat membuat text ditengah gambar

.img-meGanteng:before{content:'Server Ganteng.id';display:block;position:absolute;top:50%;left:50%;max-width:none;max-height:100%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);color:#989b9f;font-size:10px}

Info: Letakkinnya dimana bang? didalam blog kamu dong!!! Kok gak ngegombal sih ..! Iya aku nya lagi bete..entar ya ngegombalnya..!

Oke kita lanjutin, mengenai peletakkan kodenya kamu bisa menaruhnya di atas atau sebelum kode ]]></b:skin>

Cara Penggunaan

Nah untuk cara penggunaannya kamu bisa menggunakan class='img-meGanteng' setelah Tag <img, sebagai contoh kamu bisa melihat kode Penggunaannya seperti berikut ini

<a href='/'><img class='img-meGanteng' alt='My Images' src='https://1.bp.blogspot.com/-Cb3p2mf3qmE/YTUUvvtF-QI/AAAAAAAAKYw/AJsGwdbWuPUkngsg-FMNZDHL6JpHq1U3gCNcBGAsYHQ/s0/4_20210906_020205_0003.png' width='50' height='50'/></a>

Info: Oke Bagaimana sudah mengerti atau belum, dengan penjelasan saya diatas

Keindahanmu akan kuabadikan disetiap karyaku.

Posting Komentar

Pergunakanlah kecerdasan anda saat berkomentar, dan tinggalkan komentar sesuai topik tulisan. Komentar dengan link aktif tidak akan ditampilkan.
Masukkan URL Gambar atau URL Video YouTube atau Potongan Kode , atau Quote , lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image video quote pre code
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.