2 Desain Tampilan Blockquote Info

2 Desain Tampilan Blockquote Info - Memberi tanda pada beberapa tulisan yang menurut Anda penting akan sangat menarik jika tampilannya di desain dengan model blockquote, sehingga pesan yang akan Anda jadikan sebagai info penting akan dengan mudah dipahami pengunjung yang membaca tulisan Anda. Block-quote seperti yang sudah Anda ketahui hanya merupakan tanda baca berupa petik dua (kutipan) yang letaknya disebelah atas kiri sebuah teks seperti ini misalnya:

" SAHABAT BLOGGER 77


Fungsi blockquote sama halnya seperti memberi warna pada beberapa tulisan, atau menggaris bawahin sebuah kalimat yang penting, namun pada blockquote teks info dibentuk dengan tampilan box (block), sehingga kalimat tersebut akan dengan mudah kita temukan kembali karena sudah kita beri tanda. Banyak ragam variasi yang dapat kita buat untuk memberi tanda pada beberapa info penting dengan berbagai tampilan, seperti Cara Membuat Tabel Box Untuk Menyimpan Tulisan di artikel sebelumnya saya memberikan 4 model desain. Untuk tampilan teks box kali ini saya akan membagikan 2 Desain Tampilan Blockquote Info dengan model:

1. Blockquote Skew
Tampilan blockquote ini terbilang sederhana, karena hanya bermain dengan border. Namun sudah saya modifikasi dengan menambahkan beberapa fungsi-fungsi elemen untuk mempercantik gaya tampilannya, seperti border-left,border-right saya kosongkan, sedangkan untuk border-top saya buat double (2 garis), gaya arrow (panah info) saya buat miring dengan CSS transform: skew pada border-bottom. Sedangkan untuk keterangan sumber pesan, saya hanya menampilkan teks profile, sehingga info yang sudah tertulis disana akan diberi tanda dengan nama sipenerbit tulisan tersebut seperti ini:




DEMO SHOW



Bagaimana, sederhana tetapi masih terlihat keren bukan, mau mencoba.? Anda cukup copy kode CSS dibawah ini, lalu letakkan pada formulir kosong postingan mode HTML saat Anda akan menulis artikel baru. Kode lengkapnya seperti ini:

<style type='text/css'>
.skew-quote {max-width: 650px;font-family: 'PT Serif',serif;font-style: italic}
.skew-quote p {
  position: relative;margin: 0 10px;padding: 15px 0;
  font: italic 18px/24px 'PT Serif',serif;
  border-top: 4px double #8c8c8c;
  border-bottom: 1px solid #8c8c8c}

.skew-quote p:after {
  content: '';position: absolute;
  bottom: -9px;left: 42px;width: 15px;height: 15px;
  background: #333;border-left: 2px solid #8c8c8c;
  border-bottom: 1px solid #8c8c8c;
  transform: skew(45deg) rotate(-45deg)}

.skew-quote footer:before {content:'\201C';font:700 25px/normal serif;margin:6px}
.skew-quote footer {font-size: 14px;line-height: 20px;margin:8px 0 0 12%}
</style>
<blockquote class='skew-quote'>
   <p>Tulis Teks Anda Disini...</p>
       <footer>By. Devy Indriyani</footer>
</blockquote>

2. Blockquote Info With Image Profile

Model desain untuk tampilan blockquote yang satu ini pernah saya terapkan fungsinya untuk membungkus tampilan permalink seperti ini:

➟ Widget Profil Penulis Dengan Background Blur Efek
➟ Membuat Widget Author Box Dengan Blockquote

Dan model ini juga yang saya gunakan sebagai tampilan permalink seperti yang Anda lihat letakknya dibawah disetiap tulisan post. Selain profile-name sebagai teks sumber info, tampilan blockquote ini sudah saya lengkapi dengan foto-profile dan text-link, jadi bukan hanya nama saja yang dapat pengunjung baca disana, tetapi mereka juga dapat membuka profile blog Anda pada URL-link. Lebih tertarik dengan tampilan blockquote yang ini, kode lengkapnya sebagai berikut:

<style type='text/css'>
.quote blockquote:after,
.quote blockquote:before  {
  top: 100%;border: solid transparent;
  content: " ";height: 0;width: 0;
  position: absolute;pointer-events: none}

.quote blockquote:after  {
  border-top-color: #ffffff;border-width: 10px;
  left: 75%;margin-left: -10px}

.quote blockquote:before {
  border-top-color: rgba(0,0,0,0.01);
  border-width: 11px;
  left: 75%;margin-left: -11px}

.quote blockquote p {
  font:400 italic 14px/normal 'PT Serif', serif;
  color: #333;padding: 15px;text-indent: 100px;
  position: relative}

.quote blockquote p:before{
  content: '\201C';font-family: serif;font-style: normal;
  font-weight: 700;position: absolute;font-size: 115px;
  top: -0.5em;left: -95px;color: rgba(18, 177, 250, 1);
  text-shadow: 7px 14px 10px rgba(0, 0, 0, 0.1)}

.quote .desc {text-align: right;padding: 20px 100px 20px 20px;position: relative}
.quote .img {
  display: block;width: 77px;height: 77px;
  border: 5px solid #2fe45D;border-radius: 50%;
  background: url(http://URL-Gambar Anda.jpg) no-repeat center center;
  position: absolute;right: 10px;bottom: 5px;
  box-shadow: inset 1px 1px 4px rgba(0,0,0,0.5),0 2px 3px rgba(0,0,0,0.6)}

.quote .profile {font:700 18px/normal 'Alegreya SC', serif;color: #ccc}
.quote cite a:hover{color: aqua}
.quote cite a {font:700 italic 13px/normal 'Alegreya', serif;color: orange}
.info-wrap{width: 600px;margin: 20px auto;padding: 10px 20px;position: relative}
.info-wrap p{margin: 0;padding: 0}
.info-wrap blockquote {margin: 0;padding: 0;position: relative}
.info-wrap cite {font-style: normal}
</style>
<div class="info-wrap quote">
    <div class="img"></div>
        <blockquote cite="http://sahabatblogger77.blogspot.com">
            <p>Tulis Teks Anda Disini...</p>
        </blockquote>
              <div class="desc">
                      <p class="profile">Devy Indriyani</p>
<cite><a href="http://sahabatblogger77.blogspot.com">Sahabat blogger 77</a></cite>
    </div>
</div>

Hasilnya:



DEMO SHOW




Dari ke- 2 Desain Tampilan Blockquote Info diatas, Anda bisa berinovasi lagi. Akan Anda tempatkan dimana atau mau dimodifikasi lagi tampilannya sesuai dengan gaya Anda, namun jangan lupa dibawah tulisan ini sudah dibuka forum tanya jawab, jadi kiranya sahabat semua pecinta SAHABAT BLOGGER 77 mengalami kesulitan, mari sama-sama kita bahas dalam kolom komentar. So....Happy blogging.