Memperindah Tulisan Artikel Dengan Blockquote

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

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 ==>

71 Responses to Memperindah Tulisan Artikel Dengan Blockquote

  1. Ping-balik: Bacaan Menarik « SUPRIYANTO Blog

  2. Ping-balik: TUTORIAL | MULTIMEDIA DESIGN

  3. Ping-balik: Teknik Dasar Cara Mewarnai Rambut Dengan Photoshop | multimedia tutorials

Beri Komentar Seikhlasnya Saja ==>

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d bloggers like this: