Boxes Notification adalah sebuah kotak peringatan atau kotak catatan tujuannya adalah untuk membuat sebuah peringatan kepada pengunjung. Biasanya peringatan itu dalam sebuah tulisan tujuannya untuk memberitahukan info penting catatan yang perlu diperhatikan. Boxes Notification ini tidak asing lagi dikalangan blogger karena ini biasa digunakan oleh sebuah blog yang membahas tutorial. Dengan adanya Boxes Notification ini memudahkan pengunjung dalam memilah point penting dalam suatu artikel. Contohnya bisa Anda lihat sendiri pada gambar diatas, dengan tampilan yang minimalis ditambahkan Icon Volume menggunakan Font Awesome Icons Bootstrap menjadikan Boxes Notification ini menjadi enak dipandang. Saya rasa cukup deskripsi pengertian Boxes Notification selanjutnya kita akan praktekan cara pembuatannya.
Cara Membuat Boxes Notification atau Kotak Catatan di Blogger
Cara Pertama :
1. Buka Blogger - Kemudian Login.
2. Dashboard - Tema/Template.
3. Tema - Edit HTML
Proses Pembuatan :
1. Temukan kode ]]></b:skin> atau </style>
2. Copy & Paste kode berikut ini dan letakkan diatas kode ]]></b:skin> atau </style>
3. Tema - Edit HTML
Proses Pembuatan :
1. Temukan kode ]]></b:skin> atau </style>
2. Copy & Paste kode berikut ini dan letakkan diatas kode ]]></b:skin> atau </style>
/*Notification Boxes*/
.post-body blockquote {
text-align: left;
background: #6591c2;
position: relative;
display: block;
padding: 55px 20px 20px;
color: #fff;
margin: 10px 0;
border-radius: 3px;
}
.post-body blockquote:before {
position: absolute;
content: &amp;#039;Catatan&amp;#039;;
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: #6591c2;
}
.post-body blockquote:after {
position: absolute;
content: &amp;#039;\f027&amp;#039;;
right: 10px;
bottom: 5px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
font-size: 160%;
color: rgba(255,255,255,.6);
}
Bagaimana Membuat Boxes Notification atau Kotak Catatan di Blogger
1. Buat Entri Baru.
2. Kemudian Tekan Menu "Quote" di samping kanan "Bullet List" pada Bar Action Blogger
EmoticonEmoticon