12 - Tampilan Effects Blockquote Yang Keren

Selamat pagii sobat blogger,, bagaimana kabar kalian hari ini. Semoga selalu sehat ya sob. Berhubung saya ada waktu untuk stanby di hp dan kali ini saya ingin update artikel hari ini yaitu tentang Bikin tampilan Blockquote dengan warna yang berbeda - beda. Sebelum kita lanjut ke tahap selanjut nya. Saya akan jelaskan apa itu blockquote. Yaa kali aja sobat blogger ada yang belum tau apa itu blockquote. Hehehe....

Blockquote adalah : Penekanan pada kata atau kalimat tertentu dalam sebuah tulisan. Ditampilkan secara mencolok dibanding keseluruhan tulisan,agar kehadirannya, menyita perhatian pembaca. Fungsinya adalah, untuk memberitahu pada pengunjung bahwa teks yang kita tampilkan berbeda tersebut adalah sebuah pesan penting. Bentuknya bisa berupa sebuah paragraf singkat, bisa berupa sebaris kata, bisa sebuah kutipan, bisa sebuah penggalan puisi dan aforisma. Yang jelas, ada penekanan khusus dibanding tampilan batang tubuh tulisan secara keseluruhan.

Bagaimana sekarang kalian sudah tau bukan apa itu Blockquote. Nahh sekarang mari kita lanjut ke tahap selanjut nya. Simak baik" tutorial yang saya berikan hari ini. Jangan lupa sediakan udut + kopi dan gorengan biar lebih enjoy sob.

12 - Tampilan Effects Blockquote Yang Keren

1. Silakan kalian copy code di bawah ini tepat di atas code </style> Atau ]]></b:skin>

blockquote{
  display:block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 0 0 20px;
  position: relative;
  
  /*Font*/
  font-family: Georgia, serif;
  font-size: 14px;
  line-height: 1.2;
  color: #666;

  /*Box Shadow - (Optional)*/
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;

  /*Borders - (Optional)*/
  border-left-style: solid;
  border-left-width: 15px;
  border-right-style: solid;
  border-right-width: 2px;    
}

blockquote::before{
  content: "\201C"; /*Unicode for Left Double Quote*/
  
  /*Font*/
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #999;
  
  /*Positioning*/
  position: absolute;
  left: 10px;
  top:5px;
  
}

blockquote::after{
  /*Reset to make sure*/
  content: "";
}

blockquote a{
  text-decoration: none;
  background: #eee;
  cursor: pointer;
  padding: 0 3px;
  color: #c76c0c;
}

blockquote a:hover{
 color: #666;
}

blockquote em{
  font-style: italic;
}

  /*Default Color Palette*/
blockquote.default{ 
  border-left-color: #656d77;
  border-right-color: #434a53;  
}

/*Grapefruit Color Palette*/
blockquote.grapefruit{
  border-left-color: #ed5565;
  border-right-color: #da4453;
}

/*Bittersweet Color Palette*/
blockquote.bittersweet{
  border-left-color: #fc6d58;
  border-right-color: #e95546;
}

/*Sunflower Color Palette*/
blockquote.sunflower{
  border-left-color: #ffcd69;
  border-right-color: #f6ba59;
}

/*Grass Color Palette*/
blockquote.grass{
  border-left-color: #9fd477;
  border-right-color: #8bc163;
}

/*Mint Color Palette*/
blockquote.mint{
  border-left-color: #46cfb0;
  border-right-color: #34bc9d;
}

/*Aqua Color Palette*/
blockquote.aqua{
  border-left-color: #4fc2e5;
  border-right-color: #3bb0d6;
}

/*Blue Jeans Color Palette*/
blockquote.bluejeans{
  border-left-color: #5e9de6;
  border-right-color: #4b8ad6;
}

/*Lavander Color Palette*/
blockquote.lavander{
  border-left-color: #ad93e6;
  border-right-color: #977bd5;
}

/*Pinkrose Color Palette*/
blockquote.pinkrose{
  border-left-color: #ed87bd;
  border-right-color: #d870a9;
}

/*Light Color Palette*/
blockquote.light{
  border-left-color: #f5f7fa;
  border-right-color: #e6e9ed;
}

/*Gray Color Palette*/
blockquote.gray{
  border-left-color: #ccd1d8;
  border-right-color: #aab2bc;
}


/* These CSS classes used just for Demo purpose */
.heading{
   font-family:Montez;
   text-align:center;
   font-size:30px;
}
code{
  color:#da4453;
}
span{
  font-weight:bolder;
  
}
h1{
  text-align:left;
  font-size:16px;
  font-family: 'Francois One', sans-serif;
}

span.Cdefault{
  color:#434a53;
}
span.Cgrapefruit{
  color:#da4453;
}
span.Cbittersweet{
  color:#e95546;
}
span.Csunflower{
  color:#f6ba59;
}
span.Cgrass{
  color:#8bc163;
}
span.Cmint{
  color:#34bc9d;
}
span.Caqua{
  color:#3bb0d6;
}
span.Cbluejeans{
  color:#4b8ad6;
}
span.Clavander{
  color:#977bd5;
}
span.Cpinkrose{
  color:#d870a9;
}
span.Clight{
  color:#e6e9ed;
}
span.Cgray{
  color:#aab2bc;
}

2. Dan untuk code pemanggil nya silakan kalian bisa liat code di bawah ini.

<blockquote class="default">Some Text..</blockquote>

3. Silakan ganti yang saya tandai dengan nama blockquote yang kalian ingin kan.

4. Untuk contoh nya kalian bisa liat pada gambar di atas.

Mungkin itu saja yang bisa saya bagikan pada kesempatan kali ini, semoga artikel ini bisa bermanfaat buat sobat yang sedang mencari Tampilan Effects Blockquote Yang Keren. Selamat mencoba...

Share this post