Tutorial : Simple and Neat Blockquote - A box of Crayon

Latest

Wednesday, 12 April 2017

Tutorial : Simple and Neat Blockquote



Assalammualaikum.

Tutorial : Simple and Neat Blockquote

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. Previously Mellya ada buat tutorial blockquote dah, TUTORIAL : CUTE SIMPLE BLOCKQUOTE FOR SIMPLE TEMPLATE.

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://lh5.googleusercontent.com/-fTjvw5r8Sfg/VQfAuZQI96I/AAAAAAAABBU/uGNOHt8jNR8/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.

Tutorial : Simple and Neat Blockquote


7 comments:

  1. Adeiii kalaulah edit html tak hilang bloglist... Nk edit pun tak boleh skrg ni.

    ReplyDelete
  2. Mungkin akan berguna ni nanti hehe thanks Mellya :D

    ReplyDelete
  3. Dah lama tak 'melewati' blog yang buat tuto macam-macam. Tetibe rindu the old days. Huhu.. Tq mellya, buatkan tuto blockquote! (Walaupun bukan kite yang request tuto ni) hiks! 😘💕

    ReplyDelete
  4. Bab edit-mengedit ni memang sy angkat bendera putih 😂

    ReplyDelete
  5. terima kasih. saya buat dah jadi :)

    ReplyDelete