Ads 468x60px

Τρίτη 31 Δεκεμβρίου 2013

WordPress Style NBT Subscribe Box

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ακόμα ένα subscribe box
σε στυλ wordpress, διαθέτοντας και hover effect στο mouseover του κέρσορα μας!
Έχει ενσωματώμενα όλα τα βασικά social media και είναι έτσι μία πλήρης subscribe 
form για τα blog μας!





Δείτε εδώ το DEMO


Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα--> 
..............................................................................................................................................................
 <style>  .Subscribe-NewBloggerTips h6 {    background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4EzUY0xLY57XPhxOxuTXU0zD1eIBwAM7uiI04jwc_TBEuHyYu7QkUE6xpYGgloUStOK9aXtcCnkCdheTsSn2LkcIfxRTSFDlI5PP8f2-Uxzvci_gLbbtSG4zv7a5MNP1R_G4PTXfPRb0/s1600/NBT+Subscribe.png) no-repeat;    height:50px;    margin:0px 0 0px 0;    padding:0px 20px 0px 0px;    font-size:0px;    font-family:Sans-serif, Arial, Helvetica;    font-weight:bold;    text-transform:uppercase;    color:#ffffff;    text-shadow:0 1px 0 #fff;  }  ul.social {    list-style: none;    margin: 10px;    overflow: hidden;  }  .social li {    float: left;    background: none !important;    padding: 0 !important;    margin: 0 4px;  }  .social li a {    display: block;    width: 50px;    height: 40px;    background: url("http://4.bp.blogspot.com/-gANW8x7jzug/UGnr7YEermI/AAAAAAAABDY/pN1opxmSfwY/s1600/Subscribe+More+Blog+Tools+Social+Icons.png") no-repeat transparent;    text-indent: -99999em !important;    -webkit-transition: ease-in 0.15s all;    -moz-transition: ease-in 0.15s all;    -o-transition: ease-in 0.15s all;    -ms-transition: ease-in 0.15s all;    transition: ease-in 0.15s all;  }  .social li a:hover {    padding: 0 !important;  }  .social li.rssicon a {    background-position: 0 0;    border-right: 1px solid #e6e6e6;  }  .social li.twicon a {    background-position: -50px 0;    border-right: 1px solid #e6e6e6;  }  .social li.fbicon a {    background-position: -100px 0;    border-right: 1px solid #e6e6e6;  }  .social li.gicon a {    background-position: -150px 0;    border-right: 1px solid #e6e6e6;  }  .social li.yticon a {    background-position: -200px 0;  }  .social li.rssicon a:hover {    background-position: 0 -50px;    border-right: 1px solid #e6e6e6;  }  .social li.twicon a:hover {    background-position: -50px -50px;    border-right: 1px solid #e6e6e6;  }  .social li.fbicon a:hover {    background-position: -100px -50px;    border-right: 1px solid #e6e6e6;  }  .social li.gicon a:hover {    background-position: -150px -50px;    border-right: 1px solid #e6e6e6;  }  .social li.yticon a:hover {    background-position: -200px -50px;  }  .Subscribe-NewBloggerTips {    width: 300px;    float: left;  }  .Subscribe-NewBloggerTips .count {    color:#F17C18;    font-size: 14px;    font-weight: bold;    font-family: Helvetica, Arial;    height: 30px;    line-height: 30px;    vertical-align: middle;    width: 310px;    padding: 0 0px 0 4px;    margin:0;  }  .Subscribe-NewBloggerTips .count span.bigcount {    color:#F17C18;    font-size: 24px;    font-family: Helvetica, Arial;    line-height: 39px;    vertical-align: middle;    margin:0px;    padding:10px 0px 0px 0;  }  .Subscribe-NewBloggerTips .subicons {    border-bottom: 1px solid #e6e6e6;    margin: 0px 0 0px 0;    float: left;    width: 300px;    font-family: Helvetica, Arial;    font-size: 12px;  }  .Subscribe-NewBloggerTips .emailsub {    border-bottom: 0px solid #e6e6e6;    padding: 5px 0 0px 0;    float: left;    width: 100%;    font-family: Helvetica, Arial;  }  .Subscribe-NewBloggerTips .emailsub .emailicon {    background: url(http://1.bp.blogspot.com/-bv4Z3wxrQtc/UDReA7sQF8I/AAAAAAAAAxQ/CCeIAalllEc/s1600/Subscribe+More+Blog+Tools+Email.png) no-repeat 0 2px;    float: left;    padding: 0px 15px 10px 40px;    margin: 0 0 0 5px;    width: 300px;    line-height: 20px;    vertical-align: middle;    font-size: 14px;    color: #111;  }  .emailbutton {    background:#f7f8f9;    background:-webkit-gradient(linear, left top, left bottom, color-stop(#f7f8f9, 0), color-stop(#e9e9e9, 1));    background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);    background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);    background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);    background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8f9', endColorstr='#e9e9e9', GradientType=0);    border:1px solid #ddd;    -webkit-border-radius:4px;    -moz-border-radius:4px;    border-radius:4px;    padding:6px 12px;    margin:0;    -webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223, 223, 223, 0.4);    -moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223, 223, 223, 0.4);    box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223, 223, 223, 0.4);    color:#888;    text-shadow:0 1px 0 #fff;    line-height:1.2;    cursor:pointer;    font-size:13px;  }  .emailbutton:hover {    background:#f1f1f1;    background:-webkit-gradient(linear, left top, left bottom, color-stop(#f1f1f1, 0), color-stop(#e0e0e0, 1));    background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);    background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);    background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);    background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1', endColorstr='#e0e0e0', GradientType=0);    text-decoration:none !important;  }  .email {    clear:both;    width:100%;    margin:10px 0;  }  .emailform {    position:relative;    width:300px;    margin:0 auto;  }  .emailinput {    width:200px;    height:18px;    margin:0 auto;    padding:8px 40px 8px 10px;    border:1px solid #ddd;    -webkit-border-radius:4px;    -moz-border-radius:4px;    border-radius:4px;    font-family:georgia;    font-style:italic;    -webkit-box-shadow:1px 1px 2px #dfdfdf;    -moz-box-shadow:1px 1px 2px #dfdfdf;    box-shadow:1px 1px 2px #dfdfdf;    font-size:14px;    color:#666;  }  .emailbutton {    -webkit-border-top-right-radius:4px;    -webkit-border-bottom-right-radius:4px;    -moz-border-radius-topright:4px;    -moz-border-radius-bottomright:4px;    border-top-right-radius:4px;    border-bottom-right-radius:4px;    -webkit-border-top-left-radius:0px;    -webkit-border-bottom-left-radius:0px;    -moz-border-radius-topleft:0px;    -moz-border-radius-bottomleft:0px;    border-top-left-radius:0px;    border-bottom-left-radius:0px;    padding:9px;    position:absolute;    right:-2px;    top:0;    display:block;    line-height:16px;  }  .emailbutton {    padding:8px !important;  }  .emailform, .emailinput {    width:98% !important;    -webkit-box-sizing:border-box;    -moz-box-sizing:border-box;    box-sizing:border-box;    height:auto;  }  </style>  <p style="display:none;">Email Subscription box by<a href="http://www.NewBloggerTips.com/">Ashok Lothia</a>  </p>  <div class="Subscribe-NewBloggerTips">      <h6 class='title'>Subscribe Now!</h6>      <div class="count">  <span class="bigcount">  <a href="http://feeds.feedburner.com/FEEDBURNER ID><img src="http://feeds.feedburner.com/~fc/FEEDBURNER ID?bg=F17C18&amp;fg=444444&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a>  </span> Learn Pro Tricks daily</div>    <div class="subicons">      <ul class="social">        <li class="rssicon">  <a href="http://feeds.feedburner.com/FEEDBURNER ID" rel="nofollow" target="_blank">Rss</a>        </li>        <li class="twicon">  <a href="http://twitter.com/TWITTER USERNAME" rel="nofollow" target="_blank">Twitter</a>        </li>        <li class="fbicon">  <a href="http://facebook.com/FACEBOOK USERNAME" rel="nofollow" target="_blank">FaceBook</a>        </li>        <li class="gicon">  <a href="https://plus.google.com/GOOGLE PLUS ID" rel="nofollow" target="_blank">Google+</a>        </li>        <li class="yticon">  <a href="http://youtube.com/user/YOUTUBE ID" rel="nofollow" target="_blank">YouTube</a>        </li>      </ul>    </div>    <br style="clear:both;" />    <div style="width:300px; border-bottom:1px solid #e6e6e6; margin:8px 5px 0px 0px; padding-bottom:5px;">      <!-- Place this tag where you want the +1 button to render. -->      <div class="g-plusone" data-size="medium" data-annotation="inline" data-width="280" data-href="TO URL TOY BLOG ΣΑΣ"></div>      <!-- Place this tag after the last +1 button tag. -->      <script type="text/javascript">      (function () {        var po = document.createElement('script');        po.type = 'text/javascript';        po.async = true;        po.src = 'https://apis.google.com/js/plusone.js';        var s = document.getElementsByTagName('script')[0];        s.parentNode.insertBefore(po, s);      })();      </script>    </div>    <div style="width:300px; border-bottom:1px solid #e6e6e6; margin:8px 5px 0px 0px; padding-bottom:5px;">      <iframe data-twttr-rendered="true" title="Twitter Follow Button" style="width: 266px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.1347008535.html#_=1351358237637&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=TWITTER USERNAME&amp;show_count=true&amp;show_screen_name=true&amp;size=m"      allowtransparency="true" frameborder="0" scrolling="no"></iframe>      <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>    </div>    <div class="emailsub">      <div class="emailicon">        <p style=" width:240px;   color:#111;   font-size: 13px;   font-weight: normal;   font-family: Helvetica, Arial;    padding:0;   margin:0;  ">Receive Quality Tutorials Straight in your Inbox by submitting your Email ID below.</p>      </div>      <div class="email">        <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform">          <input type="hidden" value="FEEDBURNER ID" name="uri" />          <input type="hidden" name="loc" value="en_US" />          <input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" class="emailinput"          />          <input type="submit" class="emailbutton" value="Submit" title='' />        </form>      </div>    </div>  </div>  
...............................................................................................................................................................
ΑΛΛΑΓΕΣ

Αντικαταστήστε όλα τα ID - username  με τα αντίστοιχα δικά σας, που
έχετε στα αντίστοιχα social networks, βάλτε και την διεύθυνση του blog 
σας, και πατήστε Αποθήκευση! ΠΡΟΣΕΞΤΕ  κάποια urls όπως βλέπετε το
 FEEDBURNER ID είναι παραπάνω από μία φορά!

Καλή επιτυχία!!! 


 Πηγή κώδικα 
thanks to newbloggertips.com



Edit by
Αναρτήθηκε από στις 12:30 μ.μ.
Σας άρεσε το άρθρο? Διαδώστε το!

If you enjoyed this Post Please take 5 Seconds to share it and Join Us Our Latest Updates By Email and Social Networks.

Stay Connected With Free Updates!

Follow us!
Ετικέτες , , ,

0 σχόλια :

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

Εγγραφή σε: Σχόλια ανάρτησης ( Atom )
Icon Icon Icon

spice up your blog


Giveaway of the Day
Άδεια Creative Commons
Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού-Μη Εμπορική Χρήση-Όχι Παράγωγα Έργα 3.0 Ελλάδα .