Cara Menciptakan Kotak Kontribusi Blogger Mirip Di Web Igniel

Pagi Sobat Bloggers !!! biar kalian semua senantiasa masih diberi kesehatan sama yang Maha Kuasa. Sering kali kita menjumpai website-website besar yang biasanya disana mereka menggunakan kota bantuan yang fungsinya untuk menunjukkan sedikit shodaqoh buat kepentingan perkembangan websitenya baik itu via ovo, dana, paypal, maupun yang lain. Kalian mampu lihat tampilan gambar dibawah ini.

Maka dari itu disini aku akan sharing sekalian menyebarkan caranya membuat sebuah Css untuk kotak bantuan tersebut yang mana kotak kontribusi ini telah dibentuk oleh seorang developer yang mungkin tidak gila lagi bagi para bloggers adalah igniel.com. Script disini orisinil langsung dari blog tersebut, hanya sedikit aku rubah seperti class ataupun id.nya menjadi .kingnizare dan warna css serta tulisannya. Bagi teman yang ingin membuat dan memasangnya di template blog teman kalian bisa ikut cara-cara dibawah ini.

CARA MEMBUAT KOTAK DONASI BLOGGER BY IGNIEL

Berikut ialah langkah-langkah Kotak Donasi serta Efek Bounce

#1 SIlahkan Login dan masuk dashboard akun Blogger.com

#2 Kemudian Klik Tema > Edit Html> Setelah itu copy isyarat CSS dibawah ini dan Pastekan Tepat DI ATASNYA Script ( Atau ]]>) dengan Cara Tekan (Ctrl + F) dan Ketikan di Form Search instruksi dan Enter. Lalu paste Scriptnya.

Berikut Kodenya :

/* Paypal Donation Box Bounce by Igniel */
.kingnizare background:#1a0de4; /* warna background */
color:#fdfdfd;
display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; align-items:flex-start; flex-wrap:nowrap; justify-content:center; margin:20px 0px; display:flex; padding:15px; overflow:hidden; transition:all .3s ease; border-radius:7px;
.kingnizare .ikon a background-color:#fdfdfd; /* warna ikon */
color:black;
text-decoration:none; display:block; padding:5px; border-radius:7px; text-align:center; -webkit-animation:kingnizareBounce 1s linear 1s infinite normal; animation:kingnizareBounce 1s linear 1s infinite normal
.kingnizare svg width:50px; height:50px
.kingnizare svg path fill:#1bc700
.kingnizare .ikon margin-right:15px
.kingnizare .deskripsi line-height:1.5em;
.kingnizare .deskripsi .judul font-size:18px; font-weight:bold; display:block; margin-bottom:10px;

@keyframes kingnizareBounce0%,100%-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)
30%-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)
40%-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)
50%-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)
65%-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)
75%-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)

@-webkit-keyframes kingnizareBounce0%,100%-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)
30%-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)
40%-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)
50%-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)
65%-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)
75%-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)

#3 Simpan Tema Sobat,

#4 Selesai, Ada lanjutan dibawah yaa teman.

(Namun ada Lanjutan lagi sahabat, itu hanya masang CSS.nya saja), Langkah selanjutnya ialah pemasangan Script Html dan Java Scriptnya cukup gampang caranya adalah Kembali ke Dashboard blog teman sehabis itu ikuti langkah dibawah ini ;

#1 Klik > Tata Letak/ layout
#2 Pilih > Tambah Gadget
#3 Pilih > Html/Javascript dan tempel kode dibawah ini.

Berikut Kodenya :

KLIK

DONASI VIA OVO
Bantu berikan kontribusi kalau artikelnya dirasa bermanfaat. Donasi akan dipakai untuk perkembangan website Duniamu38. Terima kasih.

Catatan Penting !!!

Jangan lupa untuk mengganti Url Via Ovo/dana dibawah ini yang sudah saya kasih warna merah dan ubah urlnya sesuai via apa yang akan sobat buat mendapatkan donasinya.

Kotak kontribusi termasuk kategori sangat ringan untuk dipasang diblog, tidak mempengaruhi kecepatan akses blog sobat sama sekali kalian bisa liat demonya disini DEMO, munkgin itu sedikit Cara Membuat Kotak Donasi Blogger Seperti di Igniel, Semoga bermanfaat tutorial ini. Terimakasih