Cara Membuat Kotak Text Quote di Postingan Blogger

By Posted on

Jagoandzgn.com – Pada kesempatan kali ini saya akan memberikan sebuah tutorial mengenai Cara Membuat Kotak Text Quote di Postingan Blogger.

Pasti bagi kamu yang memiliki sebuah blog dengan Niche quote atau text pastinya sangat membutuhkan box tersebut.

Sebenarnya cara membuat text box ini tidak terlalu susah hanya dengan menggunakan CSS + HTML pemanggilnya kamu bisa membuat box tersebut.

Namun tidak banyak diantara kita termasuk saya sendiri mempelajari kode tersebut. Nah bagi kamu yang ingin belajar lebih jauh mengenai dunia Islam.

Cara Membuat Kotak Text Quote di Postingan Blogger

Cara Membuat Kotak Text Quote

1. Silahkan kamu login ke blogger.com dengan menggunakan akun Gmail kamu.
2. Masuk kemenu TEMA > klik Edit HTML
3. Silahkan kamu cari kode berikut ini ]]></b:skin> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.

.boxcontainer {
  padding:20px 0px 0px 0px;
  border:2px solid #1588E3;
  vertical-align:middle;
  width:100%;
  position:relative;
  border-bottom-left-radius:15px;
  border-bottom-right-radius:15px;
  border-top-right-radius:15px;
  border-top-left-radius:15px;
  }
  
.boxcontainer .boxes {
  padding:0px;
  width:100%;
  background:#1589E3;
  position:absolute;
  top:-15px;
  left:0px;
  border-radius:15px;
  padding-top:2px;
  padding-bottom:2px;
  }
  
.boxcontainer .boxes .textboxes {
  background:transparent;
  padding:0px;
  color:#fff;
  text-align:center;
  font-weight:bold;
  }
  
.quotebox {
  background:#ddd;
  margin:10px auto;
  margin-left:15px;
  margin-right:15px;
  border-radius:7px;
  }
  
.quotebox p {
  padding:10px;
  color:#444;
  font-family:arial;
  }
  
.authores {
  background:#1589E3;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
  padding-bottom:1px;
  padding-top:11px;
  }
  
.authores h2 {
  color:#fff;
  font-size: 14px;
  text-align:center;
  }

.textboxes p {
 margin:0;
 color:#fff; 
}

4. Kalau sudah silahkan klik SIMPAN dan sekarang kita masuk ke menu Postingan.

5. Selanjutnya, kamu copy kode dibawah ini dan paste tepat di menu HTML [bukan compose].

<div class='boxcontainer'>
    <div class='quotebox'>
     <p>Tulis Textnya Disini.</p>
    </div>
    <div class='boxes'>
     <div class='textboxes'>
      <p>Text Quote</p>
      </div>
     </div>
     <div class='authores'><h2>- Umar bin Khattab -</h2></div>
    </div>

Silahkan kamu ubah kode yang berwarna merah dengan text sesuai keinginan kamu, dan ubah kode yang berwarna hijau dengan nama sesuai keinginan kamu.

6. Kalau sudah silahkan klik PUBLIKASIKAN dan Selesai.

Bagaimana mudah bukan untuk tutorial Cara Membuat Kotak Text Quote di Postingan Blogger,

nah bagi kamu yang memiliki pertanyaan atau masalah seputar blogger silahkan komen di kolom komentar dibawah artikel ini.

Baca Juga Artikel Lainnya :