CSS Dropdown Subscribe Widget For Blogger




Εγκαταστήστε αυτό το widget στο Blogger

Προσθήκη HTML / Javascript το gadget στο blog σας, και επικολλήστε τον παρακάτω κώδικα και επιλέξτε αποθήκευση.





<style  type="text/css">
p {
 margin: 0px auto;
 line-height: 24px;
}
.as-dsf {
 position: relative;
 display: inline-block;
}
.as-dsf a {
 font-family: Verdana, Arial, sans-serif;
 font-size: 13px;
 text-decoration: none;
 text-align: center;
 padding: 5px 0;
        text-shadow: 0 0 1px #56A0F1;
}
.as-dsf > a {
 display: inline-block;
 width: 250px;
 z-index: 1;
 font-weight: bold;
 color: #666;
 border: 1px solid #aaa;
 border-radius: 3px;
 background: #f5f5f5;
}
.as-dsf > a:hover {
 background: #f1f1f1;
}
.as-dsf div {
 position: absolute;
 width: 250px;
 height: 8px;
 overflow: hidden;
 left: 2px;
 top: 28px;
        -webkit-transition: all 350ms linear;
 -moz-transition: all 350ms linear;
 -o-transition: all 350ms linear;
 -ms-transition: all 350ms linear;
 transition: all 350ms linear;
}
.as-dsf:hover div {
 height: 118px;
}
.as-dsf ul {
 position: absolute;
 bottom: 5px;
 left: 0;
 width: 246px;
 background: #56A0F1;
 margin: 0;
 padding: 2px 0 9px;
 border-radius: 0 0 3px 3px;
 border: 1px solid rgba(0,0,0,0.25);
 border-width: 0 1px 1px;
 box-shadow: 0 -1px 0 rgba(255,255,255,0.5) inset;
 z-index: 9999;
}
.as-dsf ul::before {
 content: '.';
 text-indent: -9999px;
 display: block;
 background: #56A0F9;
 width: 15px;
 height: 15px;
 position: absolute;
 bottom: -4px;
 left: 38px;
 border-radius: 15px;
 box-shadow:
  0 -1px 0 rgba(255,255,255,0.5) inset,
  0 1px 0 #666;
 z-index: 0;
}
.as-dsf ul::after {
 content: '.';
 text-indent: -9999px;
 display: block;
 background: #fff;
 width: 5px;
 height: 5px;
 position: absolute;
 bottom: -2px;
 left: 42px;
 border-radius: 15px;
 border: 1px solid #666;
 box-shadow: 0 -1px 0 rgba(255,255,255,0.5);
 z-index: 0;
}
.as-dsf:hover ul {
 bottom: none;
}
.as-dsf ul li {
 list-style: none;
 margin: 0;
 padding: 0;
}
.as-dsf ul li a {
 display: block;
 color: #ddd;
 text-shadow: 0 0 8px #111;
}
.as-dsf ul li a:hover {
        color:#fff
}
</style>
<div class="as-dsf">
 <a href="#">Join us!</a>
 <div>
  <ul>
   <li><a href="URL">Find us on google+</a></li>
   <li><a href="URL">Find us on facebook</a></li>
   <li><a href="URL">Find us on twitter</a></li>
   <li><a href="URL">Grab our newsletter</a></li>
  </ul>
 </div>
</div>


Αλλάξτε τα κόκκινα γράμματα με τα url από τα προφίλ σας!

 Μην ξεχνάτε πως μπορείτε να το φέρεται στα δικά σας μετρα και γούστα.  Τροποποιήσετε το CSS.

DEMO


Δημιουργός: abushaleh.net

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

Εγγραφείτε για να λαμβάνετε τις σημαντικότερες ειδήσεις της ημέρας