Berbicara tentang cara membuat widget halaman kontak Donasi pada situ Website, Blog memang suatu hal yang perlu di perhatikan bagi seorang Blogger.
Ada banyak sekali keuntungan dan manfaat yang bisa di dapatkan saat menampilkan widget kontak Donasi pada Blog atau Postingan Blog yang kita miliki.
Namun juga banyak yang tidak mengerti akan kegunaan dari kontak Donasi, untuk itu pada tutorial kali ini admin akan berbagi infomasi tentang cara membuat halaman kontak Donasi pada template Median UI.
Berikut ini adalah panduan tentang membuat kontak Donasi pada situ Blog atau Postingan Blog di template Median UI.
Baca juga :
Kenapa perlu membuat Widget Kontak Donasi di Situs Blog / Postingan Blog
Mungkin dari sebagian temen-temen blogger masih bertanya-tanya kenapa harus memiliki halaman kontak Donasi pada situs Blog / Postingan Blog. Untuk lebih jelasnya sebagai berikut.
Mungkin anda seorang blogger harus banyak selalu berpikir tentang konten-konten yang bermanfaat yang perlu anda tulis dan itu juga tidak semudah yang kita bayangkan.
Mungkin dari pengunjung blog kita ada yang ingin memberikan sedikit rezeki terhadap website, Blog kita tidak perlu repot-repot bertanya. Tentunya pengunjung akan sadar jika mereka mendapat informasi yang di inginkan tentunya mereka akan berbagi kepada kita.
Maka dari itu kita perlu melakukan sesuatu terhadap website, blog kita agar sedikit mendapatkan dukungan dari temen-temen pengunjung blog kita.
Tentunya jika melihat blog yang admin sendiri gunakan untuk gunakan, ada banyak sekali cara yang bisa anda gunakan untuk melakukan dukungan / donasi, diantaranya :
- Rekening Bank
Yang pertama tentunya dari rekening Bank, mungkin dari temen-temen pengunjung blog kita memiliki rekening Bank.
- Dompet Digital
Yang kedua tentunya dari Dompet Digital seperti Gopay Dana, OVO, Shopeepay, dan berbagai dompet digital lainnya bisa anda gunakan.
Cara membuat widget Kontak Donasi
Sebelum melanjutkan perlu anda ketahui, pastikan terlebih dahulu bahwa kalian sudah menyiapkan akun dari Kontak Donasi anda, anda juga bisa menggunakan situs Trakir, situs sociabuzz, untuk mendapatkan dukungan anda bisa menggunakan beberapa situs saya kerap orang lain gunakan.
Untuk langkah memasang halaman Kontak Donasi di situs pada template Median UI, sebagai berikut :
Salin terlebih dahulu kode html javascript di bawah ini :
<style>
.pscom{
background: linear-gradient(45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f);
background-size: 500% 500%;
-webkit-animation: pscom 12s ease infinite;
-moz-animation: pscom 12s ease infinite;
animation: pscom 12s ease infinite;
}
@-webkit-keyframes pscom {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes pscom {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes pscom {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
</style>
<style>
.penasharingDonasi { /* Warna Background */
color:#ffffff;
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;}
.penasharingDonasi .ikon a {background-color:#ffffff; /* Warna Ikon */
color:#c10e0e;
text-decoration:none; display:block; padding:5px; border-radius:7px; text-align:center; -webkit-animation:penasharingBounce 1s linear 1s infinite normal; animation:penasharingBounce 1s linear 1s infinite normal}
.penasharingDonasi svg {width:50px; height:50px}
.penasharingDonasi svg path {fill:#c10e0e}
.penasharingDonasi .ikon {margin-right:15px}
.penasharingDonasi .deskripsi {line-height:1.5em;}
.penasharingDonasi .deskripsi .judul {font-size:18px; font-weight:bold; display:block; margin-bottom:10px;}
@keyframes penasharingBounce{0%,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 penasharingBounce{0%,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)}
}
</style>
<!-- Donation shaytekno.com-->
<div class='penasharingDonasi pscom'>
<div class='ikon'>
<a href='https://sociabuzz.com/catatan_ghaitsa/tribe?locale.x=id_ID' onclick='window.open(this.href,"toolbar=0,status=0,width=800,height=600");return false;' title='Klik Untuk Donasi via Buzz'>
<svg viewbox='0 0 24 24'><path d='M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z'/></path></svg>
<span>KLIK</span>
</a>
</div>
<div class='deskripsi'>
<span class='judul'>Traktir Ngopi Disini.!</span>
Merasa Terbantu Dengan artikel ini? Ayo Traktir Kopi Dengan Cara Berbagai Donasi. Terimakasih :)
</div>
</div>Cara memasang widget Donasi di Template Media UI
Jika sudah anda salin berikut langkah-langkah selanjutnya :
- Buka Dashboard Blogger
- Pada halaman utama blogger anda pilih menu Tata Letak
- Lalu pilih side-widget, atau Up Widget
- Lalu pilih tambahkan widget baru
- Lalu pilih HTML javascripts
- Lalu letakkan / Pastekan kode yang sebelum anda salin diatas
Info Penting
- Silakan anda ubah terlebih dahulu yang admin blog warna kuning, dengan link akun traktir, atau sociabuzz atau Paypal anda
- Lalu rubah juga tulisan yang admin blog warna merah sesuai dengan rincian anda.
Itulah tutorial cara membuat halaman kontak Donasi pada situ Blog