Thursday, March 22, 2012

Membuat Kotak Pengumuman Dengan Jquery di Blogger


Kira-kira sudah sehari saya tidak memperbaharui blog ini tetapi rasanya seperti setahun hehehe. Pada kesempatan yang sangat bagus ini saya akan membagikan salah satu trik blog yang saya dapatkan dari mybloggertricks.com yakni membuat kotak pengumuman yang apabila kita klik kotak tersebut maka akan menampilkan pesan yang kita inginkan. Lihat cara membuatnya di bawah ini :

1. Masuk ke Blogger.com

2. Klik Rancangan --> Edit HTML dan jangan lupa untuk mem-backup template yang kamu punya terlebih dahulu.

3. Cari kode <body> dan kamu salin kode di bawah ini :

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.flip&quot;).click(function(){
    $(&quot;.panel&quot;).slideToggle(&quot;slow&quot;);
  });
});
</script>
 
<style type='text/css'>

div.panel
{
vertical-align: baseline;
letter-spacing: 1px;
padding:10px 10px 10px 20px;
background:#252636;
border:solid 1px #252636;
color:#fff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
width:100%;
margin:0px;
}

p.flip
{
FONT-FAMILY: Georgia, 'Times New Roman', arial, serif;
font-size:14px;
color:#fff;
padding:4px;
text-align:center;
background:#252636;
border:solid 1px #252636;
margin-bottom:1px;
width:100%;
}

div.panel a, p.flip a {
text-decoration:underline;
color:#fff;
}

div.panel a:hover, p.flip a:hover {
text-decoration:none;
color:#fff;
}

div.panel
{
height:auto;
display:none;
}

div.containerpanel {
z-index:9999;
margin-top:-55px;
margin-left:-20px;
padding:0px;
position:fixed;
width:100%;
}
</style>

 


<div class='containerpanel'>
  <p class='flip'>KAMU GANTI KODE INI SESUKA KAMU &#9660;</p>

<div class='panel'>
<p>TAMBAHKAN PEMBERITAHUAN YANG KAMU INGINKAN DISINI, BISA BERUPA LINK JUGA</p>

</div>

</div>

Note : kamu bisa mengganti kode yang berwarna biru sesuka kamu, sedangkan kode yang berwarna oranye adalah kode ascii, jika kamu ingin mendapatkan banyak kode ascii bisa kamu ke http://www.network-science.de/ascii/

4. Simpan Template.

Jika ada pertanyaan, kritik atau saran tentang postingan ini kamu bisa berikan komentar kamu di dalam kotak komentar yah

Postingan Terkait:

4 comments:

  1. ini dia om yang ane cari2...
    thanks om infonya ya,,
    terus berjuang..
    :D

    Cerita Tentang Cinta

    ReplyDelete
  2. saya baru nyari pemberitahuan, tapi agan di halaman pertama kebetulan gan, makasih lagi gan..??? hehhe

    ReplyDelete
  3. Wah gan gimana kalau Blog aku jadi rusak dan tidak jalan...? cara balikinnya susah Gan. cara yang lebih mudah misal lewat widget apa gak bisa???

    ReplyDelete
  4. Nah, ini yg saya cari...

    thanks gan...

    ReplyDelete

Komentarmu menunjukan kecerdasanmu, Kalau komentar cuma buat cari link buat apa ? :)

Twitter Delicious Facebook Digg Stumbleupon Favorites More