Tuesday, 8 October 2013

4 blockquote style 2


Assalamualaikum and hi people..tadi masa tengah ubah style blockquote saya, muncullah beberapa style blockquote yang baru...
If you don't know what is blockquote...This is the blockquote...A cute box in a post to insert quote or code...Let's customize your blockquote style...
But, firstly you should know how to use blockquote...so let me teach you... :-)

Dashboard --> Make a new post

Highlight the text that you want to put in the blockquote


Then, click on the punctuation mark like below...
Only click once to avoid doubled blockquote...


How to customized blockquote style? follow below instuction...

1.   Search your bockquote code...
      .post blockquote {   or  blockquote { or anything relate to blockquote
2.   Then, delete the old blockquote code and replace with the new code that I have give
3.   If there is no bockquote code in your template, just add the code that I give before / above
      </style>  for blogskin  and   ]]></b:skin> for template designer


Style number one...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar lobortis luctus. Donec posuere sollicitudin diam, non semper metus vulputate nec. Curabitur lobortis porttitor convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

blockquote {
margin: 1em 20px;
padding:10px;
box-shadow:inset 2px 2px 0px #FFEBCF,inset -2px -2px 0px #FFE3CF;
background-image:url(http://i.imgur.com/2EShx.png);
border: 2px solid #EEEEEE;
color: #000000;
font:12px century gothic;
-moz-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
}
blockquote:hover {
background-image:url(http://i.imgur.com/tDtge.png);
box-shadow:inset 500px 200px 0px transparent,inset -500px -200px 0px transparent;
}

Style number two...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar lobortis luctus. Donec posuere sollicitudin diam, non semper metus vulputate nec. Curabitur lobortis porttitor convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

blockquote {
margin: 1em 20px;
padding:10px;
box-shadow:inset 3px 3px 10px #EEEEEE, inset -3px -3px 10px #EEEEEE;
background:#FFFFFF;
border: 2px dotted #777777;
color:#333333;
font:11px Kristen ITC;
-moz-transition: all 1.0s ease-in-out;
-o-transition: all 1.0s ease-in-out;
-ms-transition: all 1.0s ease-in-out;
transition: all 1.0s ease-in-out;
}
blockquote:hover {
box-shadow:inset 380px 0px 0px #bbbbbb,inset -380px 0px 0px #bbbbbb;
color:#FFFFFF;
}

Style number three...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar lobortis luctus. Donec posuere sollicitudin diam, non semper metus vulputate nec. Curabitur lobortis porttitor convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

blockquote {
margin: 1em 20px;
padding:10px;
box-shadow:5px 5px 5px 2px #FFEAED;
background-color:#FFFFFF;
background-image:url(http://media.tumblr.com/b653ddb8f0a95af1991164b79404277f/tumblr_inline_mo53fpDDzH1qz4rgp.gif);
background-repeat:no-repeat;
background-position: 100% 99%;
background-size:80px;
border: 2px dotted #FFE6EA;
color:#111111;
font:11px Century gothic;
-moz-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
}
blockquote:hover {
background-position: -100% 99%;
background-image:url(http://media.tumblr.com/b653ddb8f0a95af1991164b79404277f/tumblr_inline_mo53fpDDzH1qz4rgp.gif);
background-repeat:no-repeat;
}

Style number 4...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar lobortis luctus. Donec posuere sollicitudin diam, non semper metus vulputate nec. Curabitur lobortis porttitor convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

blockquote {
margin: 1em 20px;
font:13px candara; color:#333333;
padding:10px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH1u9GqEF2QH3hr3eNaA29M6lfw1WY4WY-pd6XBjF1194Y57uMlj-_fYPSzEOjK2ZXSeE0KoY_mfB0VVliAjvh1K3XGtIJzKMS8-Gu_mtYKCSbdXV3Ja38TqmBUQdfJP5bpK-WVw-J4o2I/s1600/tumblr_lxwynw0Pdg1r9g6hvo5_250.png);
border-left: 10px solid #FFE1E4;
border-right: 10px solid #FFE1E4;
border-top: 2px solid #FFE1E4;
border-bottom: 2px solid #FFE1E4;
color:#555555;
border-radius: 10px;
-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;}

blockquote:hover {
background:url(http://i.imgur.com/tDtge.png);
border-right: 10px solid #EFE6FF;
border-left: 10px solid #EFE6FF;
border-top: 2px solid #FFEDEF;
border-bottom: 2px solid #FFEDEF;
border-radius:30px;
-webkit-box-shadow: 0px 0px 6px 4px #FFFAD8;
-moz-box-shadow:    0px 0px 6px 4px #FFFAD8;
box-shadow:         0px 0px 6px 4px #FFFAD8;
}

The notes :
Fuchsia text : Border and background color
Red text : Font color
Orange text : Background image URL
Blue text : Box shadow color

 PREVIEW AND SAVE 
DO NOT REPOST !! DON'T COPY THIS TUTORIAL!!
JANGAN POST SEMULA !!

Penat taw buat tutorial nie...kalau jadi komen lah...kalau tak faham tanyalah...Ok itu sahaja... Assalamualaikum...^^,
at

12 comments: