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
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