√ Membuat Blockquote Pada Postingan Blog Dengan Mudah

Membuat Blockquote Pada Postingan Blog Dengan Mudah

Mystereno.com - Membuat Blockquote Pada Postingan Blog Dengan Mudah. Yap sesuai dengan judul postingan pada blog ini, admin akan membuat tutorial tentang bagaimana caranya membuat custom blockquote di dalam sebuah postingan blog dengan mudah. Dengan adanya blockquote ini membuat artikel kalian semakin menarik dan enak untuk dibacanya.

Sebenarnya sudah banyak artikel-artikel yang membahas tentang cara membuat custom blockquote ini, akan tetapi admin akan tetap share kembali pada blog ini, siapa tau kalian sedang mencari artikel terkait dan tinggal kalian baca aja deh pada blog ini.

Untuk cara mengcustom blockquote ini sangat gampang kok, kalian hanya perlu menambahkan sedikit kode css pada template blog kalian. Nah untuk itu simak dan ikuti dengan benar yah sob caranya yang admin jelaskan di bawah ini.

Langkah#1
Seperti biasa langkah pertama buka dasbor blog kalian dan masuk ke bagian Tema > Edit
Html.

Langkah#2
Kemudian kalian carilah kode </head>. Untuk mempermudah mencari kode </head>, kalian bisa tekan CTRL + F dan ketikkan kode </head> dan Enter. Lalu Copy kode css di bawah ini dan Paste tepat di atas kode </head> Kemudian Save.

<style type='text/css'>
/*Blockquote*/
.post-body blockquote {
    text-align: left;
    background: #00D2FF;
    position: relative;
    display: block;
    padding: 55px 20px 20px;
    color: #fff;
    margin: 10px 0;
    border-radius: 3px;
}
.post-body blockquote:before {
    position: absolute;
    content: 'Catatan!';
    font-size: 100%;
    background: rgba(255,255,255,1);
    right: 3px;
    left: 3px;
    top: 3px;
    padding: 5px 5px;
    display: block;
    font-weight: 700;
    border-radius: 3px 3px 0 0;
    color: #6591c2;
}
.post-body blockquote:after {
    position: absolute;
    content: '\f027';
    right: 10px;
    bottom: 5px;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 160%;
    color: rgba(255,255,255,.6);
}
</style>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

Langkah#3

Yang terakhir kalian silahkan mencoba untuk membuat Quote, ketikkan sebuah text kemudian block textnya dan klik Quote.

Dan berikut ini hasil dari pratinjaunya.

Okay sangat gampang sekalai kan sob? jika kalian mengikuti tutorial di atas dengan benar pasti berhasil kok.

Dan sekian dulu tutorial kali ini tentang Membuat Blockquote Pada Postingan Blog Dengan Mudah. Jika ada yang kurang dimengerti atau ada masalah lainnya jangan ragu untuk berkomentar di bawah. Terima kasih

Mystereno 9:52 AM