Cara Mengubah Tampilan BlockQuote di Blogger
Description:
Cara Mengubah dan Mengedit Tampilan Blockquote Agar Terlihat Bagus dan Responsive ~ Pada kali ini saya akan share beberapa disain blockquote yang bagus dan responsive, kali ini saya akan membagikan disain blockquote milik Dunia Blanter, Kompi Ajaib, Arlina Design, dan beberapa material disain yang bagus untuk Anda pakai di blog Anda.
Baca juga : Membuat Design Color Box atau Box Warna Responsive di Blogger
Blockquote sangat berguna untuk menampilkan teks yang di rekomendasikan si penulis pada blognya agar lebih mencolok dan lebih di perhatikan. Blockquote berguna juga untuk pengunjung lebih betah atau nyaman di blog Anda.
Login ke Blogger > Tema > Edit HTML. Lalu Anda cari kode blockquote milik Anda, kalau kode milik saya adalah blockquote{. Lalu Anda copy kode dibawah ini tepat didalam kode { CSS } atau juga Anda bisa meletakkan kode dibawah ini tepat dibawah blockquote{.
Berikut ini adalah beberapa disain menarik yang saya share hari ini.
Gambar yang saya berikan tidak mirip dengan yang asli, dikarenakan notebook yang saya gunakan tampilannya seperti yang saya berikan
Baca juga : Membuat Efek Loading Saat Halaman Dimuat Seperti Arlina Design
Langkah selanjutnya adalah Save. Silakan Anda Pratinjau terlebih dahulu untuk mencegah errornya kode atau CSS tersebut. Bila terjadi error silakan Anda untuk melapor dimanakah letak error kode tersebut dengan cara berkomentar dibawah. Terimakasih telah berkunjung dan jangan lupa untuk Like dan Share.
Baca juga : Membuat Design Color Box atau Box Warna Responsive di Blogger
Blockquote sangat berguna untuk menampilkan teks yang di rekomendasikan si penulis pada blognya agar lebih mencolok dan lebih di perhatikan. Blockquote berguna juga untuk pengunjung lebih betah atau nyaman di blog Anda.
Cara Mengubah atau Mengedit Blockquote Agar Lebih Menarik
Langkah pertama :Login ke Blogger > Tema > Edit HTML. Lalu Anda cari kode blockquote milik Anda, kalau kode milik saya adalah blockquote{. Lalu Anda copy kode dibawah ini tepat didalam kode { CSS } atau juga Anda bisa meletakkan kode dibawah ini tepat dibawah blockquote{.
Berikut ini adalah beberapa disain menarik yang saya share hari ini.
Disain Blockquote Milik Kompi Ajaib
Kompi Ajaib adalah blog yang membagikan informasi hotel, widget, template, dan membagikan hal-hal yang berhubungan dengan blogger. Berikut adalah CSS blockquote milik Kompi Ajaib.blockquote {
background: #333;
color: #fcc28c;
padding: 8px 10px;
overflow: auto;
max-width: 100%;
text-align: left;
margin: 10px auto;
border-left: 3px solid #fcc28c;
}
Disain Blockquote Milik Dunia Blanter
Dunia Blanter adalah blog yang menginformasikan dan membagikan template buatan dia sendiri, widget responsive, dan beberapa tutorial yang bisa Anda dapatkan disana. Dan ini juga adalah blockquote yang saya pakai. Berikut adalah CSSnya.blockquote{
font-family: 'Roboto';
display: block;
font-style: normal;
background: #fcf4ca;
position: relative;
margin: 15px 0;
border-left: 3px solid #c69f73;
font-weight: 400;
padding: 12px 15px;
color: #77735c;
box-shadow: 3px 3px rgba(0,0,0,0.1);
}
Disain Blockquote Milik Arlina Design
Blog Arlina Design adalah blog yang membahas tentang perkembangan blogger, membagikan template SEO dan Responsive, membagikan widget, dan membagikan tutorial seputar blogger. Berikut adalah kodenya.pre code {display: block;background: none;border: none;color: #bec3ce;padding: 25px 20px 20px 20px;font-family: 'Source Code Pro',Menlo,Consolas,Monaco,monospace;font-size: .83rem;white-space: pre;overflow: auto;}
pre[data-codetype="CSSku"]:before, pre[data-codetype="HTMLku"]:before, pre[data-codetype="JavaScriptku"]:before, pre[data-codetype="JQueryku"]:before {background-color: #fff;box-shadow: inset 0 0 0 1px #eee;}
pre::before {font-size: 15px;font-weight: 700;content: attr(title);position: absolute;top: 0;padding: 9px 0;left: 0;right: 0;color: #79798d;display: block;margin: 0;text-indent: 15px;}
pre:after {display: inline-block;content: "\f121";font-family: fontAwesome;font-style: normal;font-weight: normal;font-size: 18px;color: #79798d;top: 0;right: 0;padding: 9px 14px;position: absolute;}
Gambar yang saya berikan tidak mirip dengan yang asli, dikarenakan notebook yang saya gunakan tampilannya seperti yang saya berikan
Baca juga : Membuat Efek Loading Saat Halaman Dimuat Seperti Arlina Design
Langkah selanjutnya adalah Save. Silakan Anda Pratinjau terlebih dahulu untuk mencegah errornya kode atau CSS tersebut. Bila terjadi error silakan Anda untuk melapor dimanakah letak error kode tersebut dengan cara berkomentar dibawah. Terimakasih telah berkunjung dan jangan lupa untuk Like dan Share.
Posting Komentar