For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Menampilkan preloader smiley saat di klik

Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya menampilkan smiley preloader saat di klik di blogger

Info: Oke sobat ICloudzer jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Preloader

Pada postingan sebelumnya admin membahas bagaimana caranya membuat efek animasi smiley preloader di blogger, mungkin kamu bisa pelajari lebih lanjut, membahas mengenai preloader seperti nya telah puluhan artikel yang admin bahas terkhusus preloader dan contoh contoh animasi preloader, karena admin membahas setiap keunikan preloder secara khusus dalam setiap postingan, preloader secara singkatnya adalah sebuah tampilan ataupun animasi yang muncul saat proses loading blog, atau saat pengunjung merefresh blog

Smiley preloader

Tampilan dari animasi preloader tersebut adalah tampilan smiley preloader yang muncul saat di klik dan bukan saat halaman artikel di refresh, yang di kemas dalam tampilan yang berbeda disertai animasi animasi yang menakjubkan saat animasi preloader tersebut aktif saat merefresh halaman blog, dan bagi kamu yang tidak mengetahui mengenai smiley preloader? bahwa pengertian smiley adalah seyuman maka preloader juga akan menampilkan animasi senyuman

Menggunakan Javascript

Dalam membuat tampilan smiley preloader yang muncul saat diklik pada website ataupun pada blogger tersebut di buat menggunakan kode javascript yang telah di enskripsi menggunakan javascript, sehingga tampilan tidak bisa di edit atau di ubah

Contoh Tampilan

Jika kamu penasaran dengan contoh tampilan efek smiley preloader yang muncul saat di klik tersebut, silahkan periksa menggunakan tombol di bawah ini

Info: bagaimana sobat dengan contoh tampilan nya keren sekali yak 😬

Cara pembuatan

Baiklah sekarang saatnya admin bakalan menjelaskan bagaimana caranya membuat efek smiley preloader di sertai Animasi di blogger, silahkan ikuti setiap arahan yang admin jabarkan di hawah ini

Kode Javascript

Langkah pertama seperti biasanya silahkan salin kode javascript di bawah ini kemudian letakkan di atas kode </head>

