Cara membuat blockquote elegant di blog

Posted by jalupangna at 09.45 Read our previous post

Ini adalah salah satu blockquote yang sempurna bagi seseorang yang ingin menyorot teks (naskahnya) atau memberikan beberapa kode khusus untuk para pembacanya. Hasil akhir dari Blockquote ini sungguh bagus sekali dan saya juga menerapkannya di blog. Efek yang diberikan Blockquote elegan ini cukup membuat kita merasa puas dan kagum. Mari kita mulai dengan pengkodean..

View Demo

CARA MENAMBAHKA BLOCKQUOTE ELEGANT DI BLOG:

Masuk ke akun Blogger anda -> Klik Template -> Edit HTML
Seperti biasa backup template anda terlebih dahulu
Kemudian cari kode / tag ]]></b:skin> (CTRL + F untuk memudahkan pencarian)
Setelah ketemu letakan kode berikut di bawah ini tepat di atas kode ]]></b:skin>

blockquote{
border:5px solid #007FFF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
font-family:courier;
color:#000000 ;
width: 360px;
position: relative;
margin: 0 auto 20px auto;
padding: 12px 80px 15px;
text-align: left;
border-radius: 5px;
box-shadow: 0 0 5px 2px rgba(0,0,0,.35);
cursor: default;
background: #ffe691;
border: 1px solid #f6db7b;
background: #ffe691 url(http://png.findicons.com/files/icons/2448/wpzoom_developer/47/quote.png) no-repeat 5% 9%;
}
blockquote:hover {
border:5px solid #008000;
border-radius: 15px;
}

CARA MENGGUNAKANNYA DI BLOG

Ada 2 cara untuk menggunakan Blockquote Elegan ini di postingan blog anda :

Dengan cara manual ( di postingan HTML bukan Compose)

Menggunakan Tombol Blockquote Blog yang telah disediakan pada format Bar di bagian Edit pos.

Semoga bermanfa'at..

Original Source

Anda menyukai artikel di atas? Silahkan share dengan teman anda.

Post Author

Jalupangna

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.

Selasa, 16 April 2013

Cara membuat blockquote elegant di blog

Jalupangna

1 komentar:

Followers