For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Cara membuat box donasi via transfer di blogger

Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat box donasi via transfer bank di blogger dengan gaya hide and show di blogger

Info: Jika kamu audah pemasaran denfan oembahasan kita kali ini yuk langsung aja kuta bahas bersama sama

Box Donasi

Apa itu box donasi di blogger? box donasi di blogger merupakan suatu tampilan pada website yang mana box donasi tersebut menampilkan keterangan informasi bisa berupa link dan juga text dalam melakukan pendonasian oleh pegunjung web

Tranfer bank

Yang menbedakan box donasi tersebut adalah metode pendonasian melalui tranfer bank, dalam tampilan show and hide di blogger sehingga kamu bisa menaruh nomor rekening kamu untuk di tampilkan di dalam box donasi tersebut

Info: Selain dari donasi melalui tranfer bank kamu juga bisa menampilkan informasi donasi melalui tranfer akun paypal

Show and Hide

Tampilan dari box donasi di blogger tersebut adalah hide and show, apakah maksudnya? jadi tampilan box ataupun kotak donasi show and hide tersebut akan tampil jika tombol show di aktifkan alias di klik, jika tidak box donasi akan tampil dalam informasi text berupa apapun yang ingin di tampilkan di dalam hox donasi tersebut, bukan seperti nomor rekening dan sebagainya karena hal tersebut di dalam mode hide

Contoh Tampilan

Jika kamu penasaran bagaimana contoh tampilan dari donasi box di blogger, periksa contoh tampilan nya seperti contoh di bawah ini

Mau donasi lewat mana yak? Paypal
Bank Mandiri - An.rahmat uliady/ Rek - 2345xxx
Traktir creator minum kopi dengan cara memberi sedikit donasi. klik icon panah di atas

Info: Bagaimana sobat denfan contoh tampilan nya keren kan, oastilah ieren sobat

Cara pembuatan

Jika kamu auday penasaran dengan contoh tampilan dari box dibasi di blogger ailahkan terua baca da pelajari artikel ini hingga selesai oke

Kode CSS

Seperti biasanya langkah pertama yang biaa kamu lakukan adlah menyakin kode CSS di bawah ini kemudian kamu bisa meletakkannya di atas kode ]]></b:skin>

