Simple Efek Disapear Artikel Blog With jQuery

Simple Efek Disapear Artikel Blog With jQuery – blog dengan 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. Sebagai contoh agar lebih detail dan jelasnya bisa dilihat pada demo. Untuk memasang efek ini kedalam blog maka berikut adalah tutorial cara menerapkan Simple Efek Disapear Artikel Blog With jQuery.

1. Login ke akun blogger.
2. Lalu copy kode dibawah ini.

<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/AVvXsEgcVduWNP8TZtUFpF4mOm5RqCnw0rFgrgJWRyxfQiWR_NlvWAg8uHruCAJT2QqDFvCPUz-2xoTofRe5wKr8DBJx3a3AlSWS-9Aoa93xVRrV22_kqykyAmPxjjL9HkLlk5J4mQ0ePhTSf_uF/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/AVvXsEgcVduWNP8TZtUFpF4mOm5RqCnw0rFgrgJWRyxfQiWR_NlvWAg8uHruCAJT2QqDFvCPUz-2xoTofRe5wKr8DBJx3a3AlSWS-9Aoa93xVRrV22_kqykyAmPxjjL9HkLlk5J4mQ0ePhTSf_uF/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/AVvXsEgcVduWNP8TZtUFpF4mOm5RqCnw0rFgrgJWRyxfQiWR_NlvWAg8uHruCAJT2QqDFvCPUz-2xoTofRe5wKr8DBJx3a3AlSWS-9Aoa93xVRrV22_kqykyAmPxjjL9HkLlk5J4mQ0ePhTSf_uF/s16/btn-delete.gif" alt="delete" class="delete" />
</div>

3. Selanjutnya paste kode tersebut kedalam area posting mode HTML, lalu klik Publikasikan.

DEMO:

JUDUL 1

Silahkan ganti dengan teks yang di inginkan

JUDUL 2

Silahkan ganti dengan teks yang di inginkan

JUDUL 3

Silahkan ganti dengan teks yang di inginkan