Cara Mudah Membuat Efek Partikel Pada Button

Setelah sekian lamanya fakum, dikarenakan terlalu sibuk dan ditambah dengan minimnya ide, itulah yang menjadi alasan mengapa saya tidak update beberapa bulan belakangan ini. Namun setelah saya pikir-pikir, akhirnya kini saya memutuskan untuk memilih aktif kembali dalam dunia blogger ini, kenapa? Karena saya ingin terus berbagi ilmu dan info menarik kepada siapapun yang membaca tulisan diblog ini, walau sedikit mudah-mudahan bermanfaat.

Nah Pada kesempatan kali ini saya akan coba berbagi sebuah tutorial lagi yaitu, tentang cara membuat efek partikel pada button (Tombol). Disini saya memakai komponen javascript nya dari anime.js

Anda semua sudah tahu pasti dong ya, apa itu anime.js dan apa saja keunggulannya?

Ya benar sekali, Anime.js adalah salah satu daftar animasi tercepat dan bekerja sangat lancar, dengan DOM. Salah satu ke unggulannya adalah, Anime.js mendukung disemua jenis browser web seperti Chrome, Firefox, Opera, Safari, dan Internet Explorer 10+. Fitur utama dari anime.js yaitu, Transformasi CSS yang berguna untuk menghidupkan Transisi pada CSS, Animasi SVG untuk garis, dan garis waktu untuk menyinkronkan beberapa instance. Satu hal yang membuat anime.js menarik bagi pengembang yaitu sangat ringan.

Nah, lalu bagaimana langkah dan cara membuat efek partikel ini?

Caranya cukup mudah, Anda hanya perlu menyimak dan pastikan dibaca sampai tuntas agar tidak ada yang terlewat.

Untuk memulai cara pembuatannya, disini kita memerlukan beberapa komponen, seperti:
1.Css
2.Html
3.Javascript (anime.js+particles.js)
Untuk script nya bisa Anda unduh melalui link yang sudah saya sediakan diakhir tutorial ini.

Ok mari kita lanjutkan, untuk tahap awal disini kita coba buat file html terlebih dahulu dan berinama index.html.

Contoh:

Live Demo

Setelah itu kita buat file Css nya.

Contoh:

Live Demo

Jika sudah, Silahkan simpan/save file tersebut dan beri nama base.css atau terserah Anda mau diberi nama apa saja silahkan. Masih pada bagian Css, kali ini kita coba buat Css untuk particle nya.

Contoh:

Live Demo

Lalu simpan kembali dan beri nama particles.css. Langkah selanjutnya yaitu, buat javascript particles.js.

Contoh:

Live Demo

Untuk anime.min.js bisa Anda unduh atau cari di google.

Nah, apabila semuanya sudah selesai, sekarang waktunya Anda gabungkan menjadi satu seperti contoh pada langkah yang pertama. Dan coba akses dengan browser masing-masing, lihat bagaimana hasilnya. Apakah berjalan dengan lancar atau tidak. Jika tidak, kemungkinan besar Anda tidak sepenuhnya mengikuti cara yang sudah saya berikan diatas atau ada yang kurang.

Bilamana Anda ingin melihat hasil dari tutori ini, silahkan kunjungi link dibawah.

Live Demo

Dan untuk Anda yang tidak ingin pusing, bisa dengan mengunduhnya Disini.

Download Now

Itulah sedikit pembahasan singkat pada hari ini tentang, Cara Mudah Membuat Efek Partikel Pada Button kurang lebihnya mohon maaf. Semoga bermanfaat, terimakasih.

Selengkapnya

Tampilan Baru Halaman Web Hasil Pencarian Google

Tampilan Terbaru Halaman Web Hasil Pencarian Google - Kamis 23 Mei 2019 - Tujuan diperbaruinya tampilan hasil pencarian ini adalah untuk membantu orang-orang agar bisa menemukan informasi yang mereka cari dengan cepat dan mudah. Selama bertahun-tahun, jumlah dan format informasi yang tersedia di web telah berubah secara drastis. Dari menjamurnya gambar dan video, hingga ketersediaan objek 3D yang sekarang dapat Anda lihat di AR.

Halaman hasil pencarian juga telah berubah, ini mungkin akan membantu Anda menemukan jenis informasi baru dan dengan cepat menentukan apa yang paling berguna bagi Anda. Saat kami melanjutkan upaya kami untuk meningkatkan Pencarian dan memberikan pengalaman yang modern dan bermanfaat, hari ini kami meluncurkan penyegaran visual dari halaman hasil pencarian mobile untuk memandu Anda dengan lebih baik melalui informasi yang tersedia di web.

