Membuat garis horizontal sepanjang teks dengan CSS3 transition

Tag strike berfungsi untuk membuat sebuah coretan tepat ditengah dalam arah horizontal (garis horizontal sepanjang teks) yang penggunaannya sebenarnya juga amat tergantung pada "apa yang berkembang di otak". Beberapa blogger sudah menggunakan tag ini untuk berbagai "kepentingan" (terutama berkaitan dengan tutorial) tetapi beberapa blogger yang lain menggunakannya dengan "tendensi" berbeda. Dari sisi positif, tag ini bisa dimanfaatkan untuk memberikan beberapa contoh tentang "kesalahan/hal yang tak boleh dilakukan" (misalnya dalam tutorial), namun pada sisi yang lain juga bisa dipergunakan untuk beberapa hal hal berbau negatif (menipu/menjebak). Adakah anda juga pernah atau mungkin tertarik menggunakan tag strike ini? Jika mungkin tertarik, silahkan anda coba menggunakannya dan rencanakan mau dibuat untuk apakah tag strike ini?. Yah ...., silahkan pergunakan sesuai selera anda . Mo buat tutorial contoh tentang teks yang salah, boleh! Mo buat menjebak orang juga boleh!

Membuat strike di Blogger Baru (New Blogger Templates), bisa dilakukan di posting mode tulis/compose hanya dengan mem-blok teks yang akan di buat dalam bentuk tercoret, kemudian klik di fitur strike. Apabila sampeyan menggunakan posting mode Edit HTML, maka harus menambahkan tag strike di kanan kiri tag yang akan di coret. Cara seperti ini berlaku juga untuk yang menggunakan template lama (Template Tata Letak/Layout Templates).

Contoh penggunaan strike dalam posting mode Edit HTML sbb:

<strike>Teks yang akan di coret! <strike>

Hasil penulisan dengan kode di atas adalah seperti ini:

Teks yang akan di coret!

Model yang sederhana seperti ini akan kita rubah dalam bentuk yang berbeda dengan melibatkan background-image, opacity (efek transparansi) dan CSS3 transition. Tentu saja hasilnya akan berbeda jauh jika dibandingkan dengan strike yang apa adanya. Bentuk akhir hasil perubahan melalui kode CSS terhadap tag strike kira-kira akan seperti di bawah ini:

Kode CSS :


strike { background: red url(http://i964.photobucket.com/albums/ae124/gubhugreyot/bgjaring.png); opacity: 0.6; /* original code by: */ font-weight: bold; cursor: help; /* gubhugreyot.blogspot.com */ filter: alpha(opacity=60); -o-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -webkit-transition: all 1s ease-in; } strike:hover { background: transparent; opacity: 1.0; filter: alpha(opacity=100); }

 Cara Menggunakan Kode strike

1. Login : Login kee Blogger.
   • Tuliskan "User Name (Nama Pengguna)" atau bisa juga gunakan "Email Address".
   • Tuliskan "Password (Sandi)".
   • KLIK "Login".
2. Sesaat setelah login maka akan terlihat halaman "Dashboard (Dasbor)". KLIK link "Design (Rancangan)"..
3. Design/Rancangan : Cari dan klik link Edit HTML.
4. Cari kode ]]></b:skin>. Letakkan dan simpan semua kode CSS tepat di atasnya.
5. KLIK SAVE Templates/Simpan Template.
6. KLIK link Posting.
7. KLIK Entri Baru/New Entry.
8. Buat kalimat dalam posting, kemudian blok (dg mouse/cursor) teks yang akan di buat dalam bentuk tercoret. Lanjutkan dengan klik fitur strike. Untuk mode Edit HTML, letakkan teks yang akan dibuat dalam bentuk tercoret diantara tag strike. 

<strike>Tuliskan teks di sini!</strike>

Buka hasil posting di halaman blog untuk melihat hasilnya. Semoga bermanfa'at..


Sumber: gubhug reyot