<script>/*<![CDATA[*/ 
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('13 Q=["\\f\\8\\m\\k\\9","\\r\\c\\9\\a\\8\\9\\M\\k\\9\\i\\9\\d\\8","\\8\\m\\x\\9","\\8\\9\\E\\8\\14\\r\\f\\f","\\8\\9\\E\\8\\X\\e\\d\\8\\9\\d\\8","\\s\\c\\a\\j\\H\\i\\b\\k\\9\\m\\g\\D\\9\\l\\e\\c\\9\\t\\l\\e\\d\\8\\h\\U\\9\\b\\y\\j\\8\\g\\L\\n\\n\\p\\x\\e\\f\\b\\8\\b\\e\\d\\g\\a\\D\\f\\e\\k\\B\\8\\9\\p\\c\\b\\y\\j\\8\\g\\F\\x\\E\\p\\8\\e\\x\\g\\N\\x\\E\\p\\l\\e\\d\\8\\h\\f\\b\\V\\9\\g\\A\\C\\x\\E\\p\\r\\e\\k\\e\\c\\g\\c\\y\\D\\a\\v\\C\\q\\q\\z\\C\\q\\q\\z\\C\\q\\q\\z\\s\\L\\w\\p\\U\\b\\o\\8\\j\\g\\a\\B\\8\\e\\p\\8\\9\\E\\8\\h\\a\\k\\b\\y\\d\\g\\r\\9\\d\\8\\9\\c\\p\\a\\k\\b\\y\\d\\h\\b\\8\\9\\i\\f\\g\\r\\9\\d\\8\\9\\c\\p\\Z\\B\\f\\8\\b\\l\\m\\h\\r\\e\\d\\8\\9\\d\\8\\g\\r\\9\\d\\8\\9\\c\\p\\x\\a\\o\\o\\b\\d\\y\\g\\q\\x\\E\\p\\D\\a\\r\\G\\y\\c\\e\\B\\d\\o\\h\\r\\e\\k\\e\\c\\g\\10\\K\\C\\K\\C\\K\\C\\p\\D\\e\\c\\o\\9\\c\\h\\c\\a\\o\\b\\B\\f\\g\\q\\x\\E\\u\\s\\c\\a\\j\\H\\i\\b\\k\\9\\m\\g\\D\\9\\l\\e\\c\\9\\t\\r\\e\\d\\8\\9\\d\\8\\g\\11\\X\\c\\9\\a\\8\\9\\o\\I\\U\\b\\8\\j\\I\\15\\i\\b\\k\\9\\Y\\11\\u\\s\\c\\a\\j\\H\\i\\b\\k\\9\\m\\t\\o\\b\\c\\9\\r\\8\\b\\e\\d\\g\\k\\8\\c\\p\\x\\e\\f\\b\\8\\b\\e\\d\\g\\l\\b\\E\\9\\o\\p\\8\\e\\x\\g\\n\\p\\c\\b\\y\\j\\8\\g\\n\\p\\D\\e\\8\\8\\e\\i\\g\\n\\p\\k\\9\\l\\8\\g\\n\\p\\o\\b\\f\\x\\k\\a\\m\\g\\d\\e\\d\\9\\p\\D\\a\\r\\G\\y\\c\\e\\B\\d\\o\\g\\10\\l\\9\\l\\9\\l\\9\\p\\a\\k\\b\\y\\d\\h\\b\\8\\9\\i\\f\\g\\r\\9\\d\\8\\9\\c\\p\\Z\\B\\f\\8\\b\\l\\m\\h\\r\\e\\d\\8\\9\\d\\8\\g\\r\\9\\d\\8\\9\\c\\p\\V\\h\\b\\d\\o\\9\\E\\g\\N\\N\\N\\N\\N\\N\\p\\O\\b\\f\\b\\D\\b\\k\\b\\8\\m\\g\\O\\b\\f\\b\\D\\k\\9\\p\\e\\x\\a\\r\\b\\8\\m\\g\\A\\p\\8\\c\\a\\d\\f\\b\\8\\b\\e\\d\\g\\a\\k\\k\\s\\L\\f\\I\\9\\a\\f\\9\\u\\s\\c\\a\\j\\H\\i\\b\\k\\9\\m\\s\\c\\a\\j\\t\\o\\b\\f\\x\\k\\a\\m\\g\\l\\k\\9\\E\\u\\s\\c\\a\\j\\H\\i\\b\\k\\9\\m\\s\\i\\a\\8\\t\\o\\b\\f\\x\\k\\a\\m\\g\\d\\e\\d\\9\\u\\s\\c\\a\\j\\H\\i\\b\\k\\9\\m\\s\\i\\a\\8\\t\\e\\x\\a\\r\\b\\8\\m\\g\\n\\p\\O\\b\\f\\b\\D\\b\\k\\b\\8\\m\\g\\j\\b\\o\\o\\9\\d\\u\\s\\f\\i\\b\\k\\9\\m\\t\\U\\b\\o\\8\\j\\g\\L\\9\\i\\p\\j\\9\\b\\y\\j\\8\\g\\L\\9\\i\\u\\s\\c\\a\\j\\H\\i\\b\\k\\9\\m\\h\\c\\a\\j\\M\\m\\9\\A\\z\\s\\c\\a\\j\\H\\i\\b\\k\\9\\m\\h\\c\\a\\j\\M\\m\\9\\C\\z\\s\\c\\a\\j\\H\\i\\b\\k\\9\\m\\h\\c\\a\\j\\R\\e\\B\\8\\j\\A\\z\\s\\c\\a\\j\\H\\i\\b\\k\\9\\m\\h\\c\\a\\j\\R\\e\\B\\8\\j\\C\\t\\a\\d\\b\\i\\a\\8\\b\\e\\d\\g\\c\\a\\j\\M\\m\\9\\A\\I\\K\\f\\I\\9\\a\\f\\9\\h\\b\\d\\h\\e\\B\\8\\I\\b\\d\\l\\b\\d\\b\\8\\9\\u\\s\\c\\a\\j\\H\\i\\b\\k\\9\\m\\h\\c\\a\\j\\M\\m\\9\\A\\z\\s\\c\\a\\j\\H\\i\\b\\k\\9\\m\\h\\c\\a\\j\\M\\m\\9\\C\\t\\8\\c\\a\\d\\f\\l\\e\\c\\i\\h\\e\\c\\b\\y\\b\\d\\g\\F\\P\\x\\E\\I\\F\\P\\x\\E\\u\\s\\c\\a\\j\\H\\i\\b\\k\\9\\m\\h\\c\\a\\j\\M\\m\\9\\C\\t\\a\\d\\b\\i\\a\\8\\b\\e\\d\\h\\d\\a\\i\\9\\g\\c\\a\\j\\M\\m\\9\\C\\u\\s\\c\\a\\j\\H\\i\\b\\k\\9\\m\\h\\c\\a\\j\\R\\e\\B\\8\\j\\A\\t\\a\\d\\b\\i\\a\\8\\b\\e\\d\\h\\d\\a\\i\\9\\g\\c\\a\\j\\R\\e\\B\\8\\j\\A\\u\\s\\c\\a\\j\\H\\i\\b\\k\\9\\m\\h\\c\\a\\j\\R\\e\\B\\8\\j\\C\\t\\a\\d\\b\\i\\a\\8\\b\\e\\d\\h\\d\\a\\i\\9\\g\\c\\a\\j\\R\\e\\B\\8\\j\\C\\p\\O\\b\\f\\b\\D\\b\\k\\b\\8\\m\\g\\j\\b\\o\\o\\9\\d\\u\\T\\G\\9\\m\\l\\c\\a\\i\\9\\f\\I\\c\\a\\j\\M\\m\\9\\A\\t\\l\\c\\e\\i\\t\\8\\c\\a\\d\\f\\l\\e\\c\\i\\g\\c\\e\\8\\a\\8\\9\\v\\h\\C\\F\\n\\o\\9\\y\\w\\8\\c\\a\\d\\f\\k\\a\\8\\9\\v\\n\\z\\h\\q\\F\\x\\E\\w\\u\\q\\n\\J\\z\\F\\n\\J\\t\\a\\d\\b\\i\\a\\8\\b\\e\\d\\h\\8\\b\\i\\b\\d\\y\\h\\l\\B\\d\\r\\8\\b\\e\\d\\g\\r\\B\\D\\b\\r\\h\\D\\9\\V\\b\\9\\c\\v\\n\\s\\A\\S\\z\\n\\z\\n\\s\\q\\L\\z\\A\\w\\p\\8\\c\\a\\d\\f\\l\\e\\c\\i\\g\\c\\e\\8\\a\\8\\9\\v\\h\\P\\n\\o\\9\\y\\w\\8\\c\\a\\d\\f\\k\\a\\8\\9\\v\\n\\z\\h\\q\\F\\x\\E\\w\\f\\r\\a\\k\\9\\v\\A\\w\\u\\8\\e\\t\\8\\c\\a\\d\\f\\l\\e\\c\\i\\g\\c\\e\\8\\a\\8\\9\\v\\C\\C\\q\\o\\9\\y\\w\\8\\c\\a\\d\\f\\k\\a\\8\\9\\v\\n\\z\\h\\q\\F\\x\\E\\w\\f\\r\\a\\k\\9\\v\\n\\s\\K\\q\\w\\u\\u\\T\\G\\9\\m\\l\\c\\a\\i\\9\\f\\I\\c\\a\\j\\M\\m\\9\\C\\t\\l\\c\\e\\i\\t\\8\\c\\a\\d\\f\\l\\e\\c\\i\\g\\c\\e\\8\\a\\8\\9\\v\\h\\C\\F\\n\\o\\9\\y\\w\\8\\c\\a\\d\\f\\k\\a\\8\\9\\v\\n\\z\\h\\q\\F\\x\\E\\w\\u\\q\\n\\J\\t\\8\\c\\a\\d\\f\\l\\e\\c\\i\\g\\c\\e\\8\\a\\8\\9\\v\\P\\n\\o\\9\\y\\w\\8\\c\\a\\d\\f\\k\\a\\8\\9\\v\\n\\z\\h\\q\\F\\x\\E\\w\\c\\e\\8\\a\\8\\9\\v\\h\\P\\n\\o\\9\\y\\w\\f\\r\\a\\k\\9\\v\\A\\w\\u\\q\\C\\s\\q\\J\\t\\8\\c\\a\\d\\f\\l\\e\\c\\i\\g\\c\\e\\8\\a\\8\\9\\v\\P\\n\\o\\9\\y\\w\\8\\c\\a\\d\\f\\k\\a\\8\\9\\v\\n\\z\\h\\q\\F\\x\\E\\w\\c\\e\\8\\a\\8\\9\\v\\h\\P\\n\\o\\9\\y\\w\\f\\r\\a\\k\\9\\v\\A\\z\\n\\w\\u\\q\\q\\J\\z\\S\\n\\J\\t\\a\\d\\b\\i\\a\\8\\b\\e\\d\\h\\8\\b\\i\\b\\d\\y\\h\\l\\B\\d\\r\\8\\b\\e\\d\\g\\r\\B\\D\\b\\r\\h\\D\\9\\V\\b\\9\\c\\v\\n\\z\\n\\z\\n\\s\\C\\L\\z\\A\\w\\p\\8\\c\\a\\d\\f\\l\\e\\c\\i\\g\\c\\e\\8\\a\\8\\9\\v\\P\\n\\o\\9\\y\\w\\8\\c\\a\\d\\f\\k\\a\\8\\9\\v\\n\\z\\h\\q\\F\\x\\E\\w\\c\\e\\8\\a\\8\\9\\v\\h\\P\\n\\o\\9\\y\\w\\f\\r\\a\\k\\9\\v\\A\\w\\u\\8\\e\\t\\8\\c\\a\\d\\f\\l\\e\\c\\i\\g\\c\\e\\8\\a\\8\\9\\v\\A\\q\\n\\o\\9\\y\\w\\8\\c\\a\\d\\f\\k\\a\\8\\9\\v\\n\\z\\h\\q\\F\\x\\E\\w\\f\\r\\a\\k\\9\\v\\n\\s\\P\\w\\u\\u\\T\\G\\9\\m\\l\\c\\a\\i\\9\\f\\I\\9\\m\\9\\16\\k\\b\\d\\G\\t\\l\\c\\e\\i\\z\\C\\q\\J\\z\\S\\q\\J\\z\\8\\e\\t\\8\\c\\a\\d\\f\\l\\e\\c\\i\\g\\f\\r\\a\\k\\9\\Y\\v\\A\\w\\u\\q\\n\\J\\t\\8\\c\\a\\d\\f\\l\\e\\c\\i\\g\\f\\r\\a\\k\\9\\Y\\v\\n\\w\\u\\u\\T\\G\\9\\m\\l\\c\\a\\i\\9\\f\\I\\c\\a\\j\\R\\e\\B\\8\\j\\A\\t\\l\\c\\e\\i\\t\\a\\d\\b\\i\\a\\8\\b\\e\\d\\h\\8\\b\\i\\b\\d\\y\\h\\l\\B\\d\\r\\8\\b\\e\\d\\g\\9\\a\\f\\9\\h\\b\\d\\p\\f\\8\\c\\e\\G\\9\\h\\o\\a\\f\\j\\a\\c\\c\\a\\m\\g\\n\\I\\K\\q\\A\\s\\L\\F\\p\\f\\8\\c\\e\\G\\9\\h\\o\\a\\f\\j\\e\\l\\l\\f\\9\\8\\g\\n\\u\\C\\q\\J\\t\\a\\d\\b\\i\\a\\8\\b\\e\\d\\h\\8\\b\\i\\b\\d\\y\\h\\l\\B\\d\\r\\8\\b\\e\\d\\g\\9\\a\\f\\9\\h\\e\\B\\8\\p\\f\\8\\c\\e\\G\\9\\h\\o\\a\\f\\j\\a\\c\\c\\a\\m\\g\\A\\S\\q\\s\\N\\K\\I\\K\\q\\A\\s\\L\\F\\p\\f\\8\\c\\e\\G\\9\\h\\o\\a\\f\\j\\e\\l\\l\\f\\9\\8\\g\\n\\u\\q\\n\\J\\t\\a\\d\\b\\i\\a\\8\\b\\e\\d\\h\\8\\b\\i\\b\\d\\y\\h\\l\\B\\d\\r\\8\\b\\e\\d\\g\\f\\8\\9\\x\\f\\v\\A\\z\\f\\8\\a\\c\\8\\w\\p\\f\\8\\c\\e\\G\\9\\h\\o\\a\\f\\j\\a\\c\\c\\a\\m\\g\\A\\S\\q\\s\\N\\K\\I\\K\\q\\A\\s\\L\\F\\p\\f\\8\\c\\e\\G\\9\\h\\o\\a\\f\\j\\e\\l\\l\\f\\9\\8\\g\\h\\A\\S\\q\\s\\N\\K\\p\\O\\b\\f\\b\\D\\b\\k\\b\\8\\m\\g\\O\\b\\f\\b\\D\\k\\9\\u\\S\\q\\J\\z\\8\\e\\t\\O\\b\\f\\b\\D\\b\\k\\b\\8\\m\\g\\j\\b\\o\\o\\9\\d\\u\\u\\T\\G\\9\\m\\l\\c\\a\\i\\9\\f\\I\\c\\a\\j\\R\\e\\B\\8\\j\\C\\t\\l\\c\\e\\i\\t\\a\\d\\b\\i\\a\\8\\b\\e\\d\\h\\8\\b\\i\\b\\d\\y\\h\\l\\B\\d\\r\\8\\b\\e\\d\\g\\f\\8\\9\\x\\f\\v\\A\\z\\9\\d\\o\\w\\p\\O\\b\\f\\b\\D\\b\\k\\b\\8\\m\\g\\j\\b\\o\\o\\9\\d\\u\\q\\n\\J\\t\\a\\d\\b\\i\\a\\8\\b\\e\\d\\h\\8\\b\\i\\b\\d\\y\\h\\l\\B\\d\\r\\8\\b\\e\\d\\g\\9\\a\\f\\9\\h\\b\\d\\h\\e\\B\\8\\p\\O\\b\\f\\b\\D\\b\\k\\b\\8\\m\\g\\O\\b\\f\\b\\D\\k\\9\\p\\f\\8\\c\\e\\G\\9\\h\\o\\a\\f\\j\\e\\l\\l\\f\\9\\8\\g\\n\\u\\8\\e\\t\\f\\8\\c\\e\\G\\9\\h\\o\\a\\f\\j\\e\\l\\l\\f\\9\\8\\g\\h\\K\\q\\A\\s\\L\\F\\u\\u","\\a\\x\\x\\9\\d\\o\\X\\j\\b\\k\\o","\\j\\9\\a\\o"];17 W=12[Q[1]](Q[0]);W[Q[2]]=Q[3];W[Q[4]]=Q[5];12[Q[7]][Q[6]](W)',62,70,'||||||||x74|x65|x61|x69|x72|x6E|x6F|x73|x3A|x2D|x6D|x68|x6C|x66|x79|x30|x64|x3B|x35|x63|x2E|x7B|x7D|x28|x29|x70|x67|x2C|x31|x75|x32|x62|x78|x36|x6B|x53|x20|x25|x33|x38|x45|x39|x76|x34|_0xcc01|x4D|x37|x40|x77|x7A|rahSmleyJs|x43|x59|x6A|x23|x27|document|var|x2F|x24|x42|const'.split('|'),0,{}))
/*]]>*/</script>

Info: Kode javascript di atas tidak bisa kamu edit, jika mengedit tampilan preloader smiley tidak akan berfungsi saat di klik

Kode HTML/javascript

Langkah selanjutnya kamu bisa menyalin lagi kode html di bawah ini kemudian kamu bisa meletakkan nya di bawah kode <body>

<div class='rahSmiley'id='rahSmiley'><svg role='img'aria-label='Mouth and eyes come from 9:00 and rotate clockwise into position, right eye blinks, then all parts rotate and merge into 3:00'class='smiley'viewBox='0 0 128 128'width='128px'height='128px'><defs><clipPath id='rahSmiley-eyes'><circle class='rahSmiley-rahEye1'cx='64'cy='64'r='8'transform='rotate(-40,64,64) translate(0,-56)'/><circle class='rahSmiley-rahEye2'cx='64'cy='64'r='8'transform='rotate(40,64,64) translate(0,-56)'/></clipPath><linearGradient id='smiley-grad'x1='0'y1='0'x2='0'y2='1'><stop offset='0%'stop-color='#000'/><stop offset='100%'stop-color='#fff'/></linearGradient><mask id='rahSmiley-mask'><rect x='0'y='0'width='128'height='128'fill='url(#smiley-grad)'/></mask></defs><g stroke-linecap='round'stroke-width='12'stroke-dasharray='175.93 351.86'><g><rect fill='hsl(222, 56%, 41%)'width='128'height='64'clip-path='url(#rahSmiley-eyes)'/><g fill='none'stroke='hsl(222, 56%, 41%)'><circle class='rahSmiley-rahMouth1'cx='64'cy='64'r='56'transform='rotate(180,64,64)'/><circle class='rahSmiley-rahMouth2'cx='64'cy='64'r='56'transform='rotate(0,64,64)'/></g></g><g mask='url(#rahSmiley-mask)'><rect fill='hsl(0, 72%, 54%)'width='128'height='64'clip-path='url(#rahSmiley-eyes)'/><g fill='none'stroke='hsl(0, 72%, 54%)'><circle class='rahSmiley-rahMouth1'cx='64'cy='64'r='56'transform='rotate(180,64,64)'/><circle class='rahSmiley-rahMouth2'cx='64'cy='64'r='56'transform='rotate(0,64,64)'/></g></g></g></svg></div>
<script>/*<![CDATA[*/ 
var _0x6b9c=["\x23\x72\x61\x68\x53\x6D\x69\x6C\x65\x79","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x72\x61\x68","\x61\x64\x64","\x63\x6C\x61\x73\x73\x4C\x69\x73\x74","\x63\x6C\x69\x63\x6B","\x72\x65\x6D\x6F\x76\x65","\x76\x69\x62\x72\x61\x74\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72"];function rahSmiley(){var rahSmiley=document[_0x6b9c[1]](_0x6b9c[0]);rahSmiley[_0x6b9c[4]][_0x6b9c[3]](_0x6b9c[2]);document[_0x6b9c[8]](_0x6b9c[5],function(){setTimeout(function(){rahSmiley[_0x6b9c[4]][_0x6b9c[6]](_0x6b9c[2])},2000);if(_0x6b9c[7] in  navigator){navigator[_0x6b9c[7]]([50])}})}
/*]]>*/</script>

Info: Kode HTML dan Javascript di atas jangan di edit entar tampilan preloader nya tidak berfungsi 🥰

Cara penggunaan

Untuk memfungsikan efek preloader smiley preloader tersebut silahkan gunakan fungsi onclick='rahSmiley()' pada setiap tombol yang di inginkan untuk menampilkan preloader secara manual, atau seperti contoh kode berikut ini

<div class='tombol' onclick='rahSmiley()'>
<!-- svg -->
</div>

Info: Tambahkan sendiri kode onclick='rahSmiley()' pada setiap tombol yang anda inginkan semisal svg dan lain sebaginya

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
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.
Site is Blocked
Sorry! This site is not available in your country.