$show=home

$type=ticker$count=12$cols=4$cate=0$show=post$hide=mobile

$type=grid$count=4$tbg=rainbow$meta=0$snip=0$rm=0$show=home$ic=show

Membuat Quote Keren Di Postingan Blog Dengan CSS3 Valid HTML5 Full Responsive

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

Tutorial menambahkan Kode Quote keren pada artikel blog
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.
Info:
ini quote / block pesan yang saya gunakan untuk menyampaikan informasi.
Perhatian:
Quote untuk peringatan atau hal penting.
Baca Artikel ini:
ini quote saya gunakan untuk membuat artikel terkait
     Di atas adalah beberapa quote yang saya gunakan :D 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

Perhatian:
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

     Untuk Tutorial Modifikasi Quote Pada blog / Kutipan dalam postingan blog. Sementara saya akan menjelaskan beberapa hal yang bisa kamu modifikasi atau menambahkan jenis/tipe quote (tidak hanya sekedar info, tips, dan penting) kamu bisa menambahkan seberapa banyak quote yang kamu inginkan :D :keren 
  • 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 :D 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

COMMENTS

BLOGGER: 3
Loading...
Name

Accessories,5,All Weapon,4,Android,36,Anime,1,App,8,ASUS,41,ASUS Zenfone,7,Blogger,33,Clash Of Clan,2,Computer,3,CSS,6,Documentary,5,dr. Zen,2,Event,10,Facebook,15,Firmware,23,Game,9,Gemscool,1,Google,6,Google Adsense,2,Hardware,2,Internet,5,Jambi,2,Javascript,1,Komputer,3,Laptop,2,Mouse,3,Mouse Gaming,1,Mouse Macro,6,News,40,Ninja Saga,2,Notebook,4,Padfone S,1,Point Blank,1,Press Release,8,Preview,12,Review,27,Root,13,Script,3,SEO,3,Shotgun,1,Smartphone,18,Template,1,Theme,3,Tips & Tricks,2,Troubleshooting,1,Tutorial,44,Unboxing,4,Video,10,Widget,8,Windows,2,ZenEar,1,Zenfestival,1,Zenflash,1,Zenfone 2,5,Zenfone 2 Deluxe,2,Zenfone 2 Laser,9,Zenfone 3,3,Zenfone 3 Laser,1,Zenfone 3 Max,3,Zenfone 3 Zoom,1,Zenfone 4,2,Zenfone 5,5,Zenfone 6,9,Zenfone Go,1,Zenfone Max,1,Zenfone Selfie,3,Zenfone Zoom,3,ZenHow,1,ZenPad,2,Zenpower,2,Zentalk,2,Zenvestival,3,Zenvolution,1,
ltr
item
BLOG X KOMO: Membuat Quote Keren Di Postingan Blog Dengan CSS3 Valid HTML5 Full Responsive
Membuat Quote Keren Di Postingan Blog Dengan CSS3 Valid HTML5 Full Responsive
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
http://1.bp.blogspot.com/-9b4xi2rrCHQ/VYTw5iX6zNI/AAAAAAAAESI/uJxf_FFYhTo/s1600/capture-20150620-113825.png
http://1.bp.blogspot.com/-9b4xi2rrCHQ/VYTw5iX6zNI/AAAAAAAAESI/uJxf_FFYhTo/s72-c/capture-20150620-113825.png
BLOG X KOMO
http://www.xkomo.com/2015/06/membuat-quote-keren-di-postingan-blog.html
http://www.xkomo.com/
http://www.xkomo.com/
http://www.xkomo.com/2015/06/membuat-quote-keren-di-postingan-blog.html
true
4848727032668058109
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy