Cara Membuat Widget Donasi di Bawah Artikel Blogger

Posting Komentar
Cara Membuat Widget Donasi di Bawah Artikel Blogger - kali ini saya ingin sedikit berbagi tutorial seputar blogging dimana banyak sekali dicari oleh warga vrindavan seperti kalian, hehe bercanda sob 😁 saya sendiri juga menerapkan kok.

Source code dari widget ini saya ambil dari blog Igniel karena tidak perlu menggunakan javascript yang akan memberatkan pemuatan halaman posting di blog sobat. So, jangan khawatir dan jangan bertanya apakah widget ini dapat mempengaruhi kecepatan blog atau tidak tentunya tetap ngacir asalkan pada dasarnya blog sobat sudah ngebut.

Kalian hanya perlu menambahkan kode html dan css nya agar bisa diterapkan. Kami sendiri sangat merekomendasikan agar anda melakukan Minified CSS di kodenya supaya tidak terjadi kekurangan yang menyebabkan pemuatan halaman akan jadi terhambat seperti kasus yang sebelumnya saya alami.

Ok, langsung saja menuju ke cara penerapannya supaya tidak bertele-tele dan membuat anda bosan.


Cara Membuat Widget Donasi di Bawah Artikel Blogger

Sebelum menerapkan tutorial ini, pastikan anda telah backup pada template yang sobat gunakan untuk menghindari suatu hal buruk yang terjadi seperti error dan lain-lain.

  1. Silahkan login terlebih dahulu ke Blogger.com
  2. Pada halaman dashboard, pilih menu Tema > Edit HTML
  3. Kemudian masukkan kode CSS berikut ini tepat diatas kode ]]></b:skin>
    /* Donate Widget */
    .fernnDonasi{background:#E7E8E8;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 0;display:flex;padding:15px;overflow:hidden;transition:all .3s ease;border-radius:7px}.fernnDonasi .ikon a{background-image:linear-gradient(50deg,#5067C5,#B0569C);color:#fff;text-decoration:none;display:block;padding:5px;border-radius:7px;text-align:center;-webkit-animation:fernnBounce 1s linear 1s infinite normal;animation:fernnBounce 1s linear 1s infinite normal}.fernnDonasi svg{width:50px;height:50px}.fernnDonasi svg path{fill:#fff}.fernnDonasi .ikon{margin-right:15px}.fernnDonasi .deskripsi{text-align:justify;font-size:14px;line-height:1.5em}.fernnDonasi .deskripsi .judul{font-size:15px;font-weight:600;display:block;margin-bottom:10px}@keyframes fernnBounce{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 fernnBounce{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)}}
    Kode CSS diatas sudah kami minified, sehingga anda hanya perlu menambahkan langsung ke template.
    ×

  4. Lalu masukkan kode HTML berikut ini juga tepat dibawah kode <data:post.body/>
    <div class='fernnDonasi'>
      <div class='ikon'>
        <a href='#' onclick='window.open(this.href,&quot;toolbar=0,status=0,width=800,height=600&quot;);return false;' title='Klik Untuk Donasi via Paypal'>
          <svg viewbox='0 0 24 24'><path d='M22,12V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V12A1,1 0 0,1 1,11V8A2,2 0 0,1 3,6H6.17C6.06,5.69 6,5.35 6,5A3,3 0 0,1 9,2C10,2 10.88,2.5 11.43,3.24V3.23L12,4L12.57,3.23V3.24C13.12,2.5 14,2 15,2A3,3 0 0,1 18,5C18,5.35 17.94,5.69 17.83,6H21A2,2 0 0,1 23,8V11A1,1 0 0,1 22,12M4,20H11V12H4V20M20,20V12H13V20H20M9,4A1,1 0 0,0 8,5A1,1 0 0,0 9,6A1,1 0 0,0 10,5A1,1 0 0,0 9,4M15,4A1,1 0 0,0 14,5A1,1 0 0,0 15,6A1,1 0 0,0 16,5A1,1 0 0,0 15,4M3,8V10H11V8H3M13,8V10H21V8H13Z'/></svg>
        </a>
      </div>
      <div class='deskripsi'>
        <span class='judul'>DONASI BLOG</span>
        Bantu admin untuk mengembangkan blog ini menjadi lebih baik lagi, donasi anda hanya diperuntukkan bagi kepentingan blog saja.
      </div>
    </div>

  5. Simpan Tema dan lihat hasilnya.

Jika tutorial diatas anda lakukan dengan benar maka hasilnya akan sama seperti di blog ini yang tepat ada dibawah artikel.

Mungkin sekian dahulu postingan dari Cara Membuat Widget Donasi di Bawah Artikel Blogger, semoga selalu bermanfaat.
Terimakasih
Fernand
Fernand
Hanya seorang blogger yang hobinya coding
Terbaru Lebih lama

Related Posts

Posting Komentar

Dapatkan artikel terbaru!