Efek circle
Efek circle ini sebenarnya bukan saya yang membuatnya, hanya saja saya mendapatkan dari sebuah sebuah template blog yang mengajarkan tentang CSS dan HTML, karena menurut saya circle ini bagus maka saya ambil dan terapkan pada menu pencarian yang terdapat pada blog saya. Efek circle ini hanya Menggunakan CSS dan HTML saja tanpa Javascript maka blog yang dipasang circle ini tidak akan mengalami kelambatan saat pemuatan / loading blog. Namun, ada sedikit beberapa bagian yang saya modifikasi agar support pada template blog.
Tujuan pemasangan efek circle
Seperti yang telah disebutkan diatas bahwa tujuan pemasangan efek circle ini hanya untuk mempercantik penampilan blog saja agar terlihat lebih anggun dan sedap dipandang. Pasalnya, menurut survey yang saya teliti salah satu yang membuat pengunjung betah pada blog tertentu biasanya karena tampilan blog itu sendiri yang memikat. Selain itu, blog dengan tampilan elegan juga akan menambah profesionalitas dan kepercayaan diri pemilik blog meningkat.
Persiapan pemasangan efek circle
Sebelum mempraktekkannya, saya harap anda sudah membackup template yang akan dimodifikasi. Mengapa demikian? Sebab, jika nanti terdapat hal-hal yang tidak anda inginkan seperti kode tidak cocok, salah menempatkan kode, lupa menempatkan kode, template error, atau bahkan template rusak maka anda masih memiliki cadangannya.
Catatan:
Sebelum saya membuat artikel ini saya sudah mencobanya di template viomagz. Dan hasilnya work 100%.
Cara membuat efek circle dimenu pencarian seperti blog faronesia
- Masuk ke dashboard blog
- Lalu masuk ke menu tema blog
- Kemudian klik edit HTML
- Cari kode seperti dibawah ini ]]></b:skin>
- Tempelkan kode CSS berikut dibawah ini tepat diatas kode ]]></b:skin>
/** circle faronesia **/
.faronesia{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
overflow:hidden;
margin:0
}
.faronesia li{
position:absolute;
display:block;
list-style:none;
width:20px;
height:20px;
background:rgba(255,255,255,0.20);
animation:animate 45s linear infinite;bottom:-150px;
z-index:0
}
.faronesia li:nth-child(1){
left:25%;
width:60px;
height:60px;
animation-delay:0s
}
.faronesia li:nth-child(2){
left:10%;
width:10px;
height:10px;
animation-delay:2s;
animation-duration:12s
}
.faronesia li:nth-child(3){
left:70%;
width:10px;
height:10px;
animation-delay:4s
}
.faronesia li:nth-child(4){
left:40%;
width:40px;
height:40px;
animation-delay:0s;
animation-duration:18s
}
.faronesia li:nth-child(5){
left:65%;
width:10px;
height:10px;
animation-delay:0s
}
.faronesia li:nth-child(6){
left:75%;
width:90px;
height:90px;
animation-delay:3s
}
.faronesia li:nth-child(7){
left:35%;
width:130px;
height:130px;
animation-delay:7s
}
.faronesia li:nth-child(8){
left:50%;
width:15px;
height:15px;
animation-delay:15s;
animation-duration:45s
}
.faronesia li:nth-child(9){
left:20%;
width:5px;
height:5px;
animation-delay:2s;
animation-duration:35s
}
.faronesia li:nth-child(10){
left:85%;
width:130px;
height:130px;
animation-delay:0s;
animation-duration:11s
}
@keyframes animate{0%{transform:translateY(0) rotate(0deg);opacity:1;border-radius:0}100%{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}
- Selanjutnya, cari kode <div id='searchfs'> jika sudah ketemu, silahkan tempelkan kode HTML dibawah ini tepat dibawah kode <div id='searchfs'>
<ul class='faronesia'><li/><li/><li/><li/><li/><li/><li/><li/><li/><li/></ul>
- Terakhir, simpan template dan lihat hasilnya.
Catatan:
Jika cara diatas tidak work, silahkan tempatkan CSS circle di bagian <head>...</head> dibungkus dengan kode <style>...CSS circle...</style>.
Request artikel? Silahkan masuk ke halaman tanggapan
Demikianlah mengenai Cara membuat efek circle dimenu pencarian seperti blog faronesia semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.com.