Cara Membuat Tampilan "Blockquote" Keren ala BlogAjaib


Bagi sebagian blogger, istilah "blockquote" mungkin sudah tidak asing lagi. Terutama para blogger yang blognya bertemakan ilmiah, bisa dikatakan hampir mustahil jika mereka tidak tahu apa itu quote atau blockquote.

Dalam beberapa penulisan teks, tak jarang kita menemukan beberapa kalimat yang mereka buat dalam bentuk kutipan penting atau yang disebut dengan blockquote.

Biasanya kalimat-kalimat yang mereka buat dalam bentuk kutipan seperti itu adalah kalimat-kalimat yang berasal dari sumber-sumber referensi tertentu yang mereka anggap penting.


Bagaimana caranya mempercantik tampilan blockquote??
Disini saya tidak akan membahas panjang lebar bagaimana caranya mengaplikasikan blockquote dalam sebuah template, karena sebagai sesama blogger saya yakin sekali bahwa dalam setiap template yang kita gunakan itu sudah ada design tampilannya masing-masing.

Selain itu, tampilannya pun beragam dan sangat cantik-cantik. Bahkan tampilan blockquote blog saya pun masih sangat jauh tertinggal dibandingkan dengan tampilan blockquote blogger lainnya.

Akan tetapi, karena ada beberapa teman yang merequest kode CSS blockquote blogajaib ini, maka saya bersikeras untuk membagikannya kepada sahabat semua.

Nahh... buat sahabat yang masih penasaran bagaimana tampilan teks kutipan (blockquote) pada blog ini, silahkan gulir saja kebawah sampai pada menu "Random Quotes", atau perhatikan gambar diatas!

Jika sahabat tertarik untuk mengaplikasikannya pada blog sahabat, ikuti saja beberapa langkah berikut ini:

Langkah 1

Silahkan edit template blog Anda melalui PC ataupun Android Anda. Caranya bisa melalui dasbor blogger pada opsi Tema, atau bisa juga Anda edit langsung secara offline pada file template Anda dengan mengunduhnya terlebih dahulu.


Langkah 2

Pada tahap selanjutnya, silahkan Salin (Copy) kode CSS dibawah ini:

/* code blockquote 2 */ .style-blockquote { font-family: Georgia, "Times New Roman", serif; max-width: 500px; margin: 0; padding: 40px 60px 30px 70px; background: #fff; border-left: 3px solid #f8f8f8; color: #252525; position: relative; text-align: left; } .style-blockquote:before { font-size: 25px; display:block; position: absolute; } .style-blockquote:before { font-family: FontAwesome; font-style: italic; content: "\f10d"; color: #333; left: 20px; line-height: 40px; top: 35px; } .style-blockquote:after { content: ""; } .quote-source { text-align: right; color: #868686; font-style: italic; font-size: 75%; margin-top: 15px; }

Kemudian buka template yang sudah Anda unduh tadi melalui aplikasi teks editor.

Lalu cari kode ]]>< /b:skin>
kemudian pastekan kode yang sudah Anda salin tadi tepat diatasnya. atau jika template blog Anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template Anda.


Jika sudah selesai, jangan lupa untuk menyimpan dan menguploadnya kembali ke blogger Anda.

Langkah 3

Ini merupakan langkah yang terakhir, yaitu menampilkan teks kutipan atau blockquote pada postingan.

Gunakan kode berikut ini pada postingan Anda:
<blockquote class="style-blockquote"> Ini adalah contoh blockquote keren terbaru saya ala BlogAjaib... <div class="quote-source"> Nama Blog Anda </div></blockquote>
Maka hasilnya:
Ini adalah contoh blockquote keren terbaru saya ala BlogAjaib...
Nama Blog Anda

Demikianlah sedikit uraian mengenai cara mempercantik tampilan teks kutipan atau blockquote keren ala BlogAjaib.Com
Salam Blogger...

0 Response to "Cara Membuat Tampilan "Blockquote" Keren ala BlogAjaib"

Post a Comment

Kata-kata dan bahasa yang Anda keluarkan adalah gambaran kualitas diri Anda...