Cara Membuat Blockquote Dengan Gambar - Hallo sobat
AHS pada kesempatan kali ini, saya akan posting tentang
Cara Membuat Blockquote Dengan Gambar ya sebelum kodenya dicuri oleh orang
2 yang tidak bertanggung jawab, atau orang yang ngiri dengan blockquote saya.. mending saya share duluan :p
Oh iya, tutorial ini di request oleh salah satu dari sobat
AHS (n_n)b mau request an anda terpenuhi juga?? makanya buruan request :v,,
penasaran kan demonya seperti apa?? okelah mari dilihat dahulu demonya sobat..
Demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.
*Mohon maaf blockquote saya ubah,jadi demonya tidak ada,silahkan lihat gambar saja*
Nah itu dia demonya,sekarang kita akan menyimak tutorialnya..
Cara Membuat Blockquote Dengan Gambar
Pertama : anda harus masuk blogger terlebih dahulu
Kedua : bila sudah masuk blogger segera copy kode dibawah ini diatasnya kode
<b:skin>
.post blockquote{-webkit-box-shadow:rgb(221, 221, 221) 4px 4px 4px;-moz-box-shadow:rgb(221, 221, 221) 4px 4px 4px;box-shadow:rgb(221, 221, 221) 4px 4px 4px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6vS5lKT9yCtxhytJwqout6hXLL8vnOV2v5qJrZ5g7BYYvUu9U6q0vv7dIyGbqGh6CduMJTXYnKO5tRP6FNTL12eb5QQIYvaB88RQEl79QQd_KvN_mEAbHd_pc3CErhCmjFxeaADyrKoa8/s1600/blockimg.png);background-position:0% 0%;background-repeat:no-repeat repeat;border-radius:6px;border-top:1px solid #DDD;border-right:1px solid #DDD;border-left:1px solid #DDD;border-bottom:1px solid #DDD;text-align:left;border-width:1px;color:black;font-family:Consolas, 'Courier New', Monaco, Courier, monospace;line-height:18px;margin:0px 20px;overflow:hidden;padding:10px 20px 10px 45px;}.post blockquote p{margin:0;padding-top:10px;}
Penjelasan Maksud Kode
| Potongan kode | Penjelasan |
|---|
.post blockquote
{..;
background-image:
url(
http://1.bp.blogspot.com/
-HBhXg7CQlPI/
Uh7Q0uKOBdI/AAAAAAAABZI/
V91IQ9nnI8g
/s1600/blockimg.png
)
;...
} | itu sudah jelas sobat,itu hanya gambar yang bisa di repeat ke arah sumbu Y secara berulang-ulang *haha.. kalian semua ketipu sama gambar :v* |
{
..;
background-position:
0% 0%;
background-repeat:
no-repeat repeat;
border-radius:6px;..
} | nah,kalo yang ini untuk mencegah agar gambar yang tadi itu tidak merepeat/mengulang terus-menerus(tidak sesuai dengan kemauan kita) |
Saya rasa intinya cuma itu saja.. jika ada yang belum jelas silahkan bertanya aja
Ketiga : bila anda sudah menerapkan semua tutorial yang diatas itu,maka anda hanya perlu memanggilnya, contoh :
<blockquote>hanya coba ngetest blockquote baru saja kok</blockquote>
Oke,selamat mencoba,..
Demikianlah posting tentang
Cara Membuat Blockquote Dengan Gambar, semoga bermanfaat..