Fajar Herianto

Cara membuat blockquote super cantik Di Blogger.






Cara membuat blockquote super cantik Di Blogger.





Cara membuat blockquote super cantik --Mengenaiblockquote pernah saya tulis pada artikel-artikel terdahulu.Baca cara membuat blockquote. 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. Baca belajar CSS online.

Menurut pembuatnya sebut saja kangamphi, bahwa blockquote yang super cantikini terinspirasi dari blockquote google. Menarik, elegan, dan mempesona. Sampai-sampai.. saya sendiri saat ini menggunakannya. Baca juga cara menggunakan blockquote 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/AVvXsEhKpHcxo5T0NpyQ4vP_OcRxSEEDuvDHHBZG6ZgbyWoax9Q6KwAJmyKAYClfSBw48Pk-JjCJO5p3WI2qLKHY0hLmP6j4IihhxJqvXrvEwHufLBNHV8Kt2I0V3wcDKZ8JheMmoueHkudzOQID/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..

Posting Komentar

Fajar Herianto

{facebook#https://www.facebook.com/fajarcintalia} {twitter#https://twitter.com/HeriantoFajar} {google-plus#https://plus.google.com/u/0/118173459679605761698/posts} {youtube#https://www.youtube.com/user/aplikasiterunik} {instagram#https://www.instagram.com/aplikasiterunik/}

Formulir Kontak

Nama

Email *

Pesan *

Diberdayakan oleh Blogger.
Javascript DisablePlease Enable Javascript To See All Widget