Simple Efek Disapear Artikel Blog With jQuery

Simple Efek Disapear Artikel Blog With jQuery – Pada kesempatan kali ini saya ingin berbagi sedikit tips mengenai postingan blog. Dimana saya akan berbagi tips untuk memanipulasi isi postingan blog dengan efek Disapear jQuery.

Blog dan jQuery memang sangat melekat dan selalu saling berkaitan. Saat membicarakan jquery dengan blog memang terasa seperti tidak ada habisnya sampai kemudian hari untuk mengolah blog menggunakan script jQuery untuk memanipulasi komponen di dokumen HTML.

Hal ini disebabkan karena jQuery dirancang sedemikian rupa supaya projek yang kita buat menggunakan Javascript menjadi relatif sangat mudah. Write less do more, menulis kode lebih sedikit tetapi melakukan pekerjaan lebih banyak.

Pada tutorial ini kita akan membahas mengenai efek didalam posting blog yang nantinya pada artikel yang sudah kita tempel dengan efek maka akan dapat dengan mudah untuk memberikan kebebasan kepada visitor sehingga jika pada saat visitor menginginkan artikel tersebut tidak tampil di postingan maka dengan sangat mudahnya visitor dapat langsung menghilangkannya dengan menekan tombol yang sudah tersedia.

Untuk memasang efek ini kedalam blog maka berikut adalah tutorial cara menerapkan Simple Efek Disapear Artikel Blog With jQuery.

Cara Membuat Simple Efek Disapear Artikel Blog With jQuery

1. Masuk ke blogger
2. Buat postingan baru, dan paste kode berikut didalam mode HTML
3. Sesuaikan isi, jika sudah Publish postingan

<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery.gallery.js"></script>
<script type="text/javascript">
$(document).ready(function(){                         
$(".pane .delete").click(function(){
$(this).parents(".pane").animate({ opacity: 'hide' }, "slow");
});
});
</script>
<style type="text/css">
.pane { color: #000; background: #e9fbe9; padding: 10px 20px 10px;
position: relative; border-top: solid 2px #52e052; }
.pane .delete { position: absolute; top: 10px;
right: 10px; cursor: pointer; }
</style>

<div class="pane">
<h3>JUDUL 1</h3>
<p>Silahkan ganti dengan teks yang di inginkan</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRdHkKlgsHgiMMETztvDHLtX0eGMlNdI8DHzf6ZIbcOP6_TGEao8N1i0uqxaPbwiuKFgUK0HPN_mOMpqYuMHG82WQ2jogDCtJ15KEONfWbrb5JmhyOXLvlqyjFkM9WhttwJ00gc4bz-Ep6/s16/btn-delete.gif" alt="delete" class="delete" />
</div>
<div class="pane">
<h3>JUDUL 2</h3>
<p>Silahkan ganti dengan teks yang di inginkan</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRdHkKlgsHgiMMETztvDHLtX0eGMlNdI8DHzf6ZIbcOP6_TGEao8N1i0uqxaPbwiuKFgUK0HPN_mOMpqYuMHG82WQ2jogDCtJ15KEONfWbrb5JmhyOXLvlqyjFkM9WhttwJ00gc4bz-Ep6/s16/btn-delete.gif" alt="delete" class="delete" />
</div>
<div class="pane">
<h3>JUDUL 3</h3>
<p>Silahkan ganti dengan teks yang di inginkan</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRdHkKlgsHgiMMETztvDHLtX0eGMlNdI8DHzf6ZIbcOP6_TGEao8N1i0uqxaPbwiuKFgUK0HPN_mOMpqYuMHG82WQ2jogDCtJ15KEONfWbrb5JmhyOXLvlqyjFkM9WhttwJ00gc4bz-Ep6/s16/btn-delete.gif" alt="delete" class="delete" />
</div> 

Untuk demonya, silahkan dipraktekkan saja Simple Efek Disapear Artikel Blog With jQuery.

live demo

Semoga hasilnya nanti lebih memuaskan, :)
Semoga bermanfaat!