Cara Membuat Tombol/Widget Kontak Donasi di Blog Median UI
Cara Membuat Tombol Kontak Donasi di Blog Median UI - Berbicara tentang cara membuat widget halaman kontak Donasi pada situs website memang suatu hal yang perlu di perhatikan bagi sebagian blogger.
Sesuai dengan request teman kita Gilang, berikut ini adalah panduan tentang membuat kontak Donasi pada situs blog di template Median UI yang admin sendiri gunakan di situs ini.
Kenapa Perlu Membaut Widget Donasi di Situs Blog
Mungkin anda seorang blogger harus banyak selalu berpikir tentang konten-konten yang bermanfaat yang perlu anda tulis dan itu juga tidak semudah kita bayangkan.
Mungkin dari pengunjung blog kita ada yang ingin memberikan sedikit rezeki terhadap website kita tidak perlu repot-repot bertanya. Tentunya pengunjung akan sadar jika mereka mendapatkan informasi yang di inginkan, tentunya mereka akan berbagi kepada kita. [Jika ingat😁].
Maka dari itu kita perlu melakukan sesuatu terhadap website kita agar sedikit mendapatkan dukungan dari teman-teman pengunjung blog kita.
Rekening Apa Saja Yang Sebaiknya Ada Dalam Kotak Donasi?
- Rekening Bank.
- Dompet digital
Cara Membuat Widget Kotak Donasi
Untuk langkah memasang halaman kontak Donasi di situs blog pada template Median UI iyalah 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/suwandi639/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 Median UI
Jika sudah anda salin berikut langkah selanjutnya.
- Buka Dasbor Blogger.
- Pada halaman utama blogger anda pilih menu Tata Letak.
- Lalu pilih side-widget, atau Top-widget.
- Lalu pilih tambahkan widget baru.
- Lalu pilih HTML javascript.
- Lalu letakkan/pastekan kode yang sebelum anda salin di atas.
Informasi penting!
- Silahkan anda ubah terlebih dahulu yang admin Blog warna kuning, dengan link akun traktir, atau sociabuzz atau Paypal anda.
- Lalu ubah juga tulisan yang admin blog warna merah sesuai dengan keinginan anda.
Jika ada pertanyaan terkait tutorial di atas kalian juga bisa bertanya melalui kolom komentar yang tersedia di bawah ini, atau jika ingin melakukan request tutorial tantang lainnya anda juga bisa bertanya melalui kontak email atau juga melalui kolom komentar yang tersedia di bawah ini, terimakasih selamat mencoba.
Posting Komentar