Tutorial Simple and Neat Blockquote

Assalammualaikum.

Photo by Jess Bailey on Unsplash

Banyak entry tertunggak. Tapi harini Mellya luangkan masa untuk buat tutorial blockquote yang ringkas atas permintaan seseorang. haha Disebabkan tak pasti adakah tutorial ni bakal membantu untuk dapatkan blockquote yang diinginkan, jadi Mellya tak nak lah mention nama dia disini. hehehe The person yang request, you know who you are. This time Mellya share tutorial blockquote yang lebih neat and nampak professional sikit. kahkahkah..

First skali cari coding ni

.post blockquote {

Tapi kalau tak de, korang boleh tambah coding  ni dekat bawah

/* Content @ sebelum/atas </head>

1.

.post blockquote {
@import url(http://fonts.googleapis.com/css?family=Muli);
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHtW9kIqq3xP_Fcp-d9jDdwh58ZJdrcxVU57UdkjE5anhoHc03357LFbkzpMDDdtTVIEmdq6F-zaa3x-cckH6bmUKX6PzlFyUMxMK6aKf_2_BoUvT5NVYX3Tk95Me36l0dyoii8FGY8sx_/h120/blockquote.png) no-repeat;
border: dashed 2px #ccc;
color: #333;
font-family: muli;
margin: 30px;
padding: 20px 30px 30px 40px;
}  

2.

.post blockquote{
 color:#ffffff;
 background:#95dfed;
text-align: left;
padding: 5px;
border-left: 15px double #ffffff;}

Untuk tambah effect hover,

.post blockquote:hover {
background:url(https://s-media-cache-ak0.pinimg.com/originals/c7/85/df/c785dfe7bc7895955b64239231628701.jpg);
color:#fff;
color:#666;
padding: 5px;
}

Tukarkan yang berBOLD tu kepada warna/url background yang korang nak.

4.

.post blockquote {
    text-align:left;
    font: 16px/24px Arial, sans-serif;
    color: #555;
    padding: 0.5em 10px;
    margin: 1.5em 10px;
    }
    .post blockquote:before {
    content: open-quote;
    font-size: 24pt;
    text-align: center;
    line-height: 42px;
    color: #fff;
    background: #ddd;
    float: left;
    position: relative;
    border-radius: 25px;
    margin-right: 0.5em;
    vertical-align: -0.4em;
    display: block;
     height: 25px;
     width: 25px;
    }
    .post blockquote:after {
    content: close-quote;
    font-size: 24pt;
    text-align: center;
    line-height: 42px;
    color: #fff;
    background: #ddd;
    float: right;
    position: relative;
    border-radius: 25px;
    margin-right: 1em;
    vertical-align: -0.5em;
    display: block;
    height: 25px;
    width: 25px;
    }
    .post blockquote:hover:after, blockquote:hover:before {
    background-color: #555;
    transition: all 350ms;
    -o-transition: all 350ms;
    -moz-transition: all 350ms;
    -webkit-transition: all 350ms;
    }

Simple je kan?

Blockquote ni ialah tempat or field dalam blog post. Nak contoh ni ha dekat atas ni ada code blockquote kan? Yang kotak pink keliling code tu lah dinamakan blockquote. Cara guna waktu edit blog korang boleh select ayat yang nak diletakkan dalam box blockquote tu dan click (Quote) macam dalam gambar ni.