Sosyal Medya Butonları ve Abonelik Formu

Daha önce sizlere şu yazımda vermiş olduğum eklentimizin bir benzerini bugün sizler ile paylaşıyorum.Yine aynı şekil üstte sosyal medya butonları hemen altında abonelik formumuz bulunmakta.Hemen kodlara geçelim isterseniz.

Kodları vermeden önce sizlere canlı bir demo sunayım.Demoya aşağıdaki butondan ulaşabilirsiniz.


DEMO

]]></b:skin>

Yukarıdaki kodu bulun ve hemen öncesine aşağıdaki kodu ekleyin.

.social {
background: none repeat scroll 0 0 #FCFCFC;
border-bottom: 1px solid #F0F0F0;
height: 80px;
padding: 15px;
}
.social li {
float: left;
margin-right: 15px;
text-align: center;
width: 52px;
}
.social li.last {
margin-right: 0;
}
.social li a {
color: #666666;
font-size: 11px;
line-height: 34px;
opacity: 0.6;
padding-top: 42px;
}
.social li a:hover {
color: #666666;
opacity: 1;
text-decoration: none;
}
.social .social-feed {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgze_LhI76wJVLUjja3_OUL4DGgrERoViubzTsgDIqEPTICsPCMpGSsIWG9KJ2P2ELqqde0apquS-CvQ9q9nyZZuQxDgivI9O9vaVR6Sn7i-kbBx3s32PK-geHqeNTrWxuVgljQheNNbQ9u/") no-repeat scroll 0 0 transparent;
display: block;
}
.social .social-twitter {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSjsZmol1Wsi3mnesimOCu4HS6kn3HpjvIovS-yyIjeq9TUwtVBMip-ZoaOsUiNSyk4IpnQ3sQ_DoJcZ0rrS5p5ZWJKhXNhoH1CrJoxhyphenhyphenWmxi-fFsTNQrCdhVYupTfx61RhMULeg1tqUYb/") no-repeat scroll 0 0 transparent;
display: block;
}
.social .social-facebook {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1QLzx0BSUa2GlydtRyf-isbtGj7FxW3TY6qN8WMvFL1uE8QCLGauGTGRWwpFEEOAd8bzzGVQs2CrJGjs6OrbHStV4bykKXAgL8upjW8aYy5_kZMZCARtv_cZpQnRGdKIFCd-wkpA5aJQK/") no-repeat scroll 0 0 transparent;
display: block;
}
.social .social-youtube {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKe2Qt5x5plnfpUO9JfRMRrM6i_KFAcuyWU1dnlkhlD_0xeTp5jfRx7UURr21840EgymX9J78zfddcYy5IckpHP1FT9wlc0R3aAICqVR2gIFtraYe1XvwvCkhLQAavzQoQGG_boqowHE5N/") no-repeat scroll 0 0 transparent;
display: block;
margin-right: 0;
}

Şimdi ise abonelik formumuzu ve sosyal medya butonlarımızı nereye eklemek istiyorsak orada bir gadget oluşturuyoruz ve aşağıdaki kodları ekliyoruz.

<ul class='social'>
<li><a class='social-feed' href='##' rel='nofollow' target='_blank'>RSS feed</a></li>
<li><a class='social-twitter' href='##' rel='nofollow' target='_blank'>Twitter</a></li>
<li><a class='social-facebook' href='##' rel='nofollow' target='_blank'>Facebook</a></li>
<li class='last'><a class='social-youtube' href='##'>Google+</a></li>
</ul>
<br />
<br />
<br />

<style> 
.mbt-email{ 
background:url(http://cdn1.iconfinder.com/data/icons/socialmediaicons_v120/48/email.png) no-repeat 0px 12px ; 
width:300px; 
padding:10px 0 0 55px; 
float:left; 
font-size:1.4em; 
font-weight:bold; 
margin:0 0 10px 0; 
color:#686B6C; 
}
.mbt-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; 
} 
.mbt-emailsubmit:hover{ 
background:#007fff; 
} 
.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:170px; 
color:#666;}
</style>
<div class="mbt-email"> 
E-Posta Aboneliği 
<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=FEEDBURNER ID', '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;E-Posta Adresinizi Girin&quot;;}" onfocus="if (this.value == &quot;E-Posta Adresinizi Girin&quot;) {this.value = &quot;&quot;;}" value="E-Posta Adresinizi Girin" type="text" /> 
<input type="hidden" value="FEEDBURNER ID" name="uri"/><input type="hidden" name="loc" value="en_US"/> 
<input class="mbt-emailsubmit" value="Gönder" type="submit" /> 
</form> 
</div>

Geriye kalanlar basit, kendi kullanıcı adreslerinizi yazarak eklentimizi kullanmaya başlayabilirsiniz.


-İyi bloglamalar