Selasa, 25 April 2017

Kumpulan Blockquote Tampilan Keren Terbaru Dan Cara Membuatnya

Tags

Kumpulan Blockquote Keren - Lagi-lagi saya harus membuat postingan artikel yang bukan keahlian saya. Kali ini saya akan berbagi kumpulan blockquote tampilan keren dan menarik beserta cara membuat atau memasangnya di blog kesayangan sahabat. Meskipun ini bukan keahlian saya, namun saya berharap postingan ini bermanfaat bagi sahabat yang membutuhkan.

Blockquote keren terbaru

Blockquote pada postingan blog bisa dibilang merupakan catatan penting yang ingin disampaikan oleh penulis. Oleh karena itu, catatan penting tersebut biasanya ditulis dalam bentuk yang berbeda dari tulisan-tulisan seluruhnya. Perbedaan tersebut bertujuan untuk mempermudah pembaca mengingat catatan penting atau pesan yang ingin disampaikan penulis.

Sebenarnya di setiap template blog baik itu premium maupun gratisan pasti sudah tersedia yang namanya blockquote. Namun sebagai seorang blogger yang kreatif, tentu tidak selalu puas dengan hal tersebut, ingin mencoba hal-hal baru, termasuk mendesain blockquote dengan tampilan semenarik mungkin.

Apakah saya adalah blogger yang kreatif? hehe.., nggak juga kok. Sebenarnya ingin sekali menjadi blogger kreatif yang bisa ini dan itu namun kemampuan belum memadai. Lalu apakah kamu juga seorang blogger kreatif? Jika jawaban sama seperti saya, mari kita belajar bersama. hehe

Kumpulan Blockquote Keren Dan Cara Membuatnya


Kembali ke pembahasan tentang blockquote keren dan cara membuatnya. Ada beberapa tampilan blockquote yang bisa sahabat pilih kemudian sahabat terapkan pada blog sahabat. Dan untuk cara membuatnya pun tidak repot bahkan sama semuanya. Jadi jika berhasil membuat tampilan blockquote pertama pasti bisa membuat tampilan blockquote berikutnya.

Karena sebagian besar kumpulan blockquote yang saya bagikan ini menggunakan fontawesome, maka pastikan di dalam template sahabat sudah terpasang fontawesome. Jika belum silahkan tambahkan link CSS di bawah ini di atas kode </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Berikut beberapa desain blockquote yang dapat saya kumpulkan:

A. Contoh Blockquote Pertama

See the Pen Contoh Blockquote 1 by Amel Liya (@risalahliya) on CodePen.

Blockquote tersebut adalah yang terpasang pada blog ini. Saya dapatkan dari templatenya mbak Arlina Fitriani dengan sedikit-banyak saya modif warnanya. Jika tertarik, sahabat bisa mencobanya dengan mengikuti langkah di bawah ini.

1. Masuk ke menu Tema kemudian pilih Edit HTML.

