Ads 468x60px

Πέμπτη 10 Νοεμβρίου 2016

Feedburner Subscribe Box

Φίλες και φίλοι γεια σας, σήμερα θα δούμε ένα widget που περιλαμβάνει social
networks και μία Feedburner Subscribe form όλα μαζί σε ένα Feedburner Subscribe 
Box!Έχει ενσωματωμένο ένα πολύ ωραίο hover effect και έχω προσθέσει και εικονίδιο
Gif!

Δείτε εδώ το DEMO



H εγκατάσταση του είναι πάρα πολύ απλή και για να γίνει αυτό
ακολουθείτε την γνωστή διαδικασία..

Blogger-->Διάταξη

Προσθήκη gadget-->Html javascript


και επικολλήστε τον ακόλουθο κώδικα:
...........................................................................................................................................................
<style>
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioK7uBcWTRJU6GhP-28A4RZH8uY87lh0is6IGaW7fNMVGo3JGkniKqNvE15GieK-Zj9S98ThdwuAtetFqwYFCnBaLFeYi5OCHc6CYdD1684gSKIMihdu_PwPSCSZzJI-9NHBFq3rbBEONN/s454/Sharing%2520Touch%2520Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
</style>
<div class='touchme'>
<!--RSS-->
<a class='rss' href="http://feeds.feedburner.com/USERNAME FEED" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="URL ΔΙΕΥΘΥΝΣΗΣ GOOGLE PLUS" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href=" URL ΔΙΕΥΘΥΝΣΗΣ FACEBOOK
" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="https://www.twitter.com/USERNAME TWITTER" rel='external nofollow' target='_blank' ></a>
</div>
<style>
.tk-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQYTiSuQADVkg3eDZloCgZmmBpO34aSeWwqcClw2OORxvLtAXK3cyaFI7wcFmPSXOBtDcVrs_r5gUmNLCUUFcC8oPy9BxwWmgR-nSIu873rbNHykTajj3zelUTPLgAB0jApLuORcN24co/s55/email27a.gif) no-repeat 0px 5px ;
width:300px;
padding:0px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 1px 0;
color:#686B6C;
}
.tk-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.tk-emailsubmit:hover{
background:#3d87d0;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:150px;
color:#665;}
</style>
<div class="tk-email">
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USERNAME FEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="USERNAME FEED" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="tk-emailsubmit" value="Submit" type="submit" />
</form>
</div>
...............................................................................................................................................................
AΛΛΑΓΕΣ
Κάντε αλλαγή και βάλτε τα δικά σας στοιχεία:Εκεί που λέει URL ΔΙΕΥΘΥΝΣΗΣ θα
βάλετε όλο το λινκ που έχετε στο αντίστοιχο social δίκτυο...

και εκεί που λέει USERNAME θα βάλετε μόνο το username που έχετε στο αντίστοιχο
social δίκτυο...

Όποιος θέλει αλλάζει και το εικονίδιο με δικό του:
https://dl.dropboxusercontent.com/u/49409267/Animation/EMAILS%20GIF/n2.gif

Αποθήκευση και έτοιμοι! 

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


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



Edit by

0 σχόλια :

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

Icon Icon Icon

spice up your blog


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