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
Σχόλια