Membuat Pesan Informasi Dengan Blockquote - Membuat pesan teks sebagai pemberitahuan adanya informasi penting yang pada umumnya Anda sisipkan pada artikel blog, akan memberikan pesan tersendiri untuk menjelaskan bahwa disana ada beberapa informasi yang penting untuk di baca yang berkaitan dengan tulisan Anda.

Pekerjaannya cukup mudah seperti saat Memberi Efek Pita Pada Text Box di artiekel sebelumnya, namun dekorasinya sudah saya ubah dan menggantikannya dengan hiasan border seperti ini:


info dialog boxes picture


Top Informasi - Membuat Artikel Terbaru Auto Slide Di Sidebar Blog



Kode Blockquote (Tanda Kutip) saya hilangkan, dan digantikan dengan title="INFO", tampilan minimalis dan simple namun masih terlihat elegan dan keren dengan penggunaan kode CSS seperti ini:


<style type="text/css">
/* lisenci code for info dialog boxes
type: modified blockquote
visit: http://sahabatblogger77.blogspot.com */
.info-box_one,
.info-box_two,
.info-box_three,
.info-box_four {
  border-radius: 1em;
  color: #fafafa;
  max-width: 32em;
  margin: 5% auto;
  padding: 2em 15px 15px;
  position: relative;
  width: 95%;}

.info-box_one:before,
.info-box_two:before,
.info-box_three:before,
.info-box_four:before {
  background: #222;
  content: attr(data-title);
  left: 50%;padding: 0 1em;
  position: absolute;
  text-transform: uppercase;
  top: -0.6em;text-align: center;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);}

