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

Penempatan Kode

Template >> Edit HTML >> Proceed

Penempatan kode berada di :

<b:skin><![CDATA[

Letakkan Kode disini

]]></b:skin>

Atau :

Ketik Ctrl+f dan masukkan kode :

<b:skin><![CDATA[

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