Membuat Tulisan Terbalik di Blog Menggunakan Kode CSS3

Sekarang, membuat teks terbalik tak harus dengan cara memanfaatkan jasa situs tertentu yang melayani pembuatan teks dalam bentuk terbalik. CSS3 bisa menjadi solusi mudah dan sebanyak apapun teks yang ingin dibuat dalam bentuk terbalik dapat diciptakan secara instant. Hanya perlu beberapa kode CSS dan sobat bisa membuat nya dengan waktu yang singkat

Teks dalam bentuk terbalik dapat dibuat dalam bentuk permanen (selalu dalam keadaan terbalik sekalipun tersentuh cursor) dan teks terbalik yang akan berubah menjadi normal kembali ketika tersentuh cursor. Dua kondisi yang berbeda ini hanya dipengaruhi oleh penambahan efek hover. Hover effect memungkinkan kita untuk membuat teks dalam berbagai sudut kemiringan. Sudut 0 dan 360 membuat teks ke posisi normal, sedang nilai yang lain akan memberi sudut kemiringan tertentu sesuai angka yang digunakan. Angka/nilai transform dihitung dalam satuan derajat dengan nilai 0 s/360
.

Silahkan baca dengan hati-hati agar tidak keliru:

• Dilarang membaca sambil njengking atau menungging!
• Dilarang mengumpat sebelum dan sesudah membaca.
• Selama membaca dilarang keras mengambil nafas panjang atau bahkan mengambil tempe dan pisang goreng.
• Peraturan ini berlaku untuk semua umur, baik umur tua nafsu muda ataupun umur uzur nafsu tak terukur.

Apakah sobat ingin membuat nya di blog sobat ?? silahkan ikuti langkah-langkah nya
1. Login ke Blogger
2. Pilih menu Tamplate --> Edit HTML --> centang Expand Widget Tamplates
3. Cari kode ]]></b:skin> dengan menggunakan Ctrl+F
4. Copy dan pastekan kode CSS di bawah ini diatas kode tersebut

.teksterbalik_A{
       font-weight:bold;
       transform:rotate(180deg);
      -o-transform:rotate(180deg);    
      -moz-transform:rotate(180deg);
      -webkit-transform:rotate(180deg);
      -khtml-transform:rotate(180deg);     
}

5. Klik Save

6. lalu pilih menu Layout --> add a gadget --> masukkan kode di bawah ini

<div class="teksterbalik_A">
Tuliskan Teks yang akan ditampilkan terbalik di sini!
</div>

Keterangan:
- Ganti tulisan yang bewarna merah diatas dengan tulisan terserah sobat yang ingin ditampilkan


Apabila sobat ingin menampilkan tulisan terbalik dengan Effect  Hover ikuti langkah di bawah ini

1. Login ke Blogger
2. Pilih menu Tamplate --> Edit HTML --> centang Expand Widget Tamplates
3. Cari kode ]]></b:skin> dengan menggunakan Ctrl+F
4. Copy dan pastekan kode CSS di bawah ini diatas kode tersebut

.teksterbalik{
       text-align:justify;
       padding:10px 0px;
}    
.teksterbalik span{
       display:block;
       font-weight:bold;
       transform:rotate(180deg);
      -o-transform:rotate(180deg);    
      -moz-transform:rotate(180deg);
      -webkit-transform:rotate(180deg);
      -khtml-transform:rotate(180deg);
       tansition:transform ease-in 1s;   
      -o-tansition:transform ease-in 1s;
      -moz-transition:-moz-transform ease-in 1s;
      -webkit-transition:-webkit-transform ease-in 1s; 
      -khtml-transition:-khtml-transform ease-in 1s;     
} 
.teksterbalik:hover span{
       transform:rotate(0deg);
      -o-transform:rotate(0deg);    
      -moz-transform:rotate(0deg);
      -webkit-transform:rotate(0deg);
      -khtml-transform:rotate(180deg);   
      -khtml-transform:rotate(0deg);
} 

5. Klik Save

6. lalu pilih menu Layout --> add a gadget --> masukkan kode di bawah ini

<div class="teksterbalik">
<span>Tuliskan Teks yang akan ditampilkan dalam posisi terbalik di sini!</span>
</div>

Keterangan:
- Ganti tulisan yang bewarna merah diatas dengan tulisan terserah sobat yang ingin ditampilkan


Apabila sobat juga ingin menampilkan teks terbalik di artikel postingan blog sobat maka ikuti langkah di bawah ini

1. Login ke Blogger
2. Klik Create New Post (yang gambar pensil dengan background wana oren)
3. Klik HTML
4. Masukkan kode dibawah ini

<div style="transform:rotate(180deg);-o-transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-khtml-transform:rotate(180deg);padding:15px 0px;">
Tuliskan teks yang akan ditampilkan terbalik di sini!
</div>

Keterangan:
- Ganti tulisan yang bewarna merah diatas dengan tulisan terserah sobat yang ingin ditampilkan

Luangkan waktu sobat untuk memberi komentar