Cara Memasang Catatan dengan Efek CSS Lipatan pada Blog
Snippet Tips Blogger
iNDZGN - Bagi kamu yang memiliki blog dengan niche tutorial atau template pasti pernah membuat catatan untuk pengunjung atau visitor. Namun catatan yang kamu publikasikan tersebut mempunyai tampilan yang kurang menarik? nah pada artikel inilah saya akan memberikan sedikit tutorial mengenai Cara Memasang Catatan dengan Efek CSS Lipatan pada Blog, hal ini gunanya untuk mempercantik tampilan artikel kamu.
Mari kita simak tutorialnya.
Cara Memasang Catatan dengan Efek CSS Lipatan pada Blog
1. Login ke akun Blogger kamu, kemudian masuk ke Template, dan klik Edit HTML. Tambahkan kode di bawah ini sebelum ]]></b:skin> atau </style>
/* CSS Note by indzgn.blogspot.co.id*/
.note{position:relative;width:30%;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden}
.note.orange{background:#f39c12}
.note.crusta{background:#F2784B}
.note.river{background:#3498db}
.note:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #27ae60 #27ae60;background:#27ae60;box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);display:block;width:0}
.note.orange:before{border-color:#fff #fff #e67e22 #e67e22;background:#e67e22}
.note.crusta:before{border-color:#fff #fff #de6e45 #de6e45;background:#de6e45}
.note.river:before{border-color:#fff #fff #2980b9 #2980b9;background:#2980b9}
2. Simpan template kamu tersebut.
Untuk menambahkan catatan pada artikel, kamu cukup pilih salah satu kode HTML di bawah ini. ada 4 pilihan warna yang bisa kamu coba semuanya pada artikel yang akan kamu publish nanti. Perlu kamu ketahui, untuk menambahkan kode HTML di bawah ini, masuk ke mode HTML. (Bukan Compose). Berikut kode HTMLnya.
Warna 1
<div class='note'>...ISI DENGAN CATATAN KAMU...</div>Warna 2
<div class='note orange'>...ISI DENGAN CATATAN KAMU...</div>Warna 3
<div class='note river'>...ISI DENGAN CATATAN KAMU...</div>Warna 4
<div class='note crusta'>...ISI DENGAN CATATAN KAMU...</div>Untuk contoh, bisa kamu lihat pada demo di bawah ini.
Bagaimana? Mudah bukan tutorial mengenai Cara Memasang Catatan dengan Efek CSS Lipatan pada Blog. Semoga bermanfaat. Terimakasih.
