Cara Membuat PullQuote : Kutipan untuk Tulisan
Pullquote adalah kutipan yang ada pada postingan.. Sama seperti halnya "BlackQuote", hanya saja Pullquote lebih telihat menonjol. Jadi seperti inilah jadinya pullquote,
Sobat bisa ubah sendiri kodenya, sesuaikan dengan kreasi dan selera anda
Tutorialnya,
VersiPertama
- Masuk ke blogger
- Buka Design/Rancangan
- PIlih Edit HTML
- Cari kode ]]></b:skin>
- Lalu letakkan kode berikut ini di atas kode ]]></b:skin>
.pullquote{padding:10px; float:right; width:200px; margin-top:10px; margin-bottom:10px; margin-left:20px; border-top-width:2px; border-bottom-width:2px; border-top-style:solid; border-bottom-style:solid; border-top-color:#694e1c; border-bottom-color:#694e1c; font-size:16px; text-align:center; line-height:36px; font-family:Arial,Helvetica,sans-serif; font-style:italic; font-weight:normal}
- Cara memasangnya : kode pada halaman post <h4 class="pullquote">...Teks Anda Disini...</h4>
- Save
- Hasilnya :
Versi Kedua
- Masuk ke blogger
- Buka Design/Rancangan
- PIlih Edit HTML
- Cari kode ]]></b:skin>
- Lalu letakkan kode berikut ini di atas kode ]]></b:skin>
.pullquote_right{
width: 190px;
font: bold 1.333em/1.125em "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0 0 0.4em 15px !important;
padding: 0.6em 5px !important;
background: none !important;
border: 2px solid #ddd;
border-width: 3px 0;
text-align: center;
float: right;
}
.pullquote_left {
width: 190px;
font: bold 1.333em/1.125em "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0 15px 0.4em 0 !important;
padding: 0.6em 5px !important;
background: none !important;
border: 2px solid #ddd;
border-width: 3px 0;
text-align: center;
float: left; }
- Cara menuliskan pada halaman posting: Tinggal masukkan seperti ini
<div class="pullquote_right">teks yang ingin dibuat pullquote kanan</div>
atau
<div class="pullquote_left">teks yang ingin dibuat pullquote kiri</div>
- Hasilnya :
View Demo
0 komentar:
Post a Comment
Pengunjung yang baik akan selalu meninggalkan komentar.