Membuat Banner Amal KPK Pada Template Kompi Males

Banner Amal KPK Pada Template Kompi Males
Pada beberapa waktu yang lalu saya pernah share cara membuat banner amal KPK (Komunitas Penggalang Kebaikan) dengan menambahkan fungsi toggle.

Nah bagi Anda yang menggunakan template Kompi Males, pasti akan sedikit kesulitan untuk menerapkan tutorial membuat banner amal KPK dengan toggle ini karena akan bentrok dengan script toggle untuk menu search dan more menu pada template Kompi Males sehingga bannernya tidak akan berjalan sesuai tutorial.

Untuk itu kini saya share cara membuat banner amal KPK ini pada template Kompi Males. Sebelumnya silahkan simak dulu postingan membuat banner amal KPK (Komunitas Penggalang Kebaikan) dengan menambahkan fungsi toggle ini agar lebih memahaminya.

Nah untuk membuat banner amal KPK ini pada template Kompi Males ini, silahkan simpan kode CSS di bawah ini di atas kode @media screen and (max-width:1024px) {


.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}
#box3 {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}

Kemudian tambahkan kode javascript di bawah ini pada kode javascript toggle yang telah ada.


    $("#run3").click(function () {
    $("#box3").toggle("slow")
});

Tambahkan javascript di atas pada javascript toggle yang sudah ada di Kompi Males seperti di bawah ini.


<script type='text/javascript'>
//<![CDATA[
$(function() {
    $('#run').click(function () {
    $('#box').slideDown()
});
    $('#run2').click(function () {
    $('#box2').slideDown()
});
    $('.close').click(function() {
    $('#box').slideUp()
    $('#box2').slideUp()
});
    $('.close2').click(function() {
    $('#box2').slideUp()
});
 });
//]]>
</script>

Sehingga menjadi seperti di bawah ini


<script type='text/javascript'>
//<![CDATA[
$(function() {
    $('#run').click(function () {
    $('#box').slideDown()
});
    $('#run2').click(function () {
    $('#box2').slideDown()
});
    $('.close').click(function() {
    $('#box').slideUp()
    $('#box2').slideUp()
});
    $('.close2').click(function() {
    $('#box2').slideUp()
});
    $("#run3").click(function () {
    $("#box3").toggle("slow")
});
 });
//]]>
</script>

Setelah itu silahkan save edit HTML template Anda. Kemudian menuju tata letak dan Add a Gadget HTML/Javascript pada slot sidebar yang ketiga atau yang paling bawah di sidebar. Lalu simpan kode HTML di bawah ini pada gadget tersebut.


<div class="button1" id="run3">Anda peduli kawan? Klik Di sini</div>
<div class="toggler">
  <div id="box3">
<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></div>

Silahkan save gadgetnya dan selesai...

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