Tutorial Customize Blockquote Style #1
23:43 - 6 comments

cute
Assalamualaikum dan Selamat Malam
Ini entri tutorial untuk customize blockquote style di blog.Boleh cuba ya kalau berkenan ekeke.Kalau dah menjadi tu jemput komen ya :) Tutorial ni better for denim/blogskin/simple template user ya,harap maklum.Please DONT REPOST.Better credit kalau nak guna,kalau taknak pun takpe.Let's go !

  • Denim Template: Search = .post blockquote {
  • Simple template: Search = ]]></b:skin>
  • Blogskin: Search =  </style>
BLOCKQUOTE STYLE LIVE PREVIEW
Demo 1 :

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. 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.
Demo 2 :
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. 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.

DEMO 1
blockquote{
padding:10px;
display:block;
font: 12px calibri;
border: 1px dashed #ddd;
border-left:25px solid #FFE2E2;
box-shadow:5px 5px 5px 2px #FFEAED;
-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;
background:url(http://media.tumblr.com/tumblr_m33wmx1T171qdlkyg.gif);
background-repeat:no-repeat;
background-position:100% 100%;
background-size:80px;
}

blockquote:hover{
border-left:4px dashed #FFE2E2;
}

DEMO 2
blockquote {
display:block;
width: 350px;
margin: 1em 20px;
border-radius:15px;
padding:10px;background:#FFFFFF;
border:2px solid #FFE6E9;
border-top:12px double #FFE6E9;
border-bottom:12px double #FFE6E9;
font:12px calibri;
color:#222222;
background-image:url(http://media.tumblr.com/tumblr_m33wmx1T171qdlkyg.gif);
background-size:80px;
background-repeat:no-repeat;
background-position: -35% 100%;
-webkit-transition: all 1.0s ease-in-out;
-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 {
background-image:url(http://media.tumblr.com/tumblr_m33wmx1T171qdlkyg.gif);
background-repeat:no-repeat;
background-position:99% 100%;
background-size:80px;
border-left:12px double #FFE6E9;
border-right:12px double #FFE6E9;
border-top:0px double #FFE6E9;
border-bottom:0px double #FFE6E9;
-webkit-box-shadow: 0px 0px 8px 1px #FFE2E6;
-goog-ms-box-shadow: 0px 0px 8px 1px #FFE2E6;
box-shadow: 0px 0px 8px 1px #FFE2E6;
}
  • Denim Template: paste bawah .post blockquote {
  • Simple template: paste bawah ]]></b:skin>
  • Blogskin: paste di atas  </style>
  • Preview dan Save :)
  • Request tutorial/freebies ? here {click}
LEAVE YOUR COMMENT HERE, I WOULD APPRECIATE THAT TQ
No spamming.
No harsh words.
Sign in to comment.
Mind your language.
I will reply your comment within 24h.
Mind to click my nuffnang, I will click yours back.

6 comments:

  1. yang ni boleh guna dlm penulisan entri x?ke sebagai widget jer?

    ReplyDelete
    Replies
    1. Ni bukan widget.Blockquote ni memang untuk penulisan entri :)

      Delete
  2. thanks banyak2. yg ni pun menjadik. tapi sy modified ckit. letak dia bawah post.blockquote } teruskn buat tutorial ni.maybe sy akn jdi pengguna setia tutorial awk klau smuanya mnjadik. :) jmput lh tengok2 blog sy,http://eppy5.blogspot.com/ salam perkenalan :)

    ReplyDelete
  3. waaa tenkiu adam, memang nak tukar blackquote yang sedia ada tu. ^_^

    ReplyDelete