 |
| Pesan footer kondisi normal |
Sekarang coba cursor agan taruh situ:
 |
| Pesan footer saat di-hover, ada animasi fade-in nya ^^ |
Cara Membuat Footer Keren di Setiap Post Blogspot
1. Buka blogger ente, pilih menu Template > Edit HTML > Proceed.
2. beri centang pada Expand Widget Template.
3. Gunakan CTRL+F untuk mencari code berikut:
<div class='post-body entry-content'
catatan: nanti ada 2, pilih yang pertama, karena yang ke-2 untuk mobile.4. Copy code berikut:
<b:if cond='data:blog.pageType == "item"'>
<script>
$(function(){
$(".megahnandaFooter").mouseenter(function(){
$(this).animate({'opacity':'0.9'},500);
});
$(".megahnandaFooter").mouseleave(function(){
$(this).animate({'opacity':'0.3'},500);
});
});
</script>
<div class='megahnandaFooter' style='border: 1px solid lightgray; border-radius: 3px 3px 3px 3px; margin-top: 17px; padding: 6px; box-shadow: 0px 5px 12px gray; font-size: 12px; opacity: 0.3;'>
isi pesanterakir agan footer di sini...
</div>
</b:if>
<script>
$(function(){
$(".megahnandaFooter").mouseenter(function(){
$(this).animate({'opacity':'0.9'},500);
});
$(".megahnandaFooter").mouseleave(function(){
$(this).animate({'opacity':'0.3'},500);
});
});
</script>
<div class='megahnandaFooter' style='border: 1px solid lightgray; border-radius: 3px 3px 3px 3px; margin-top: 17px; padding: 6px; box-shadow: 0px 5px 12px gray; font-size: 12px; opacity: 0.3;'>
isi pesan
</div>
</b:if>
Pastekan setelah (berarti di bawah nya) code berikut:
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
Catatan:
1. isi pesan footer agan di warna hijau (lihat code di atas tadi).
2. sesuaikan style sesuai selera agan di warna coklat.
3. untuk code <script> di sini ane buatkan dengan code jQuery. agan juga bisa belajar jquery di blog ini. ^^
4. karena ini menggunakan jQuery, agan harus pasang jQuery library dulu, jika belum. Cara pemasangan ikuti langkah berikut ini:
Cara memasang jQuery library
1. tetap di tampilan EDIT HTML tadi.2. cari code berikut:
<head>
3. pastekan code berikut di bawahnya:<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
Mudah bukan Membuat Footer Keren di Setiap Post Blogspot?? ^^ sampai di sini dulu ya.. jangan lupa klik +1 nya.. semoga bermanfaat, terima kasih, wassalam..
