Kamis, Juni 06, 2013
Cara Membuat Notification Bar Woah Dengan Tombol Show/Hide
Hoah Malam ini tanggal 6 Bulan 6 Tahun 2013 Adalah Hari Isra Mi'raj dengan tahun dan tanggal yang unik, jika 2013 dipisah dan dijumlahkan hasilnya akan menjadi 6, sementara tgl dan bulan dihari ini sama sama 6. cuma sekedar basa bisi aja gan hehe,,
ok karena udah mulai bosen tiap hari nge posting turial blog,,
Wokeh Joss Notification BAR Keren :- Log in Blogger - Cari Code </head> jika code dibawah ini sudah ada di blog sobat silahkan skip aja, kalau belum copy dan paste tepat diatas code </head> bisa juga dibawah code <head>..
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js' type='text/javascript'/>
- Langkah selanjutnya copy code dibawah ini dan paste tepat diatas Code </head>
<script>
var stub_showing = false;
function woahbar_show() {if(stub_showing) {$('.woahbar-stub').slideUp('fast', function() { $('.woahbar').show('bounce', { times:3, distance:15 }, 300); $('body').animate({"marginTop": "32px"}, 300);});}
else {$('.woahbar').show('bounce', { times:3, distance:15 }, 500); $('body').animate({"marginTop": "32px"}, 250);}}
function woahbar_hide() {$('.woahbar').slideUp('fast', function() {$('.woahbar-stub').show('bounce', { times:3, distance:15 }, 100);stub_showing = true; });
if( $(window).width() > 1024 ) {$('body').animate({"marginTop": "0px"}, 250);}}
$().ready(function() {window.setTimeout(function() {woahbar_show();}, 0);});
<!-- END WOAHbar FOR DESKTOP - START WOAHbar FOR MOBILE -->
var mstub_showing = false;
function mwoahbar_show() {if(mstub_showing) {$('.mwoahbar-stub').slideUp('fast', function() {$('.mwoahbar').show('bounce', { times:3, distance:15 }, 300);$('body').animate({"marginTop": "32px"}, 300);});}
else {$('.mwoahbar').show('bounce', { times:3, distance:15 }, 500); $('body').animate({"marginTop": "32px"}, 250);}}
function mwoahbar_hide() {$('.mwoahbar').slideUp('fast', function() { $('.mwoahbar-stub').show('bounce', { times:3, distance:15 }, 100); mstub_showing = true; });
if( $(window).width() > 1024 ) { $('body').animate({"marginTop": "0px"}, 250);}}
$().ready(function() { window.setTimeout(function() {mwoahbar_show(); }, 0); });
</script>
- Sekarang cari code ]]></b:skin> dan letakan code dibawah ini tepat diatasnya.
.woahbar {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 18px;
z-index: 100;
padding: 13px 0 5px 0;
text-align: center;
font-size: 16px;
color: #000;
background-color: #2E8C26;
border-bottom: 2px solid #ECECEC;
-webkit-box-shadow: 0 8px 6px -6px #ECECEC;
-moz-box-shadow: 0 8px 6px -6px #ECECEC;
box-shadow: 0 8px 6px -6px #000;
}
.woahbar-stub {
position: fixed;
top: -10px;
left: 0px;
width: 100%;
height: 19px;
z-index: 200;
padding: 7px 0 5px 0;
text-align: center;
}
.woahbar span {
float: left;
width: 95%;
text-align: center;
padding-top: 2px;
}
.show-notify {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 3px solid #fff;
box-shadow: 0 0 5px rgb(0,0,0,0.35);
-moz-box-shadow: 0 0 5px rgb(0,0,0,0.35);
-webkit-box-shadow: 0 0 5px rgb(0,0,0,0.35);
float: right;
margin-right: 10px;
color: #fff;
width: 35px;
height: 33px;
text-decoration: none;
background-color: #eee; /* << set custom bar color here */
cursor:pointer;
}
.show-notify:hover {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 3px solid #fff;
box-shadow: 0 0 5px rgb(0,0,0,0.35);
-moz-box-shadow: 0 0 5px rgb(0,0,0,0.35);
-webkit-box-shadow: 0 0 5px rgb(0,0,0,0.35);
float: right;
margin-right: 10px;
color: #fff;
width: 35px;
height: 33px;
text-decoration: none;
background-color: #ffff00; /* << set custom bar color here */
cursor:pointer;
}
.woahbar-up-arrow:hover {
background: url(https://lh5.googleusercontent.com/-MZwwgfKDUnk/UPLGLnS4ZpI/AAAAAAAABV4/zQDfSXQbPaI/s800/woahbar-up-arrow-hover.png);
}
.close-notify {
float: right;
margin-top:3px;
margin-right: 22px;
color: #fff;
width: 17px;
height: 19px;
text-decoration: none;
background-color: #ffff00; /* << set custom bar color here */
cursor:pointer;
}
.woahbar-link {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #d72444; /* Old browsers */
color: white;
padding: 1px 8px 3px 8px;
}
.woahbar-link:hover {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #1c1c1c; /* Old browsers */
color: white;
padding: 1px 8px 3px 8px;
text-decoration: none;
}
- Jika ingin merubah tampilannya code diataslah solusinya, dan sekarang beralih ke isi dari Notification Bar itu sendiri.. Cari code </body>
- Dan letakan code dibawah ini tepat dibawah code </body>.
<div class='woahbar' style='display: none;'><span style='font-family: 'Arial, Helvetica, sans-serif;'>Back To <a class='woahbar-link' href='http://azhariian.blogspot.com/'>Ian Azhari</a> </span> <a class='close-notify' onclick='woahbar_hide();'><img class='woahbar-up-arrow' src='https://lh5.googleusercontent.com/-MZwwgfKDUnk/UPLGLnS4ZpI/AAAAAAAABV4/zQDfSXQbPaI/s800/woahbar-up-arrow-hover.png'/></a></div>
<div class='woahbar-stub' style='display: none;'><a class='show-notify' onclick='woahbar_show();'><img class='woahbar-down-arrow' src='https://lh5.googleusercontent.com/-fmyDS-Ew66I/UPLGLj9McpI/AAAAAAAABV8/w3shb3kDVmU/s800/woahbar-down-arrow.png'/></a></div>
|
Get Free Email Updates Daily! |
Langganan:
Posting Komentar (Atom)
mantab
BalasHapus