Membuat Pengembangan Box Alert dengan Fitur Close
Yeay, membuat box alert di blog tentu mempunya fungsi tersendiri, fungsi nya supaya pengunjung tau yang mana ada info dan yang mana ada info kesalahan dalam postingan tersebut, dan sudah banyak pengguna blogger untuk memakai box alert tersebut tapi sayangnya sebagian mereka belum bisa mengembangkan blox alert tersebut lebih keren dan terlihat simple
Saya akan memberikan contoh box alert sederhana yang masih banyak di gunakan para blogger
ini dia contoh nya sebelum di kembang kan
Masih terlihat simple kan, dan setelah saya kembangkan dengan tambahan jquery
dan saya masukkan tombol close ke dalam nya, supaya di dalam postingan nanti, lebih enak di lihat dan jika postingan tersebut banyak menaruh box alert ini jika tidak enak di lihat, silahkan di close aja
simple kan? makanya saya taruh tombol close di pojok nya, karena tombol close memiliki fungsi tersendiri
Dan ini dia setalah di kembangkan
Gimana, menarik bukan?
langsung aja terap kan di blog
1. Letakkan kode ini di atas kode ]]><b:skin
2. Jquery nya jangan lupa,letakkan di atas kode </body>
HTML nya letakkan di dalam postingan
Keren kan, tentu dapat menghebat ukuran postingan hehe, semoga bermanfaat.
ini dia contoh nya sebelum di kembang kan
Text disini
Masih terlihat simple kan, dan setelah saya kembangkan dengan tambahan jquery
dan saya masukkan tombol close ke dalam nya, supaya di dalam postingan nanti, lebih enak di lihat dan jika postingan tersebut banyak menaruh box alert ini jika tidak enak di lihat, silahkan di close aja
simple kan? makanya saya taruh tombol close di pojok nya, karena tombol close memiliki fungsi tersendiri
Dan ini dia setalah di kembangkan
Gimana, menarik bukan?
langsung aja terap kan di blog
1. Letakkan kode ini di atas kode ]]><b:skin
.alert { padding: 19px 15px; color: #fefefe; position: relative; font: 14px/20px Museo300Regular, Helvetica, Arial, sans-serif; }
.alert .msg { padding: 0 20px 0 40px;font-weight: bold;
line-height: normal;
color: #E8F5FF!important;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);}
.alert p { margin: 0;}
.alert .toggle-alert {
position: absolute;
top: 7px;
right: 10px;
display: block;
width: 20px;
height: 20px;
border-radius: 10px;
background: rgba(34, 34, 34, 0.29);
}
.toggle-alert:before {
content: "\f00d";
font-family: FontAwesome;
font-size: 14px;
font-style: normal;
font-weight: normal;
padding: 4px 1px;
margin: -4px 10px 0 3px;
border-radius: 3px 0 0 0;
color: #fff;
}
.info-box { background: #508EBC; }
.success-box { background: #4F80B8; }
.error-box { background: #C33F3F; }
.download-box { background: #429B54; }2. Jquery nya jangan lupa,letakkan di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() { $(".alert .toggle-alert").click(function(){ $(this).closest(".alert").slideUp(); return false; }); });
//]]>
</script>
HTML nya letakkan di dalam postingan
<div class="info-box alert"> <div class="msg"> ISI TEXT </div><a class="toggle-alert" href="#"></a> </div>
<div class="success-box alert"> <div class="msg"> ISI TEXT </div><a class="toggle-alert" href="#"></a> </div>
<div class="error-box alert"> <div class="msg"> ISI TEXT </div><a class="toggle-alert" href="#"></a> </div>
<div class="download-box alert"> <div class="msg"> ISI TEXT </div><a class="toggle-alert" href="#"></a> </div>
Dan letakkan font awesome versi terbaru di blog kalian,supaya tombol close nya muncul
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
Pilih salah satu html di atas, mau info box alert, succsess box alert, atau error box alert, dan download box alert, terserah
Keren kan, tentu dapat menghebat ukuran postingan hehe, semoga bermanfaat.