Dengan desain atau tampilan baru ini, branding situs web dapat menjadi bagian depan dan tengah, ini akan membantu Anda lebih memahami dari mana informasi berasal dan halaman apa yang Anda cari.

Nama situs web dan ikonnya muncul di bagian atas untuk membantu menjangkar setiap hasilnya, sehingga Anda dapat lebih mudah memindai halaman hasil dan memutuskan apa yang akan dijelajahi selanjutnya. Pemilik situs dapat mempelajari lebih lanjut tentang cara memilih ikon pilihan mereka untuk daftar organik di sini.

Saat Anda mencari produk atau layanan kami pun akan menambahkan iklan yang berguna untuk ditampilkan, Anda akan melihat label iklan tebal di bagian atas, di samping alamat web sehingga Anda dapat dengan cepat mengidentifikasi dari mana informasi itu berasal.

Seiring berjalannya waktu, Google terus menyediakan format konten terbaru dan tindakan yang bermanfaat. Pada desain terbaru ini akan terlihat lebih banyak tombol, tindakan dan pratinjau yang bermanfaat.

Desain ulang ini menjadi yang utama untuk seluler dan akan diluncurkan selama beberapa hari ke depan. Tetap terhubung dengan cara-cara yang bahkan lebih baru agar Penelusuran dapat membantu Anda menemukan apa yang Anda cari.

Ujar @searchliaison.

Melalui sumber: Google
Penerbit: Jamie Leach Senior Interaction Designer, Search Published May 22, 2019

Selengkapnya

Konversi Dan Lalu Lintas Seo Amazon Yang Perlu Anda Ketahui

Amazon adalah sebuah platform penjualan terbesar yang saat ini berkembang pesat tepatnya di pasar Amerika Utara, dan dipasarnya sendiripun telah memerintahkan hampir sepertiga dari total penjualan online di AS pada tahun 2018. Begitu banyak persaingan pasar disana. Contohnya saja, lebih dari 5 juta merek bersaing untuk pelanggan yang sama.

Akan tetapi ada beberapa hal konkret yang bisa dilakukan oleh merek yang dijual di Amazon.

Contohnya:

Menemukan Sweet Spot SEO

Sweet Spot SEO adalah Metrik yang digunakan Google untuk SEO yang sudah didefinisikan dengan baik, dan sebagian besar pemasar setidaknya harus cukup mahir dan berpengalaman dalam cara mengoptimalkan Google SEO. Metrik SEO Amazon kurang dipublikasikan, tetapi dengan lebih banyak konsumen yang berbondong-bondong ke Amazon, penting untuk memahami nuansa Amazon SEO, persamaan dan perbedaan antar platform.

Dalam kasus Google dan Amazon, sangatlah penting untuk bisa masuk ke halaman pertama hasil pencarian. Di Google, 94% orang tidak pernah mengunjungi halaman kedua hasil pencarian, sementara 70% pembeli tidak pernah melihat halaman kedua hasil Amazon. Seperti tiga daftar pertama pada akun pencarian yang diberikan untuk 65% dari semua klik, dan 35% orang mengklik pada item pertama.

Google dan Amazon telah berevolusi di era digital saat ini. Pada tahun-tahun sebelumnya, kata kunci merupakan kunci pendaratan tinggi pada halaman hasil. Kata kunci memiliki bobot yang jauh lebih sedikit hari ini, meski masih penting, algoritme untuk kedua raksasa tersebut juga mempertimbangkan keterlibatan pelanggan, konversi, dan tampilan halaman detail.

Meskipun jangkauan luar biasa besar dan kesamaan dalam komponen pencarian, Google dan Amazon pada dasarnya berbeda dalam hal tujuan pencarian mereka dan bagaimana mereka melayani para pencari mereka. Google memberikan informasi, yang mungkin termasuk daftar Amazon, sedangkan Amazon berupaya memasangkan pelanggan dengan produk yang tepat. Karena itu, orang cenderung menggunakan kedua situs dengan cara yang sama, dengan 75% pembeli menggunakan bilah pencarian.

Tidak Ada Jalan Pintas

Memenangkan sebuah perlombaan untuk listing selalu menjadi prioritas tinggi untuk merek yang menjual di Amazon, dan terlebihnya, penuh dengan orang-orang yang mencoba dengan permainan sistem.