/* Source kode by ICloudIce.com */
.rahdnt{position:relative;max-width:500px;background-color:#fefefe;box-shadow:0 5px 12px -2px rgb(0 0 0 / 12%); border:1px solid #eceff1;border-radius:5px; padding:15px;margin:20px 0; display:flex;align-items:center;font-size:13px;transition:all .2s ease;}
.rahdnt .rahdnt-i{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:10px; background:#f1f1f0;border-radius:5px;border:1px solid transparent}
.rahdnt .rahdnt-desk{flex-grow:1; width:calc(100% - 150px);padding:0 15px;line-height:20px}
.rahdnt .rahdnt-shw{position:absolute;padding:1px 3px;margin-top:-80px;margin-left:160px;width:30px;height:30px;background:#f80000;border-radius:50%;border:1px solid #eceff1;transition:all .2s ease;z-index:3}
#rahdnt-check:checked ~ .rahdnt{padding-top:200px}
#rahdnt-check:checked ~ .rahdnt .rahdnt-hdn{visibility:visible;opacity:1}
#rahdnt-check:checked ~ .rahdnt .rahdnt-shw{margin-top:-450px}
#rahdnt-check:checked ~ .rahdnt .rahdnt-shw svg{transform:rotate(180deg)}
#rahdnt-check,#rahdnt-bank{display:none}
#rahdnt-bank:checked ~ .rahdnt-pal{visibility:hidden;opacity:0;position:relative}
#rahdnt-bank:checked ~ .rahdnt-rek{visibility:visible;opacity:1;position:absolute;margin-top:-43px}
.rahdnt-hdn{position:absolute;width:calc(100% - 30px);background-color:transparent;margin:-250px auto auto -15px;visibility:hidden;opacity:0;transition:all .2s ease}
.rahdnt-hdn b{display:none;font-size:16px;margin-left:6px;margin:10px 6px 6px;text-align:center}
.rahdnt-hdn span{font-size:17px;color:#767676;margin-left:35px}
.rahdnt-trsf,.rahdnt-pal,.rahdnt-rek{display:inline-block;width:calc(100% - 30px);border:1px solid #999;background:#fefefe;border-radius:3px;margin:10px 25px 0;padding:10px;transition:all .2s ease}
.rahdnt-pal{position:absolute}
.rahdnt-rek{margin:10px 25px 0;visibility:hidden;opacity:0;transition:all .2s ease;}
.rahdnt-svg{width:20px;height:20px;position:absolute;fill:#767676;margin-top:3px}
.rahdnt-shw svg,.rahdnt-svg.line{fill:none!important;stroke:#fff;stroke-width:2}
.rahdnt-svg.line{stroke:#767676}
@media screen and (max-width:500px){.rahdnt .rahdnt-shw{margin-left:160px}}
@media screen and (max-width:455px){.rahdnt .rahdnt-shw{margin:-90px auto auto 130px}#rahdnt-check:checked ~ .rahdnt .rahdnt-shw{margin-top:-460px}}.dark-mode .rahdnt,.dark-mode .rahdnt-rek,.dark-mode .rahdnt-trsf,.dark-mode .rahdnt-pal,.dark-mode .rahdnt-hdn span,.dark-mode .rahdnt-i{background-color:#2d2d30;color:#fefefe}
.dark-mode .rahdnt-svg{fill:#fefefe;stroke:#fefefe}
.dark-mode .rahdnt,.dark-mode .rahdnt-shw,.dark-mode .rahdnt-i{border-color:rgba(255,255,255,.1)}

Info: Atau kamu bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas

Kode HTML

Langkah selanjutnya yang bisa kamu lakukan adlaah menyalin lagi kode HTML di bawah ini kemudian letakkan tepat di bawah kode <data:post.body/>

<input id='rahdnt-check' type='checkbox'/>
<div class='rahdnt'>
<label class='rahdnt-shw' for='rahdnt-check'><svg viewBox='0 0 24 24'><g transform='translate(12.000000, 12.000000) rotate(-180.000000) translate(-12.000000, -12.000000) translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'/></g></svg></label>
<div class='rahdnt-i'><svg class='rahdnt-svg line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18 8h1a4 4 0 0 1 0 8h-1'></path><path d='M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z'></path><line x1='6' y1='1' x2='6' y2='4'></line><line x1='10' y1='1' x2='10' y2='4'></line><line x1='14' y1='1' x2='14' y2='4'></line></svg></div>
<div class='rahdnt-hdn'>
<b>Mau donasi lewat mana yak?</b> 
<label class='rahdnt-trsf' for='rahdnt-bank'>
<svg class='rahdnt-svg line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect height='16' rx='2' ry='2' width='22' x='1' y='4'></rect><line x1='1' x2='23' y1='10' y2='10'></line></svg>
<span>Bank Transfer</span></label>
<input id='rahdnt-bank' type='checkbox'/>
<a class='rahdnt-pal' href='https://www.paypal.com/paypalme/xxxx' target='_blank'>
<svg class='rahdnt-svg' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path d='M26.28,9.58A6.64,6.64,0,0,0,19.65,3H10a1,1,0,0,0-1,.84L5.58,25.29a1,1,0,0,0,.23.8,1,1,0,0,0,.76.36H10.7l-.22,1.39a1,1,0,0,0,1,1.16h4.65a1,1,0,0,0,1-.83l1-6.11h3.15a7.46,7.46,0,0,0,7.43-7.45v-.28A5.87,5.87,0,0,0,26.28,9.58ZM10.85,5h8.8a4.64,4.64,0,0,1,4.51,3.61,5.68,5.68,0,0,0-1.32-.15H14.5a1,1,0,0,0-1,.84L12.91,13a1,1,0,0,0,2,.32l.46-2.88h7.49a3.87,3.87,0,0,1,1.4.27,6.47,6.47,0,0,1-6.4,5.69H13.22a1,1,0,0,0-1,.83L11,24.45H7.74Zm15.86,9.61a5.46,5.46,0,0,1-5.43,5.45h-4a1,1,0,0,0-1,.83l-1,6.11H12.64l.22-1.39h0l1.2-7.19h3.78A8.46,8.46,0,0,0,26,12.1a3.82,3.82,0,0,1,.71,2.23Z'/></g></svg>
<span>Paypal</span></a>
<div class='rahdnt-rek'>
Bank Mandiri - An.rahmat uliady/ Rek - 2345xxx
</div>
</div>
<div class='rahdnt-desk'>
Traktir creator minum kopi dengan cara memberi sedikit donasi. klik icon panah di atas
</div>
</div>

Info: Fungsi dari kode HTML di atas adalah untuk menampilkan klbox donasi hide and show tersebut, tepat di bawah postingan blog kamu

Penjelasan

Atau kamu bisa menaruh box donasi sesuai keinginan kamu aja, semisal di dalam postingan blog, ataupun pada halaman blog, bisa juga oada widget blog dan sebagainya lah

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.