Ads 468x60px

Τρίτη, 4 Φεβρουαρίου 2014

Social Subscription Widget

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε μία πλήρης Subscribe form!
Έχουμε δει και άλλα παρόμοια widgets σε παλαιότερες αναρτήσεις καθώς είναι από
τα πιο χρήσιμα widgets που πρέπει να έχουμε στα blog μας!Κάθε  Subscribe form
έχει το κάτι διαφορετικό στο στυλ εμφάνισης μόνο, διότι πάνω κάτω στα social links
που περιέχουν είναι περίπου τα ίδια!




Δείτε εδώ το DEMO


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

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

 και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα--

..............................................................................................................................................................

<style>
.Twittco {
    background: url(http://3.bp.blogspot.com/-q2MgHeleol8/Uh16ETq7mxI/AAAAAAAAEuo/avmmQVhO3qU/s1600/twitter_bird.png) 0 0 no-repeat;
    padding: 0 15px 0 20px;
    margin-left: 0;
    height: 45px;
    }
.Twitterocfollow {
    background-color: #fff;
    width: 294px;
    height: 70px;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
    }
.iframeoftwi {
    margin-left: 55px;
    margin-top: -31px;
    }
.Socialiconsoc {
    background-color: #fff;
    width: 294px;
    height: 70px;
    background-repeat: no-repeat;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
    }
.Facebookox {
    background-color: #fff;
    width: 294px;
    height: 40px;
    margin-top: -6px;
    background-repeat: no-repeat;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    }
.Feedburneroc {
    background-color: #fff;
    background-repeat: no-repeat;
    margin-top: -19px;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    width: 294px;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    }
#subboxs {
    border: 1px solid #d2d2d2;
    padding: 5px 26px 5px 10px;
    color: #838383;
    font-size: .7rem;
    height: 28px;
    font-family: "Rancho", cursive;
    outline: none;
    width: 50%;
    margin: 0 5px 0 0;
    }
#subbuttons {
    background-color: #f90;
    border: 3px solid #f90;
    cursor: pointer;
    color: white;
    width: 30%;
    height: 38px;
    margin: 0;
    font-size: .7rem;
    margin-right: 4px;
    float: right;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    }
#subbutton:hover {
    background-color: #292929;
    border: 3px solid #292929;
    }
</style>
<div class="Socialiconsoc">
<table border="0" margin="0px" rules="none" cellspacing="0px" cellpadding="0px">
<tbody><tr valign="top">
<td style="padding-top: 12px; padding-left: 12px" width="60px">
<a href="http://feeds.feedburner.com/your-feedburner-id" target="_blank" title="Subscribe via RSS"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/rss.png" alt="RSS" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td>
<td style="padding-top: 12px" width="60px">
<a href="http://twitter.com/username twitter" target="_blank" title="Follow on Twitter"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/twitter.png" alt="Twitter" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td>
<td style="padding-top: 12px" width="60x">
<a href="http://www.facebook.com/your-facebook-ID" target="_blank" title="Follow on Facebook"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/facebook.png" alt="Facebook" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td>
<td style="padding-top: 12px" width="60x">
<a href="http://pinterest.com/Your-pinterest-ID" target="_blank" title="Follow on Pinterest"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/pinterest.png" alt="Pinterest" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td>
<td style="padding-top: 12px" width="60px">
<a href="http://www.youtube.com/Your-Youtube-ID" target="_blank" title="Subscribe on YouTube"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/youtube.png" alt="YouTube" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a>
</td></tr></tbody></table>
</div>
<div class="google+ss">
<!-- Place this tag where you want the widget to render. -->
<div class="g-person" data-width="296" data-href="//plus.google.com/Your G+ Id Code" data-layout="landscape" data-rel="author"></div>

<!-- Place this tag after the last widget 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 align="left" class="Facebookox">
<div style="padding:8px 0px 5px 10px">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FYour FB Id Code&amp;width=284&amp;height=35&amp;colorscheme=light&amp;layout=standard&amp;action=like&amp;show_faces=false&amp;send=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:284px; height:35px;" allowtransparency="true"></iframe>
  </div>   </div>
 <div class="Twitterocfollow">
<div class="Twittco"></div>
<div class="iframeoftwi">
<a href="https://twitter.com/twitter username" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @Twiiter-Page-Name</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div></div>

<div class="Feedburneroc">
<div style="padding:14px 0 11px 7px">
<form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe" method="post" onsubmit="window.open( 'http://feedburner.google.com/fb/a/mailverify?uri=Your-feed-burner-id', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input id="subboxs" name="email" onblur="if ( this.value == &#39;&#39; ) { this.value = &#39;Enter your email address...&#39;; }" onfocus="if ( this.value == &#39;Enter your email address...&#39;) { this.value = &#39;&#39;; }" type="text" value="Enter your email address..." />
<input name="uri" type="hidden" value="Your-feed-burner-id" />
<input name="loc" type="hidden" value="en_US" />
<input id="subbuttons" type="submit" value="Subscribe!" />
</form></div></div>
...................................................................................................................................................................
ΑΛΛΑΓΕΣ

Αντικαταστήστε όλα τα USERNAMES και τα ID με τα αντίστοιχα δικά σας, στα
υπογραμμισμένα σημεία του κώδικαΠΡΟΣΕΞΤΕ κάποια τα βάζετε 2 φορές και πατήστε Αποθήκευση!Αυτό ήταν!

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


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





Edit by

0 σχόλια :

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

Icon Icon Icon

spice up your blog