Kumpulan sulap teks saat klik pure CSS di blogger
Hello sobat Bloggermuda kali ini admin bakalan memberikan informasi mengenai Kumpulan sulap teks saat di klik di blogger
Tanpa Javascript
Kumpulan sulap teks di blogger ini di buat tanpa menggunakan unsur dari kode javascript yang membuat blog semakin lambat, kamu harus mebaca dan mempelajarinya hingga selesai oke
1. Change of Text
Apakah itu change of text? Change of text merupakan pengertian dalam bahasa Inggris yang berarti mengubah teks, oke sebenarnya sih admin sendiri yang memberikan nama dari fitur tersebut, oke untuk mengetahui bagaimana change of text tersebut kamu bisa mempelajarinya lebih lanjut dikala artikel ini
Contoh Tampilan
Jika kamu penasaran bagaimana contoh tampilan dari ketika tekst berubah saat di klik, kamu bisa menggunakan tombol dibawah ini untuk memeriksanya
Kode CSS
Langkah pertama yang bisa kamu lakukan untuk mengubah teks saat di klik kamu bisa menyalin kode CSS dibawah ini kemudian kamu bisa meletakkannya diatas kode ]]></b:skin>
.rahtext-change{
z-index:5;
color:#f80000;
overflow:hidden;
font-size:normal;
font-weight:normal;
font-family:normal;
}
.rahtext-change:focus{
pointer-events:none
}
.rahtext-change:before{
content:'Siapa nama admin?';
}
.rahtext-change:focus::before{
content:'Muhammad Rahmat Uliady';
}Info: Atau sobat Bloggermuda bisa menggunakan tag kode <style> untuk meletakkan kode CSS diatas
Kode HTML
Langkah selanjutnya yang bisa kamu lakukan untuk bisa merubah text secara otomatis saat diklik, kamu bisa menyalin kode HTML dibawah ini kemudian kamu bisa menggunakannya didalam artikel menggunakan mode HTML
<div class='rahtext-change' tabindex='0'/>Info: Fungsi dari kode HTML diatas adalah untuk menampilkan text yang apabila diklik akan berubah secara otomatis
2. Change of Color
Kumpulan sulap teks kedua bernama change of Color yang mana saat kamu mengklik suatu teks maka teks tersebut akan berubah warna secara otomatis
Contoh Tampilan
Jik kamu penasaran bagaimana contoh tampilan dari ketika warna text berubah warna saat diklik, kamu bisa menggunakan tombol dibawah ini untuk langsung melihatnya
Kode CSS
Langkah pertama yang bisa kamu lakukan untuk mengubah warna text saat diklik kamu bisa menyalin kode CSS dibawah ini kemudian kamu bisa meletakkannya diatas kode ]]></b:skin>
.rahcolor-change{
z-index:5;
overflow:hidden;
font-size:normal;
font-weight:normal;
font-family:normal;
text-align:center;
}
.rahcolor-change:focus{
pointer-events:none
}.rahcolor-change:before{
content:'klik mengubah warna';
color:#f80000;
}
.rahcolor-change:focus::before{
content:'klik mengubah warna';
color:#20409A;
}Info: Atau sobat Bloggermuda bisa menggunakan tag kode <style> untuk meletakkan kode CSS diatas
Kode HTML
Langkah selanjutnya yang bisa kamu lakukan untuk bisa mengubah warna text saat diklik, kamu bisa menyalin kode HTML dibawah ini kemudian kamu bisa menggunakannya didalam artikel menggunakan mode HTML
<div class='rahcolor-change' tabindex='0'/>Info: Fungsi dari kode HTML diatas adalah untuk menampilkan text yang bisa berubah warna saat diklik
3. Move the Text
Kumpulan sulap teks selanjutnya adalah move the text, soalnya jika teks diklik akan langsung berpindah posisi secara otomatis, dan cara tersebut bisa kamu terapkan di blogger
Contoh Tampilan
Jika kamu penasaran dengan contoh tampilan dari move text tersebut kamu bisa melihatnya seperti contoh tampilan dibawah ini
Kode CSS
Langkah pertama yang yang bisa kamu lakukan untuk membuat text bisa berpindah posisi saat diklik, kamu bisa menyalin kode CSS dibawah ini kemudian simpan diatas kode ]]></b:skin>
.rahtext-move{
z-index:5;
color:#f80000;
overflow:hidden;
font-size:normal;
font-weight:normal;
font-family:normal;
}
.rahtext-move:focus{
pointer-events:none
}.rahtext-move:before{
content:'Click of Cliks';
float:left;
}
.rahtext-move:focus::before{
content:'Click of Clicks';
float:right;
}Info: Atau sobat Bloggermuda bisa meletakkan kode CSS diatas menggunakan tag kode <style>
Kode HTML
Langkah selanjutnya yang bisa kamu lakukan adalah menyalin lagi kode HTML dibawah ini, kemudian kamu bisa menggunakan didalam artikel atau didalam menu Edit HTML diblogger
<div class='rahtext-move' tabindex='0'/>Info: Fungsi dari kode HTML diatas adalah untuk menampilkan text yang bisa berpindah tempat saat diklik tersebut
4. Remove Of Text
Kumpulan Sulap teks selanjutnya adalah Remove of text merupakan fitur yang mana apabila suatu teks diklik maka akan menghilangkan teks tersebut, dan untuk memunculkan teks tersebut kamu harus mengklik lagi teks ataupun area lainnya pada tampilan remove of text
Contoh Tampilan
Jika kamu penasaran bagaimana contoh tampilan dari text yang bakal menghilang secara otomatis ketika diklik, kamu bisa menggunakan tombol dibawah ini untuk langsung melihatnya
Kode CSS
Langkah pertama yang bisa kamu lakukan untuk menghilangkan teks saat diklik kamu bisa menyalin kode CSS dibawah ini kemudian kamu bisa meletakkannya diatas kode ]]></b:skin>
.rahtext-remove{
z-index:5;
overflow:hidden;
font-size:normal;
font-weight:normal;
font-family:normal;
color:#f80000;
}
.rahtext-remove:focus{
pointer-events:none
}
.rahtext-remove:before{
content:'Karya Kami';
display:block;
}
.rahtext-remove:focus::before{
content:'Karya Kami';
display:none;
}Info: Atau sobat icloudZer bisa menggunakan tag kode <style> untuk meletakkan kode CSS diatas
Kode HTML
Langkah selanjutnya yang bisa kamu lakukan untuk bisa menghapus text saat diklik, kamu bisa menyalin kode HTML dibawah ini kemudian kamu bisa menggunakannya didalam artikel menggunakan mode HTML
<div class='rahtext-remove' tabindex='0'/>Info: Fungsi dari kode HTML diatas adalah untuk menampilkan text yang apabila diklik akan terhapus secara otomatis
5. Text To image
Kumpulan sulap terakhir adalah fitur text to image ini memiliki fungsi yang mana apabila suatu teks diklik maka teks tersebut akan berubah menjadi sebuah gambar secara otomatis, dalam artian lain apabila setiap kali teks tersebut diklik maka teks tersebut akan hilang kemudian di tampilkanlah sebuah gambar sebagai penggantinya
Contoh Tampilan
Jika kamu penasaran bagaimana contoh tampilan dari teks yang berubah menjadi gambar ketika diklik, kamu bisa melihat contoh tampilannya berikut ini
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:100%;
height:550px;
display:inline-block;
vertical-align:-13px;
background-repeat:no-repeat;
margin:2px;
background-position:center left;
background-size:350px 550px;
}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
