6/8/17

Membuat Kotak Catatan Keren Di Blog


Membuat Kotak Catatan Keren Di Blog
Pada kesempatan kali ini saya akan membagikan tips cara membuat Kotak Catatan di Blog. Kotak catatan ini tidak seperti biasanya seperti bawaan blogger, ini merupakan kotak catatan keren menurut saya sih. Biasanya kotak catatan ini dipakai untuk pelengkap kotak script highlighter di blog.
   Baca Juga:



Sebenarnya kotak catatan ini sangat terinspirasi dari blog www.arlinadzgn.com karena keseringan lihat melulu kotak catatan ini hampir disetiap postingannya. Akhirnya saya penasaran bagaimana sih caranya membuat kotak catatan seperti itu. Dan saya pun menemukan cara yang cukup simple sehinggga mudah dipraktekkin.

Oke tanpa basa-basi lagi, langsung saja mari simak cara membuat kotak catatan ini:

Cara Membuat Kotak Catatan Paling Keren Di Blog

  • Masuk ke Blogger
  • Pilih Template > Edit HTML
  • Carilah dan Copy paste kode di bawah ini tepat di atas kode </head>

<style type='text/css'>
/*Blockquote Catatan*/
.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>
  • Simpan


Tahap selanjutnya cara menampilkannya ke dalam postingan, simak lagi gan:
  • Buatlah postingan terbaru
  • Terlebih dahulu anda tulislah sebuah kalimat untuk catatan tersebut.
  • Selanjutnya Block semua kalimat catatan anda
  • Setelah terblok semua > klik Quote (lihat gambar biar mengerti).

Membuat Kotak Catatan Keren Di Blog

  • Setelah klik Quote maka akan secara otomatis terbungkus.
  • Selesai, silahkan lihat hasilnya. 

Demikian cara Membuat Kotak Catatan Keren Di Blog ini, semoga bisa dipratekkan di blog anda semua. Dijamin tampilan blog anda akan semakin menarik dan keren karena tambahin kotak catatan ini.