Sabtu, 16 Maret 2019

Membuat Note/Blockquotes Keren Dan Elegant Pada Artikel Blog 2019

Membuat Note/Blockquotes Keren Dan Elegant Pada Artikel Blog 2019

Di Tahun 2019 kali ini saya akan berbagi tutorial for blog, tentang bagaimana membuat blockquotes keren atau bisa juga kita kenal dengan note ( catatan ). Siapa yang belum mengetahui tentang Note/Blockquotes pada artikel blog? Jadi note/blockquotes adalah sebuah catatan yang bisa kita manfaatkan di dalam artikel blog kita, kegunaan blockquotes sendiri adalah untuk mempermudah kita dalam membuat catatan ketika kita sedang membuat tutorial atau hal lainnya. Ada berbagai macam style atau bentuk blockquotes keren dan elegant salah satunya adalah yang saya berikan nanti di bawah ini.

Manfaat dari membuat note keren di blog tidak hanya memudahkan kita dalam membuat catatan saja, akan tetapi juga membantu artikel pada blog kita menjadi lebih rapi dan tampil elegant sehingga pembaca tertarik untuk membaca artikel blog kita dan nyaman dalam membacanya. Untuk itu saya akan menjelaskan sedikit mengenai cara membuat blockquotes keren pada artikel blog.

Membuat Note/Blockquotes Keren Dan Elegant Pada Artikel Blog 2019 

Blockquotes adalah sebuah kotak catatan atau bisa juga di sebut sebagai note. Seperti yang sudah saya jelaskan di atas tadi, banyak sekali kegunaan dari blockquotes ini sob. Pernah gak sih kita melihat di blog orang lain memakai note blog keren dan elegant? Pasti pernah dong melihatnya. Saya banyak sekali menjumpai pengguna blog yang menggunakannya. Oleh karenya saya terinspirasi untuk membuat tutorial ini.

Langsung saja bagi kalian yang ingin membuat blockquotes keren, blockquotes elegant dan Note keren pada artikel blog bisa langsung simak tutorial dibawah ini.

Membuat Blockquotes Keren Pada Artikel Blog 2019

  • Hal yang pertama dilakukan adalah login dahulu ke blogger  
  • Setelah masuk di dalam blogger, Selanjutnya cari bagian Template , lalu klik Edit HTML  
  • Jika sudah masuk kedalam edit HTML kalian cari kode /head  
  • Setelah ketemu kode diatas, masukkan script CSS blockquotes di bawah ini tepat diatas kode </head>
  • Kode Pembungkus CSS
    
    
    <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>
    
    
    Catatan nih buat sobat semua. Jadi untuk tulisan catatan bisa sobat ubah semau sobat. Contohnya catatan mau di ubah dengan tulisan " perlu diingat " itu juga bisa. Untuk cara merubahnya kalian tinggal mencari kode CSS content: 'Catatan'; , lalu kalian tinggal merubah tulisan catatan menjadi tulisan yang sobat inginkan, seperti yang saya contohkan diatas.
  • Jika sudah tinggal save template
  • Tinggal kita pasang di postingan kita
Nahh untuk cara memasang di artikel kita sangatlah mudah sekali. Caranya seperti dibawah ini ya sob, simak baik - baik untuk pemasangan Blockquotes di dalam arikel ini.


  • Kalian hanya perlu mem block tulisan yang ingin di jadikan catatan. Lalu klik icon kutip dua di menu atas postingan. Untuk lebih jelasnya bisa lihat gambar di bawah


  • Jika ingin melihat hasilnya dahulu sobat bisa klik pratinjau dulu sebelum mempostingan artikel sobat.

Kesimpulan Membuat Note/Blockquotes Pada Artikel Blog 2019

Setiap template yang di gunakan oleh sobat semua tentunya berbeda - beda, perlu diperhatikan juga pasti dari tutorial diatas ada yang masih belum muncul Blackquotesnya dikarenakan template yang sobat pake harus di edit dahulu. Tapi jangan kuatir sob, saya sudah mencobanya di berbagai template dan bisa muncul Blockquotesnya. Untuk yang belum bisa atau blackquotesnya tidak mau muncul bisa tulis komen dibawah ya sob, nanti saya bantu sebisa saya.

Mungkin sekian yang bisa saya bagikan tentang cara Membuat Note/Blockquotes Keren Dan Elegant Pada Artikel Blog 2019 untuk tutorial blogger lainnya akan saya buatkan lagi jika saya sempat. Terimakasih kepada sobat semua yang mengikuti tutorial dari atas sampai bawah ini.

Terimakasih kepada mas teja untuk inspirasi tutorial blogger nya, sangat bermanfaat sekali.


EmoticonEmoticon