Tutorial Nano Yulianto

I am Blogger and Love Design

14 Jurus Menghias Kotak Untuk Menulis Komentar Blog

Photo of Menghias Kotak Komentar



Kali ini Blog Nano Yulianto Akan berbagi cara menghias atau sedikit memberikan efek pada kotak untuk menulis komentar.



Penempatan Kode

Template >> Edit HTML >> Proceed

Gambar Masuk Edit Template

Penempatan kode berada di :

<b:skin><![CDATA[

Letakkan Kode disini

]]></b:skin>


Atau :

Ketik Ctrl+f dan masukkan kode :

<b:skin><![CDATA[

Cari Kode

Letakkan kode di bawahnya <b:skin><![CDATA[


Kasus Lain

Jika ada kode "/*" disamping <b:skin><![CDATA[



Di Enter, turunkan kebawah :

Dan sekarang bisa letakkan kode dibawah <b:skin><![CDATA[



Pilih Gaya dan Kode

Untuk referensi :

Background bergambar

Macam-Macam Warna



Gaya 1

Akan terlihat transparan dan jika disentuh dengan mouse akan kembali normal.


Kode

.blogger-iframe-colorize{
opacity: 0.3;
transition: opacity 2s;
-moz-transition: opacity 2s;
-webkit-transition: opacity 2s;
-o-transition: opacity 2s;
}
.blogger-iframe-colorize:hover{
opacity:1;
}


Gaya 2

Masih sama dengan gaya pertama, yang berbeda ini menggunakan warna background.


Kode

.blogger-iframe-colorize{
background:#555555;
padding:10px 5px 5px 20px;
opacity: 0.3;
transition: opacity 2s;
-moz-transition: opacity 2s;
-webkit-transition: opacity 2s;
-o-transition: opacity 2s;
}
.blogger-iframe-colorize:hover{
opacity:1;
}

Kode berwarna merah adalah kode untuk warna background. Anda bisa ganti sesuai selera.



Gaya 3

Ini membuat kotak komentar berganti warna jika disentuh dengan mouse.


Kode

.blogger-iframe-colorize{
background:#555555;
padding:10px 5px 5px 20px;
transition: background 2s;
-moz-transition: background 2s;
-webkit-transition: background 2s;
-o-transition: background 2s;
}
.blogger-iframe-colorize:hover{
background:#ffff00;
}

Kode warna merah untuk warna background, bisa diganti. Kode warna Atas untuk belum disentuh, dan bawah saat disentuh.



Gaya 4

Ini membuat kotak komentar melengkung dan disentuh kembali normal


Kode

.blogger-iframe-colorize{
background:#555555;
border-radius:200px;
padding:10px 5px 5px 20px;
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
.blogger-iframe-colorize:hover{
border-radius:10px;
}

Kode berwarna merah untuk warna background.



Gaya 5

Ini membuat kotak komentar melengkung dengan unik.


Kode

.blogger-iframe-colorize{
background:#555555;
border-radius:200px 0 200px 0;
padding:10px 5px 5px 20px;
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
.blogger-iframe-colorize:hover{
border-radius:10px;
}

Kode berwarna merah untuk warna background.



Gaya 6

Ini bergaya MDev Template yaitu miring.


Kode

.blogger-iframe-colorize{
background:#242729;
color:#E6E3BB;
padding:10px 5px 5px 20px;
border-radius:7px;
transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
transition: transform 2s;
-moz-transition: transform 2s;
-webkit-transition: transform 2s;
-o-transition: transform 2s;
}
.blogger-iframe-colorize:hover{
transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
}

Kode berwarna merah untuk background, dan berwarna biru untuk warna teks. Untuk pengguna Template MDev langsung pakai saja tanpa merubah, tapi terserah anda.



Gaya 7

Ini terlihat biasa, tapi saat disentuh dia akan berputar (bilang waww sambil koprol).


Kode

.blogger-iframe-colorize{
background:#555555;
padding:10px 5px 5px 20px;
border-radius:7px;
transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
transition: transform 2s;
-moz-transition: transform 2s;
-webkit-transition: transform 2s;
-o-transition: transform 2s;
}
.blogger-iframe-colorize:hover{
transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
-webkit-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
}

Kode berwarna merah untuk background.



Gaya 8

Ini berputar ekstrim


Kode

.blogger-iframe-colorize{
background:#555555;
padding:10px 5px 5px 20px;
border-radius:7px;
transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition: transform 2s;
-moz-transition: transform 2s;
-webkit-transition: transform 2s;
-o-transition: transform 2s;
}
.blogger-iframe-colorize:hover{
transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
-webkit-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
}

Kode berwarna merah untuk background.



Gaya 9

Ini berputar di kombinasikan dengan melengkung.


Kode

.blogger-iframe-colorize{
background:#555555;
padding:10px 5px 5px 20px;
border-radius:200px 15px 200px 15px;
transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
.blogger-iframe-colorize:hover{
border-radius:15px;
transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
-webkit-transform:rotate(-360deg);
-o-transform:rotate(-360deg)
}

Kode berwarna merah untuk background.



Gaya 10

Kombinasi berputar dengan transparan


Kode

.blogger-iframe-colorize{
background:#555555;
padding:10px 5px 5px 20px;
border-radius:10px;
opacity:0.2;
transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
.blogger-iframe-colorize:hover{
opacity:1;
transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
-webkit-transform:rotate(-360deg);
-o-transform:rotate(-360deg)
}

Kode berwarna merah untuk background.



Gaya 11

Ini menarik, susah dijelaskan dengan kata-kata (coba sendiri).


Kode

.blogger-iframe-colorize{
background:#555555;
padding:10px 5px 5px 20px;
border-radius:10px;
opacity:0.2;
transform:none;
-moz-transform:none;
-webkit-transform:none;
-o-transform:none;
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
.blogger-iframe-colorize:hover{
opacity:1;
transform:skew(180deg, 180deg);
-moz-transform:skew(180deg, 180deg);
-webkit-transform:skew(180deg, 180deg);
-o-transform:skew(180deg, 180deg)
}

Kode berwarna merah untuk background.



Gaya 12

Lebih Ekstrim seperti diatas


Kode

.blogger-iframe-colorize{
background:#555555;
padding:10px 5px 5px 20px;
border-radius:10px;
opacity:0.2;
transform:none;
-moz-transform:none;
-webkit-transform:none;
-o-transform:none;
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
.blogger-iframe-colorize:hover{
opacity:1;
transform:skew(360deg, 360deg);
-moz-transform:skew(360deg, 360deg);
-webkit-transform:skew(360deg, 360deg);
-o-transform:skew(360deg, 360deg)
}

Kode berwarna merah untuk background.



Gaya 13

Ini akan membuat terbalik dan disentuh normal kembali.


Kode

.blogger-iframe-colorize{
background:#555555;
padding:10px 5px 5px 20px;
border-radius:10px;
transform:rotateX(180deg);
-moz-transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
-o-transform:rotateX(180deg);
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
.blogger-iframe-colorize:hover{
transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
-o-transform:rotateX(0deg);
}

Kode berwarna merah untuk background.



Gaya 14

Jika disentuh akan sedikit membesar.


Kode

.blogger-iframe-colorize{
background:#555555;
padding:10px 5px 5px 20px;
border-radius:10px;
opacity:0.2;
transform:none;
-moz-transform:none;
-webkit-transform:none;
-o-transform:none;
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
.blogger-iframe-colorize:hover{
opacity:1;
transform:scale(1.1);
-moz-transform:scale(1.1);
-webkit-transform:scale(1.1);
-o-transform:scale(1.1);
}

Kode berwarna merah untuk background.



Home > Blogger > Menghias > 14 Jurus Menghias Kotak Untuk Menulis Komentar Blog

Permalink at 12/08/2012 - Posted by :
Photo of Nano Yulianto

Seorang blog design atau pembuat template di Blogger.

Tentang Saya

10 comments:

  1. 11/12/12
    Putra

    saya suka yang biasa hehe xD

  2. saya juga bro...

  3. banyak banget pilihan code nya kang... bingung mau pilih yang mana.. :D

    thank share nya.

  4. 15/1/13
    Berbagai Info

    Makasih gan infonya, kebetulan saya lg buat blog baru, bisa menambah wawasan saya tentang bloging.

  5. sama-sama bro...

  6. 26/1/13
    tes

    Sangat menambah wawasan saya sob. Thanks

  7. sipp gan

  8. Waduh w masih binggung ni broo

  9. 27/4/13
    Yasmin Alifah

    Yang transparan kayak punya bang Nano, yah?^^

  10. 6/5/13
    Marzota Dwi

    wah nice info nih. thanks banget ya. kunjungi balik ya >> http://thechosenone-z.blogspot.com :D salam kenal

Posting Komentar

Creative Commons License
14 Jurus Menghias Kotak Untuk Menulis Komentar Blog by Nano Yulianto is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at http://nanoyulianto.blogspot.com/2012/12/14-jurus-menghias-komentar-blog.html.
Permissions beyond the scope of this license may be available at http://nanoyulianto.blogspot.com/.