×

Author / Admin / Editor

     Jagoan Redesign    

Blog yang membahas Tutorial Blogger, Games, Template, Tips Adsense, SEO, Web Design dan Teknologi

Iklan Bawah Posting

Cara Membuat Kotak Donasi Blog Igniel Responsif Keren di Blogger

Jagoanredesign - Kali ini saya akan membagikan sebuah tutorial Cara Membuat Kotak Donasi Blog Igniel Responsif Keren di Blogger, membuat kotak donasi di blog atau website itu sangat penting. 

Cara Membuat Kotak Donasi Blog Igniel Responsif Keren di Blogger

Karena jika ada pengunjung yang ingin memberikan donasi blog / website anda, mereka tidak perlu susah-susah untuk menghubungi anda melalui email yang ada pada blog atau website anda.

Cara Membuat Kotak Donasi Blog Igniel Responsif Keren di Blogger

1. Silahkan Login ke Blogger.
2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.
3. Kemudian cari kode berikut ini ]]></b:skin>  atau </style>dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.

/* Kotak Blog Donasi by Jagoan Redesign */
.JagoanRedesignDonasi {background:#fd0000; 
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;
background-image:linear-gradient(110deg,rgba(255,255,255,.1) 16%,rgba(255,255,255,.1) 17%,rgba(255,255,255,.05) 17%,rgba(255,255,255,.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,.05) 78%,rgba(255,255,255,.05) 84%,rgba(255,255,255,.1) 84%,rgba(255,255,255,.1));}
.JagoanRedesignDonasi .ikon a {background-color:#7D0009; 
color:#fff;
text-decoration:none; display:block; padding:5px; border-radius:7px; text-align:center; -webkit-animation:JagoanRedesignBounce 1s linear 1s infinite normal; animation:JagoanRedesignBounce 1s linear 1s infinite normal}
.JagoanRedesignDonasi svg {width:50px; height:50px}
.JagoanRedesignDonasi svg path {fill:#fff}
.JagoanRedesignDonasi .ikon {margin-right:15px}
.JagoanRedesignDonasi .deskripsi {line-height:1.5em; color:#eaeaea;}
.JagoanRedesignDonasi .deskripsi .judul {font-size:18px; font-weight:bold; display:block; margin-bottom:10px; color:#fff;}
@keyframes JagoanRedesignBounce{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 JagoanRedesignBounce{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)}
}
4. Silahkan anda cari <data:post.body/> dan tambahkan kode html dibawah ini tepat Dibawah kode <data:post.body/>.
Khusus anda pengguna template Viomagz, untuk bagian <data:post.body/> terdapat tiga bagian, silahkan anda coba satu per satu, biasanya code tersebut di bagian terakhir atau bagian ke 3 karena saya juga menggunakan template Viomagz.

<!-- Kotak Blog Donasi by Jagoan Redesign -->
<div class='JagoanRedesignDonasi'>
  <div class='ikon'>
    <a href='https://www.paypal.me/' onclick='window.open(this.href,"toolbar=0,status=0,width=800,height=600");return false;' title='Klik Untuk Donasi via Paypal'>
      <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 berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk membeli domain <b><i>https://www.jagoanredesign.com</i></b>. Terima kasih.
  </div>
</div>
Perhatikan, teks yang saya tandai warna merah silahkan anda ganti dengan username Paypal anda dan kata-kata apa yang anda mau.
5. Silahkan anda SIMPAN TEMA dan Selesai.
Nah, itu adalah tutorial Cara Membuat Kotak Donasi Blog Igniel Responsif Keren di Blogger semoga totorial bermanfaat bagi anda semua. jika ada yang ingin  anda tanyakan silakan berkomentar saja di bawah.
Previous
Next Post »
avatar
Penulis Blog dan redesigner template blogger.

Related Posts

Komentar
Tutup Komentar

0

Post a Comment

  • Berkomentarlah secara bijaksana dan bertanggung jawab.
  • Tidak diperbolehkan mempromosikan barang atau berjualan.
  • Tulis komentar Anda untuk hal yang masih berhubungan dengan posting pada halaman ini.
  • Dilarang memuat Link Aktif pada kolom komentar
  • Komentar dengan link aktif akan otomatis dihapus.
  • Jika ingin menulis kode silahkan anda parse terlebih dulu (terutama Javascript dan HTML)
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel