Blockquote Neon

Blockquote dapat  di modifikasi bermacam2. Pada postingan yang akan saya berikan kali ini yaitu blockquote efek neon.

Cara:

1. Login blog
2. Template > Edit html
3. Letakkan kode css di dalam/bawah kode .post blockquote {

color:#ccc;background:transparent;box-shadow:#fff 0px 0px 4px, #fff 0px 0px 6px, #fff 0px 0px 10px, #fff 0px 0px 20px;

sehingga menjadi kode nya seperti ini,

.post blockquote {
color:#ccc;background:transparent;box-shadow:#fff 0px 0px 4px, #fff 0px 0px 6px, #fff 0px 0px 10px, #fff 0px 0px 20px;
} 

4.  selanjutnya, letakkan kode css di dalam/bawah kode  .post blockquote:hover {

color:#ccc;
background:transparent;box-shadow:rgb(5, 213, 255) 0px 0px 4px, rgb(5, 213, 255) 0px 0px 6px, rgb(5, 213, 255) 0px 0px 10px, rgb(5, 213, 255) 0px 0px 20px;

sehingga menjadi kode nya seperti ini,

 .post blockquote:hover {
color:#ccc;
background:transparent;box-shadow:rgb(5, 213, 255) 0px 0px 4px, rgb(5, 213, 255) 0px 0px 6px, rgb(5, 213, 255) 0px 0px 10px, rgb(5, 213, 255) 0px 0px 20px;
}

5. save template

Efek blockquote Bergoyang

Blockquote adalah kutipan dari artikel yang dianggap penting atau memiliki arti khusus.
Tanda yang digunakan untuk menandai suatu tulisan yang penting, sehingga tampak berbeda dari tulisan yang lainnya.

CARA:
1. login blog
2. template > edit html
3. cari .post blockquote {
4. gantikan dengan kode

.post blockquote {
-webkit-user-select:text;
-moz-user-select:text;
-webkit-animation-name: shake;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
background:#424242;
padding:15px;
border-top:3px solid #3c98e8;
border-bottom:5px double #366dbb;
border-right:1px dashed #3659a8;
border-left:1px dashed #3880d2;
color:#D1D1D1;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}

5. cari post blockquote:hover atau blockquote a{ , di setiap template dapat berbeda kodenya. dan gantikan dengan kode css berikut:

blockquote:hover{
-webkit-animation-name: none;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
color:#fff;}
@-moz-keyframes shake /* Firefox*/
{
{ -ms-transform:: translate(-1px, -2px) rotate(-1deg); }
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
@-ms-keyframes shake /* IE9*/
{
10% { -ms-transform:: translate(-1px, -2px) rotate(-1deg); }
20% { -ms-transform: translate(-3px, 0px) rotate(1deg); }
30% { -ms-transform: translate(0px, 2px) rotate(0deg); }
40% { -ms-transform: translate(1px, -1px) rotate(1deg); }
50% { -ms-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -ms-transform: translate(-3px, 1px) rotate(0deg); }
70% { -ms-transform: translate(2px, 1px) rotate(-1deg); }
80% { -ms-transform: translate(-1px, -1px) rotate(1deg); }
90% { -ms-transform: translate(2px, 2px) rotate(0deg); }
100% { -ms-transform: translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes shake /* Safari and Chrome */
{
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
} 

6. Simpan template dan selesai.

Demikian cara  membuat efek blockquote bergoyang pada blog.

Semoga tutorialnya bermanfaat.

Efek blockquote Border Nudging

LIVE DEMO

Cara membuat efek blockquote border nudging

1. Login blog
2. Template dan edit html
3. cari kode .post blockquote dan tambahkan kode css berikut di bawahnya

background:url(http://gazo.emoji7.jp/img/051fi_724385/%E8%B2%B0%E3%81%86%E6%99%82%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E5%BF%98%E3%82%8C%E3%81%9A%E3%81%AB%21%21_m.gif);

background-repeat:no-repeat;
background-position:100% 95%;
font-family: 'Englebert';
padding:10px;
border-left:20px solid #C3E5FB;
border-right:2px dashed #C3E5FB;
border-top:2px dashed #C3E5FB;
border-bottom:2px dashed #C3E5FB;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
color:#555;
}

4. hover blockquote di ganti kode css berikut

blockquote:hover{
background: none;
border-left:2px dashed #C3E5FB;
border-right:20px solid #C3E5FB;
color:#555;
}

5. save template
Ubah warna border atau background sesuai keinginan. Selamat mencoba! ヽ(^o^)ノ

Cara membuat border blockquote berwarna warni

Untuk memodifikasi blockquote agar lebih keren banyak sekali tipsnya,

salah satunya adalah dengan menambahkan border di sisi-sisinya.

Yang biasa kita jumpai adalah border yang sisinya sama warna.

Bagaimana cara membuat border blockquote berwarna warni?

Simak deh tutorialnya...

1. Login blog

2. Rancangan dan edit html >expand widget template

3. cari kode .post blockquote {

4. tambahkan kode border menjadi seperti dibawah ini

.post blockquote {

COLOR: #BFBFBF;

font-family:'Short Stack',Arial, Georgia,Trebuchet MS,  Sans-Serif;

border-left: #7ADED4 dotted 2px;

border-top:#BA5ED1 dotted 2px;

border-bottom:#FFA95E dotted 2px;

border-right:#C9FF5E dotted 2px;

background:#121211;

}

keterangan:

warna kode merah adalah warna teks blockquote

warna kode kuning adalah warna border blockquote

warna kode hijau adalah warna background blockquote

warna kode biru adalah style border, sobat dapat menggantinya dengan style yang lain.

misalnya: dashed, double, groove, inset, outset, ridge, solid atu inherit

Ganti warna sesuai keinginan sobat!

5. Save template dan selesai.

Demikian tutorial cara membuat border blockquote warna warni.

semoga infonya bermanfaat. ✿◕ ‿ ◕✿