Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya mengubah text menjadi gambar saat di klik di blogger
Info: Okay jika kamu sudah penasaran degan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Disclaimer
Sebelum saya benar benar membahas mengenai bagaimana caranya merubah text menkadi gambar ketika diklik secara otomatis, saya akan memberikan disclaimer dulu bahwa setiap artikel yang kami tuliskan disini adalah murni tulisan admin, jadi jika kamu ingin mengcopy paste harap sertakan link sumber oke
Ketika kamu sedang membaca artikel disini kemudian ada penjelasan yang tidak kamu pahami kamu bisa menyampaikannya dikolom komentar oke agar admin bisa memperbaiki penulisan didalam artikel ini
Peringatan: Artikel ini khusus untuk orang yang paham aja, atau orang yang sedang memerlukan artikel seperti ini untuk pengetahuannya, bagi kamu yang tidak paham sama sekali menjauh aja karena mungkin disini mungkin bukan tempat kamu untuk mendapatkan informasi
Text To image
Mode ataupun fitur text to image ini memiliki fungsi yang mana apabila suatu text diklik maka text tersebut akan berubah menjadi sebuah gambar secara otomatis, dalam artian lain apabila setiap kali text tersebut diklik maka text tersebut akan hilang kemudian ditampilkanlah sebuah gambar sebagai penggantinya
Tanpa Javascript
Dalam pembuatan text berubah menjadi gambar ketika diklik ini maka kode yang dibutuhkan hayalah kode CSS saja, tanpa megaitkan kode javascript didalamnya, dalam kata lain untuk membuat text menjadi gambar ketika diklik haya menggunakan kode CSS saja, akan semakin membuat tampilan semakin responsive tentunya
Contoh Tampilan
Jika kamu penasaran bagaimana contoh tampilan dari text yang berubah menjadi gambar ketika diklik, kamu bisa melihat contoh tampilannya berimut ini
Cara pembuatan
Baiklah sobat icloudZer sekarang saatnya admin bakalan memberikan penjabaran mengenai bagaimana caranya mengubah text menjadi gambar saat diklik secara otomatis, harap disimak dan dipelajari artikel ini hingga selesai oke
Kode CSS
Langkah pertama yang bisa kamu lakukan untuk mengubah text menjadi gambar saat diklik kamu bisa menyalin kode CSS dibawah ini kemudian kamu bisa meletakkannya diatas kode ]]></b:skin>
.rahtext-toImage{
z-index:5;
overflow:hidden;
font-size:normal;
font-weight:normal;
font-family:normal;
color:#f80000;
}
.rahtext-toImage:focus{
pointer-events:none
}
.rahtext-toImage:before{
content:'Muhammad Rahmat Uliady';
display:block;
}
.rahtext-toImage:focus::before{
content:'';
background-image:url(link_gambar_milikmu_upload_dulu_di_postingan_blogger);
width:350px;
height:500px;
display:inline-block;
vertical-align:-13px;
background-repeat:no-repeat;
margin:2px;
background-position:center left;
background-size:350px 350px;
}Info: Atau sobat icloudZer bisa menggunakan tag kode <style> untuk meletakkan kode CSS diatas
Kode HTML
Langkah selanjutnya yang bisa kamu lakukan untuk bisa mengubah text menjadi gambar saat diklik, kamu bisa menyalin kode HTML dibawah ini kemudian kamu bisa menggunakannya didalam artikel menggunakan mode HTML
<div class='rahtext-toImage' tabindex='0'/>Info: Fungsi dari kode HTML diatas adalah untuk menampilkan text yang apabila diklik akan berubah menjadi gambar secara otomatis