Amal membantu Membagikan

Showing posts with label efek. Show all posts

Wednesday, December 18, 2013

Blogroll Ganteng Dengan Efek Animasi

Dari judulnya, mungkin temen-temen sudah bisa menebak postingan apa kali ini???

Kali ini, saya ingin share mengenai cara membuat blogroll yang animatif, sehingga tampilan nya menjadi lebih menarik untuk dipandang...

DEMO :

Tutorial ini saya buat berdasarkan tutorial yang saya pelajari dari Mas Taufik, dan saya share kembali kepada temen-temen yang lain yang merasa tertarik dengan model blogroll seperti ini.

1. Login ke blogger.

2. Pilih Template - Edit HTML.

~~3. Centang Expand Template Widget.~~

4. Letakkan kode berikut diatas kode </head> :

var $ul = $(#blog-roll),
    roll = function() {
        $ul.find(li).first().slideUp(slow, function() {
            $(this).appendTo($(this).parent()).fadeIn();
        });
    }, anim = setInterval(roll, 3000);

// Pause on hover...
$ul.hover(function() {
    clearInterval(anim);
}, function() {
    anim = setInterval(roll, 3000);
});

5. Simpan Template.

6. Letakkan link-link yang akan ditampilkan secara animasi pada tempat yang temen-temen inginkan seperti contoh dibawah :

<ul id="blog-roll">
    <li><a href="#">Alya Zahra 1</a></li>
    <li><a href="#">Alya Zahra 2</a></li>
    <li><a href="#">Alya Zahra 3</a></li>
    <li><a href="#">Alya Zahra 4</a></li>
    <li><a href="#">Alya Zahra 5</a></li>
    <li><a href="#">Alya Zahra 6</a></li>
    <li><a href="#">Alya Zahra 7</a></li>
    <li><a href="#">Alya Zahra 8</a></li>
    <li><a href="#">Alya Zahra 9</a></li>
    <li><a href="#">Alya Zahra 10</a></li>
</ul>

7. Enjoy.

*Kode yang digaris bawah tidak perlu ditaruh di template apabila telah terdapat kode serupa

Bagaimana sob???
Semoga postingan ini bermanfaat....

Wednesday, October 30, 2013

Membuat Image Efek Hover saat di sentuh CSS Jquery

Sekarang Agan dapat menambahkan Gambar efek hover pada gambar di blogger sangat mudah.

Trik ini memungkinkan gambar Anda ke beberapa transparansi (Tidak semua Gambar saja gambar ditentukan). ketika mouse Agan pada gambar itu akan berubah menjadi tidak transparan akan membuat efek hover.

Watch Live Demo

Caranya, pertama" login Blogger.. Pergi ke Rancangan trus pilih Edit HTML. dan Cari code ]]></b:skin>

Copy CSS di bawah dan taruh sebelum tag ]]></b:skin>

a.thumbopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
a.thumbopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}

dan SAVE TEMPLATE

Sekarang untuk mengaktifkan efek nya
-Apabila code gambar normal akan seperti ini

<a href="http:/blogspot.com/" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyhPIJl_Yyh1SPuivJpx5rYazXhemk_UsxJ7FjgImL1Cf_KG7VvkwUDmoYg84yjC_ZLV5l6xX9fzJmqPDe_NP4p3webBGVII-H_L-HDdKYqsk2zAISJcqIxeaUyaelplMjGSsSRE-gcfzH/s1600/2+tooth+peace+sign+paundra+rethouching.jpg" /></a>

-Untuk mengaktifkannya, kita menambahkan code class="thumbopacity" akan seperti ini

<a href="http:/blogspot.com/" class="thumbopacity" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyhPIJl_Yyh1SPuivJpx5rYazXhemk_UsxJ7FjgImL1Cf_KG7VvkwUDmoYg84yjC_ZLV5l6xX9fzJmqPDe_NP4p3webBGVII-H_L-HDdKYqsk2zAISJcqIxeaUyaelplMjGSsSRE-gcfzH/s1600/2+tooth+peace+sign+paundra+rethouching.jpg" /></a>

Jangan lupa untuk menambahkan code tersebut, saat kamu akan menerbitkan artikel kamu harus masuk ke mode HTML. Semoga sedikit tips diatas dapat menambah ilmu kawan-kawan blogger semua ^^