.info-box_one em {color:#9ceefe;font:bold italic 19px/normal Georgia;}
.info-box_two em {color:#ff9999;font:bold italic 19px/normal Georgia;}
.info-box_three em {color:#baffad;font:bold italic 19px/normal Georgia;}
.info-box_four em {color:#ffff99;font:bold italic 19px/normal Georgia;}

//text box style (1)
.info-box_one {
  border: 0.2em solid #37ddfd;
  box-shadow: inset 0 0 0.4em #05d5fc, 0 0 0.4em #05d5fc;}

.info-box_one:before {
  border-left: 0.2em solid #37ddfd;
  border-right: 0.2em solid #37ddfd;
  color: #9ceefe;
  text-shadow: 0 0 0.4em #05d5fc;}

//text box style (2)
.info-box_two {
  border: 0.2em solid #ff3333;
  box-shadow: inset 0 0 0.4em red, 0 0 0.4em red;}

.info-box_two:before {
  border-left: 0.2em solid #ff3333;
  border-right: 0.2em solid #ff3333;
  color: #ff9999;
  text-shadow: 0 0 0.4em red;}

//text box style (3)
.info-box_three {
  border: 0.2em solid #64ff47;
  box-shadow: inset 0 0 0.4em #39FF14, 0 0 0.4em #39FF14;}

.info-box_three:before {
  border-left: 0.2em solid #64ff47;
  border-right: 0.2em solid #64ff47;
  color: #baffad;
  text-shadow: 0 0 0.4em #39FF14;}

//text box style (4)
.info-box_four {
  border: 0.2em solid #ffff33;
  box-shadow: inset 0 0 0.4em yellow, 0 0 0.4em yellow;}

.info-box_four:before {
  border-left: 0.2em solid #ffff33;
  border-right: 0.2em solid #ffff33;
  color: #ffff99;
  text-shadow: 0 0 0.4em yellow;}
</style>


Sebelum meletakkan CSS diatas, coba perhatikan kode ini info-box_one, info-box_two, info-box_three, info-box_four. Disana saya membuat pesan informasi dengan tampilan 4 variasi, yang masing-masing tampilan saya bedakan dengan warna yang berbeda. Karena bisa saja Anda menyisipkan 1 atau 2 pesan informasi dalam postingan, tetapi Anda bisa menampilkannya dengan variasi yang berbeda seperti ini:




DEMO SHOW




Sampai tahap ini, pekerjaan Anda sudah selesai. Selanjutnya tinggal meletakkan HTML berikut pada postingan Anda. Untuk menampilkan pesan informasi Anda, cukup ganti tulisan yang saya beri warna Merah pada kode berikut:


<p data-title="Informations Text" class="info-box_one">
<em>INFO:</em> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla commodi tempore voluptatem earum modi suscipit ipsa aspernatur autem amet harum unde assumenda nisi ex consequatur similique cupiditate facere ut nihil velit quos perspiciatis. Repudiandae neque vel aliquam odio doloribus labore.</p>

<p data-title="Informations Text" class="info-box_two">
<em>INFO:</em> Insert your text in here</p>

<p data-title="Informations Text" class="info-box_three">
<em>INFO:</em> Insert your text in here</p>

<p data-title="Informations Text" class="info-box_four">
<em>INFO:</em> Insert your text in here</p>


Malam minggu dirumah, hari libur begini juga di rumah. Tetapi tidak kenapa dech..!!, semoga dengan tutorial Cara Membuat Pesan Informasi Dengan Blockquote kali ini sahabat semua pecinta SAHABAT BLOGGER 77 mau bercerita dikolom komentar dibawah, Devy tunggu ya..! ** Happy Blogging

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Pesan Informasi Dengan Blockquote
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 =

64 komentar

  1. ulalaaaaaa ...... devy emg jago nya css dan html ,,,, :) mw coba praktek dulu dah ,,,,hehehe

    BalasHapus
    Balasan
    1. ulala....sudah kayak syahrini,., hehe..
      memang mirip ya mas AL, mas fiu ini kayak afgan :)

      Hapus
    2. jujur..beliau inih memangg mirip..!,.waktu pertama kali publish fotonya sempat halamnnya direlod beberapa kali..mau pastiin apa inih benar2 mas..Fiu..

      kalaw sy cewe nih..sy pasti naksir dya...iiiiiiiiiiiiiiiiiiiiiiiiii...geliiiiiiiiiiiii...!

      Hapus
    3. hihihi.... terong-terongan donk kalau mas AL naksir sama mas Fiu.

      Hapus
    4. hehehe..bisa jg si Vy inih becandanya..boleh..bole..boleh..

      Hapus
    5. kayaknya akrab banget deh
      saya menyimak aja

      Hapus
    6. devy@ ulalaaaa ,,,,, wah ,,, udah mulai ikut2an mas aldino nih sy mirip afgan ,hehehe :)

      mas aldino @ Aaaiisssssyyyyyyyyyy ...... pasang pembatas mana pembatas ,,,,, untuk gk naksir beneran mmmhahahaha :-)

      Mas yanto@ HEHEHEHE,,,, ikutan aja mas yanto ,,, klo nyimak doank bk seru ,,, :)

      Hapus
    7. Mas afgan..!, saya jg cantik koq, kayak si tuan rumah..masak gak mau..mubasir loh Mas..!,..ntar sy yg traktir deh.. (makan pion Mas Yanto..!,..)

      Hapus
    8. Artikelnya mantabs, sampek-sampek saya gak kebagian komen,.. ya udah di komennya mas Fiu yang baek itu hehe

      Hapus
    9. whaaaaaatsssss? sejaka kapan mas aldino tuh cantik ? :-?
      biar ditraktir klo mas aldino yg naksir ttp gk mw ah ,,,,wkwkwkwkwkwkwkwk

      uppps kang abu Z@ JADI tersepona nih dibilang baek ,,,xixixixixixix =))

      Hapus
    10. hayoo..ketahuan neh sudah mulai rayu-rayuan,,hihihi...

      Hapus
    11. Blg saya kalau didandanin pakai pesan informasi ini
      Pasti akan lebih keren ya Mbak Devy. ijin bookmark Mbak thanks,.

      Hapus
    12. kali saja ingin membuat informasi khusus dalam postingan, sehingga postingan ada seninya sedikit, gitu loh mas, hehe..
      tetapi hanya sedikit sih..

      Hapus
    13. ini dia yang harus saya razia malam ini...afgan gadungan...wkwkwk

      Hapus
    14. bukan gadungan pak uztad, tetapi ASPAL (Asli apa palsu) hehe..

      Hapus
    15. hahahahahahahahahaha,,,,,, mana borgol mana borgol ..... =))

      Hapus
  2. Balasan
    1. pinjem pakai atau pinjem memiliki neh,, hehe

      Hapus
    2. kalau bisa memiliki..lebih bagus..lagi..

      coba liat Vy..tampilannya aneh..itu pengaruh apa ya..td simpan di postingan kodenya..diambil satu2 (style satu saj)

      Hapus
    3. hehe..bisa kok mas memilki, tapi jangan untuk selamanya ya,

      sudah Vy perhatikan, kodenya tidak ada yang salah kok mas, mungkin pemisah kode ( , ) saat menggunakan 1 tampilan style, kode tersebut tidak di hapus, coba hapus tanda koma sebagai pemisah kode mas.

      Edit Kode Disini

      Hapus
    4. ya..sukses Vy..! liat skali lagi ya..Plizz..!

      Hapus
    5. seip. sudah devy lihat, dan hasilnya menarik kan.? hehe..

      Hapus
    6. ih .... curang ,,,, kok sy blm liat sih ,,,,,, :>)

      Hapus
    7. Mas Afgan..!, sini donk Mas..!, dekat dgn mba AL..!

      Hapus
    8. ih gak mw ah gak mw ,,,,,,, $-)

      Hapus
    9. kalau gak mau dekat, tarik aja mas Al..!!

      Hapus
    10. klo yg narik devy sih sy mw ,,,,,,wkwkwkwkwkwkw @-)

      Hapus
  3. gila. mabok kode-kode nih. ane bener2 buta soal css. kamu jago banget yak. kapan2 tak coba dah.

    BalasHapus
    Balasan
    1. wadduh, ;((
      mas Al,, mas Tomi ngatain Devy gila neh, hehe,,..!!

      sekarang juga bisa dicoba mas, jangan kapan-kapan attuh,

      Hapus
    2. :-) ..!, mungkin juga..! :d

      Hapus
    3. hmm..mas Al gak asyik ahh,, gak mau belain Vy, hehe..

      Hapus
    4. kang fiu : emang belum dikasi liat apaan sama kang aldino :p

      Hapus
  4. nah kalau yg tutor ringan kayak blockquote seperti ini wajib disimpan mbak,soalnya sangat diperlukan blog

    BalasHapus
    Balasan
    1. benar sekali mas, karena saya merelokasikan penggunaan warna background default blog yang ingin membuatnya, jadi disana tidak saya sisipkan kode background, tinggal mengikuti warna background sipemilik blog saja.

      sangat ringan dan tidak menggangu loading posting

      Hapus
  5. Neng hadir buat ngucapin mantabsss

    BalasHapus
  6. kalau untuk quotnya sebagus ini ntar jadi keseringan bikin pesan di dalam postingan mbak :-)

    BalasHapus
    Balasan
    1. kan biar lebih semangat lagi kang buat artikelnya..

      Hapus
  7. mau langsung dicoba daripada penasaran ... :)

    BalasHapus
  8. Setelah saya lihat ke 4 demo pesan informasi ini cantik dan keren sekali
    Mbak Devy, jadi terpikat nih saya, ijin coba ya Mbak? makasih :)

    BalasHapus
    Balasan
    1. sudah banyak yang terpikat dengan tutorial ini, namun belum juga ada yang terpikat dengan adminnya,,sedih dech.. (p) heheh..

      Hapus
  9. saya agak usah memahaminya nih. Maklum aja dasar dasar HTML aja kurang Mahir. Nanti saya minya eh minta bantuan teman kantor aja deh nerapin code code ini. Heihiehiehiehiehiehiehie Maksih sudah berbagi

    BalasHapus
    Balasan
    1. gak apa-apa kang kasep, eh kang asep, pelan-pelan saja..(KOTAK)

      Hapus
  10. selalu mantab artikelnya mbak devy...salam hangat di malam yang indah...izin nyimak artikel lainnya :)

    BalasHapus
    Balasan
    1. pak Uztad selalu saja menyimak, kapan neh mau prakteknya, katanya mantabs..!! (p)

      Hapus
    2. saya sudah praktik berkali2 mbak..suwer deh...tapi yaitu, belum paham juga...malah seringnya amburadul...

      Hapus
  11. emang sangat keren dan terlihat banget kalau menggunakan pesan informasi dengan blockquote artikel kita jadi profesional dan canggih.
    boleh juga di pasang di salah satu blog saya nih.
    makasih berbagi ilmunya ya neng.

    BalasHapus
  12. blackquote sangat berguna untuk menampilkan kalimat inti dari postingan atau kalimat yang menarik

    BalasHapus
    Balasan
    1. benar mbak, jadi pengunjung tidak merasa bosan kalau membaca tulisan kita,

      Hapus
  13. wahh kereeenn nihh mbak ilmu barunya dan tadi saya lihat demonya koq bahasanya anehh yah :D

    BalasHapus
    Balasan
    1. pakai bahasa inggris kok aneh, gimana kalau pakai bahasa cina, lebih aneh kali, hehe.. :-)

      Hapus
  14. Mantab tu mba devy, kalo blockquotenya bisa seperti itu pasti informasinya tambah lebih cepat sampai, karena lebih mencolok mba.

    BalasHapus
    Balasan
    1. lebih cepat dipahami, lebih cepat ditangkap, karena pakai jaringan 3,5G, hehe..

      Hapus
  15. Kijang satu..! Kijang satu..monitor ganti..!

    Roger..! ganti..!,..sip..!
    Kijang satu standby di jendela..ganti..!

    Ajal satu..bagaimana..? apa masih diposisi..? ganti..!

    Sip..!,
    gerbang tiga..gerbang tiga..bagaimana.?.clear..? Ok dimonitor,...!

    camera 4..!,..??,..Cepat diperiksa gantii..! tuan putri jangan sampai tau..!,,move..move..! :-t
    OK SEMUA...! KEEP ROLLING...!

    BalasHapus
  16. keren abis mbak postinganya,,, tapi saya ga mudeng.. hehehe...
    kunjungan perdana mbak bro!! visit back ya! maklum masih newbie :3

    BalasHapus
  17. weh sepertinya kreen ya, nanti saya coba dulu di blog percobaan saya, makasih shareannya.

    BalasHapus
  18. bagus tipsnya mbak, coba saya terapkan di blog saya yang lain ya... makasiii.. :)

    BalasHapus
  19. Bagus tipsnya mbak, tapi aku kurang terlalu paham sama yang namanya HTML kayak gitu -_-

    BalasHapus
  20. Haloo Mbak Devy, udaah lama ihh aku gak mampir ke sini :D
    *soalnya udah lama juga engga ngotak ngatik html hhi*
    makiin kereen keren aja nih mbak tutornya :D

    BalasHapus
  21. Mkasih mbk tutorialnya,, sngat bermanfaat

    BalasHapus
  22. Jadi kepengen belajar HTML sama CSS juga ;(( ;(( ;((

    BalasHapus
  23. Andai kata mendesain web sama mudahnya seperti mendesain poster , saya pasti udah obrak abrik tuh template simple dari blogger. Sayangnya saya belum terlalu paham koding.;-(. Nyimak dulu sajalah.. tapi nanti akan saya coba, sekalian dimodif kalo bisa hehe..

    BalasHapus
  24. keren sangat kreatif pesan info bergaya blockquotenya. terima kasih atas tutorialnya gan.

    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