Membuat Banner Amal KPK Pada Template Kompi Males

Membuat Banner Amal KPK Pada Template Kompi Males

Bola Hero Gawai

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...

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

27 Comments Add Comment

sudah jadi mas,cuma gak muncul di homepage.
kalo kita buka salah satu posting baru muncul.
gimana biar muncul di home page,biar sama seperti yg ada di demo

Balas

sudah saya test mas bannernya keren sekali saya suka desainnya ..

Balas

kalo dipikir pikir jika memasang banner kpk sebagai pajangan deh, soalnya pasti tidak ada yang donasi
dan saya mau tanya kalo begini cara memvalidkan gimana

Element name o:p cannot be represented as XML 1.0.
The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead

Balas

Hapus kode ini mas
.sidebar3-wrapper{display:none}

Balas

Terima kasih mas :)

Balas

Agar valid HTML5 silahkan hapus kode yang menggunakan elemen name.
Untuk image, silahkan hapus kode border:0 setiap upload gambar. Untuk itu tambahkan kode CSS di edit HTML img{border:0}

Balas

untuk pemasangan di template droidplusnya kang ismet sama ya kang...???

Balas

Untuk DroidPlus sama mas, tapi pakai dari tutorial yang pertamanya.

Balas

gagal saya pasang kang akhirnya saya gabung dengan sosial slide down on side bar cuma belum maksimal hasilnya kang n kayaknya nanti kalau saya cek kemungkinan besar tidak valid html 5

Balas

Kang,. Request dong cara optimasi meta taq dan cara meletakan meta taq alexa dan google verifikasiuntuk template kompi males..please..!!
Hehe

Balas

Betul banget kang :-d terjadi benturan script, apalagi saya banyak menggunakan togglenya kang Adhy ^-^
Kalau boleh tahu script (var starttab=0; var endtab=2; var sidebarname="sidebar";) fungsinya apa kang ?...karena di halaman statis kayaknya masih terjadi crash antara script emotikon yang saya modifikasi di blog aqiqohnetdotblogspotdotcom, dengan script yang saya belum tahu.....

Balas

yang bentrok di id javascriptnya ya mas adhy hehehe, kok kepikir kesana sih mas, apakah ada sahabat yang nanya? :-d

Balas

kalau saya menggunakan meta tag ini, berani coba? hehehe

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<link href='https://plus.google.com/ID GOOGLE PLUS' rel='author'/>
</b:if>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>404: Maaf halaman yang ada cari tidak ada | NAMA BLOG ANDA</title>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.Query'>
<title>Pencarian keyword untuk ~ <data:blog.searchQuery/> ~ NAMA BLOG ANDA</title>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<title>Arsip Artikel Bulan <data:blog.pageName/> | NAMA BLOG ANDA</title>
<meta expr:content='&quot;Arsip Artikel Bulan &quot; + data:blog.pageName + &quot; selengkapnya silahkan kunjungi di NAMA BLOG ANDA&quot;' name='description'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<title><data:blog.pageName/> | NAMA BLOG ANDA</title>
<meta expr:content='data:blog.pageName + &quot;. Silahkan baca artikel &quot; + data:blog.pageName + &quot; selengkapnya di NAMA BLOG ANDA&quot;' name='description'/>
<b:else/>
<b:if cond='data:blog.searchLabel'>
<title>Pencarian pada Label ~ <data:blog.pageName/> ~ NAMA BLOG ANDA</title>
<!-- Meta Description Halaman Label -->
<meta expr:content='&quot;Pencarian pada kategori ::&quot; + data:blog.pageName + &quot;:: selengkapnya silahkan kunjungi di NAMA BLOG ANDA&quot;' name='description'/>
<b:else/>
<title><data:blog.pageTitle/> - TITLE BLOG ANDA</title>
<meta expr:content='data:blog.pageTitle + &quot; | TITLE BLOG ANDA&quot;' name='description'/>
</b:if>
</b:if>
</b:if>
<meta content='keywords1, keywords2, keywords3, keywords4, keywords5' name='keywords'/>
<b:else/>
<title><data:blog.pageName/> - NAMA BLOG ANDA</title>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot;. Silahkan baca artikel &quot; + data:blog.pageName + &quot; selengkapnya di NAMA BLOG ANDA&quot;' name='description'/>
</b:if>
<meta expr:content='data:blog.pageName + &quot;, keywords1, keywords2, keywords3, keywords4, keywords5' dst&quot;' name='keywords'/>
</b:if>
<meta content='ID ALEXA ANDA' name='alexaVerifyID'/>
<meta content='ID GOOGLE VERIFICATION ANDA' name='google-site-verification'/>

Balas

Tuh mas :) Sista Leony cukup lengkap meta-nya :)

Balas

Oh iya kode itu dari kemarin saya lupa menghapusnya. Silahkan hapus aja mas :) tidak akan pengaruh apa-apa. Itu bekas coba-coba tab widget sidebar tapi lupa di hapus. :)

Balas

Kemaren ada sahabat yang nanyain sis :) jadi sekalian bikin postingannya :)

Balas

Template Kompi males jadinya lebih komplit yah Kang Adhy
Dengan banner amal tersebut sangat bermanfaat Kang buat semua :-bd

Balas

Great Trick ADHY :-bd

Excellent work friend adhy =)

Thanks you!!

Balas

Kode nya paanjang jugaaa yaa mas...

Balas

Makasih sista LEONY atas bantuannya..

Balas

Betul kang siapa tahu ada yang mau donasi buat amal :)

Balas

Silahkan mas :)

Balas

Sebenarnya sedikit mas kalau udah dimasukin ke edit html :)

Balas

mas Adhy, mau nanya. di blog saya kok nggak bisa dibuka pada homepage

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!

×
×
×