Membuat Banner Amal KPK Dengan Fungsi Toggle

Membuat Banner Amal KPK Dengan Fungsi Toggle

Bola Hero Gawai

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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

74 Comments Add Comment

horeeee.. mantap.. komen pertama ahhhh :D

Balas

wah saya dari kemarin nungguin pertamax uda keduluan, huhuhu :(

Balas

Keren Sob, mantap tampilan banner amal kpk nya.

Salam

Balas

bannernya keren, tapi lumayan banyak juga scriptnya ya mas, hmmm :)

Balas

Hehehehe... =D

Balas

Saya pikir lebih ringan dari pada menggunakan gambar mbak :)

Balas

terima kasih mas sudah di share dan menyebar luaskan banner amal kpk peduli.

Balas

Salam juga mas Indra :D

Balas

Sama-sama mas, semoga bisa berguna buat yang lainnya :D

Balas

ish...liat demo dan yang disidebarnya KPK nya jadi keren banget gituh ya....yang lebih kerennya lagi, sidebar nya jadi lebih irit...
padahal yang menjuntai juntai itu sebenernya disenangi banget oleh kang Kstiawan loch...;o)

Balas

ooogituh ya.....saya baru mikir, gimana kalau gambar yang ada itu yang dibuat seperti demonya....ke'nya keren, tapi malah tambah berat ya kang?

Balas

Wkwkwkw... oh... ternyata mas Kstiawan senang yang menjuntai toh wkwkwkwk =D

Balas

Iya mang kalau pun dijadikan background akan tetap berat jika masih berupa gambar.

Balas

Aduh mas ngiler banget saya :(
saya pengen mencobanya tapi koneksi lagi slow :(
kaya siput lagi hamil

Balas

Wah perlu siaga tuh mas... heehehe :D

Balas

mantap dah kang widgetnya, langsung saya pasang.. :-d

Balas

main jquery2an ya sekrg ini wkwkwkwkwk... buat bannernya sudah saya pasang 125x125 di blog hehehe.. :-d

Balas

Wah ini banner KPK Kang... keren!!
Gabung dulu ah...

Balas

Silahkan mas Achmad :-d

Balas

Silahkan kang Heri gaabung dulu biar tambah koplak wkwkwkwkw =D =D

Balas

Boleh juga ni triknya mas Adhy, bisa lebih meringankan loading blog, tapi kira2 ada masalah g mas jika nanti terlalu banyak file javascriptnya

Balas

wah saya sudah pasang yang lama mas.. yang dari mas nakusan.. tapi banner ala kompi ajaib ini bisa juga mas di terapkan jika ruang sedibarnya sudah mulai penuh... sip deh mas.. saya simpan dulu kode kodenya mas.. kapan kapan kalau ruang sedibar blog saya sudah mulai sempit. akan saya pasang banner kpk yang ini hehehe

Balas

Yang bukan anggota juga nggak apa ya mas

Balas

Bagus Nihh Widgetnya izin coba dulu,,

Balas

mantaff kang, lebih baik itu yee daripada gambar :) baru tau sayee

Balas

bukannya gambar yang dismbunyikan juga kang? jadi biar keliatan keren hehe :D

tapi pake css juga gk kalah keren ko :)

Balas

saya blm gabung di group yg di fb tu mas, gimana tu mas apa boleh juga pasang bannernya ??
thanks

Balas
This comment has been removed by the author.

Kelihatanya lebih ringan dan lebih Mengutamakan Seo
jadi banner tersebut sedikit membebani load pada blog yah Kang Adhy
Terima kasih sudah berbagi kebaikan buat semua sahabta blogging :)

Balas

selain ringan, tampilannya juga bisa disesuaikan dengan tema blog ya mas :)

Balas

Abdimah jarang komunitas2an kang ah :D

Balas

ini baru banner keren... ijin copy script buat dipelajari

Balas

Terimakasih mas :) Sudah saya pasang mas :D

Balas

mantab gan
posting setiap hari yah

