You are here : Home »

Efek gambar dengan panel description menggunkan css3 transitions


jQuery Gambar Efek Lightbox Pada Blog – ini adalah efek gambar saat di klik maka mengeluarkan efek zoom dan disekeliling gambar berwarna hitam



jQuery Efek Zoom Hover Gambar Bergeser – ini adalah efek gambar saat mouse hover gambar mengeluarkan efek zoom yang dan bisa bergeser



jQuery Efek Zoom Hover Gambar Bergeser – ini adalah efek gambar saat mouse hover gambar mengeluarkan efek zoom yang dan bisa bergeser



Jquery Widget Recent Post Automatic Slider – ini adalah widget yang berguna untuk menampilkan artikel terbaru menggunakan mode slide show


Diposting oleh di Tidak ada komentar:
Label: ,

Membuat animasi scroll teks bergerak ke atas



teks scroll 2
COPY KODE INI MASUKAN KE DALAM HTML WIDGET  <marquee behavior="scroll" direction="up" height="200" scrollamount="2" width="auto">TULISAN YANG BERGERAK KE ATAS</marquee>
Selamat malam agan-agan sekalian, kali ini saya akan berbagi trik membuat animasi scroll teks atau gambar berjalan naik keatas dan akan terlihat menarik, teks ini juga bisa dimanfaatkan untuk membuat link daftar isi yang bergerak ke atas dan tentunya akan lebih menarik jika daftar isi tidak bergerak atau statis; baiklah langsung saja ke tutornya;

Langkah2 membuat animasi scroll teks atau gambar naik ke atas;
  1. Login ke dashboard blogger Anda
  2. Setelah itu pilih blog yang ingin anda tambahkan widget ini.
  3. Masuk ke menu Template >> Edit HTML, dan centang expand widget 
  4. Backup dulu template anda sebelum melakukan editing.
  5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini tepat dibawah <body>
Code:
<title>Miniboxlive Teks scroll Naik</title>
<style type="text/css">
#backspace{
position: relative;
width: 200px;
height: 200px;
background-color: white;
overflow: hidden;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}
</style>
<script type="text/javascript">
var delayb4scroll=2000 //delai sebellum berjalan (dalam millidetik)
var kecepatan=2 //kecepatan jalan
var pause=1 //Pause marquee onMousever (0=tidak. 1=ya)?
var copykecepatan=kecepatan
var kecepatanpause=(pause==0)? copykecepatan: 0
var tinggi=''
function scrollberjalan(){
if (parseInt(garis_berjalan.style.top)>(tinggi*(-1)+8))
garis_berjalan.style.top=parseInt(garis_berjalan.style.top)-copykecepatan+"px"
else
garis_berjalan.style.top=parseInt(tinggikotak)+8+"px"
}
function inisialisasi(){
garis_berjalan=document.getElementById("vjalan")
garis_berjalan.style.top=0
tinggikotak=document.getElementById("isi").offsetHeight
tinggi=garis_berjalan.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //Jika Opera atau Netscape 7x
garis_berjalan.style.height=tinggikotak+"px"
garis_berjalan.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollberjalan()",30)', delayb4scroll)
}
if (window.menambahEventListener)
window.menambahEventListener("load", inisialisasi, false)
else if (window.menambahEvent)
window.menambahEvent("onload", inisialisasi)
else if (document.getElementById)
window.onload=inisialisasi
</script>

  • Save template
  • Lalu masuk ke Tataletak >> Add Widget >> Javascript/HTML, masukan kode dibawah ini
<div id="backspace" onMouseover="copykecepatan=kecepatanpause" onMouseout="copykecepatan=kecepatan">
<div id="vjalan" style="position: absolute; width: 98%;">
<h4><a href="http://antoncabon.blogspot.com">Miniboxlive</a></h4>
cara membuat teks/gambar bergerak ke atas
<h4>MySQL</h4>
MySQL adalah merupakan sistem manajemen database yang bersifat relational
<h4>PHP</h4>
PHP sebagai sebuah server-side embedded script language
</div>
</div>
  • lalu Save
Keterangan:
- Silahkan agan gantik teks yang berwarna biru dengan teks atau gambar yang agan suka
- Untuk lebar dan tinggi silahkan agan sesuaikan sendiri, codenya ada di dalam spoiler

Atau jika tetap ga bisa jalan, anda dapat mencoba cara dibawah ini:

  • masuk ke Tataletak >> Add Widget >> Javascript/HTML, masukan kode dibawah ini:
 <marquee behavior="scroll" direction="up" height="200" scrollamount="2" width="auto">TULISAN YANG BERGERAK KE ATAS</marquee>
Ganti : TULISAN YANG BERGERAK KE ATAS dengan teks anda.
Done !!!
DEMO:
TULISAN YANG BERGERAK KE ATAS
Diposting oleh di 1 komentar:
Label: