Membuat Pesan Informasi Dengan Blockquote

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:

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