Share Code widget Donate Paypal cho Blogger

Anh Trai Nắng
3

Code này nhớ hồi đợt mình chôm của blog nào bên nước ngoài xong về mình edit lại chút xíu màu với lại awesome. Nay có mấy bạn nhắn tin bên Page xin code nên mình viết bài share lên đây luôn!

Share Code widget Donate Paypal cho Blogger
Share Code widget Donate Paypal cho Blogger

Thật ra cái widget này có cmj khó đâu, anh em view code là lấy được rồi, chẳng qua nhìn hiệu ứng nhảy nhảy nhún nhún là thấy thích mắt tí hoy kaka.

Share Code widget Donate Paypal cho Blogger

- Bố cục > add HTML/Javascript.

- Dán toàn bộ code sau vào Widget:

<style>
    .pscom {
        background: linear-gradient(45deg, #3c5b9a, #4f7bd6, #3c5b9a, #39b5e4, #3c5b9a, #39b5e4, #3c5b9a);
        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;
        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>
<!-- Paypal Donation Box Bounce-->
<div class='penasharingDonasi pscom'>
    <div class='ikon'>
        <a href='https://www.paypal.com/paypalme/anhtrainang' onclick='window.open(this.href,"toolbar=0,status=0,width=800,height=600");return false;' title='Click To Donate'>
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewbox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<path style="fill:#0D47A1;" d="M174.225,303.616c1.76-11.04,11.328-19.2,22.624-19.2h47.04c92.448,0,164.8-37.248,185.952-144.992   c0.64-3.2,1.632-9.344,1.632-9.344c6.016-39.872-0.032-66.912-21.76-91.456C385.842,11.584,342.642,0,287.378,0H126.993   c-11.296,0-20.896,8.16-22.688,19.2L37.522,439.392c-1.312,8.288,5.152,15.776,13.6,15.776h99.008l24.864-156.48L174.225,303.616z"/>
<path style="fill:#0D47A1;" d="M243.889,312.704h-42.176L170.225,512h68.416c9.888,0,18.304-7.136,19.84-16.832l0.8-4.224   l15.744-98.912l1.024-5.44c1.536-9.696,9.952-16.832,19.808-16.832h12.512c80.864,0,144.16-32.576,162.656-126.816   c7.424-37.824,3.84-69.536-14.496-92.448C433.554,256.576,360.242,312.704,243.889,312.704z"/>
</path></path></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g>
</svg>
            <span>Click</span>
        </a>
    </div>
    <div class='deskripsi'>
        <span class='judul'>Donate Paypal</span>
        Ủng hộ phát triển site bằng 1 ly cà phê nhé. Cảm ơn anh em!
    </div>
</div>

- Thay https://www.paypal.com/paypalme/anhtrainang thành link Paypal của các bạn hoặc link gì các bạn điều chỉnh cho phù hợp.

- Thay awesome chỗ chữ <path ... />

- Ngoài làm nút Paypal các bạn có thể làm nhiều nút khác bằng cách sửa font awesome và nội dung cho phù hợp.

Lời kết

Bên trên là Code widget Donate Paypal cho Blogger. Các bạn có thể tự tùy biến để sử dụng theo ý thích cũng như là nội dung riêng của mình.

Chúc các bạn thành công!

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

3 Nhận xét

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu