Tuesday, July 17, 2012

Cara Membuat Gambar Miring di Blog

Mungkin bagi kita yang pernah menemui atau pada saat browsing menemukan blog yang terdapat image yang berputar atau juga image dengan posisi yang bermacam-macam. Nah kali ini saya akan memberikan tutorial Cara Membuat Gambar Miring dengan style "miring".
Langsung saja langkah pertama pada edit HTML cari kode ]]></b:skin> dengan cara tekan CTRL+F atau tekan F3. Lalu letakkan kode di bawah ini simpan di atas kode ]]></b:skin>. Jangan lupa back up template terlebih dahulu untuk jaga-jaga.
#miring{
  -webkit-transform:rotate(30deg); /* Safari dan Chrome */
  -moz-transform:rotate(30deg);    /* Firefox */
  -ms-transform:rotate(30deg);     /* IE9 */
  -o-transform:rotate(30deg);      /* Opera */
  transform:rotate(30deg);         /* W3C */
}
Jika sudah "simpan template"

Lalu pada cara pemanggilannya yaitu dengan cara meletakkan code berikut :
<div id="miring">
Gambar/Image anda
</div>
Cara ini pun bisa diterapkan pada text atau elemen lainnya. Semoga bermanfaat :D



20 comments:

  1. udah saya praktekin di blog saya sob

    ReplyDelete
  2. blogmu beraaat sob.
    dibuka lwt versi mobile kok gak bs ya..
    tp keren sih..
    thanks ya tipsnya

    ReplyDelete
  3. ehh
    transform:skew juga kan bisa miring

    ReplyDelete
    Replies
    1. transform matrix juga bisa :-d

      Delete
    2. yoi. saya pilih salah satu saja. kan ntar bisa dibuat post lgi lain kali pake cara yg lain hehe :D

      Delete
  4. takut gan, takut orang yang ngeliat juga ikut miring ^:D

    ReplyDelete
  5. wah bisa ya ternyata, ini jamunya toh. tenkyu nie bang.

    ReplyDelete
  6. heheh unik jg tuh gan..., tp klo teks gmn sob..?? :)

    ReplyDelete
    Replies
    1. @cerita anak kost : nih adminnya juga udah miring :p
      @id survival : sip.
      @Rohis : bisa kok. :)

      Delete
  7. wah keren sob, ijin bookmark ya... :D

    ReplyDelete
  8. hihihi unik ya kepala kita jadi ikut miring-miring nih ,,,
    inilah keunggulan css3 yg tadinya mustahil dilakukan tapi dg css3 bisa dibuat sedemikian rupa ,,,

    wilujeng ngeblog

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. Keren gan :-d , sayang ane gak bisa nyoba kayaknya...

    ReplyDelete