Memperindah Tulisan Artikel Dengan Blockquote

25 Desember 2011 70 Komentar

Mungkin saja terlintas dalam pikiran anda bahwa pernah menginginkan tampilan posting yang unik dan menarik sehingga setiap pengunjung blog merasa nyaman dan tertarik dengan artikel anda, karena anda manampilkannya dengan tampilan yang berbeda dan unik dari yang lainnya. Dalam mengelola sebuah blog memang terkadang kita membutuhkan tampilan posting yang berbeda dari tampilan standar tema yang kita pilih. Maka untuk Memperindah Tulisan Artikel anda dapat melakukannya Dengan memakai Blockquote. Blockquote biasanya digunakan untuk menampilkan quote/kutipan. Tapi Blockquote bisa dieksplorasi dengan bantuan CSS, misal diberi background warna atau gambar, dirubah bentuk fontnya, ditambah border, dan lain-lain. Maka hasilnya lumayan menarik.

Disini saya menyediakan beberapa contoh kode blockquote yang bisa merubah tampilan posting artikel anda. Anda tinggal copy kode blockquote-nya dan tempatkan pada mode HTML blog anda. Dan setiap kode yang berwarna merah, silahkan dirubah dengan isi tulisan anda yang akan diterbitkan/publish.

Contoh 1

Blog sederhana ini berisi tentang berbagai informasi yang hubungannya dengan Software dan Aplikasi Komputer, Tips dan Tricks, Tutorial, serta Info menarik lainnya. Ma’af jika dalam pembenahan bahasa dan susunan kata pada setiap artikel kurang layak dibaca, karena hanya Sekedar Menuruti Kata Hati

<blockquote style="blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0;">Tulisan Anda</p>
</blockquote>

Contoh 2

Blog sederhana ini berisi tentang berbagai informasi yang hubungannya dengan Software dan Aplikasi Komputer, Tips dan Tricks, Tutorial, serta Info menarik lainnya. Ma’af jika dalam pembenahan bahasa dan susunan kata pada setiap artikel kurang layak dibaca, karena hanya Sekedar Menuruti Kata Hati

<blockquote style="blockquote { margin: 1em 2em; border-left: 1px dashed #999; padding-left: 1em; } blockquote p: first-letter { float: left; margin: .2em .3em .1em 0;">Tulisan Anda</blockquote>

Contoh 3

Blog sederhana ini berisi tentang berbagai informasi yang hubungannya dengan Software dan Aplikasi Komputer, Tips dan Tricks, Tutorial, serta Info menarik lainnya. Ma’af jika dalam pembenahan bahasa dan susunan kata pada setiap artikel kurang layak dibaca, karena hanya Sekedar Menuruti Kata Hati

<blockquote style="blockquote { background-color: #666; color: #fff; padding: 15px; margin: 1em 40px; -moz-border-radius-topleft: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 8px; -moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px;"><span style="color: #000000;">Tulisan Anda</blockquote>

Contoh 4

Blog sederhana ini berisi tentang berbagai informasi yang hubungannya dengan Software dan Aplikasi Komputer, Tips dan Tricks, Tutorial, serta Info menarik lainnya. Ma’af jika dalam pembenahan bahasa dan susunan kata pada setiap artikel kurang layak dibaca, karena hanya Sekedar Menuruti Kata Hati

<blockquote style="blockquote{ background-color: transparent; border-top: 3px double #DC143C; border-bottom: 3px double #DC143C; padding: 5px; font-style: oblique; font-size: 1em; margin-left: 5%; margin-right: 5%;">Tulisan Anda</blockquote>

Contoh 5

Blog sederhana ini berisi tentang berbagai informasi yang hubungannya dengan Software dan Aplikasi Komputer, Tips dan Tricks, Tutorial, serta Info menarik lainnya. Ma’af jika dalam pembenahan bahasa dan susunan kata pada setiap artikel kurang layak dibaca, karena hanya Sekedar Menuruti Kata Hati

<blockquote style="blockquote { background-color: #666; color: #fff; font-weight: bold; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px;"><em><span style="color: #333399;">Tulisan Anda</blockquote>

Contoh 6

Blog sederhana ini berisi tentang berbagai informasi yang hubungannya dengan Software dan Aplikasi Komputer, Tips dan Tricks, Tutorial, serta Info menarik lainnya. Ma’af jika dalam pembenahan bahasa dan susunan kata pada setiap artikel kurang layak dibaca, karena hanya Sekedar Menuruti Kata Hati

<blockquote style="blockquote {-moz-border-radius-bottomright: 30px; -moz-border-radius-topright: 30px; background-color: #f5f6ce; border: 5px solid #b9e35f; padding: 10px;">Tulisan Anda</blockquote>