2. Cari kode ]]></b:skin> atau </style> . Gunakan tombol Ctrl+F pada struktur template untuk mempermudah pencarian. Kemudian sebelum atau di atasnya tambahkan CSS di bawah ini:
/* CSS blockquote 1 */
.blockquote1{background:#459d3f;position:relative;padding:45px 20px 20px 20px;color:#fff;margin:10px 0;font-family:cursive;border-radius:3px}
.blockquote1:before{position:absolute;content:'NOTE ~';background:rgba(255,255,255,1);right:3px;left:3px;top:3px;padding:5px 20px;display:block;font-weight:700;border-radius:5px 5px 5px 5px;color:#fd2f01}
.blockquote1:after{position:absolute;content:'\f0a1';right:10px;bottom:5px;font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:160%;color:rgb(255, 255, 255)}

3. Tambahkan kode HTML seperti berikut di dalam postingan
<div class='blockquote1'>KALIMAT YANG DI BLOCKQUOTE</div>

4. Selesai, simpan, dan lihat hasilnya.

Jika dirasa blockquote di atas kurang menarik, sahabat bisa mencoba blockquote berikut di bawah. Langkah-langkahnya kurang lebih sama dengan di atas.

B. Contoh Blockquote Kedua

See the Pen Contoh Blockquote 2 by Amel Liya (@risalahliya) on CodePen.

Kira-kira lebih keren mana ya antara contoh blockquote yang pertama dengan yang kedua? Contoh tampilan blockquote yang kedua ini warnanya mirip dengan template blognya Kang Ismet.  Jika di blog sahabat ingin memiliki tampilan blockquote seperti di atas silahkan pasang kode di bawah ini.

1. Pasang kode CSS ini di dalam template
/* CSS blockquote 2 */
.blockquote2 {position: relative;display: block;padding: 10px 12px 12px 68px;color: #f5f6e8;background: #415471;line-height: 1.4;}
.blockquote2::before {content: "\201C";background-color: #83a2d1;border-radius: 50%;width: 40px;height: 40px;font-size: 60px;font-family: FontAwesome;color: #415471;text-align: center;line-height: 68px;position: absolute;left: 16px;top: 10px;}
.quote2 {position: relative;padding: 5px 0;border-bottom: 2px solid #ddd;}
.quote2:before {content: '';position: absolute;bottom: -2px;left: 0;right: 0;background: #30cc91;width: 75px;height: 3px;}

2. Gunakan kode HTML ini di dalam postingan
<div class="blockquote2">
<div class='quote2'>Catatan :</div>
<br />
KALIMAT YANG DI BLOCKQUOTE</div>

C. Contoh Blockquote Ketiga

See the Pen Contoh Blockquote 3 by Amel Liya (@risalahliya) on CodePen.

Nah, pada contoh ketiga ini merupakan blockquote yang sangat cocok untuk digunakan sebagai penulisan puisi ataupun pantun, sebab blockquote-nya mirip seperti catatan lembaran kertas. Cukup simpel dan menarik bukan? hehe

1. Pasang kode CSS di bawah ini pada template
.blockquote3 {position: relative;font-family: monospace;margin: 30px auto;padding: 30px 20px 17px 50px;line-height: 30px;color: #6a5f49;text-shadow: 0 1px 1px white;background-color: #f2f6c1;background-image: -webkit-radial-gradient(center, cover, rgba(245, 126, 137, 0.6) 0%, rgba(255, 255, 255, 0.1) 90%), -webkit-repeating-linear-gradient(top, transparent 0%, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);border: 1px solid #c3baaa;border-color: rgba(195, 186, 170, 0.9);box-sizing: border-box;box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 5px #d8e071, 0 0 1px rgba(0, 0, 0, 0.1), 0 2px rgba(0, 0, 0, 0.02);}
.blockquote3:before, .blockquote3:after {content: '';position: absolute;top: 0;bottom: 0;}
.blockquote3:before {left: 28px;width: 5px;border: solid #efcfad;border-color: rgba(239, 207, 173, 0.9);border-width: 0 2px;}
.blockquote3:after {z-index: -1;left: 0;right: 0;background: rgba(242, 246, 193, 0.9);border: 1px solid rgba(170, 157, 134, 0.7);-webkit-transform: rotate(2deg);-moz-transform: rotate(2deg);-ms-transform: rotate(2deg);-o-transform: rotate(2deg);transform: rotate(2deg);}
.quote-by {display: block;padding-right: 10px;text-align: right;font-size: 13px;font-style: italic;color: #84775c;}

2. Gunakan kode HTML di bawah ini pada postingan
<div class="blockquote3">
TULISAN YANG DI BLOCKQUOTE
<div class="quote-by">— Nur Ameliya</div>
</div>

D. Contoh Blockquote Keempat

See the Pen Contoh Blockquote 4 by Amel Liya (@risalahliya) on CodePen.

1. Kode CSS pada template
.blockquote4{position: relative;font-family: monospace;display:block;font-size: 15px;line-height: 1.2;color: #666;border: solid 1px #98A81B;  background: #F5F6E8;padding: 28px 60px;}
.blockquote4::before{content: "\201C"; background-color: #FFF;border-radius: 50%;width: 75px;height:75px;font-size: 60px;font-weight: bold;color: #98A81B;text-align: center;line-height: 93px;position: absolute;left: -30px;top: -30px;}
.blockquote4::after{content: "";}

2. Kode HTML pada postingan
<div class='blockquote4'>
KALIMAT YANG DI BLOCKQUOTE
</div>

E. Contoh Blockquote Kelima

See the Pen Contoh Blockquote 5 by Amel Liya (@risalahliya) on CodePen.

1. Kode CSS pada template
.blockquote5 {text-align: center;background: #fff;font-size: 20px;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;position: relative;quotes: "\201C""\201D""\2018""\2019";}
.blockquote5:after {color: #ccc;font-family: Source Sans Pro;content: open-quote;font-size: 80px;position: absolute;left: 50%;bottom: calc(100% - 20px);background: #fff;height: 55px;width: 55px;line-height: normal;text-align: center;transform: translateX(-50%);}
.blockquote5 p {padding: 20px;}

2. Kode HTML pada postingan
<div class='blockquote5'>
<p>KALIMAT YANG DI BLOCKQUOTE</p>
</div>

Demikian kumpulan Blockquote Tampilan Keren Terbaru Dan Cara Membuatnya yang bisa saya bagikan. Silahkan di pilih kalau memang ada yang suka. Jika kurang menarik sahabat bisa mengeditnya sendiri seperti mengubah warna, ukuran, dan karakter fontawesome-nya.

Apabila ada pertanyaan silahkan tinggalkan di kolom komentar. Dan bagi para mastah mohon untuk memberi kritik dan saran jika ada kesalahan.

hal yang membuat tersenyum adalah kebahagian orang lain oleh diriku

13 komentar

Ada pilihan lain berarti ne Mbak Amel...di blog saya masih sederhana bawaan theme-nya...

Oh ya kalo ada waktu buat review theme ini donk...perasaan nyasar kemana aja nemu theme ini terus....sy kan jadi labil mbak...pengen ganti juga hehehe....

Oh iya mas, template ini dari Arlina Design, nama templatenya Simplify 2.,
Dan memang sangat populer, saya juga sangat sering menjumpai template ini di blog2 lain, hehe

hemm, harus menambah beberapa kode html yang diatas ke template kita ya mbak, baru bisa jadi blockquotenya .

Harus ada panggilan di html postingan ya ? tidak bisa secara langsung tekan tombol quote ?

hehehe., iya mas, sengaja seperti itu biar terpisah antara blockquote bawaan template dan blockquote tambahan., jadinya kan bisa nerapin banyak blockquote dalam satu postingan, hehe

Wah ternyata harus menambah kode html ya..!
Saya rasa template simplify ini sudah cocok dengan admin blog ini 👌

Pengen banget bisa sepertimu bisa edit tema, buka tema kayak aku udah dugem rasanya
tapi bolehlah coba tes mental
terima kasih ya

aku suka yang versi pertama dan keempat. tampilannya serasa sejuk gitu deh. keren.

wahhh bagus bangett mbbaa :D responsif lagi

Ingin selalu mencoba hal baru itu termasuk sifat saya. :-d

Dan dari beberapa blockquote di atas, yg ketiga menurutku sangat keren.

x-) Ntar Di Coba Casturiputih.blogspot.com mbak Amel

ETIKA BERKOMENTAR
1. Pastikan membaca dari awal sampai akhir supaya tidak salah paham
2. Silahkan berkomentar dengan bijaksana
EmoticonEmoticon