Pertanyaan yang harus saya jawab adalah bagaimana cara membuat notifikasi (info) seperti contact di blog ini, maka saya hanya bisa menjawab jikalau notifikasi tersebut saya buat hanya menggunakan jquery animated. itupun dengan metode yang sangat sederhana sekali tanpa efek-efek yang mengagumkan seperti layaknya pada blog DTE :].
Terkait: => Membuat Notifikasi sederhana
Lihat Pembuatan sederhananya:
<div class="info-panel" id="info-panel">
.......isi pesan...
</div>
yang diperlukan hanyalah sedikit penambahan Jquery.
$(".info-panel").animate({
width: 535,height:500
}, 1200, "easeOutExpo")
Maka yang akan terjadi pada class .info-panel
tersebut akan dikenai efek animasi width:535px
dan height:500px
. Kita juga membuat efek pada #main-wrapper
atau apapun yang kita inginkan sebelum memulai animasi pada .info-panel
tersebut.
Bisa dilihat ketika anda mengklik menu contact diatas maka kotak pencarian akan melayang keatas dan pada label akan terjadi efek melipat (slide). Penulisannya yah sama saja, perhatikan contoh untuk kotak pencarian.
Pada saat keadaan normal:
.search-form{
top:65px;
}
Dan pada saat menu contact diklik maka jquery akan memfungsikan atau merubah nilai top menjadi -100 sehingga kotak search formnya akan tersembunyi diatas.
$(".show-about").click(function () {
$(".search-form").animate({
top:-100
}, 1200, "easeOutExpo")
});
1200
adalah durasi, bisa diubah nilainya sesuai keinginan.
easeOutExpo
adalah efek yang akan digunakan, lihat semua efek-efeknya ditutorial Jquery animated back to top sebelumnya DISINI.
Jika anda sudah memahami maksud saya diatas. Maka saatnya kita mengikuti turioal ini.
Notifikasi Sederhana Menggunakan JQuery Animated
Pasang kode ini diatas tag
</body>
atau pasang pada formulir
HTML/javascript
ditataletak juga boleh.
<div class="info-panel" id="info-panel">
<div class='inner-panel'>
<a href="#close" id="close-about" class="close-button pull-right" title="Tutup" data-icon=""> Close</a>
<p>Nama Saya <strong>aab</strong>. ini hanya sebuah demo untuk tutorial sederhana</p>
<br>
<p>Tadinya Blog ini saya buat hanya untuk bahan percobaan saja, percobaan mengenai tampilan dan desain, serta optimasi SEO yang sangat saya perhatikan, namun lambat laun saya lupa dengan semua itu dan lebih memfokuskan terhadap Desain saja.
Warning! Template ini saya desain sendiri dan bukan kode sumber terbuka dan saya berharap anda tidak menyalin atau menjiplaknya begitu saja. Mungkin hanya untuk di buat pembelajaran saja.
Dan apabila Isi atupun konten dalam blog ini melanggar hak saudara maupun rekan-rekan, Silahkan Klik Delik Aduan.
</p>
<br>
<p>Selamat menjalankan ibadah puasa.</p>
</div>
</div>
Seperti biasanya, semuanya tidak akan indah jikalau tanpa CSS, jadi letakkan CSS berikut diatas </style>
.
.info-panel .close-button {
position:relative;
display:inline;
margin-top:-10px;
width:100%
}
.close-button {
cursor:pointer;
}
#info-panel {
float:left;
display:none;
padding:20px;
line-height:1.8em;
max-height:620px;
right:-3px;
position:absolute;
background-color:#333;
overflow:hidden;
z-index:1;
}
.inner-panel{
display:none;
}
.info-panel {
float:left;
left:2px;
color:#ddd;
border:1px solid #383636;
-webkit-box-shadow:0 1px 3px black;
-moz-box-shadow:0 1px 3px black;
box-shadow:0 1px 3px black;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:3px
}
Dan untuk JQuerynya pasang saja diatas tag </body>
.
<script src='http://aab-general.googlecode.com/svn/trunk/jquery-ui.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(".show-about").click(function () {
//kode lain yang ingin anda jalankan sebelum info-panel ini teranimasi
$(".info-panel").show().animate({
width: 535,height:500
}, 1200, "easeOutExpo")
$(".inner-panel").fadeIn(1000)
});
$(".close-button").click(function () {
//kode lain yang harus ditutup saat menjalankan fungsi lainnya.
$(".inner-panel").fadeOut(1000)
$(".info-panel").delay(1000).animate({
width: 0
}, 1200, "easeOutExpo",function() {
$(".info-panel").hide()
})
});
//]]>
</script>
Saya tidak bisa menyediakan tutorialnya langsung jadi, dikarenakan ID ataupun Class pada tiap template pasti berbeda-beda, jadi saya hanya bisa mengarahkannya saja, yang terpenting adalah pahami terlebih dahulu setelah itu praktekkan lalu kembangkan.
Bertanya saja jika tidak mengerti, saya akan coba membantunya.
Dimohon kerjasamanya untuk tidak menyertakan link aktif dalam komentar. Lihat penjelasan mengenai tata cara berkomentar Disini