Membuat Banner Amal Komisi Pemberantasan Korupsi Pada Template Kompi Males
Pada beberapa waktu yang kemudian aku pernah share cara menciptakan banner amal KPK (Komunitas Penggalang Kebaikan) dengan menambahkan fungsi toggle.
Nah bagi Anda yang memakai template Kompi Males, niscaya akan sedikit kesulitan untuk menerapkan tutorial menciptakan banner amal KPK dengan toggle ini alasannya ialah akan bentrok dengan script toggle untuk hidangan search dan more hidangan pada template Kompi Males sehingga bannernya tidak akan berjalan sesuai tutorial.
Untuk itu sekarang aku share cara menciptakan banner amal KPK ini pada template Kompi Males. Sebelumnya silahkan simak dulu postingan menciptakan banner amal KPK (Komunitas Penggalang Kebaikan) dengan menambahkan fungsi toggle ini semoga lebih memahaminya.
- Baca juga: Membuat Banner Amal KPK Dengan Fungsi Toggle
Nah untuk menciptakan banner amal KPK ini pada template Kompi Males ini, silahkan simpan arahan 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 arahan javascript di bawah ini pada arahan javascript toggle yang telah ada.
$("#run3").click(function () {
$("#box3").toggle("slow")
});
Tambahkan javascript di atas pada javascript toggle yang sudah ada di Kompi Males menyerupai 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 menyerupai 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 arahan 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 tragedi alam atau bencana.
</div>
<div class="isi-box2">
Bagi yang ingin memperlihatkan 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 Pada Template Kompi Males">Klik Di Sini</a><br />
</div>
</div>
</div></div>
Silahkan save gadgetnya dan selesai...
0 Response to "Membuat Banner Amal Komisi Pemberantasan Korupsi Pada Template Kompi Males"
Posting Komentar