Sosyal Medyada Takip Etme ve Abone Olma Kodu

Onlarca sitelerde benzer paylaşım butonları ve sosyal medyada takip butonlarından sıkıldınız değil mi? İşte aradığınız muhteşem kod burada. Şık görünümlü sosyal medyada takip etme ve email ile abone olma kodu bir arada. Şimdi sizlere bu widget'in bütün yazılarınız altında nasıl gözükeceğini sizlere göstereceğim

1. ADIM 

1. Blogunuzun html Şablon sekmesine gidin
2. HTML'yi düzenle tuşuna basınız
3. CTRL+F e basınız
4. Arama kutusuna bunları deneyiniz. <footer> ya da <div id='footer'> ya da <div id='footer'> ya da <div class='post-footer-line post-footer-line-1'>
5. Yukarıda uyan kodun devamına şu kodları ekleyeniz.  

<section class="technopcarea-newsletter">
<h2>
Checking for new posts is time wasting,
</h2>
<div id="form-technopcarea-newsletter">
<div class="technopcarea-social facebook">
<a href="https://www.facebook.com/TechnoPcArea" target="_blank">
      <img src="http://i.imgur.com/RbZgdq2.png" />
    </a><a href=’http://technopcarea.blogspot.com/’><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE6u3ZPJBf-htP_b6V-dCk40JuKhhcEhNLKe293ytUSnwQE79-XUMoeUlg3J6_pX8WiAasoOx44Y8rKKYajkAsdctEhzabp7xtQnr9j7JPVpnggOBTWARrRBKnW09sjMcVu-kMexkTcFM/s1600/1x1juice.png'/></a>
    <iframe allowtransparency="true" class="technopcarea-social-box fb-like" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FTechnoPcArea&width=90&height=21&colorscheme=light&layout=button_count&action=like&show_faces=false&send=false&appId=519648428126767&locale=en_US" style="border: none; height: 21px; overflow: hidden; width: 90px;">
    </iframe>
  </div>
<div class="technopcarea-social twitter">
<a href="https://twitter.com/TechnoPcArea" target="_blank">
      <img src="http://i.imgur.com/0A1kead.png" />
    </a>
    <iframe allowtransparency="true" class="technopcarea-social-box twitter-follow-button twitter-follow-button" data-twttr-rendered="true" frameborder="0" id="twitter-widget-0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1399599786.html#_=1399785529920&id=twitter-widget-0&lang=en&screen_name=TechnoPcArea&show_count=false&show_screen_name=false&size=m" style="height: 20px; width: 60px;" title="Twitter FollowButton">
    </iframe>
    <script>
      !function(d,s,id){
        var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
        if(!d.getElementById(id)){
          js=d.createElement(s);
          js.id=id;
          js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
    </script>
  </div>
<div class="technopcarea-newsletter-form">
<fieldset>
<h2>
When you can get them all in your inbox.
      </h2>
<div class="fields">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=TechnoPcArea', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="email" id="email" name="email" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" type="text" value="Enter Your Email here.." />
          <input name="uri" type="hidden" value="TechnoPcArea" />
          <input name="loc" type="hidden" value="en_US" />
          <input class="subscribe" name="commit" type="submit" value="Subscribe" />
        </form>
</div>
</fieldset>
</div>
</div>
</section>
<style>
input { font-family: Open Sans; }
h2 {font-family: Open Sans; }
.technopcarea-newsletter{text-align:center;margin:20px 0;}
.technopcarea-newsletter .technopcarea-social.facebook{background:none repeat scroll 0 0 #3661A0}
.technopcarea-newsletter .technopcarea-social{padding-top:20%;width:20%;float:left;position:relative}
.technopcarea-newsletter #form-technopcarea-newsletter{display:block;width:90%;max-width:900px;min-width:500px;margin:0 auto}
.technopcarea-newsletter:before,.technopcarea-newsletter:after{content:" ";display:table}
.technopcarea-newsletter:after{clear:both}
.technopcarea-newsletter h2{color:#3B434D;font-family:Sniglet;font-size:1.5em;font-weight:300;width:65%;margin:1em auto}
.technopcarea-newsletter .technopcarea-social.twitter{background:none repeat scroll 0 0 #00ACED}
.technopcarea-newsletter .technopcarea-social a{display:block;left:30%;position:absolute;top:20%;width:40%}
.technopcarea-newsletter .technopcarea-social a img{max-width:100%;width:100%;transition: transform 0.3s ease-out 0s}
.technopcarea-newsletter .technopcarea-social a:hover img{transform:scale(1.1)}
.technopcarea-newsletter .technopcarea-social .technopcarea-social-box{bottom:20px;left:50%;position:absolute}
.technopcarea-newsletter .technopcarea-social .technopcarea-social-box.fb-like{margin-left:-45px}
.technopcarea-newsletter .technopcarea-social .technopcarea-social-box.twitter-follow-button{margin-left:-30px}
.technopcarea-newsletter .technopcarea-newsletter-form{background:none repeat scroll 0 0 #1E293B;float:left;padding-top:20%;position:relative;width:60%}
.technopcarea-newsletter .technopcarea-newsletter-form fieldset{height:37px;left:10%;position:absolute;top:10%;width:80%;border:none}
.technopcarea-newsletter .technopcarea-newsletter-form fieldset h2{color:#FFF;font-family:Sniglet;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px;}
.technopcarea-newsletter .technopcarea-newsletter-form fieldset .fields{position:relative}
.fields .email{border-radius:10px 0 0 10px;outline:0 none;width:84%;border:0;left:0;position:absolute;padding:10.5px}
.fields .subscribe{background:none repeat scroll 0 0 #F0553B;border:mediumnone;border-radius:0 10px 10px 0;color:#FFF;right:0;position:absolute;padding:11px;transition:all ease 0.6s;}
.fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}
</style>
<script type="text/JavaScript">
fontsize = function () {
    var abtSubs = $(".technopcarea-newsletter #form-technopcarea-newsletter").width() * 0.025; // 10% of container width
    $(".technopcarea-newsletter .technopcarea-newsletter-form fieldset h2").css('font-size', abtSubs);
};
$(window).resize(fontsize);
$(document).ready(fontsize);
</script>

1. Sosyal medya takip etme linkleri ve abone olma linki koyu renkte belirtilmiştir. O alanlara size ait linkleri ekleyebilirsiniz
2. Eğer sitenize eklemekte sorun yaşıyorsanız ya da hata veriyorsa lütfen bizimle iletişime geçin.