Cara membuat blockquote super cantik untuk blog

Bookmark and Share
blockquote superCara membuat blockquote super cantik --  Blockquote sebenarnya sudah ada pada template standar maupun pada template bawaan yang sedang sobat gunakan. Namun, untuk membuatnya lebih menarik lagi kita bisa memodifikasinya dengan mudah, yaitu hanya dengan mengotak-atik kode CSS yang ada.

Menurut pembuatnya sebut saja kangamphi, bahwa blockquote yang super cantik ini terinspirasi dari blockquote google. Menarik, elegan, dan mempesona. Sampai-sampai.. saya sendiri saat ini menggunakannya.jika ada diantara sobat sobat yang belum tahu cara menggunakannya.

Cara membuat blockquote super cantik

1. Login ke dasbor blog

2. Rancangan --> Edit HTML

3. Cari kode berikut :

.post blockquote {
---------------------
---------------------
---------------------
}

4. Hapus kode tersebut lalu ganti dengan kode dibawah :


.post blockquote {
-moz-background-clip: border;
-moz-background-origin: padding;
-moz-background-size: auto auto;
background-attachment: scroll;
background-color: #FFFFD9;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-gKZnZipHxg44GK7Dtqk9-XJIdGrushV6iB_nKltFK2ZpyD4QLwOSN7_eWrILh32SkbD3uZUMmKZu9qBTsXinfb2Q3OyEZQtKXDiyP_hpwKT1SEBG5Y4RM0kxidLZJBaZtd7YJGrQZ4Pj/s1600/blockquote_icon.png");
background-position: 0.5em 0.5em;
background-repeat: no-repeat;
border-bottom-color: #B3B3B3;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color-ltr-source: physical;border-left-color-rtl-source: physical;
border-left-color-value: #B3B3B3;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-left-style-value: solid;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-left-width-value: 1px;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-right-color-value: #B3B3B3;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-right-style-value: solid;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-right-width-value: 1px;
border-top-color: #B3B3B3;
border-top-style: solid;
border-top-width: 1px;
color: #353535;
padding-bottom: 0.5em;
padding-left: 2.5em;
padding-right: 0.5em;
padding-top: 0.5em;
}
 KETERANGAN :
Jika kode .post blockquote tidak sama dengan kode yang sobat miliki, cukup hapus hapus kode mulai dari:
 ---------------------
---------------------
---------------------
} Lalu, ambil kode pada langkah 4 letakkan setelah kode .post blockquote .

CONTOH KASUS
Kode blockquote saya adalah sebagai berikut :

 .entry blockquote {
---------------------
---------------------
---------------------
}

Jadi, kodenya berbeda dnegan langkah nomor 3, saya hapus kode warna merah dan ganti dengan kode pada langkah 4. Selesai dan hasilnya good! Kode-kode blockquote tersebut bisa saja berbeda, jadi sobat bisa sesuaikan saja, semoga bisa dipahami.

5. Save template dan lihat hasilnya..

Demikian cara membuat blockquote super cantik, ada yang lebih cantik sharing dong..
Happy blogging and sharing..

{ 0 komentar... Views All / Send Comment! }

Posting Komentar

Powered By Blogger