Cara Menciptakan Blockquote Keren Di Blogger

Baca Juga

Blockquote atau Kutipan biasa di gunakan untuk pemberitahuan pada sebuah situs web, Khususnya Blog.

Setiap Template intinya sudah memiliki elemen ini hanya saja tampilannya tidak keren atau sederhana saja.

Sebagai misalnya ya menyerupai blockquote ini mudah dan sederhana

Namun kalau di pasang custom blockquote maka tampilannya akan keren dan elegan serta sangat cocok dan harmonis dengan postingan, menyerupai screenshoot dibawah ini

Bagaimana tampilannya keren bukan ? Mau memasang element ini pada blog teman ?

Bagi yang minat dapat ikuti bebrapa langkah berikut :

● Masuk ke Blogger > Pilih > Tema > Edit Html

● Simpan Font Awesome di bawah ini sempurna di atas aba-aba </head>. kalau 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 sempurna 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 aba-aba warna yang aku tandai dengan aba-aba warna yang sesuai dengan blog teman dan teman juga dapat mengubah CATATAN dengan kata kata yang berdasarkan teman cocok buat situs blognya

● Namun kalau teman memakai Template dari Arlina Design silahkan ganti aba-aba 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 memakai atau memanggilnya di postingan

Blok goresan pena yang akan anda buat menjadi kutipan dan klik tombol berikut. Lihat menyerupai pada poto

Atau teman dapat gunakan aba-aba 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