harus ditiru ni

Balas

boleh dicoba nih mas,cocok untuk memberitahu peringatan2 penting

Balas

mantap deh banner nya..
bisa dicoba nih kayak nya

Balas

Jika memang sudah terlaalu banyak javascript memang akan mempengaruhi loading blog.

Balas

Iya mas, yang ini hanya untuk alternatif aja :)

Balas

Iya tentu mbak, ini kan banner kebaikan :) siapa saja yang ingin memasangnya boleh-boleh aja :)

Balas

Silahkan mas :D

Balas

Iya sis,image atau gambar akan sangat mempengaruhi loading blog :D

Balas

Bisa aja kang, tapi tujuannya ini mencoba tidak menggunakan gambar agar easy loading :)

Balas

Tentu boleh mas :) dengan senang hati :)

Balas

Iya kang selain agar easy loading, juga agar lebih seo friendly :D

Balas

iya kang :D tinggal modif css-nya :)

Balas

Hhhehe hiburan kang... :D

Balas

Silahkan mas :)

Balas

Siip mas keren warnanya... :-d

Balas

Iya bang heheheehe mumpung ide lagi nyamperin :D

Balas

Iya sis bisa dimodif buat keperluan lain :D

Balas

Silahkan mas Rezky :D

Balas

Kang itu toggle-nya ga jalan, coba pasang javascriptnya seperti ini
<script type='text/javascript'>
$(function() {
$("#run").click(function () {
$("#box").toggle("slow")
});
});
</script>

Balas

kirain teh komisi pemberantasan korupsi hehe , ntar join deh sama group ini saya kang :D

Balas

tambah keren bannernya,mudah-mudahan tambah banyak penggemarnya...aamiin
tambah koplak biar saya aja :D

Balas

Hehehehe silahkan kang join dulu :D

Balas

Wkwkwkw... iya deh biar mas Rio aja yang koplaknya =D

Balas

wow keren euy, tapi kodenya banyak juga ya sob...

Balas

Kalau lihat di postingan iya banyak, tapi kalau udah disimpan di edit html jadi kelihatan sedikit ;)

Balas

bagus kang ...
izin mempelajari lebih dalam ...

Balas

ikut-ikutan aja lah... itung-itung buat kebaikan.. hehe..
thanks kang =D

Balas

sekarang sudah bener mas, makasih mas :D

Balas

sudah saya pasang mas,tapi kok bannernya gak muncul
yg ada cuma judul wifgetnya?

Balas

Simpan gadgetnya jangan di slot yang tengah, coba di slot bawahnya (ketiga) karena jika di simpan di situ bentrok sama toggle sidebar :)

Balas

Silahkan kang :)

Balas

sudah mas,tapi sama juga hasilnya
kalo kode togelnya dipasang diatas body malah tombol search gak fungsi,kalo di klik geser ke kri dengan cepat

Balas

Iya nanti saya betulkan untuk template kompi males :)

Balas

Mas untuk pemasangan di template Kompi Males:
1. Ganti kode css #box {display:none} menjadi #box3 {display:none}
2. Kode javascriptnya ganti juga seperti ini
$(function() {
$("#run3").click(function () {
$("#box3").toggle("slow")
});
});

3. Pada kode HTML nya ganti kode id="run" menjadi id="run3" dan id="box" menjadi id="box3"

Balas

kok kesalahan xml ya -_-

Balas

Pasang javascriptnya seperti ini sis
<script type='text/javascript'>
$(function() {
$("#run").click(function () {
$("#box").toggle("slow")
});
});
</script>

Balas

sayangnya, kegiatan amal KPK nya jadi melempem jauh dari awal kemunculannya, dengan segala hormat kayanya kalau akang yang membumingkan lagi, kan blognya banyak yang nyukain danbanyak temen yang setiap hari hadir kesini...saya mah yakin bakalan bergerak kembali kalau akang terjun langsung....itung itung ngais amal deh atuh nyak'....:)

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×