Kumpulan Trick Blog TErbaru

About

New Trick hayalah blog kecil yang mencoba untuk memberikan dan menyajikan trick dan tips tentang blog
Minggu, 12 Juni 2016

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 sobat 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 sobat
  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 sobat 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 sobat memasang text 3D didalam artikel, sesuaikan lebarnya, begitu juga jika diletakkan di header, footer, atau sidebar sesuaikan lebarnya
    • marquee >> pemberian efek tambahan, jika sobat 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 sobat, silahkan ubah-sesuaikan kode CSS diatas dan jika ada pertanyaan, silahkan tinggalkan komentar sobat untuk artikel ini, Text 3D (Teks 3 Dimensi) Berjalan di Blog




Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@

TOP