Cara Membuat Kotak Catatan / Blockquote Keren di Blog

Cara Membuat Kotak Catatan / Blockquote Keren di Blog . Kotak catatan / Blockquote juga merupakan sebuah box untuk memperjelas rincian dan catatan yang harus diingat, karena jika memberikan catatan hanya text doang tidak mudah dipahami, Nah dengan menggunakan box catatan ini, menjadi lebih mudah untuk menjelaskan rincian sobat kepada pengunjung

Tenang saja sobat, kode ini Pure CSS, jadi tidak memberatkan loading blog sobat, mari simak saja tutorial yang harus dilakukan

Cara Membuat Kotak Catatan / Blockquote Keren di Blog

1. Login ke Blogger
2. Lihat ke Tema > Edit HTML
3. Lalu, Letakkan kode dibawah ini, Tepat diatas kode </head>

<style type='text/css'>
/*Blockquote Catatan by Chaya Education*/
.post-body blockquote {
    text-align: left;
    background: #6591c2;
    position: relative;
    display: block;
    padding: 55px 20px 20px;
    color: #fff;
    margin: 10px 0;
    border-radius: 3px;
}
.post-body blockquote:before {
    position: absolute;
    content: 'Catatan';
    background: rgba(255,255,255,1);
    right: 3px;
    left: 3px;
    top: 3px;
    padding: 5px 20px;
    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>

JIka Iconnya tidak tampil, Sobat tambahkan kode dibawah ini, Tepat diatas kode </head>

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

Dah selesai sobat, Sangat mudah kan, Semoga dibulan puasa ini menjadi berkah amiin, Semoga bermanfaat ya sobat semua+_=