Cara Membuat Kotak Donasi Di Blogger

Pada kesempatan yang berbahagia ini, calon desain akan berbagi informasi tentang Cara Membuat kotak donasi Di Blogger. Pembuatan kotak donasi ini bisa anda pergunakan sesuai kebutuhan.
Tanpa basa-basi lagi langsung saja anda login ke akun blogger anda. Salin CSS dibawah ini, dan tempelkan tepat diatas tag </head>

@import url('https://fonts.googleapis.com/css?family=Muli:300,700&display=swap');
<style>
.box {
    background-color: #fff;
      box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 6px 6px rgba(0,0,0,0.1);
    border-radius: 20px;
    padding: 40px 60px;
    position: relative;
}

.box::before {
    background-color: #FF3D44;
    border-radius: 30px;
    content: '';
    opacity: 0.9;
    position: absolute;
    bottom: -30px;
    right: -30px;
    height: 220px;
    width: 220px;
    z-index: -1;
}

.box img {
    display: block;
    margin-top: -60px;
    margin-bottom: 10px;
    width: 50px;
}

.box h2 {
    margin: 0;
}

.box p {
    line-height: 24px;
}

.btn {
    border-radius: 5px;
      box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 6px 6px rgba(0,0,0,0.1);
    color: #fff;
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
}

.btn.paypal {
    background-color: #0070ba;
    margin-right: 10px;
}

.btn.patreon {
    background-color: rgb(232, 91, 70);
}


/* SOCIAL PANEL CSS */
.social-panel-container {
    position: fixed;
    right: 0;
    bottom: 80px;
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out;
}

.social-panel-container.visible {
    transform: translateX(-10px);
}

.social-panel {    
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6);
    border: 5px solid #001F61;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Muli';
    position: relative;
    height: 169px;    
    width: 370px;
    max-width: calc(100% - 10px);
}

.social-panel button.close-btn {
    border: 0;
    color: #97A5CE;
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    top: 5px;
    right: 5px;
}

.social-panel button.close-btn:focus {
    outline: none;
}

.social-panel p {
    background-color: #001F61;
    border-radius: 0 0 10px 10px;
    color: #fff;
    font-size: 14px;
    line-height: 18px;
    padding: 2px 17px 6px;
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
    text-align: center;
    width: 235px;
}

.social-panel p i {
    margin: 0 5px;
}

.social-panel p a {
    color: #FF7500;
    text-decoration: none;
}

.social-panel h4 {
    margin: 20px 0;
    color: #97A5CE;    
    font-family: 'Muli';    
    font-size: 14px;    
    line-height: 18px;
    text-transform: uppercase;
}

.social-panel ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.social-panel ul li {
    margin: 0 10px;
}

.social-panel ul li a {
    border: 1px solid #DCE1F2;
    border-radius: 50%;
    color: #001F61;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 50px;
    text-decoration: none;
}

.social-panel ul li a:hover {
    border-color: #FF6A00;
    box-shadow: 0 9px 12px -9px #FF6A00;
}

.floating-btn {
    border-radius: 26.5px;
    background-color: #001F61;
    border: 1px solid #001F61;
    box-shadow: 0 16px 22px -17px #03153B;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    line-height: 20px;
    padding: 12px 20px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
}

.floating-btn:hover {
    background-color: #ffffff;
    color: #001F61;
}

.floating-btn:focus {
    outline: none;
}

.floating-text {
    background-color: #001F61;
    border-radius: 10px 10px 0 0;
    color: #fff;
    font-family: 'Muli';
    padding: 7px 15px;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 998;
}

.floating-text a {
    color: #FF7500;
    text-decoration: none;
}

@media screen and (max-width: 480px) {

    .social-panel-container.visible {
        transform: translateX(0px);
    }
    
    .floating-btn {
        right: 10px;
    }
}
</style>

Kemudian anda salin kode JavaScript dibawah ini dan letakan tepat diatas tag </body>

<script type='text/javascript'>
// INSERT JS HERE


// SOCIAL PANEL JS
const floating_btn = document.querySelector('.floating-btn');
const close_btn = document.querySelector('.close-btn');
const social_panel_container = document.querySelector('.social-panel-container');

floating_btn.addEventListener('click', () => {
    social_panel_container.classList.toggle('visible')
});

close_btn.addEventListener('click', () => {
    social_panel_container.classList.remove('visible')
});
</script>

Langkah selanjutnya, anda salin kode HTML dibawah ini dan anda bisa letakan diantara sidebar atau didalam postingan dan halaman pada blog anda.

<div class="box">
    <img src="https://image.flaticon.com/icons/svg/138/138292.svg" alt="coins" />
    <h2>Donasi</h2>
    <p>Dana yang anda berikan, akan digunakan untuk Perpanjang Domain.</p>
    <a href="https://paypal.me/bredther" target="_blank" class="btn paypal">
        <i class="fab fa-paypal"></i> Paypal
    </a>
    <a href="https://patreon.com/calondesain" target="_blank" class="btn patreon">
        <i class="fab fa-patreon"></i> Patreon
    </a>
</div>

Silahkan anda ganti yang diberi warna biru dengan link rekening digital anda.

Pastikan didalam template blog anda terpasang link CSS dari Fontawesome dibawah ini:

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css

Untuk demo nya anda bisa lihat dibawah ini:
Mungin sampai disini dulu yah, semoga bisa bermanfaat dan jangan lupa untuk selalu berbagi informasi.

Terima kasih