Cara Membuat Kotak Catatan Blockquote Keren Pada Blog

Kotak Catatan Blockquote Keren
Cara Membuat Kotak Catatan Blockquote Keren Pada Blog - Hay jumpa lagi dengan Blog Mas Newbie. Kali ini Mas Newbie akan kasih sedikit Tutorial tentang Cara Membuat Kotak Catatan Blockquote Keren Pada Blog. Mungkin ini tidak terlalu penting bagi Blog tetapi apa salahnya kita coba, cara ini juga sering di gunakan para master Blogger. Contohnya seperti arlina design, Mas Tamvan, dan para master Blogger lainya.

Memang sih Tutorial ini udah banyak di Google tapi karena teman saya meminta untuk di buatkan Tutorial ini. Ya mumpung saya lagi gak ada kerjaan ya saya sempatkan untuk membuat Tutorial ini. Ok baiklah langsung saja kalian ikuti step By step Tutorial ini.

Cara Membuat Kotak Catatan Blockquote Keren Pada Blog

  1. Masuk ke akun Blogger.
  2. Silahkan Klik Template / Tema, Silahkan kalian backup Template terlebih dahulu untuk menghindari hal-hal yang tidak diinginkan.
  3. Jika sudah silahkan klik Edit HTML.
  4. Carilah kode </head> Kemudian letakkan kode CSS berikut diatas kode </head>
  5. .post-body blockquote {
        text-align: left;
        background: #3cc091;
        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: #3cc091;
    
    }
    .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);
    }
  6. Kemudian simpan Template.
Kalian bisa mengganti kode warna yang saya tandai dengan warna Anda sendiri, Dan jika ikon tidak tampil bisa tambahkan kode berikut diatas </head>.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
Silahkan tes dengan membuat postingan baru. Jika belum tahu cara menerapkannya silahkan ikuti langkah-langkah berikut.

Cara Menerapkan Kode Blockquote

  • Buat postingan baru dengan tulisan yang Anda ingin kan.
  • Kemudian Block semua tulisan tersebut.
  • Blockquote
  • Jika sudah di Block klik ikon kutip seperti gambar diatas.
  • Jika ingin memasukan melalui mode HTML masukan kode berikut.
    <blockquote class="tr_bq">lorem ipsum</blockquote>
  • Ganti yang saya tandai dengan catatan Anda.
  • Selesai dan publikasikan.
  • Dan lihat hasilnya..
Terimakasih telah membaca Cara Membuat Kotak Catatan Blockquote Keren Pada Blog. Selamat mencoba dan semoga berhasil.

3 Komentar untuk "Cara Membuat Kotak Catatan Blockquote Keren Pada Blog"

  1. Wih Patut dicoba nih :D thx infonya

    BalasHapus
  2. Trims kak html-nya, bagus biar artikel kita jadi nggak keliatan sepi yaa

    BalasHapus
  3. gk sengaja nemu artikel ini, yaudah sekalian mampir dah :D kebetulan ane lg nyari tutorialnya :v

    BalasHapus

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel