Pos

Menampilkan postingan dari Agustus, 2013

Menambahkan Scroll To Top di Blogger dengan Animasi

Sudah tahu scroll to top kan? Sebuah tombol untuk menggulung (scroll) layar kembali ke atas. Jadi, ketika Anda sudah sampai di bagian bawah (paling bawah) sebuah halaman web tombol ini akan muncul.

#scrolltoTop { text-align:center; position:fixed; bottom:15px; right:80px; cursor:pointer; display:none; }

Letakkan kode CSS di atas tepat sebelum kode ]]></b:skin>

<script type='text/javascript'> $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#scrolltoTop').fadeIn(); } else { $('#scrolltoTop').fadeOut(); } }); $('#scrolltoTop> img').click(function () { $('body,html').animate({ scrollTop: 0 }, 800).animate({ scrollTop: 25 }, 200).animate({ scrollTop: 0 }, 150).animate({ scrollTop: 10 }, 100).animate({ scrollTop: 0 …

Cara Menambahkan Syntax Highlighter di Blogger

Gambar
Apa itu Syntax Highlighter? SyntaxHighlighting adalah upaya untuk mempresentasikan script/kode tersebut dengan cara dan tampilan yang lebih baik berdasarkan jenis kode, misalnya Javascript, CSS, HTML, Phyton, PHP, Ruby, Perl, dan masih banyak lagi. Ide ini tak lain datang dari si pembuat SyntaxHighlighter, Alex Gorbachev. Para blogger seringkali berbagi script/kode untuk blogger atau siapapun yang membutuhkannya untuk pengembangan web/blog. Mereka yang baru ngeblog biasanya menggunakan blockquote sebagai "wadah" dari script/kode tersebut dan menandai dengan beberapa warna khusus sebagai indikator atau petunjuk.

Script SyntaxHighlighter ada beberapa jenis, yang terbaru sebenarnya lebih canggih lagi. Sebagai permulaan saya akan berbagi versi standard-nya. Kelebihan versi ini adalah memiliki beberapa opsi saat hover alias mouse diarahkan di atas script (muncul di pojok kanan atas) yaitu: View Source (dalam blank page, pop out), Copy to Clipboard, dan Print. Ketiganya sanga…

Bikin Widget Social Slide Down di Sidebar

Gambar
Ayo kita bikin widget social media Facebook dan Google+ yang bisa slide down. Facebook like atau Google+ follower terlihat setelah di klik. Jadi widget-nya akan nampak satu saja setelah klik sedangkan yang lainnya tersembunyi. Agar lebih jelas lihat screenshot di bawah ini.


Bagaimana cara membuatnya?

Kita butuh HTML, JavaScript, dan CSS berikut.
HTML<div id='socialdown'> <ul> <li class='has-sub'><a href='#' title='We Are On Facebook'><span>We Are On Facebook</span></a> <ul> <li> <span class="fb-like-box" data-href="https://www.facebook.com/laluabdrahman" data-width="300" data-height="240" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></span> </li> </ul> </li> <li …

CSS Animasi Loading Blog

Gambar
Efek page loading atau efek "sedang memuat halaman" sering kita temui pada situs-situs game online. Adanya efek tersebut memudahkan pengunjung memperkirakan seberapa lama lagi laman akan terbuka sepenuhnya sehingga ia tahu berapa lama menunggu. Kali ini kita akan menerapkan efek serupa pada blog. Serupa artinya tidak sama. Apanya yang tidak sama? Pada contoh situs game online efek loading benar-benar sesuai dengan waktu muat (load) halaman sedangkan yang akan kita buat tidak demikian melainkan hanya hiasan saja. Meskipun begitu cukup lumayan mempercantik blog.

Tutorial seperti ini sudah sangat banyak, biasanya efek tersebut menggunakan gambar animasi berkestensi *.gif dan JavaScript. Jadi, prinsipnya hanyalah menampilkan gambar saat halaman dimuat dan gambar tersebut adalah animasi. Sedangkan saat muncul dan lenyapnya gambar tersebut diatur menggunakan JavaScript. Sekali lagi, tidak mengukur waktu muat laman yang sesungguhnya. Saya belum menemukan satupun blogger yang mener…