Akan tetapi, taktik permainan konversi dan keuntungan pertanian bot telah dihapus, dan sementara taktik Black Hat masih banyak mempengaruhi sistem pencarian, dan Amazon secara aktif berupaya untuk menghapusnya.

Taktik lain yang sekarang dilarang adalah ulasan dengan insentif, atau praktik pemberian produk kepada seseorang secara gratis sebagai pengganti ulasan. Amazon telah mengambil sikap yang lebih kuat akhir-akhir ini terhadap ulasan palsu atau insentif pada umumnya.

Pembaruan terbaru Amazon dalam daftar kegiatan dan tindakan penjual yang dilarang termasuk penyalahgunaan peringkat penjualan, atau upaya penjual untuk memanipulasi peringkat penjualan dengan menawarkan atau menerima pesanan palsu atau penipuan, memberikan kompensasi atau kode klaim bagi orang untuk membeli suatu produk, atau mengklaim suatu produk adalah buku terlaris di halaman detail produk dan mencari serta menelusuri istilah umum untuk segala jenis simulasi lalu lintas pelanggan serta informasi katalog yang menyesatkan atau menambahkan atribut kata kunci tersembunyi ke dalam deskripsi.

Melakukannya Dengan Benar (Tetap Berada Dalam Jalur - White Hat)

Pintasan seperti Gray atau Black Hat mungkin ditutup, namun beberapa langkah yang berada pada jalurnya dan mengikuti aturan, itu masih dapat diandalkan dan tetap ada.

Pertama, yang paling penting, penelitian dan mengetahui bentang alamnya.

Merek perlu mengetahui persaingan dengan setiap kata kunci yang mereka gunakan untuk bersaing dan mengidentifikasikannya.

Misalnya, jika suatu merek ingin memasarkan probiotik secara organik, mereka perlu mengetahui bahwa tawaran iklan berubah secara dinamis dan pada saat tertentu tawaran istilah pencarian dapat meningkat atau menurun. Contoh hipotetis: Kami telah melihat situasi di mana istilah pencarian "probiotik" memiliki biaya mulai dari $4 hingga $10 per klik. Selain biayanya, halaman pertama daftar organik adalah produk yang telah ada di Amazon selama bertahun-tahun dan memiliki ribuan ulasan cemerlang. Pada saat yang sama, tawaran kata kunci untuk kata kunci yang lebih panjang seperti "probiotik untuk wanita 50+" dapat memiliki BPK yang jauh lebih rendah dengan contoh ekstrem ke bawah $0,38 per klik yang jauh lebih mudah untuk dimenangkan.

Cantuman Amazon memiliki ruang terbatas — beberapa titik memiliki batas hanya 250 karakter. Tetapi, jika menggunakan ruang itu dengan bijak dapat membantu mengoptimalkan cantuman untuk istilah penelusuran dan mendorong konversi konsumen. Perbarui judul, poin-poin, deskripsi, dan detail merek. Sertakan kata kunci dengan gambar judul, dan gunakan kata kunci tersembunyi dan kata kunci Backend A + atau EBC. Setelah itu, pastikan suatu produk diindeks untuk kata kunci dengan Amazon Identification Number, atau disingkat ASIN: "kata kunci" untuk melihat apakah ASIN muncul pada pencarian kata kunci tertentu.

SEO yang sempurna mungkin akan membantu untuk mendapatkan produk tersebut dapat terindeks, tetapi dengan sendirinya tidak dapat membuat peringkat produk dalam pencarian organik. Algoritme pencarian Amazon berfokus pada hal yang mendorong pengalaman konsumen terbaik, dan dua bagian besar dari itu adalah konversi dan lalu lintas. Konversi dan lalu lintas yang berkelanjutan tidak mungkin dilakukan jika produk itu sendiri tidak melakukan apa yang dibutuhkan konsumen. Dengan semua hal yang telah berubah di ritel, kebenaran terbesar dan paling abadi adalah kebutuhan akan produk berkualitas tinggi.

Amazon Marketplace adalah tempat yang sibuk, dan persaingan akan selalu tinggi. Tetapi, jika Anda memiliki produk yang bagus, dan menyajikannya dengan baik, itu akan membantu memberikan keunggulan pada merek Anda terhadap pesaing lainnya.

Demikianlah pembahasan kali ini tentang Konversi Dan Lalu Lintas Seo Amazon Yang Perlu Anda Ketahui

Selengkapnya

Cara Membuat Modal Pop Up Ucapan Selamat Berpuasa Di Blog