Contoh 7

Blog sederhana ini berisi tentang berbagai informasi yang hubungannya dengan Software dan Aplikasi Komputer, Tips dan Tricks, Tutorial, serta Info menarik lainnya. Ma’af jika dalam pembenahan bahasa dan susunan kata pada setiap artikel kurang layak dibaca, karena hanya Sekedar Menuruti Kata Hati

<blockquote style="blockquote {-moz-border-radius-bottomright: 30px; -moz-border-radius-topleft: 30px; background-color: #f5f6ce; border: 5px solid #38610b; padding: 10px;">Tulisan Anda</blockquote>

Contoh 8

Blog sederhana ini berisi tentang berbagai informasi yang hubungannya dengan Software dan Aplikasi Komputer, Tips dan Tricks, Tutorial, serta Info menarik lainnya. Ma’af jika dalam pembenahan bahasa dan susunan kata pada setiap artikel kurang layak dibaca, karena hanya Sekedar Menuruti Kata Hati

<blockquote style="blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #f5d0a9; border: 5px ridge rgb(230, 141, 58); padding: 10px;}">Tulisan Anda</blockquote>

Contoh 9

Blog sederhana ini berisi tentang berbagai informasi yang hubungannya dengan Software dan Aplikasi Komputer, Tips dan Tricks, Tutorial, serta Info menarik lainnya. Ma’af jika dalam pembenahan bahasa dan susunan kata pada setiap artikel kurang layak dibaca, karena hanya Sekedar Menuruti Kata Hati

<blockquote style="blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #d8d8d8; border: 5px ridge rgb(224, 213, 130); padding: 10px;}">Tulisan Anda</blockquote>

Contoh 10

Blog sederhana ini berisi tentang berbagai informasi yang hubungannya dengan Software dan Aplikasi Komputer, Tips dan Tricks, Tutorial, serta Info menarik lainnya. Ma’af jika dalam pembenahan bahasa dan susunan kata pada setiap artikel kurang layak dibaca, karena hanya Sekedar Menuruti Kata Hati

<blockquote style="blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #d8d8d8; border: 5px double rgb(206, 212, 36); padding: 10px;}">Tulisan Anda</blockquote>

Contoh 11

Blog sederhana ini berisi tentang berbagai informasi yang hubungannya dengan Software dan Aplikasi Komputer, Tips dan Tricks, Tutorial, serta Info menarik lainnya. Ma’af jika dalam pembenahan bahasa dan susunan kata pada setiap artikel kurang layak dibaca, karena hanya Sekedar Menuruti Kata Hati

<blockquote style="blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #E0ECF8; border: 5px groove rgb(248, 250, 187); padding: 10px;}">Tulisan Anda</blockquote>

Contoh 12

Blog sederhana ini berisi tentang berbagai informasi yang hubungannya dengan Software dan Aplikasi Komputer, Tips dan Tricks, Tutorial, serta Info menarik lainnya. Ma’af jika dalam pembenahan bahasa dan susunan kata pada setiap artikel kurang layak dibaca, karena hanya Sekedar Menuruti Kata Hati

<blockquote style="blockquote { background-position: -10px -7px; border: 1px dashed #FFC600; margin: 20px 10; padding: 0 20px 0 50px; background: url 5% no-repeat #FFF8DD;">Tulisan Anda</blockquote>

Selamat mencoba dan semoga bermanfa’at . . . :)

Baca Artikel Lain :

About these ads

Disimpan dalam Tips & Trik Dikaitkatakan dengan , , ,

Perihal onesetia82
Blog sederhana ini berisi tentang berbagai informasi yang hubungannya dengan Software dan Aplikasi Komputer, Tips dan Tricks, Tutorial, serta Info menarik lainnya. Ma'af jika dalam pembenahan bahasa dan susunan kata pada setiap artikel kurang layak dibaca, karena hanya Sekedar Menuruti Kata Hati . . . Selengkapnya ==>

70 Tanggapan untuk Memperindah Tulisan Artikel Dengan Blockquote

← Komentar terdahulu

  1. Ping-balik: Bacaan Menarik « SUPRIYANTO Blog

  2. Ping-balik: TUTORIAL | MULTIMEDIA DESIGN

← Komentar terdahulu

Beri Komentar Seikhlasnya Saja ==>

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out / Ubah )

Twitter picture

You are commenting using your Twitter account. ( Log Out / Ubah )

Facebook photo

You are commenting using your Facebook account. ( Log Out / Ubah )

Batal

Connecting to %s

%d bloggers like this: