skip to main | skip to sidebar

INFOIKI

tutorial untuk mengedit, mempercantik,membuat, dan memperindah blog template seo gratis

  • Home
  • Template
  • Ebook
  • Kata Mutiara
  • Tips Blog
  • Video
  • Umum
 

Dapatkan Update!

Dapatkan artikel terbaru dari INFOIKI yang akan dikirim ke email anda secara gratis!
Browse » Home » Ngeblog » Modifikasi blockquote dengan CSS

Modifikasi blockquote dengan CSS

   Selamat sore sobat blogger. Gimana nih, rasanya naik kelas? Semoga bahagia ya. Kalo sudah naik kelas, biasanya jadwal makin padat. Jadi, harus disempet sempetin update, meskipun hanya 1. Kembali ke topik. Mungkin, anda tidak mengetahui apa itu blockquote. Untuk yang tidak tahu, tanya saja di mbah Google. Ok, langsung saja.

1. Login blog.
2. Template.
3. Edit HTML.
4. Cari kode ]]></b:skin>
5. Letakkan kode dibawah ini, tepat diatas kode no.4


.post blockquote {
margin-left: 15px;
padding: 5px 5px 5px 10px;
background: #cfcb9d;
border: #ada171 solid 1px;
font: normal 12px/14px Monaco, Monospace;
border-left: #ada171 solid 5px;
position: relative
}
.post blockquote[rel] {
padding-top: 25px;
}
.post blockquote[rel]::before {
content: attr(rel);
font: bold 12px/22px Arial, Sans-Serif;
color: white;
background-color: #b4a97e;
padding: 0 10px;
position: absolute;
top: 0;
right: 0;
left: 0;
text-transform: uppercase
}

6. Save template.   

Pada saat anda menulis artikel, dan menambahkan blockquote di postingan, pasti nanti kodenya akan seperti ini : 

<blockquote>
Disini kata - kata anda
</blockquote>
  Anda hanya perlu menambahkan kode rel="Judul" pada kode pembuka blockquote. Kodenya, akan menjadi seperti ini :
<blockquote rel="Judul">
Disini kata - kata anda
</blockquote>
  Nah, JUDUL, adalah nama blockquotenya. Bisa anda ganti sesuai selera. Jangan lupa, mengubah mode compose menjadi mode EDIT HTML terlebih dahulu. Bila anda berkenan, jangan lupa melihat sumbernya Disini

Posted By Efendy bloggers | -

Comments :

0 komentar to “ Modifikasi blockquote dengan CSS ”

Posting Komentar

Aturan Berkomentar
1. No spam!
2. No live link!
3. No maho :D

←  Posting Lebih Baru Posting Lama  → Beranda
Langganan: Posting Komentar ( Atom )

Statistik

Statistic Blog:
PageRank Checking Icon
SEO Reports for infoiki.blogspot.com

Pencarian

Kategori

  • Advertiser
  • Diet
  • Ebook gratis
  • Facebook
  • Handphone
  • Jasa Like
  • Kata Kata
  • Komputer
  • Kontes SEO
  • Ngeblog
  • Review‎
  • Software
  • Template
  • tips trik ngeblog
  • Umum
  • Video

Terpopuler

  • Software Hack Wifi GRATIS [WzCook.exe]
  • Kumpulan template blog Imut dan cantik (Blogspot)
  • Download template blog Anime keren
  • Cara paling ampuh membuka situs yang diblokir telkom
  • 3 langkah mudah membuat banner sendiri
  • Software SMS gratis lewat pc/komput [free download]
  • Cara menghapus virus dengan cara manual menggunakan CMD
  • 7 Cara mudah menghafal script tanpa hafalan
  • tips Cara merawat ayam serama
  • Trik mudah membuat header blog bergerak (Gif)

Pengikut

Diberdayakan oleh Blogger.
.

Send Quick Massage

Nama

Email *

Pesan *

 
INFOIKI
Template by Infoiki | Powered by Blogger