Cara Membuat Catatan (Note Box) Efek Lipatan - Kali ini Saya akan membagikan cara agar artikelmu lebih keren terutama bagi Kamu yang membuat artikel niche tutorial. Yaitu bagaimana cara membuat note box (catatan) dengan efek lipatan. Fungsinya sebenarnya hampir mirip dengan blockquote seperti biasanya, tetapi pemasangannya sedikit berbeda. Styke blockquote atau catatan ini sendiri merupakan desain (style) dari Arlina Design yang merupakan blogger sekaligus pembuat template yang responsive. Arlina juga sering membagikan desain-desain widget yang keren, salah satunya ya ini catatan dengan efek lipatan dengan berbagai warna.
Memasang note box atau kotak catatan atau juga sering disebut blockquote sangat bermanfaat untuk penunjang postingan blog. Blockquote ini bisa berfungsi untuk memperjelas atau menegaskan sebuah statement agar pembaca artikel mengetahui point penting yang tidak boleh dilewatkan ketika membaca artikel tersebut. Selain itu menggunakan blockquote dengan CSS ini membuat desain lebih bervariatif dan cenderung tidak membosankan ketika membaca isi postingan. Maka dari itu menggunakan blockquote dengan style tertentu dapat bermanfaat untuk user experience. Apalagi jika style yang digunakan cukup keren, pasti mereka bertanya-tanya bagiamana cara membuat dan memasangnya.
Langsung saja berikut tutorialnya.
Cara membuat catatan (note box) dengan efek lipatan berwarna
#1 Buka blogger
#2 Pilih menu Tema
#3 Pilih menu Edit HTML
#4 Cari kode ]]></b:skin> atau </style> Gunakan CTRL+F untuk mencarinya.
#5 Pasang kode di bawah ini tepat sebelum kode ]]></b:skin> atau </style>
/* CSS Note */
.note{position:relative;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden}
.note.darkorange{background:#ff8c00}
.note.lightseagreen{background:#20b2aa}
.note.chocolate{background:#d2691e}
.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.darkorange:before{border-color:#fff #fff #ff8c00 #ff8c00;background:#ff8c00}
.note.lightseagreen:before{border-color:#fff #fff #20b2aa #20b2aa;background:#20b2aa}
.note.chocolate:before{border-color:#fff #fff #d2691e #d2691e;background:#d2691e}#6 Simpan Template
Untuk menambahkan catatan (note box) atau blocquote di artikel, Kamu tinggal mencopy kode di bawah ini dengan 4 macam warna.
1. Warna Medium Sea Green
<div class='note'>...TEKS CATATAN KAMU...</div>2. Warna Dark Orange
<div class='note darkorange'>...TEKS CATATAN KAMU...</div>3. Warna Light Sea Green
<div class='note lightseagreen'>...TEKS CATATAN KAMU...</div>4. Warna Chocolate
<div class='note chocolate'>...TEKS CATATAN KAMU...</div>Nah di sini Kamu bisa mengganti warna kotak catatan sesuai seleramu. Kamu bisa memilih warna di HTMLCOLORCODES. Caranya ganti kode warna dan nama warna yang diinginkan. Bagaimana? keren bukan? Begitulah kiranya cara membuat kotak catatan (note box) efek lipatan dengan warna. Untuk tampilan, lebih jelasnya bisa lihat demo di bawah ini.
EmoticonEmoticon