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
Blockquote pictures


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.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= 2 Desain Tampilan Blockquote Info
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

81 komentar

  1. selalu penuh dengan inovasi segar, sukses terus mbak Dev.

    BalasHapus
  2. bagus nih tampilan blockquotenya, jadi lebih menarik

    BalasHapus
  3. iya sederhana tapi terlihat simple dan cantik ,,,, hehe

    yg ini mw sy cba pasang di blog sebelah ah ,,, walau puyeng ,,, tapi tak coba dulu, hehehe berhasil atau gk urusan belakang..hehehe ... kn ada devy klo sy gagal ,,, :)

    BalasHapus
    Balasan
    1. sy dah nyoba pasang ... tapi kok photo nya nda nongol yah ...heheh

      bantu aku devy ,,,, :)

      Hapus
    2. hehe.. kurang menggigit.. Mas Fi..!,

      Hapus
    3. biat menggigit banget gmn tho mas al ? hheee

      Hapus
    4. belom ada rebananya.., tung taak..tak tung taak.. tung taak tak tuung taak..!,

      Mas Fi .. ada yg bau wangi nih /..berasa nda?..

      Hapus
    5. .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)}


      ganti background dengan URL gambar mas Fiu, jangan gambar Devy ya, hehe..

      Hapus
    6. ow .... pantes ,, sy gk aca ada tulisan url gambar anda ... klo gmbar devy boleh kan ? xixixixi ?

      Hapus
    7. boleh kok mas, apa sih yang gak kalau sudah mas Fiu yang minta,,hehe.
      (prettttt....)

      Hapus
    8. asik ,,,,hehehehe .... tpi masa sih klo sy minta pasti dibolehin ? hehehe :)

      Hapus
    9. selama itu tidak merusak MORAL bangsa kaum wanita, kenapa gak mas, hehe..

      Hapus
    10. sip .... Insya Allah nggak kok ... devy tenang aja ,,,, hehehe (f)

      Hapus
    11. soalnya bukan kenapa-kenap mas, sampai saat ini Devy bisa dibilang masih pilih-pilih mencari cowok atau apalah, bukan karena sesuai type, tetapi karena devy dah banyak trauma dengan hal-hal sepele seperti ini yang berujung pada rasa merana.

      gitu mas.

      Hapus
    12. hehehe, justru itu bgus buat devy ,,, mengambil pelajaran dri kejadian2 seblmnya biar gak terjadi lg ,,, (h)

      Hapus
    13. kok jadi curhat, sudahlah lupakan..bay.....

      Hapus
    14. xixixixixixxi ,,, iya lupakan ,,,, kita kembali ke laptop ......!!!! :)

      Hapus
    15. pemirsa...eya..eya,,eya..eya..
      tuh ka, bahasannya jadi semakain kacau, tadi tentang curhat, sekarang malah bahas pak TUKUL, kalau sudah ketemu dengan mas FIU, bawaannya jadi kacau, haddewhhh...hehehe..

      Hapus
    16. hehehehehe ... kan biar selalu ceria ,,, gak cemberut + manyun terus ....
      di dumay aja kek gini, gmn klo ketemu beneran ya ? hehehehe :p

      Hapus
    17. kalau ketemu beneran palingan juga mas fiu, gaya tangannya lemah gemulai (iya cinn) :d

      Hapus
    18. ih .... ogah deh ... klo gtu....bahahahahaha ... :p

      Hapus
  4. saya seneng yang ke dua mbak, keren dan elegan (o)

    BalasHapus
    Balasan
    1. bener mas, karena terlihat cantik dan elegan, model itu juga yang saat ini Devy gunakan sebagai tampilan permalink

      Hapus
  5. background nya gausah diganti boleh ga cz aku mau tetep pakai fotonya mbak devy :d

    BalasHapus
    Balasan
    1. pake photonya sy aja deh kg jum biar makin keren ,,,,hehehehe :p

      Hapus
    2. lebih keren lagi kalau pakai foto kita berdua mas Fiu..xixixi...

      Hapus
    3. sy setju deg devy .... tuh kg jum pasa foto kita berdua yah ,,, sy ama devy dijmin lbh keren ...hehe x-)

      Hapus
    4. lemas seketika melihat kekompakan diantara kalian berdua ini.
      (hallah bahasane)
      okey mas fiu ntar saya kasih fotonya mas fiu sama mbak devy dech.
      foto mas fiu : 2%
      mbak devy : 98%
      setuju ga mbak devy :d

      Hapus
    5. hmmm...kurang setuju sih mas, 2% masih terlalu banyak buat mas Fiu, kasih 0.2% saja sudah lebih dari cukup, pasti mas Fiu setuju.xixixix....

      Hapus
    6. jlebbbb .... kiraen teh devy bilng kurang stju mw jdi fifty : fifty ... eh mlh jdi 0.2% ...hehehe ....

      skitny tuh dsini ,,,,hehehe :o

      Hapus
  6. dah sy coba berhasil ,,, tpi fotnya yg kgedean apa yah ,,, yg muncul cuma idung ama bibir nya doank nih ,,hehehe

    BalasHapus
    Balasan
    1. ganti format dimensi gambar menjadi s80 sampai ketemu sesuail lingkaran.

      http://1.bg.JJJlmmmm......../s1600.jpg, ganti s1600 menjadi s80.

      Hapus
    2. sip ,,, jadi deh ,,,, devy mmg cerdas euy ,,,, hehehe

      kira2 kpn yh mw psng fotony devy ....heeee :)

      Hapus
    3. mau dipasang dimana mas, devy kagak mau ah kalau foto devy di iklankan di blognya mas Fiu,

      semua format gambar di blog ini, sudah devy licensikan loh mas, jadi jangan dicuri, nanti mas bisa terkena banned, mau..?..hehe..

      Hapus
    4. eh .... gak di blog ,,, tapi di hati sy ......hahahahahahahahahah :p

      oiya ,,, klo blockquote mw di patenkan di css caranya sama gk dg yg ada di judul "Membuat Widget Author Box ,,,,,,

      Hapus
    5. kalau untuk widget author kan menggunakan perintah untuk memanggil tag title dimana widget ini berada, misalnya artikel dengan judul ini, maka widget akan merespon dan mengambil judul itu untuk ditampilkan, begitu seterusnya pada halaman posting artikel yang lain,

      elemen CSS sama, namun ada tambahan perintah HTML yang langsung dibalut dengan kondisional tag. kalau caranya mas fiu bisa pelajari disni..

      Smart-Link Blogger Author Profile

      Hapus
    6. sebentr sy pelajari dulu ,,,, hehehe :)

      klo yg judul "Membuat Widget Author Box Dengan Blockquote"

      sy dah coba buat tapi kok hasilnya lebar dan panajng yah ,,, sudah gtu tulisan author dan link nya gak teratur (numpuk) he

      Hapus
    7. format-format dalam CSS saya membuat manual mas, bukan responsive, karena berpikir dengan sahabat lain yang ingin meng-edit agar tidak menemukan kendala saat melakukannya..

      mas tinggal lakukan perubahan pada lebar widgetnya mas, jika kode responsive widget sudah tertanam di Template yang mas pakai, maka widget itu tidak perlu diubah dimensi lebar dan tingginya..

      fokus pada kode width

      Hapus
    8. okeh ... siap master devy .... heee ...segera laksanakan ..... hehehee (o)

      devy jngn bosen klo sy tny mulu ttg css dkk yah ... mklum sy msh blm menguasai ...heeee

      Hapus
    9. tadi sudah Devy lihat hasilnya, tidak ada yang berantakan kok mas, hanya deskripsi teks tidak muncul sempurna seperti tampilan DEMO.
      kita ambil contoh tampilan Widget Author Box Dengan Blockquote

      sesuai dengan elemen CSS, kode pemanggil HTMLnya seperti ini:

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='mb-wrap mb-style-3'>
      <div class='mb-thumb'>
      </div>
      <blockquote cite='http://sahabatblogger77.blogspot.com'>
      <p>TERIMA KASIH ATAS KUNJUNGAN SAUDARA</p><div style='padding:12px 5px;'>
      Judul= <b><span itemprop='itemreviewed'><data:post.title/></span></b><br/>
      Ditulis oleh= <b><span itemprop='reviewer'><data:post.author/></span></b><br/>
      Rating Blog <span itemprop='rating'>5</span> dari 5<br/>
      Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke &gt;&gt; <div style='font-family: Arial;font-size: 13px;font-weight:400;'><a expr:href='data:post.url' expr:title='data:post.title' target='_blank'><data:post.url/></a></div><blink><div style='text-align: center;color: red;font-size: 17px;'><b>= TERIMA KASIH =</b></div></blink></div>
      </blockquote>
      <div class='mb-attribution'>
      <p class='mb-author'>
      Devy Indriyani</p>
      <cite><a href='http://sahabatblogger77.blogspot.com' target='_blank' title='My Website'>Join To Sahabat Blogger 77</a></cite>
      </div>
      </div>
      </b:if>


      barangkali ada kode yang salah penempatan letak.

      Hapus
    10. tidak brantakan ? devy liat diman ? kn sy dh delete ... yg ada bru satu yg dipasang di post (html) hehe

      Hapus
    11. sebelum mas Fiu delete, tadi devy lihat widgetnya sudah terpasang disalah satu blog mas pada artikel rebana..hehe..

      Hapus
    12. hehehehe.... ih ternyata dh liat duluan tho ...hehehe
      iya tapi kn tadi tulisan Fiu dan Choppie88 numpuk kn ? hehe

      Hapus
    13. tidak mas, serius..
      hanya deskripsi teks yang tidak tampil sempurna,

      Hapus
    14. klimat ini "//link desain blockquote by //don't editting in area please... "
      kok muncul di atas tulisan terima kasih ?

      Hapus
    15. yang sabar ya mbak devy, abang aku yang satu ini emang banyak tanya. terlebih lagi kalau sama cewek cantik kaya mbak devy. pasti ada saja sepikan ala #mbak_deva

      Hapus
    16. itukan hanya sebagai intruksi keterangan teks yang saya sisipkan langsung pada kode area..jangan ikutan diCopy attuh mas, hehe..
      dihapus saja.

      Hapus
    17. ow jngn diikutin tho ..hehehe.... klo yg ikut devy sh gpp deh ,, :)

      Ah mas al ,,, dh di kasih makan blm kodok nya ?

      Hapus
    18. tuh kn bner ada tulisan yg numpuk.... hehe

      Hapus
    19. kalau masih terlihat menumpuk, tambahkan kode paragraf pada teks pertama, contoh seperti ini:

      Fiu. S<br/> ←
      Choppie88

      Hapus
    20. yeee ... jadiii ....hehehe

      Hapus
    21. selamat ya sudah jadian sama blockquote nya, hehe..
      semoga langgeng hubungannya

      Hapus
    22. yah ..kok ama blockquote sih... knp gk ama adminnya aja coba ,,,, heheee :p

      Hapus
    23. eh .... sy cri tuk merubah warna tanda kutip di pjok kanan atas kok gk ada yah ? hehe

      Hapus
    24. masa sih..?? lihat pada CSS ini mas:

      .mb-style blockquote:before{
      color: rgba(255,255,255,0.2);
      position: absolute;
      content: '\201C';
      font-size: 150px;
      line-height: 130px;
      font-style: italic;
      top: 0px;
      right: 20px;
      font-family: Cambria, Georgia, serif;
      /*tambahkan kode background*/

      background:....;}


      mas tinggal tambahkan kode background-nya saja, contoh seperti ini:

      Hapus
    25. yg ini : color: rgba(255,255,255,0.2); ...
      utk merubah biar jd warna putih ?

      Hapus
    26. itu sudah color-white, tinggal mengatur kepekatan warna saja mas, ubah menjadi seperti ini:

      color: rgba(255,255,255,1);

      Hapus
    27. yeeeee .... jadi lagi ,,,hehehe ... maksih yah devyyyyyyyy ..... (f) hehe

      Hapus
  7. keren nih mbak blockquote nya,
    saya sering ngeliat ini sama blog tetangga..tapi pusing gimana cara bikinnya...hehe

    BalasHapus
    Balasan
    1. tetangganya juga pasti pusing mas, soalnya widget yang mas tanyakan dibahas ditetangga lain, hehe..

      Hapus
    2. termasuk sy ... udah pusing dari tadi pagi ...hehehe

      Hapus
    3. seperti biasa mas, tidak semua kode yang saya publish ditampilkan secara sempurna, karena jika hanya tinggal Copy, sahabat lain tidak akan pernah tahu bagaimana bermain editing HTML.

      beberapa elemen lay-out seperti:
      - margin,
      - padding, dan
      - peramban detector kode tidak selalu saya sertakan. tujuannya

      Agar mereka paham dan cepat mengerti tingkat kesalahan apa dan bagaimana mengubahnya, dengan begitu akan terbiasa jika menghadapi dunia kode pada blog ini.

      sama seperti mas Fiu, kalau seandainya kodenya tinggal pakai, bagaimana mas mau mengubahnya sesuai selera, dengan begitu mas akan sedikait paham kan dengan semuanya.hehe..

      Hapus
    4. iya ,,,, gtu lbh bagus jadi gak sllu asal caplok ,,,,heheh ,, devy mmg sesuatu deh ,,, bkin mkin nggreget aja ,,,,hehehehe :p

      Hapus
    5. semuanya sudah beres, jadi devy nyatakan forum tanya jawab ini ditutup untuk sementara, karena devy mau mandi, biar wangi karena mau ajak mami jalan-jalan sore dulu keliling kota, hehe..

      devy pamit off dulu ya mas, dan buat semua pecinta SAHABAT BLOGGER 77 devy ucapkan terimakasih sudah mau hadir di blog ribet ini, see u guys..

      Hapus
    6. @uda widkey: yang pasti tetangganya juga pusing buatnya dan lebih pusing lagi kalau kalau yang ngeliat blockquotenya ikutan pusing...jadi pusing-pusingan deh gara-gara blockquote

      Hapus
  8. menarik juga ya dev...bisa kita pendekin kodenya dengan memasang css dalam template terus tinggal menggunakan html blockquote pendek dalam postiing ya dev...ok tertarik sama yang pertama....biasalah yang pertama selalu menarik ya gan....heheheee....ok saya izin menggunakan blockquote yang pertama dev...ok deh makasih...

    BalasHapus
    Balasan
    1. tetapi banyak loh mbah, kalau yang ke-2 itu lebih disempurnakan tampilannya, karena mengikuti gaya yang pertama, kan ada kesempatan ke-2 jika pertama belum berhasil, hehe..

      salam sukses mbah

      Hapus
    2. akhirnya saya sederhanakan sista devi...dan lumayanlah untuk meambah modis tampilan dalam posting heheheee

      Hapus
    3. hampir lupa mengucapkan terima kasih....terima kasih yaaa...sista devi...oh ya kalau namamu di disingkat jadi dev...jadi kayak orang india heheheee #guyon

      Hapus
  9. untung aku baca dulu tadinya mau tanya : ini apaan? hehe.. kayaknya aku perlu juga buat memberi warna posting beberapa kaidah ya dev ya..

    BalasHapus
  10. mantap nih! buat percobaan keren

    BalasHapus
  11. Ya salam.. dapat ilmu lagi nih. makasih mbak. izin pake. :D

    BalasHapus
  12. kayaknya kalau lomba komentar mas fiu juaranya dech (c)

    BalasHapus
    Balasan
    1. tidak apa attuh mas, mungkin ada beberapa hal yang ingin ditanyakan, jadi beliau bertanya dan terus bertanya, kan lebih baik kalau kita saling belajar bersama.

      devy juga sering lakukan hal yang sama kok, jika sesuatu hal yang belum ditahu, pasti bertanya, karena memang ingin tahu dan ingin segera menguasainya.

      Hapus
    2. sebenernya saya juga pengen tanya banyak hal mbak, tapi berhubung sayanya sudah gada kompi jadinya hanya bisa komen oot. mau praktek tapi ga bisa lewat andro mbak :-(

      Hapus
  13. Ga bisa di blog saya gunakan sekarang mba.. (p)

    BalasHapus
  14. mantap.... pinter banget mbak (h)

    BalasHapus
  15. blockquotenya bagus tuh, bisa mempercantik tampilan posting (h)

    BalasHapus
  16. Devy... It's really really cool. Kapan-kapan aku boleh coba ya :-d

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK