Cara Membuat Blockquote Blog Lebih Dari Satu

Cara Membuat Blockquote Blog Lebih Dari Satu - Seperti yang kita ketahui bahwa blockquote adalah pesan penting yang ingin disampaikan penulis blog kepada pembacanya, sehingga dibuatlah tampilan dari pesan tersebut sedikit berbeda dari teks lainnya untuk memudahkan pembaca melihat dan lebih menarik perhatian.

Jadi sudah sepatutnya selaku penulis blog untuk mendesain sedemikian rupa tampilan blockquote yang digunakannya. Hal ini dimaksudkan untuk lebih menarik perhatian pembacanya. Nah, seperti yang teman-teman lihat pada judul postingan kali ini yaitu Cara Membuat Blockquote Blog Lebih Dari Satu. 

Mungkin teman-teman masih ada yang belum mengetahui bahwa terrnyata kita bisa memasang lebih dari satu blockquote di dalam satu postingan blog dengan desain dan tampilan yang berbeda-beda. Oleh karena itu perkenankanlah saya untuk share Tutorial Blog mengenai Cara Membuat Blockquote Blog Lebih Dari Satu tersebut.

Barangkali ada di antara teman-teman yang juga ingin ikut belajar mendesain atau memodifikasi template blognya terutama dalam hal blockquote.

Untuk preview beberapa tampilan blockquote tersebut silahkan teman-teman lihat di bawah ini.

KALIMAT YANG DI BLOCKQUOTE

Catatan :

KALIMAT YANG DI BLOCKQUOTE

TULISAN YANG DI BLOCKQUOTE

— Samber Nyowo

KALIMAT YANG DI BLOCKQUOTE

KALIMAT YANG DI BLOCKQUOTE
KALIMAT YANG DI BLOCKQUOTE
KALIMAT YANG DI BLOCKQUOTE
KALIMAT YANG DI BLOCKQUOTE
KALIMAT YANG DI BLOCKQUOTE

Berikut Cara Membuat Blockquote Blog Lebih Dari Satu tersebut.

1. Masuk ke akun blogger masing-masing. Lalu masuk ke menu Tema kemudian pilih Edit HTML.

2. Tambahkan link CSS Fontawesome di bawah ini sebelum kode </head>. Jika sebelumnya pernah memasang link CSS Fontawesome ini maka langsung saja masuk ke tahpa berikutnya. Gunakan CTRL + F untuk memudahkan pencarian.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

3. Tambahkan CSS Blockquote berikut sebelum kode ]]></b:skin> atau </style>.

/* 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)}

/* 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;}

/* CSS blockquote 3 */

.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;}

/* CSS blockquote 4 */

.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: "";}

/* CSS blockquote 5 */

.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;}

4. Simpan hasil editan tersebut. Sampai pada tahap ini pemasangan blockquote tersebut sudah selesai, tinggal mengaplikasikannya pada halaman postingan.

Gunakan kode HTML seperti yang ada di bawah ini ketika akan memasang atau memanggil blockquote tersebut pada halaman postingan. Ketika akan memasukan kode HTML pemanggil blockquote tersebut masuk ke mode HTML jangan mode Compose.

<div class='blockquote1'>KALIMAT YANG DI BLOCKQUOTE</div>



<div class="blockquote2">

<div class='quote2'>Catatan :</div>

<br />

KALIMAT YANG DI BLOCKQUOTE</div>



<div class="blockquote3">

TULISAN YANG DI BLOCKQUOTE

<div class="quote-by">— Samber Nyowo</div>

</div>



<div class='blockquote4'>KALIMAT YANG DI BLOCKQUOTE</div>


<div class='blockquote5'><p>KALIMAT YANG DI BLOCKQUOTE</p></div>

Demikianlah Cara Membuat Blockquote Blog Lebih Dari Satu dalam postingan blog. Semoga bisa bermanfaat untuk kita semua. Bagi teman-teman semua silahkan untuk berkreasi sendiri dengan tampilan blockquote tersebut, karena yang di atas hanya sebagai dasarnya saja dan masih bisa dikembangkan lagi.

Disini saya tidak bermaksud menggurui hanya sekedar share dan mengingat ulang apa yang pernah dipelajari. Salam blogger Indonesia.