Cara Lengkap Membuat Tombol Donasi Paypal di Bawah Artikel Blog

Cara Lengkap Membuat Tombol Donasi Paypal Di Bawah Artikel Blog


Halo sobat-sobat Blogger . dimana pun kalian berada.
Di Artikel kali ini, ada Fitur Terbaru yang mungkin sudah dicari kesana kemari tapi tak kunjung jumpa. Iya, Fitur Tombol Donasi Paypal di bawah Artikel Blog.
Fitur ini memang sudah lama ada. Tetapi tidak di kembangkan atau mungkin tidak disebarluaskan.

Dan ini sudah kami desain sedikit, Kiranya agar lebih cocok dengan Template yang kami gunakan saat ini, VioMagz v.4.0 .

Untuk lebih singkatnya, mari kita coba..
Langkah - Langkah yang harus di lakukan :

  1. Login ke Akun Blogger.com sobat
  2. Klik Menu " Tema "
  3. Setelah masuk Ke Menu Tema, Klik ' Edit HTML
  4. Nah, setelah di dalam Tampilan Edit HTML, cari </b:skin> atau </style> ( Gunakan CTRL+F , kemudian cari kode tersebut )
  5. Setelah ketemu kodenya, letakkan Script di bawah ini tepat di atas kode </b:skin> atau </style>
  6. /* Paypal Donation Box Bounce by BloggerBasecamp.blogspot.com */
    .BlogBaseDonasi {background:#5b86e5; /* warna background */
      color:#000;
      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;}
    .BlogBaseDonasi .ikon a {background-color:#36d1dc; /* warna ikon */
      color:#fff;
      text-decoration:none; display:block; padding:5px; border-radius:7px; text-align:center; -webkit-animation:BlogBaseBounce 1s linear 1s infinite normal; animation:BlogBaseBounce 1s linear 1s infinite normal}
    .BlogBaseDonasi svg {width:50px; height:50px}
    .BlogBaseDonasi svg path {fill:#e149ab}
    .BlogBaseDonasi .ikon {margin-right:15px}
    .BlogBaseDonasi .deskripsi {line-height:1.5em;}
    .BlogBaseDonasi .deskripsi .judul {font-size:18px; font-weight:bold; display:block; margin-bottom:10px;}
    @keyframes BlogBaseBounce{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 BlogBaseBounce{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)}
    }
  7. Setelah itu, masih di Dalam mode Edit HTML
  8. Cari Kode  <data:post.body/> atau jelasnya seperti berikut
  9. <div id='body-post-it'>
    <data:post.body/>
    </div>

    Jika belum ketemu, alternatif dengan CTRL+F , kemudian cari kode tesebut.

  10. Kemudian Letakkan Kode di bawah ini tepat dibawah <data:post.body>
  11. <!-- Paypal Donation Box Bounce by Bloggerbasecamp.blogspot.com -->
    <div class='BlogBaseDonasi'>
      <div class='ikon'>
        <a href='https://www.paypal.me/xxxxxx' rel='nofollow' onclick='window.open(this.href,"toolbar=0,status=0,width=800,height=600");return false;' title='Donasi'>
          <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'/></svg>
          <span>KLIK</span>
        </a>
      </div>
      <div class='deskripsi'>
        <span class='judul'>DONASI VIA PAYPAL</span>
        Bantu Apresiasi Tim Redaksi Blogger Basecamp, dan untuk membuat Domain<b><i>www.bloggerbasecamp.com</i></b>. Terima kasih.
      </div>
    </div>
  12. Kemudian, Klik " SAVE "
Keterangan :
- Ganti tulisan berwarna merah atau xxxxxx dengan username Paypal milik sobat.
- Ganti tulisan berwarna  hijau sesuai selera sobat.


Untuk sobat yang belum mempunyai akun paypal, boleh mendaftar di Paypal secara gratis.
Untuk sobat yang sudah ahli atau berpengalaman , URL https:/paypal.me/xxxxxx juga bisa sobat ganti dengan URL pembayaran yang lain yang sobat punya.

Itulah artikel mengenai Cara Membuat Tombol Donasi Paypal di Bawah Artikel Blog , semoga artikel ini bermanfaat. Terimakasih.
Salam.

0 Response to "Cara Lengkap Membuat Tombol Donasi Paypal di Bawah Artikel Blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel