<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'>

 <div class='notification-bar' id='notification-bar'>

<input id='hide' name='bar' type='radio' value='hide'/>

<input checked='checked' id='show' name='bar' type='radio' value='show'/>

<label for='hide'>hide</label>

<label for='show'>show</label>

<div class='notification-text'><a href="http://www.ahmad-web.com/"><img align='left' src="https://lh4.googleusercontent.com/-qa51wS7RTU0/Uxb1Q1q2R5I/AAAAAAAACt8/Ab4B1RPZFnc/h120/digital-00logo.png"/></a><b>أهلا وسهلا في مدونة احمد ويب ان كانت لك اول زيارة يمكنك تصفح الفهرس </b><a class='button' href='http://www.ahmad-web.com/'>الفهرس</a></div></div>

  </div>

​

​

​

<style>

​

#bloggernotificationWrap {

​

      display: none;

​

​

    height: 71px;

​

    margin-top: 9px;

​

    position: relative;

​

    width: 100%;

​

    z-index: 999999;

​

}

​

.button {

​

  display: inline-block;

​

  padding: 5px 10px;

​

  border: 3px solid #3498db;

​

  color: #ddd;

​

  text-decoration: none;

​

  font-weight: bold;

​

  text-transform: uppercase;

​

  margin: 5px 5px 0 10px;

​

  transition: all .2s;

​

}

​

.button:hover {

​

  background: #3498db;

​

  color: #fff;

​

}

​

#notification-bar {

​

  position:fixed; display:block; z-index: 100000;

​

​

}

​

.notification-bar {

​

 position: absolute;

​

 width: 100%;

​

 top: 0px;

​

}

​

.notification-text {

​

 background-color: #2980B9;

​

 padding: 15px;

​

 color: #fff;

​

 font-size: 14px;

​

 text-align: center;

​

 position: absolute;

​

 width: 100%;

​

​

 -webkit-animation: initiate 350ms ease;

​

 -moz-animation: initiate 350ms ease;

​

 -o-animation: initiate 350ms ease;

​

 animation: initiate 350ms ease;

​

}

​

.notification-bar input {

​

 display: none;

​

}

​

.notification-bar label {

​

 cursor: pointer;

​

 color: #fff;

​

 position: absolute;

​

 z-index: 5;

​

 display: inline-block;

​

​

 text-indent: 100%;

​

 white-space: nowrap;

​

 overflow: hidden;

​

}

​

.notification-bar label[for=hide] {

​

​

 right: 15px;

​

 top: 15px;

​

​

 width: 38px;

​

 height: 38px;

​

 background: url('http://2.bp.blogspot.com/-PGYIV79ZtTk/Uxbn_Pnh8cI/AAAAAAAACtQ/d-JeNX8bu5M/s1600/arrow_down_alt1-32.png') no-repeat center center;

​

​

 -webkit-animation: initiate 350ms ease;

​

 -moz-animation: initiate 350ms ease;

​

 -o-animation: initiate 350ms ease;

​

 animation: initiate 350ms ease;

​

}

​

.notification-bar label[for=show] {

​

 width: 45px;

​

 height: 50px;

​

 border-radius: 0px 0px 3px 3px;

​

 right: 10px;

​

 background: url('http://3.bp.blogspot.com/-gsITKBL27qc/Uxbn_cPc3CI/AAAAAAAACtU/vBc4OW4YvTk/s1600/arrow_up_alt1-32.png') no-repeat center center #2980B9;

​

}

​

/* Function */

​

.notification-bar input[value=show]:checked ~ label[for=show],

​

.notification-bar input[value=hide]:checked ~ label[for=hide],

​

.notification-bar input[value=hide]:checked ~ .notification-text {

​

 -webkit-transition: ease 350ms;

​

 -moz-transition: ease 350ms;

​

 -o-transition: ease 350ms;

​

 transition: ease 350ms;

​

​

 -webkit-transform: translateY(-100%);

​

 -moz-transform: translateY(-100%);

​

 -o-transform: translateY(-100%);

​

 transform: translateY(-100%);

​

}

​

.notification-bar input[value=hide]:checked ~ label[for=show],

​

.notification-bar input[value=show]:checked ~ label[for=hide],

​

.notification-bar input[value=show]:checked ~ .notification-text {

​

 -webkit-transition: ease 350ms;

​

 -moz-transition: ease 350ms;

​

 -o-transition: ease 350ms;

​

 transition: ease 350ms;

​

​

 -webkit-transform: translateY(0%);

​

 -moz-transform: translateY(0%);

​

 -o-transform: translateY(0%);

​

 transform: translateY(0%);

​

}

​

/* Inital Animation */

​

@-webkit-keyframes initiate {

​

  0% {

​

  -webkit-transform:translateY(-100%);

​

  }

​

  50% {

​

   -webkit-transform:translateY(-50%);

​

  }

​

  100% {

​

   -webkit-transform:translateY(0%);

​

  } 

​

}

​

@-moz-keyframes initiate {

​

  0% {

​

  -moz-transform:translateY(-100%);

​

  }

​

  50% {

​

   -moz-transform:translateY(-50%);

​

  }

​

  100% {

​

   -moz-transform:translateY(0%);

​

  } 

​

}

​

@-o-keyframes initiate {

​

  0% {

​

  -o-transform:translateY(-100%);

​

  }

​

  50% {

​

   -o-transform:translateY(-50%);

​

  }

​

  100% {

​

   -o-transform:translateY(0%);

​

  } 

​

}

​

@keyframes initiate {

​

  0% {

​

  transform:translateY(-100%);

​

  }

​

  50% {

​

   transform:translateY(-50%);

​

  }

​

  100% {

​

   transform:translateY(0%);

​

  } 

​

}

​

</style>

​

​

​

​