Membuat 5 design blockquote cantik menggunakan CSS

Membuat 5 design blockquote cantik menggunakan CSS

Bagi andan yang memiliki atau mengelola sebuah blog, design memang bukan menjadi yang paling utama. Tapi tanpa design juga blog tidak akan hidup dan sangat kaku. Berikut saya akan memberikan sedikit trik cara Membuat 5 design blockquote cantik menggunakan CSS. Silahkan pilih sesuai selera dan gunakan untuk blog atau web anda. Jika anda kreatif dari masing-masing design masih dapat dikembangkan lagi.

Design Blockquote 1:

Contoh hasil blockquote dengan css yang akan kita buat tampak seperti ini.

Berikut cara membuat blockquote seperti diatas:

Bagi anda yang menggunakan blogspot biasanya secara default untuk template blog saat ini sudah ada css untuk blockquote, sehingga anda tinggal menambahkan sedikit css lagi. Silahkan login ke blogger, klik menu template, edit HTML, tempel kode css berikut ini di atas ]]></b:skin>

blockquote:hover {
  padding: 16px 16px 16px 30px;
  line-height: 1.6;
  -webkit-transition-duration: 1.5s;
  border: 1px dashed #eeeeee;
  font-style: italic;
  background: #C9F4F9;
  -webkit-border-bottom-left-radius: 30px;
  -webkit-border-top-right-radius: 30px;
}

Jika ternyata blog anda belum memiliki css untuk blockquote, maka tempel keseluruhan kode css berikut ini di atas ]]></b:skin>

blockquote {
  font-size: 20px;
  position: relative;
  margin: 20px 25px;
  padding: 16px 16px 16px 30px;
  line-height: 1.6;
  border-left: 5px solid #999;
  font-style: italic;
  background: #EEE;
}
blockquote:hover {
  padding: 16px 16px 16px 30px;
  line-height: 1.6;
  -webkit-transition-duration: 1.5s;
  border: 1px dashed #eeeeee;
  font-style: italic;
  background: #C9F4F9;
  -webkit-border-bottom-left-radius: 30px;
  -webkit-border-top-right-radius: 30px;
}

Bagi anda pengguna web dengan TLD, baik menggunakan platform PopojiCms atau platform lainya. Tambahkan kode CSS berikut pada file CSS tema aktif:

blockquote {
  font-size: 20px;
  position: relative;
  margin: 20px 25px;
  padding: 16px 16px 16px 30px;
  line-height: 1.6;
  border-left: 5px solid #999;
  font-style: italic;
  background: #EEE;
}
blockquote:hover {
  padding: 16px 16px 16px 30px;
  line-height: 1.6;
  -webkit-transition-duration: 1.5s;
  border: 1px dashed #eeeeee;
  font-style: italic;
  background: #C9F4F9;
  -webkit-border-bottom-left-radius: 30px;
  -webkit-border-top-right-radius: 30px;
}

 

Demo Blockquote 1

Design blockquote yang ke 2:

Cara penempatan kode CSS sama seperti diatas, berikut kode CSS untuk$ blockquote yang ke 2:

blockquote {
  font-size: 20px;
  position: relative;
  margin: 20px 25px;
  padding: 16px 16px 16px 30px;
  line-height: 1.6;
  border-left: 5px solid #999;
  font-style: italic;
  background: #EEE;
}
blockquote:hover {
  font-size: 20px;
  position: relative;
  margin: 20px 25px;
  padding: 16px 16px 16px 30px;
  line-height: 1.6;
  border-left: 5px solid #999;
  border-right: 5px solid #999;
  font-style: italic;
  background: #C9F4F9;
  -webkit-border-bottom-left-radius: 30px;
  -webkit-border-top-right-radius: 30px;
}

 

Demo Blockquote 2

Design blockquote yang ke 3:

Cara penempatan kode CSS sama seperti diatas, berikut kode CSS untuk$ blockquote yang ke 3:

blockquote {
  font-size: 20px;
  position: relative;
  margin: 20px 25px;
  padding: 16px 16px 16px 30px;
  line-height: 1.6;
  border-left: 5px solid #999;
  font-style: italic;
  background: #A8ECB9;
  border: dotted;
}
blockquote {
  font-size: 20px;
  position: relative;
  margin: 20px 25px;
  padding: 16px 16px 16px 30px;
  line-height: 1.6;
  border-left: 5px solid #999;
  font-style: italic;
  background: #F1F8F3;
  border: dotted;
  -webkit-border-bottom-left-radius: 30px;
  -webkit-border-top-right-radius: 30px;
}

 

Demo Blockquote 3

Design blockquote yang ke 4:

Cara penempatan kode CSS sama seperti diatas, berikut kode CSS untuk$ blockquote yang ke 4:

blockquote {
  font-size: 20px;
  position: relative;
  margin: 20px 25px;
  padding: 16px 16px 16px 30px;
  line-height: 1.6;
  border-left: 5px solid #999;
  font-style: italic;
  background: #EEE;
}
blockquote:hover {
  font-size: 20px;
  position: relative;
  margin: 20px 25px;
  padding: 16px 16px 16px 30px;
  line-height: 1.6;
  border: dotted #128CAD;
  font-style: italic;
  background: #EEE;
}

 

Demo Blockquote 4

Design blockquote yang ke 5:

Cara penempatan kode CSS sama seperti diatas, berikut kode CSS untuk$ blockquote yang ke 5:

blockquote {
  font-size: 20px;
  position: relative;
  margin: 20px 25px;
  padding: 16px 16px 16px 30px;
  line-height: 1.6;
  border-left: 5px solid #999;
  font-style: italic;
  background: #EEE;
}
blockquote:hover {
  font-size: 20px;
  position: relative;
  margin: 20px 25px;
  padding: 16px 16px 16px 30px;
  line-height: 1.6;
  -webkit-transition-duration: 1.5s;
  box-shadow: inset 0px 0 800px 0 #C9F4F9;
  border: 1px dashed #eeeeee;
  font-style: italic;
  background: #C9F4F9;
  -webkit-border-bottom-left-radius: 30px;
  -webkit-border-top-right-radius: 30px;
}

 

Demo Blockquote 5

Terimakasih telah berkunjung, jika bermanfaat silahkan share kepada teman yang lain. Untuk selalu mendapat kabar pemberitahuan artikel menarik lainya silahkan berlangganan gratis melalui form subscribe pada bagian bawah halaman ini.