×

search by faronesia.com

FARONESIA
Profesional and Specialist WebDesign by Faronesia

Selain tutorial, kami juga menyediakan layanan penambah follower untuk akun Instagram dan Tiktok anda dengan harga terjangkau. Ayo buruan order sekarang juga!!!

Layanan Media

Cara membuat efek circle dimenu pencarian seperti blog faronesia

Faronesia.com - Halo sobat blogger, selama 1 minggu ini banyak sekali yang sudah request tutorial cara memasang efek circle grid  pada menu pencarian blog. Memang benar adanya bahwa blog faronesia.com memasang circle ini bertujuan untuk mempercantik blog saya pribadi. Karena banyaknya request yang muncul maka akan saya buatkan tutorialnya.

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.

Posting Komentar

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Modifikasi Tampilan Website Anda

Gunakan jasa kami, berikan kesan bahwa website anda professional.

Pesan Sekarang
Notifikasi pengguna

Aktifkan javascript dibrowser anda agar mendapatkan fitur jelajah yang lebih baik di situs kami.

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesia, caranya cukup dengan menekan tombol dibawah ini.

Tutup