ADD Quote Info on Article Blog – Membuat Pesan Penting (berwarna) di dalam artikel dengan CSS3 Valid HTML5 dan Full Responsive. Kali ini saya akan membuat artikel sederhana mengenai tutorial membuat sebuah quote atau pun pesan singkat dengan tampilan yang unik di dalam artikel kita tentu kita bisa memodifikasi nya sesuka hati kita, hanya perlu modal paham mengenai CSS kita bisa membuat segalanya menjadi lebih indah 🙂 :wee untuk contoh quote yang ada pada blog x komo.
ini quote / block pesan yang saya gunakan untuk menyampaikan informasi.
Quote untuk peringatan atau hal penting.
ini quote saya gunakan untuk membuat artikel terkait
Di atas adalah beberapa quote yang saya gunakan 😀 Untuk kamu yang ingin mencoba nya bisa ikuti tutorial saya ya hihi :keren Pahami dan ikuti secara bertahap :ok
CSS
Style Quote Simple
.info,.tips,.penting{
padding:5px 12px;
margin:5px auto;
max-width:650px;
width:auto;
border-radius:3px;
border: 1px solid #eee;
}
.info {
background-color:rgb(38, 143, 255);
color:white;
}
.tips {
background-color:#00D2A2;
color:white;
}
.penting {
background-color:#D20000;
color:white;
}
Style Quote Flat Ui Colors
.info,.tips,.penting{
padding:5px 12px;
margin:5px auto;
max-width:650px;
width:auto;
border-radius:3px;
border: 1px solid #eee;
}
.info {
background-color:#3498db;
color:white;
}
.tips {
background-color:#2ecc71;
color:white;
}
.penting {
background-color:#e74c3c;
color:white;
}
Style Quote With Font Awesome
Untuk CSS yang ini, Wajib dalam blog sudah terinstal/terpasang CSS dari Font Awesome
.info,.tips,.penting{
padding:5px 40px;
margin:5px auto;
max-width:650px;
width:auto;
border-radius:3px;
border: 1px solid #eee;
position:relative;
}
.info:before,.tips:before,.penting:before{
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #FFF;
font-size: 28px;
padding-right: 0.5em;
position: absolute;
top: 10px;
left: 9px;
}
.info:before{
content: "f05a";
}
.tips:before{
content:"f06a";
}
.penting:before {
content:"f071";
}
.info {
background-color:#3498db;
color:white;
}
.tips {
background-color:#2ecc71;
color:white;
}
.penting {
background-color:#e74c3c;
color:white;
}
Style Quote Icon on The Right
.info,.tips,.penting{
padding:5px 12px;
margin:5px auto;
max-width:650px;
width:auto;
border-radius:3px;
border: 1px solid #eee;
position:relative;
}
.info:before,.tips:before,.penting:before{
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #FFF;
font-size: 28px;
padding-right: 0.5em;
position: absolute;
top: 10px;
right: 0px;
}
.info:before{
content: "f05a";
}
.tips:before{
content:"f06a";
}
.penting:before {
content:"f071";
}
.info {
background-color:#3498db;
color:white;
}
.tips {
background-color:#2ecc71;
color:white;
}
.penting {
background-color:#e74c3c;
color:white;
}
Kode di atas adalah beberapa style dari CSS yang bisa kamu gunakan, Silahkan pilih salah satu atau style mana yang akan kamu modifikasi nantinya, semua sesuai selera kamu.
Nah bagaiman cara menggunakan Kode CSS di atas pada Blog kamu? Cara nya cukup sederhana.
- Pertama – tama Pilih Style CSS yang ingin kamu gunakan di dalam blog.
- Kedua, Copy + Paste Kode CSS tersebut di dalam template kamu tepat di atas </style> atau ]]></b:skin>
- Setelah di Copas silahkan di save 🙂
HTML
di atas adalah cara menyimpan CSS nya di dalam blog. Lalu bagaimana menggunakan nya di dalam postingan ?
Silahkan pahami Kode HTML Berikut:
<div class="info">
Info:
<br/>
quote untuk info blog
</div>
<div class="tips">
Tips:
<br/>
quote untuk tips blog
</div>
<div class="penting">
Penting:
<br/>
Quote untuk pesan Penting!
</div>
Apakah kalian sudah paham dengan penggunaan Kode HTML di atas ? Di dalam kode HTML itu terlihat Jelas Tag Element Penutup dan penggunaan element class. Dalam penggunaan Kode CSS Quote yang sudah kita pasang pada Tulisan / artikel blog kita cukup menambahkan Kode <div class”element class” > …. isi pesan / tulisan … </div>
Contoh:
Dalam Kode di atas ada class=”info” | class=”tips” | class=”penting“
Dalam Penulisan Lebih jelas nya seperti ini.
/*-- jika ingin menggunakan quote info
--------------------------------------*/
<div class="info">
isi pesan Info
</div>
/*-- Tulis isi Pesan info sesuka hati. dan "info" itu adalah contoh salah satu element class yang kamu simpan di dalam <style> atau ]]></b:skin>
--------------------------------------*/
Begitu lah cara penggunaan Quote pada artikel blog. Kode HTML ini kamu tambahkan pada Tab HTML yang ada pada Halaman saat kamu ingin menuliskan artikel blog. Letak nya di sebelah Compose. Jadi jika ingin menggunakan kode tersebut kamu harus beralih ke tag HTML baru bisa menggunakan Kode HTML tadi sesuai tutorial yang sudah saya jelaskan.
Modifikasi
- Langkah pertama yang harus kamu lakukan adalah membuat Kode CSS dari quote tersebut.
- Contoh saya mau membuat quote dengan type class .atikel
- Kamu bisa tambahkan class .artikel di css yang sudah kamu simpan tadi.
.info,.tips,.penting{
padding:5px 12px;
margin:5px auto;
max-width:650px;
width:auto;
border-radius:3px;
border: 1px solid #eee;
}
/*-- Setelah di tambahkan --*/
.info,.tips,.penting,.artikel{
padding:5px 12px;
margin:5px auto;
max-width:650px;
width:auto;
border-radius:3px;
border: 1px solid #eee;
}
/*-- pemberian warna pada kode css quote .artikel --*/
.artikel {
background-color:#D20000; /*- Warna Background dari tulisan quote -*/
color:white; /*- warna tulisan -*/
}
- Setelah kode CSS class .artikel di buat. kamu bisa menggunakan nya pada tag HTML dengan penulisan seperti ini: <div class=”artikel”> tulis artikel mu disini </div>
Contoh class .artikel yang saya buat untuk blog saya:
Bagaimana Apakah kamu sudah paham mengenai Tutorial membuat Quote / kutipan (info, tips, penting, artikel dll) pada postingan blog agar tampilan artikel kita lebih rapi dan lebih tertata sehingga membuat pembaca merasa lebih nyaman. Untuk Modifikasi nanti akan saya update kembali jika saya memiliki waktu luang untuk menuliskan nya di sini. atau jika kamu ingin request tutorial modifikasi quote sesuai keinginan kamu bisa tulis saja di dalam komentar 😀 Karna modifikasi dari quote postingan ini masih banyak yang bisa kita lakukan dan bisa kita kreasikan sendiri sesuai kemauan kita 🙂 selamat mencoba & Good Luck :hebat
Saran: Backup terlebih dahulu template kamu sebelum mengikuti tutorial ini.Do With Your Own Risk