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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzKLuJIM-MLvUByHv1q810ZE0vHYEqPoSBn0vy38G9SzPcnOe2lIq1ABeqv_o37M12RqspqgkHWrGHXB_fmPd4RBeslKjuokf1FyJL0TaoRSgmLNNOpAwoG7ARctjtMJZy6i3XVVC6rGU/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
Αναρτήθηκε από στις 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 Ελλάδα .