Berhubung pada bulan ini, tepatnya dari hari senin kita sudah mulai menjalankan ibadah puasa untuk seluruh umat muslim. Disini saya akan sharing sedikit bagaimana cara membuat pop up ucapan selamat berpuasa di blog kalian.

Caranya sangat mudah, dan script ini saya temukan pertama kali di blog nya Arlinadzgn. Karena menurut saya pop up seperti ini lumayan sangat bagus dan simple, dan timbulah niat untuk membantu membagikan nya untuk kalian semua.

Jika ingin memasangnya di blog kalian, mari ikuti langkah-langkahnya berikut ini:

Yang pertama seperti biasa, masuk ke Blogger -> Click Tema -> Edit Html
Setelah itu copy paste Css di bawah ini tepat di atas kode </head>.

<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Pop Up Ramadhan */
@keyframes zoomIn{from{opacity:0}50%{opacity:1}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}
#myModal{display:none}#popuprmdn{line-height:1.55;display:block;background:#fff;position:fixed;top:25%;right:0;left:0;margin:auto;text-align:center;max-width:600px;box-shadow:0 0 2.5rem -1.5rem rgba(0,0,0,0.5);z-index:100;min-height:325px;padding:20px;border-radius:10px;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:slideDown 1s}#popuprmdn .stmrmdn{position:absolute;color:#222;font-size:1.5rem;font-weight:400;z-index:99999;text-align:center;margin:auto;padding:10px;left:0;right:0;top:17%;border-bottom:1px solid rgba(0,0,0,0.05);border-top:1px solid rgba(0,0,0,0.05)}#popuprmdn .stmrmdn p{margin:10px auto;font-style:italic;font-family:Georgia}#popuprmdn .smtrmdn .ramadhan2019{font-size:2.5rem;font-style:normal}#popuprmdn a.close-popup{background:#009688;position:absolute;bottom:20px;right:20px;color:#fff;text-align:center;cursor:pointer;z-index:99;border-radius:3px;display:inline-block;font-size:13px;padding:4px 14px;min-width:60px;transition:all 0.3s}#popuprmdn a.close-popup:hover{background:#009688;color:#fff}#popuprmdn a.close-popup:active{opacity:.9}
.ketupat{position:absolute;left:0;right:0;top:-12px;margin:auto;width:10px;height:10px;background:#B9E937;box-shadow:10px 0 0 #57D131,10px 10px 0 #B9E937,0px 10px 0 #57D131,5px 5px 0 10px #fff;display:inline-block;text-align:center;transform:rotate(45deg);z-index:2}.ketupat.duaa{top:initial;bottom:3px}#hiding{background:#d54738;position:absolute;bottom:20px;right:78px;color:#fff;text-align:center;cursor:pointer;z-index:99;border-radius:3px;display:inline-block;font-size:20px;padding:0 10px;line-height:28px;min-width:28px;transition:all 0.3s}#hiding:hover{background:#c0392b;color:#fff}.matilampu{position:fixed;top:0;background:rgba(0,0,0,0.35);left:0;right:0;bottom:0;margin:0;z-index:99;animation:zoomIn 1s}
@media screen and (max-width:768px){#popuprmdn .stmrmdn{font-size:1rem}#popuprmdn .stmrmdn .ramadhan2019{font-size:1.5rem}#popuprmdn{min-height:260px;left:20px;right:20px}}
</style>
</b:if>

Jika sudah, jangan beralih dulu. Masih pada edit html, copy paste lagi kode html berikut ini dan tempelkan di atas kode </body>

<b:if cond='data:view.isHomepage'>
<div id='popuprmdn'>
<div class='ketupat'/>
<a class='close-popup' href='#' title='Close this message'>Close</a>
<div class='stmrmdn'>
   <p>Selamat Menunaikan Ibadah Puasa</p>
   <p><span class='ramadhan2019'>Ramadhan 1440 Hijriah</span></p>
   <p>Mohon Maaf Lahir Batin</p>
</div>
<div class='ketupat duaa'/>
</div>
<script type='text/javascript'>
//<![CDATA[
$(window).bind("load",function(){$("#popuprmdn").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
//]]>
</script>
</b:if>

Nah, setelah semuanya sudah selesai, barulah kalian save/simpan tema. Dan lihat hasilnya seperti apa!

Bagaimana menurut kalian, mudah bukan? Jika tertarik dan ingin memasang nya, silahkan dan selamat mencobanya.

Itulah Cara Membuat Modal Pop Up Ucapan Selamat Berpuasa Di Blog.

Selengkapnya