Membuat Blockquote Dengan Image Gradient

Contoh Blockquote

Itulah yang namanya blockquote. Tutorial yang baru saja saya pelajari dari blog { limitpost.blogspot.com }. Kayanya gak usah panjang lebar lagi ya mungkin semuanya pada tahu apa itu blockquote.

Step 1
- Masuk ke blog anda.
- Masuk ke Template -> Edit HTML -> Lanjutkan -> Expand template widget.
- Lalu klik ctrl + f. Cari kode ini   ]]></b:skin>

Step 2
- masukan kode ini tepat diatas kode   ]]></b:skin   :

blockquote {
    background: #f9f9f9;
    border-left: 10px solid #ccc;border-right: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: .5em 10px;
    quotes: "201C""201D""2018""2019";
}

blockquote:before {
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    line-height: .1em;
    margin-right: .25em;
    vertical-align: -.4em;
}

blockquote {
    font-family: "Arial","Verdana",Serif;
    font-size: 16px;
    padding: 50px 5px;
    position: relative;
    text-align: center;
}

blockquote p {
    margin: 0 0 20px;
    display: inline;
}

blockquote:before {
    top: 25px;
}

blockquote:after {
    bottom: 25px;
}

blockquote:before, blockquote:after {
background-image: -webkit-linear-gradient(left,#eee,#eee 35%,#f3a01e 35%,#f3a01e 45%,#d05d2a 45%,#d05d2a 55%,#9dc425 55%,#9dc425 65%,#eee 65%,#eee);
    background-image: -moz-linear-gradient(left,#eee,#eee 35%,#f3a01e 35%,#f3a01e 45%,#d05d2a 45%,#d05d2a 55%,#9dc425 55%,#9dc425 65%,#eee 65%,#eee);
    background-image: -ms-linear-gradient(left,#eee,#eee 35%,#f3a01e 35%,#f3a01e 45%,#d05d2a 45%,#d05d2a 55%,#9dc425 55%,#9dc425 65%,#eee 65%,#eee);
    background-image: -o-linear-gradient(left,#eee,#eee 35%,#f3a01e 35%,#f3a01e 45%,#d05d2a 45%,#d05d2a 55%,#9dc425 55%,#9dc425 65%,#eee 65%,#eee);
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
}

Step terakhir
- Save template anda.




Sumber Artikel: limitpost.blogspot.com