Membuat Banner Amal KPK Dengan Fungsi Toggle

Banner Amal KPK Dengan Fungsi Toggle
Banyak sebutan untuk KPK yang satu ini namun yang jelas bukan lembaga 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 musibah dan lain-lain. Dan kotak amalnya berupa banner.

Awalnya saya mau pasang banner amal KPK yang sudah ada, namun karena zona sidebar saya sudah cukup menjuntai ke bawah, kemudian saya mencoba untuk membuat banner sendiri namun isinya saya sesuaikan dengan banner yang sudah ada. Akhirnya saya coba membuat banner dengan menambahkan efek toggle agar bisa dimunculkan dan disembunyikan untuk mengirit tempat di sidebar.

Ngomong-ngomong KPK ini, apakah Anda sudah mengetahuinya? Ini adalah komunitas yang berisi para blogger dari manapun. Ya... bisa dijadikan sebagai kegiatan kedua setelah 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 bisa memodifikasi tampilannya baik background atau hurufnya agar sesuai dengan tema blog Anda. Silahkan modif pada kode CSS-nya. Anda juga bisa lihat live demonya di sidebar blog ini pada sidebar "Anda peduli kawan? Klik di sini"

Karena ini menggunakan toggle, jadi pertama blog Anda harus menggunakan jquery library. Silahkan copy jquery di bawah ini dan simpan di atas kode </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 kode di bawah ini untuk mengatur hurufnya dan simpan di bawah kode <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 kode </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 musibah atau bencana.
</div>
<div class="isi-box2">
Bagi yang ingin memberikan 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="Klik Di Sini">Klik Di Sini</a><br />
</div>
        </div>
</div>

Jika ingin mencoba menggunakan fungsi toggle lainnya seperti bounce, clip, blind, dan lain-lain silahkan baca lagi postingannya di link di bawah ini. Jangan lupa untuk menambahkan jquery-ui agar efeknya bisa berjalan.

Terima kasih: Mas Nakusan Kstiawan, admin Komunitas Blogger KPK

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments