Setiap Template pada dasarnya sudah mempunyai elemen ini hanya saja tampilannya tidak keren atau sederhana saja.
Sebagai contohnya ya seperti blockquote ini simpel dan sederhana
Namun jika di pasang custom blockquote maka tampilannya akan keren dan elegan serta sangat cocok dan serasi dengan postingan, seperti screenshoot dibawah ini
Bagaimana tampilannya keren bukan ? Mau memasang element ini pada blog sobat ?
Bagi yang minat bisa ikuti bebrapa langkah berikut :
● Masuk ke Blogger > Pilih > Tema > Edit Html
● Simpan Font Awesome di bawah ini tepat di atas kode </head>. jika sudah tersedia tidak usah di pasang
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>● Simpan CSS Custom Blockquote di bawah ini tepat diatas kode </style> atau </b:skin>
blockquote{background:#2c4584;position:relative;padding:55px 20px 20px 20px;color:#fff;margin:10px 0;border-radius:3px}
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:#2c4584}
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)}
blockquote a,.post-body blockquote a:hover{color:#fff}
*:focus{outline:0!important}Ganti kode warna yang saya tandai dengan kode warna yang sesuai dengan blog sobat dan sobat juga bisa mengubah CATATAN dengan kata kata yang menurut sobat cocok buat situs blognya
● Namun jika sobat menggunakan Template dari Arlina Design silahkan ganti kode di bawah ini dengan CSS Custom Blockquote yang di atas
.post-body blockquote{position:relative;background:#f8f8f9;border-left:none;padding:20px 55px;color:#676767;font-weight:700;line-height:22px}
.post-body blockquote:before{color:#bbb;position:absolute;top:15px;left:20px;display:inline-block;font-family:'FontAwesome';font-style:normal;font-weight:normal;line-height:1;content:"\f10d";font-size:20px;-webkit-font-smoothing:antialiased}
.post-body blockquote:after{color:#bbb;position:absolute;bottom:15px;right:20px;display:inline-block;font-family:'FontAwesome';font-style:normal;font-weight:normal;line-height:1;content:"\f10e";font-size:20px;-webkit-font-smoothing:antialiased}
.post-body h1{font-size:200%}.post-body h2{font-size:180%}.post-body h3{font-size:160%}.post-body h4{font-size:140%}.post-body h5{font-size:120%}.post-body h6{font-size:100%}
.post-body h1 b,.post-body h2 b,.post-body h3 b,.post-body h4 b,.post-body h5 b,.post-body h6 b{font-weight:700;}● Kalau merasa penempatan kodenya sudah benar silahkan simpan template
● Cara menggunakan atau memanggilnya di postingan
Blok tulisan yang akan anda buat menjadi kutipan dan klik tombol berikut. Lihat seperti pada poto
Atau sobat bisa gunakan kode di bawah ini didalam postingan di mode Html
<blockquote> Kutipan di sini </blockquote>Itulah tutorial bagaimana cara memasang custom blockquote dan bagaimana cara memanggilnya.
Semoga bermanfaat ! Hapy blogging
