Membuat Banner Amal Komisi Pemberantasan Korupsi Dengan Fungsi Toggle
Banyak sebutan untuk KPK yang satu ini namun yang terang bukan forum pemerintah yang yang mengurusi para koruptor itu hehehe. Mulai dari Komunitas Penggalang Kebaikan, Kami Peduli Kawan, Kumpulan Para Koplaker heheheehe... dan lain-lain (untuk dan lain-lain terserah Anda deh). Di KPK ada kotak amal bagi siapa saja yang peduli dan mau menyumbang untuk kawan-kawan kita yang terkena petaka dan lain-lain. Dan kotak amalnya berupa banner.
Awalnya saya mau pasang banner amal KPK yang sudah ada, namun alasannya zona sidebar saya sudah cukup menjuntai ke bawah, kemudian saya mencoba untuk menciptakan banner sendiri namun isinya saya sesuaikan dengan banner yang sudah ada. Akhirnya saya coba menciptakan banner dengan menambahkan imbas toggle supaya dapat dimunculkan dan disembunyikan untuk mengirit kawasan di sidebar.
Ngomong-ngomong KPK ini, apakah Anda sudah mengetahuinya? Ini yakni komunitas yang berisi para blogger dari manapun. Ya... dapat dijadikan sebagai acara kedua sehabis ngeblog... itung-itung buat hiburan kumpul-kumpul dengan para blogger yang pada koplak wkwkwkw.... Jika Anda belum tahu dan ingin bergabung dengan para blogger koplak ini silahkan menuju group di FB pada link di bawah ini.
- Group Komunitas Blogger KPK: https://www.facebook.com/groups/KomunitasBloggerKPK/
Nah bagi Anda anggota KPK yang ingin pasang banner amal KPK ala Kompi Ajaib, silahkan copy kode-kode di bawah ini.
Dengan banner ini Anda dapat memodifikasi tampilannya baik background atau hurufnya supaya sesuai dengan tema blog Anda. Silahkan modif pada arahan CSS-nya. Anda juga dapat lihat live demonya di sidebar blog ini pada sidebar "Anda peduli kawan? Klik di sini"
Karena ini memakai toggle, jadi pertama blog Anda harus memakai jquery library. Silahkan copy jquery di bawah ini dan simpan di atas arahan </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> Jika di blog Anda sudah ada jquery versi berapa pun, silahkan abaikan step di atas.
Juga silahkan simpan arahan di bawah ini untuk mengatur hurufnya dan simpan di bawah arahan <head>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> 1. Kode CSS Untuk banner amal KPK 300x250
.button1 {width: 262px;font-size:18px;font-family: Arial;font-weight:normal;border:1px solid #3866a3;padding:9px 18px;text-decoration:none;background-color:#63b8ee;color:#ffffff;display:inline-block;text-shadow:1px 1px 0px #7cacde;box-shadow:inset 1px 1px 0px 0px #bee2f9;cursor:pointer}
.button1:hover {background-color:#468ccf;text-shadow:none}
#box {display:none}
.box-dalam {background:#009999;text-decoration: none;width:300px;height:250px;margin:0;padding:0;position:relative}
.title1 {font:30px Oswald;color:#fff;margin-left:18%}
.title2 {font:18px Oswald;color:#fff;margin-left:35%}
.isi-box1 {padding-top:15px;text-align:center;font:12px Oswald;color:#fff}
.isi-box2 {margin:15px 0 0 10px;font:12px Oswald;color:#fff;text-align:left}
.tombol-kpk {background:#ddd;border:1px solid #666;border-radius:4px;text-decoration: none;padding:1px 5px;float: right;color:#333;margin-right:7px;margin-top:-2px}
.tombol-kpk a {color:#333;text-decoration:none;font-size:12px}
.tombol-kpk:hover {background:#bbb;text-decoration:none}
2. Kode CSS Untuk banner amal KPK 250x250
.button1 {width: 212px;font-size:14px;font-family:Arial;font-weight:normal;border:1px solid #3866a3;padding:9px 18px;text-decoration:none;background-color:#63b8ee;color:#ffffff;display:inline-block;text-shadow:1px 1px 0px #7cacde;box-shadow:inset 1px 1px 0px 0px #bee2f9;cursor:pointer}
.button1:hover {background-color:#468ccf;text-shadow:none}
#box {display:none}
.box-dalam {background:#009999;text-decoration: none;width:250px;height:250px;margin:0;padding:0;position:relative}
.title1 {font:24px Oswald;color:#fff;margin-left:24%}
.title2 {font:16px Oswald;color:#fff;margin-left:35%;margin-top:-3px}
.isi-box1 {padding-top:10px;text-align:center;font:12px Oswald;color:#fff}
.isi-box2 {margin:10px 0 0 10px;font:12px Oswald;color:#fff;text-align:left}
.tombol-kpk {background:#ddd;border:1px solid #666;border-radius:4px;text-decoration: none;padding:1px 5px;float: right;color:#333;margin-right:7px;margin-top:5px}
.tombol-kpk a {color:#333;text-decoration:none;font-size:12px}
.tombol-kpk:hover {background:#bbb;text-decoration:none}
Kode Javascript
Silahkan simpan di atas arahan </body>
$(function() {
$("#run").click(function () {
$("#box").toggle("slow")
});
}); Kode HTML
Silahkan simpan di sidebar pada gadget HTML/JavaScript
<div class="button1" id="run">Anda peduli kawan? Klik Di sini</div>
<div class="toggler">
<div id="box">
<div class="box-dalam">
<div class="title1">Kami Peduli Kawan</div>
<div class="title2">KPK Blogger Community</div>
<div class="isi-box1">
Komunitas Penggalang Kebaikan (KPK)<br/>
Membuka rekening amal untuk membantu saudara-saudara<br/>
kita yang tertimpa petaka atau bencana.
</div>
<div class="isi-box2">
Bagi yang ingin menunjukkan bantuan, Anda bisa<br/>
menyalurkan melalui rekening di bawah ini:<br/>
- Bank Permata KCP Gajah Mada Pontianak<br/>
- No. Rek. 651.053.5829 a. n. Asep Haryono</div>
<div class="tombol-kpk">
<a href="http://www.123contactform.com/form-517524/REKENING-AMAL-KPK" rel="nofollow" target="_blank" title="Membuat Banner Amal KPK Dengan Fungsi Toggle">Klik Di Sini</a><br />
</div>
</div>
</div>
Jika ingin mencoba memakai fungsi toggle lainnya menyerupai bounce, clip, blind, dan lain-lain silahkan baca lagi postingannya di link di bawah ini. Jangan lupa untuk menambahkan jquery-ui supaya efeknya dapat berjalan.
- Baca juga: Beberapa Jenis Efek Toggle Dengan Jquery
Terima kasih: Mas Nakusan Kstiawan, admin Komunitas Blogger KPK
Sumber https://www.kompiajaib.com/
0 Response to "Membuat Banner Amal Komisi Pemberantasan Korupsi Dengan Fungsi Toggle"
Posting Komentar