Membuat Blockquote keren di postingan blog

adscblog

Blockquote atau kotak catatan biasa nya di gunakan oleh para blogger untuk sesuatu tulisan yang penting yang terkait dengan artikel yang sedang di bahas nya,atau juga kotak catatan yang dimana di gunakan untuk memberikan penjelasan atau peringatan terhadap sesuatu yang di anggap penting

Banyak sekali model Blockquote ini yang mungkin anda dapat gunakan,sehingga dapat memperindah artikel atau postingan yang sedang anda tulis di blog,dan mungkin artikel seperti ini sudah tidak asing lagi di mata sobat dan juga blockquote atau kotak catatan ini banyak sekali blogger yang menggunakan nya

Blockquote ini menjadi pavorite para blogger untuk di gunakan di postingan mereka,karena selain bentuk nya yang menarik juga warna yang sesuai dan juga tidak terlalu menyilaukan mata,dengan begitu tidak aneh jiga para blogger banyak yang menggunakan kotak catatan atau blockquote ini untuk di gunakan di blog nya terutama di postingan mereka

Dan untuk membuat Blockquote atau kotak catatan ini sangatlah mudah sekali,anda hanya perlu menerapkan CSS di bawah di bagian template sobat,agar tampilan nya sesuai dengan gambar,terlebih dahulu sobat harus menghapus kode blockquote bawaan template sobat agar kode nya tidak bentrok dengan kode css yang akan di pasang sekarang

Cara Membuat kotak Catatan atau Blockquote keren di postingan blog

Jika sobat blogger tertarik dengan tampilan blockquote tersebut dan contoh nya bisa anda lihat di bagian gambar atas,dan mungkin anda juga sudah tidak asing lagi dengan kotak blockquote tersebut,karena sudah banyak blogger yang menggunakan nya di blog mereka,untuk membuat blockquote tersebut bisa sobat ikuti langkah-langkah penerapan nya di bawah ini

• Masuk ke Dashboard Blogger
• Setelah itu klik template yang berada di bagian kiri Dashboard
• Kemudian klik edit html
• Setelah berada di bagian edit html silahkan sobat letakan kode Css berikut sebelum 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>

• Kemudian Save template dan silahkan lihat hasil nya

Cara menggunakan Blockquote di postingan

 Setelah sobat menyimpan kode di atas di bagian template atau edit html seperti langkah-langkah di atas,dan untuk penggunaan blockquote ini mungkin sobat juga sudah tau,tetapi agar sobat tidak lupa,silahkan sobat ikuti langkah-langkah di bawah ini

1. Silahkan sobat kembali ke Dashboard Blogger
2. Setelah itu silahkan klik Postingan di bagian Dashboard Blogger seperti anda akan membuat postingan atau artikel
3. Setelah Berada di bagian postingan,silahkan membuat artikel,
4. Kemudian silahkan sobat Block Postingan yang di anggap penting kemudian klik tanda blockquote yang berada di bagian atas kanan dengan tanda " lihat gambar
   
5. Coba sobat perhatikan tulisan yang di warnai biru dan juga kotak merah di samping kanan atas nya

Setelah itu silahkan Publikasikan postingan nya dan silahkan lihat hasil nya,semoga artikel nya bisa membantu tentang cara Membuat Blockquote keren di postingan blog,selamat mencoba

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 11 Agustus and have 0 komentar