Kamis, 13 Juni 2013

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
Text 3D (Teks 3 Dimensi) Berjalan di Blog

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 Rating: 4.5 Diposkan Oleh: ana sriwahyuni

2 komentar:

  1. Mbak sebelumnya saya ucapkan terima kasih banyak yah,tak disangka request saya terpenuhi di artikel ini.Terima kasih yah Mbak :).

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia