Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Membuat Efek Teks Berjalan - Marquee Effect dg css3 Animation

Selama ini untuk membuat teks berjalan kita selalu menggunakan javascript atau efek marquee, kali ini kita akan membuat dengan cara berbeda. CSS3 animation yang kini telah didukung secara merata oleh hampir semua browser akan kita manfaatkan untuk membuat sebuah efek teks berjalan yang cukup menarik. Kode css juga telah dilengkapi dengan css3 transition untuk membentuk hover efek yang lebih menarik ketika cursor diarahkan diatasnya. Agar efek teks berjalan ini juga bisa dimanfaatkan sebagai teks link, maka disertakan juga sebuah fungsi yang bertujuan untuk membuat teks berhenti berjalan saat cursor berada di atas teks. Anda bisa menggunakan kode css ini dalam blog dengan menyimpan melalui "Dasboard - Page Elements - Add a Gadget - HTML/Javascript" atau di atas kode ]]></b:skin> yang dapat dilakukan melalui box Edit Template "Dasboard - Design/Rancangan - Edit HTML". Jika kode css disimpan di atas kode ]]></b:skin> silahkan hilangkan tag pembuka & penutup style-nya (<style type="text/css"> dan </style>).
Kode CSS efek teks berjalan - Marquee Effect
<style type="text/css">
.boxwadahteks{
     padding:5px 10px;
     width:400px; /* rubah ukuran lebar bos jika diperlukan */
     background:#aaa;
     margin:10px auto; /* rubah ukuran margin jika diperlukan */
     border:2px solid #555;
     overflow:hidden;
}
.GRwadahteks{
     float:left;
}
@keyframes GRanima_teks{
     from{left:0%;}
     to{left:-100%;}
}
@-o-keyframes GRanima_teks{
     from{left:0%;}
     to{left:-100%;}
}
@-ms-keyframes GRanima_teks{
     from{left:0%;}
     to{left:-100%;}
}
@-moz-keyframes GRanima_teks{
     from{left:0%;}
     to{left:-100%;}
}
@-webkit-keyframes GRanima_teks{
     from{left:0%;}
     to{left:-100%;}
}
.GRwadahteks .GRmlaku{
     animation:GRanima_teks 20s infinite linear; /* semakin besar waktunya maka semakin lambat */
     -o-animation:GRanima_teks 20s infinite linear; /* ganti semua dengan nilai yg sama (angka 20s) */
     -ms-animation:GRanima_teks 20s infinite linear; /* o untuk opera, ms = IE, moz = Mozilla, webkit = Safari, Chrome */
     -moz-animation:GRanima_teks 20s infinite linear;
     -webkit-animation:GRanima_teks 20s infinite linear;
     font-size:24px; /* ukran teks */
     font-family:arial; /* jenis font */
     margin-left:100px;   
     font-weight:normal; /* bisa ganti normal dengan bold untuk teks tebal  */
     text-shadow:1px 1px 1px #000;
     color:red; /* rubah warna teks jika dikehendaki */
     white-space:nowrap;
     display:inline-block;
     position:relative;
}
.GRwadahteks .GRmlaku span{
     color:magenta; /* warna teks ke dua - ganti warna jika diperlukan */
     font-style:italic; /* style huruf miring */
     font-family:Serif; /* jenis font */
}
.GRwadahteks .GRmlaku a{
     color:lime;
     text-decoration:none;
}
.GRwadahteks .GRmlaku,.GRwadahteks .GRmlaku span,.GRwadahteks .GRmlaku a{
     transition:color 1s;
     -o-transition:color 1s;
     -ms-transition:color 1s;
     -moz-transition:color 1s;
     -webkit-transition:color 1s;
}
.GRwadahteks:hover .GRmlaku,.GRwadahteks:hover .GRmlaku span{
      color:#fff; /* warna hover teks - saat disorot cursor */
}
.GRwadahteks:hover .GRmlaku a{
      color:blue; /* warna hover link - saat disorot cursor */
}
.GRwadahteks:hover .GRmlaku{
     animation-play-state:paused;
     -o-animation-play-state:paused;
     -ms-animation-play-state:paused;
     -moz-animation-play-state:paused;
     -webkit-animation-play-state:paused;
}
</style>
Gunakan xHTML seperti berikut untuk menuliskan teks yang akan di tampilkan.
xHTML efek teks berjalan - Marquee Effect:
<div class="boxwadahteks">
<div class="GRwadahteks">
<div class="GRmlaku">Silahkan tuliskan di sini teks yang ingin anda tampilkan sebagai <a href="http://gubhugreyot.blogspot.com" target="_blank" title="Klik untuk dapat lebih banyak tutorial!">teks berjalan</a>. <span>Pada bagian ini teks akan berbentuk miring dengan warna dan jenis font berbeda.</span></div>
</div>
</div>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:







Posting » SENEN Legi, Juli, 02, 2012



» Happy Blogging - gubhugreyot «

18 komentar:

  1. gan template agan keren dehh

    ane pengen nyoba di blog ke2 ane yg ini

    dimana ya gan downloadnya?

    BalasHapus
    Balasan
    1. @Nabil Fawwaz : Template ini hasil modifikasi dari template minima. Tak ada link downloadnya. Jika ingin tahu kodenya silahkan klik kanan & gunakan "open source"!

      Hapus
    2. Salam persahabatan ....

      Kunjungan pertama nih ...
      saya mau tanya om ..
      pada sidebar sebelah kiri -> Tips Trick Blog
      saat saya dekatkan mouse ke judul, muncul box penjelasan ,,,
      itu gimana cara membuatnya yah ???

      http://campur-aduk.cyber4rt.com

      Hapus
    3. @Muhammad Risdiyanto... : Silahkan tulis "tooltip" pada search box (di kolom kanan atas), kemudian klik "cari". Temukan ZigZagLap tooltip dan silahkan nikmati panduan cara membuatnya!

      Hapus
  2. salam sukses gan, bagi2 motivasi .,
    Hargailah hari kemarin,mimpikanlah hari esok, tetapi hiduplah untuk hari ini.,
    ditunggu kunjungan baliknya gan .,.

    BalasHapus
  3. [ASK]
    tanya gan gimana caranya membuat kotak komentar seperti agan soalnya aku tertarik dengan kotak komentar agan

    BalasHapus
  4. Balasan
    1. Ngombe Obat...ojo lagi mamper sob....

      Hapus
  5. wah Mantab Mantab artikel nya Gan... perlu Belajar ane..

    BalasHapus
  6. Permisi ,
    Numpang Koin yah, :)

    hehehe

    saya mau bertanya kepada admin,
    Kalo System Soft Marquee ini di set untuk recent post bisa gak..?

    BalasHapus
  7. Walaupun belum sempat mencoba semua tutorial, 1000 thumb deh buat blog ini.

    BalasHapus
  8. Walaupun belum sempat mencoba semua tutorial, 1000 thumb deh buat blog ini.

    BalasHapus

 
GR | Edited by | gubhug reyot