Text 3D (Teks 3 Dimensi) Berjalan di Blog

Text 3D (Teks 3 Dimensi) Berjalan di Blog - Pada artikel sebelumnya saya telah membuat teks 3 dimensi lainnya yang bisa anda baca di membuat text 3D menggunakan CSS3. Dan pada artikel ini saya juga membahas tentang text 3D atau teks 3 dimensi

contoh dalam gambar

Perbedaan pada artikel sebelumnya dengan yang sekarang ini, pada artikel teks 3 dimensi ini, teks yang ditampilkan bisa berjalan dengan menggunakan fungsi marquee dengan efek stopped saat disorot dengan kursor. Selain memiliki efek berjalan, artikel yang ditampilkan juga berwarna-warni jika disorot dengan kursor seperti contoh demo berikut ini

Real DEMO

Panduan Template Blog by Ana Sriwahyuni

Dan berikut cara membuat Text 3D (Teks 3 Dimensi) Berjalan di Blog seperti contoh diatas

1. Buka akun Blogger anda
2. Pilih menu Template >> Edit HTML
3. Cari kode ]]></b:skin> dan salin kode berikut diatasnya
   

   
   text3Ds {font-size:35px;font-family:bebas neue;color:#fff;padding:10px;text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);}
   text3Ds span {-moz-transition: color 1s;-webkit-transition: color 1s;-o-transition: color 1s;transition: color 1s;}
   text3Ds:hover .char1 {-moz-transition: color 0.2s;-webkit-transition: color 0.2s;-o-transition: color 0.2s;transition: color 0.2s;color: red;-webkit-transform: scale(0.9);}
   text3Ds:hover .char2 {-moz-transition: color 0.2s 0.1s;-webkit-transition: color 0.2s 0.1s;-o-transition: color 0.2s 0.1s;transition: color 0.2s 0.1s;color: orange;}
   text3Ds:hover .char3 {-moz-transition: color 0.2s 0.2s;-webkit-transition: color 0.2s 0.2s;-o-transition: color 0.2s 0.2s;transition: color 0.2s 0.2s;color: yellow;}
   text3Ds:hover .char4 {-moz-transition: color 0.2s 0.3s;-webkit-transition: color 0.2s 0.3s;-o-transition: color 0.2s 0.3s;transition: color 0.2s 0.3s;color: green;}
   text3Ds:hover .char5 {-moz-transition: color 0.2s 0.4s;-webkit-transition: color 0.2s 0.4s;-o-transition: color 0.2s 0.4s;transition: color 0.2s 0.4s;color: blue;}
   text3Ds:hover .char6 {-moz-transition: color 0.2s 0.5s;-webkit-transition: color 0.2s 0.5s;-o-transition: color 0.2s 0.5s;transition: color 0.2s 0.5s;color: indigo;}

4. Salin kode HTML berikut dimanapun anda suka
   

   
   <div style="width: 700px;">
   <text3ds>
   <marquee align="center" direction="right" onmouseout="this.start() " onmouseover="this.stop()" scrollamount="2" height="100">
   <span class="char1">Panduan</span> <span class="char2">Template</span> <span class="char3">Blog</span> <span class="char4">by</span> <span class="char5">Ana</span> <span class="char6">Sriwahyuni</span>
   </marquee>
   </text3ds>
   </div>
   

   Tapi jangan terlalu suka-suka dalam menyalin kode HTML teks 3 dimensi diatas, perhatikan keterangan berikut ini terlebih dahulu
   
   • width: 700px; >> Lebar teks 3 dimensi, jika anda memasang text 3D didalam artikel, sesuaikan lebarnya, begitu juga jika diletakkan di header, footer, atau sidebar sesuaikan lebarnya
   • marquee >> pemberian efek tambahan, jika anda menginginkan efek marquee yang lain, silahkan gunakan efek-efek yang lainnya disini

Add: Artikel ini merupakan request dari mas Abed Saragih pemilik http://infosaja.com

Okey, itulah cara membuat Text 3D (Teks 3 Dimensi) Berjalan di Blog. Untuk mengganti efek-efek dengankeinginan anda, silahkan ubah-sesuaikan kode CSS diatas dan jika ada pertanyaan, silahkan tinggalkan komentar anda untuk artikel ini, Text 3D (Teks 3 Dimensi) Berjalan di Blog

Text 3D (Teks 3 Dimensi) Berjalan di Blog 2013-06-13T11:54:00+08:00 Rating: 4.5 Diposkan Oleh: Ana Sriwahyuni