Recents Posts

Saturday, June 30, 2018

Cara Menciptakan Kotak Catatan Atau Blockquote Keren Pada Postingan Blog

Leave a Comment
Cara Membuat Blockquote Pada Postingan Blog Cara Membuat Kotak Catatan Atau Blockquote Keren Pada Postingan Blog

Blockquote atau yang biasa kita kenal dengan kotak catatan, merupakan sebuah arahan embel-embel yang akan menciptakan postingan blog anda nampak lebih menarik dan profesional.

Dikatakan sebagai Blockquote alasannya ialah memang fungsinya ialah untuk menempatkan Quote atau kata bijak. Namun seiring berjalannya waktu, Blockquote tidak hanya dimanfaatkan sebagai kawasan untuk menulis kata-kata bijak, namun juga kata-kata lainnya.

Tampilan Blockquote yang akan kita buat ini sangatlah berbeda dengan Blockquote pada umumnya. Disini kita akan berguru bagaimana cara menciptakan Blockquote yang lebih keren dan lebih elegan dari pada Blockquote yang biasa.

Kita akan berguru menciptakan Blockquote yang sederhana, dengan tampilan warna Flat UI, dan efek lipatan keren yang pastinya akan menciptakan Blockquote kita akan lebih seolah-olah dengan kotak catatan asli. Menarik sekali bukan?

Untuk sanggup menciptakan dan mengaplikasikannya pada postingan blog, anda hanya perlu meletakkan beberapa arahan kedalam tema blog anda. Dan jika berhasil anda bisa mengaplikasikannya eksklusif pada postingan blog anda.

Saya rasa anda sudah tidak sabar lagi untuk mengetahui caranya. Baiklah silahkan ikuti caranya dibawah ini;

1. Masuk ke www.blogger.com
2. Pada dashboard blogger silahkan pilih Tema>>Edit HTML
3. Copy arahan berikut dan letakkan sempurna diatas kode ]]></b:skin> atau </style>
/* CSS Note */ .note{position:relative;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden} .note.yellow{background:#f1c40f} .note.red{background:#e74c3c} .note.blue{background:#3498db} .note:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #27ae60 #27ae60;background:#27ae60;box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);display:block;width:0} .note.yellow:before{border-color:#fff #fff #f1c40f #f1c40f;background:#f1c40f} .note.red:before{border-color:#fff #fff #e74c3c #e74c3c;background:#e74c3c} .note.blue:before{border-color:#fff #fff #3498db #3498db;background:#3498db}
4. Simpan Tema

Untuk sanggup memakai Blockquote pada postingan blog, silahkan ikuti cara berikut:

1. Pada dashboard blogger pilih Postingan>>Entri Baru
2. Masuk pada mode HTML (bukan "Compose")
3. Masukan salah satu arahan berikut pada tab HTML tersebut:

Blockquote warna Biru
<div class='note blue'>...ISI DENGAN CATATAN...</div>

Blockquote warna Merah
<div class='note red'>...ISI DENGAN CATATAN...</div> 

Blockquote warna Kuning
<div class='note yellow'>...ISI DENGAN CATATAN...</div> 

Blockquote warna Hijau
<div class='note'>...ISI DENGAN CATATAN...</div> 

Catatan:
Ubah goresan pena yang bertanda Hijau sesuai cita-cita anda!
Catatan:
Blockquote yang saya bagikan disini mempunyai 4 warna berbeda, yaitu Hijau, Kuning, Merah dan Biru. Jika anda ingin mengubah warna pada Blockquote diluar 4 warna tersebut, anda bisa mengganti arahan warna pada script yang akan anda gunakan.
4. Lakukan Pratinjau untuk mengetahui hasilnya.
5. Selesai.

Itu ia cara gampang memasang Blockquote pada postingan blog. Sekarang tampilan postingan anda akan lebih menarik dan terlihat profesional pastinya.

Dan untuk selanjutnya anda bisa berbagi cara ini sesuai kemampuan anda. Semoga sanggup bermanfaat, dan tamat kata saya ucapkan terimakasih dan hingga jumpa.
If You Enjoyed This, Take 5 Seconds To Share It

0 Comments:

Post a Comment