Blockquote seperti Arlinadzgn dengan 3 style

Athhar Kautsar   6/13/2017   blogger, widget   0 Comments

Setelah sekian lama saya ga posting artikel di blog ini dikarenakan satu dan lain hal, akhirnya saya bisa posting lagi di blog ini. Saat saya ada mood untuk blog lagi saya langsung ke blogger.com, saat saya melihat lihat lagi isi artikel blog ini yang dulu saya kok jadi merasa sangat malu ya?😟. Karena saya merasa malu jadi saya hapuslah artikel yang ga terlalu penting menurut saya karena terlalu jelek dan norak hehe..  

Back to topik kalian pernah gasih mengunjungi blog punya mbak arlina? kalo pernah pasti tau blockquote yang berwarna biru kan? nah pada kesempatan kali ini saya akan membagikan kode ke-doi blockquote tersebut. Blockquote yang saya bagikan juga memilik 3 style / warna, yaitu warna biru, hijau, dan merah. 

Disini saya menggunakan template dari arlinadzgn yang sudah ter-custom blockquote-nya.
Blockquote saya yang ada di template ini tidak seperti punya mbak arlina, dan saya ingin menggantinya menjadi seperti punya mbak arlina.

1. Masuk Template lalu klik "Edit HTML"
2. Klik di box codenya lalu tekan CTRL + F dan tulis "blockquote" seperti dibawah ini:

Klik untuk memperbesar

3. Hapus bagian yang saya highlight diatas.
4. Ganti dengan code dibawah. (pilih salah satu style)

Style 1

CSS blockquote{background:#5194e5;position:relative;padding:55px 20px 20px 20px;color:#fff;margin:10px 0;border-radius:3px}
blockquote:before{position:absolute;content:'Catatan';background:rgba(255,255,255,1);right:3px;left:3px;top:3px;padding:5px 20px;display:block;font-weight:700;border-radius:3px 3px 0 0;color:#5194e5}
blockquote:after{position:absolute;content:'\f027';right:10px;bottom:5px;font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:160%;color:rgba(255,255,255,.6)}
blockquote a,.post-body blockquote a:hover{color:#fff}
*:focus{outline:0!important} 

Style 2

CSSblockquote{background: #2ecc71;position: relative;padding: 55px 20px 20px 20px;color: #fff;margin: 10px 0;border-radius: 3px;}
blockquote:after{position:absolute;content:'\f027';right:10px;bottom:5px;font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:160%;color:rgba(255,255,255,.6)}
blockquote:before{position:absolute;content:'Catatan';background:rgba(255,255,255,1);right:3px;left:3px;top:3px;padding:5px 20px;display:block;font-weight:700;border-radius:3px 3px 0 0;color:#2ecc71}
blockquote a,blockquote a:hover {color:#fff;}
blockquote a,blockquote a:visited,blockquote a:link,blockquote a:link:hover{color:#fff}

Style 3

CSSblockquote{background: #e74c3c;position: relative;padding: 55px 20px 20px 20px;color: #fff;margin: 10px 0;border-radius: 3px;}
blockquote:after{position:absolute;content:'\f027';right:10px;bottom:5px;font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:160%;color:rgba(255,255,255,.6)}
blockquote:before{position:absolute;content:'Catatan';background:rgba(255,255,255,1);right:3px;left:3px;top:3px;padding:5px 20px;display:block;font-weight:700;border-radius:3px 3px 0 0;color:#e74c3c}
blockquote a,blockquote a:hover {color:#fff;}
blockquote a,blockquote a:visited, blockquote a:link, blockquote a:link:hover{color:#fff}

(Akan saya sertakan demo-nya dibawah artikel.)
5. Lalu save dan lihat hasilnya.
6. Untuk kalian yang memakai template berbeda dan suda di custom blockquotenya silahkan cari sendiri kode css blockquotenya.
7. Dan buat yang belum dicustom silahkan tambahkan salah satu dari kode css diatas ke atas kode ]]></b:skin> atau </style>.

Style 1

Demo
Click here

Style 2

Demo
Click here

Style 3

Demo
Click here