WordPress Style Social Subscription Form v2

• 2/03/2013

Σύνδεση στο Blogger ταμπλό σας.
Κάντε κλικ στο drop-down μενού και επιλέξτε "Διάταξη".
Κάντε κλικ σε ένα "Προσθήκη Gadget" σύνδεσμο.
Μετακινηθείτε και να βρει "HTML / JavaScript" στοιχείο από το pop-up λίστα gadget.
Αντιγράψτε τον παρακάτω κώδικα και επικολλήστε μέσα στο «κουτί Περιεχομένου".

<style>

.Subscribe-MBT h6{
background:URL(http://4.bp.blogspot.com/-koRv-wLVoJ4/UDReC1-KqnI/AAAAAAAAAxc/q3-D0_cGK6o/s1600/Subscribe+More+Blog+Tools.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-MBT{
width: 300px;
float: left;
}
.Subscribe-MBT .count{
color:#F17C18;
font-size: 14px;
font-weight: bold;
font-family: Helvetica, Arial;
height: 40px;
line-height: 40px;
vertical-align: middle;
width: 310px;
padding: 0 0px 0 4px;
margin:0;
}
.Subscribe-MBT .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-MBT .subicons{
border-bottom: 1px solid #e6e6e6;
margin: 0px 0 0px 0;
float: left;
width: 300px;
font-family: Helvetica, Arial; font-size: 12px;
}
.Subscribe-MBT .emailsub{
border-bottom: 0px solid #e6e6e6;
padding: 15px 0 0px 0;
float: left;
width: 100%;
font-family: Helvetica, Arial;
}
.Subscribe-MBT .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.FoulsCode.blogspot.gr/">Fouls Code</a></p>
<div class="Subscribe-MBT">
<h6 class='title'>Subscribe Now!</h6>
<div class="count">
<span class="bigcount">
<a href="http://feeds.feedburner.com/FoulsCode"><img src="http://feeds.feedburner.com/~fc/FoulsCode?bg=F17C18&fg=000000&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/FoulsCode" rel="nofollow" target="_blank">Rss</a></li>
<li class="twicon">
<a href="http://twitter.com/FoulsCode" rel="nofollow" target="_blank">Twitter</a></li>
<li class="fbicon">
<a href="https://www.facebook.com/pages/Fouls-Code/548164921863886?ref=hl" rel="nofollow" target="_blank">FaceBook</a></li>
<li class="gicon">
<a href="https://plus.google.com/031929520745" rel="nofollow" target="_blank">Google+</a></li>
<li class="yticon">
<a href="http://www.youtube.com/FoulsCode" rel="nofollow" target="_blank">YouTube</a></li>
</ul>
</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=FoulsCode', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform">
<input type="hidden" value="FoulsCode" name="uri" />
<input type="hidden" name="loc" value="en_US" /> <input type="text" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" value="Enter your email..." name="email" class="emailinput" /> <input type="submit" class="emailbutton" value="Submit" title='' /></form></div></div></div>

Αλλάξτε τα link που είναι χρωματιστά με τα δικά σας αποθήκευση και είναι έτοιμο.

DEMO

Κατηγορίες:

Social WordPress

Σχόλια

Νεότερες αναρτήσεις Παλαιότερες αναρτήσεις

WordPress Style Social Subscription Form v2

Όλα τα ελληνικά Torrent Sites (Trackers).

Όλες οι κατηγορίες

Σε διαβούλευση το σχέδιο νόμου «Πανεπιστήμιο Ιωαννίνων»

1η σελίδα στο Google και backlinks

Ελληνική Τηλεόραση

Αναθεωρημένες τοποθεσίες στην Ελλάδα κατά τις τελευταίες 48 ώρες - Revised Locations in Greece during the last 48 hours

Όικονομικό Ημερολόγιο

Διαφθορά: οι ΗΠΑ έδωσαν 100.000 δολάρια σε κορυφαίο ελληνικό χριστιανικό σάιτ για να προωθήσει τις παρεμβάσεις της CIA σχετικά με την Ουκρανική Εκκλησία.

ΕΘΝΙΚΟ ΔΕΛΤΙΟ, 5-3-2018

Χρήσιμα Εργαλεία & Resources