Gudang Tutorial Blog

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

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.

Semoga tutorialnya bermanfaat.

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^)ノ

 Yang biasa kita jumpai adalah border yang sisinya sama warna.
 Bagaimana cara membuat border blockquote berwarna warni?
 Simak deh tutorialnya...

• Login blog
• Rancangan dan edit html >expand widget template 
• cari kode .post blockquote {
• 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!

Save template dan selesai.
 Demikian tutorial cara membuat border blockquote warna warni.
 semoga infonya bermanfaat. ✿◕ ‿ ◕✿