Widget Social Subscriber Untuk Blogger - Hallo sahabat Meta News, Pada Artikel yang anda baca kali ini dengan judul Widget Social Subscriber Untuk Blogger, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Tutorial, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Widget Social Subscriber Untuk Blogger
link : Widget Social Subscriber Untuk Blogger

Widget Social Subscriber Untuk Blogger

Hai Semua!!
Sobat Blogger! Kali ini MetaNews ID ingin membagikan sebuah widget yang cukup bermanfaat untuk meningkatkan pengunjung dan pelanggan blog anda. Social Subscriber yang bersih dan elegan. Widget ini bisa anda pasang di bagian footer dari setiap postingan anda.

Menambahkan Widget

Untuk menambahkan widget ini Log in ke Blogger anda → Klik Template → Edit HTML
Tekan Ctrl + F, dan cari kode <data:post.body/>
Note : Mungkin ada sekitar 2-4 kode <data:post.body/>, carilah kode yang tepat, tambahkan kode berikut ini di bawah <data:post.body/> tersebut, jika belum berhasil coba di bawah <data:post.body/> lainnya

<section class="newsletter">
<h2>
Capek Ngecek Posting Baru ?
</h2>
<div id="form-newsletter">
<div class="social facebook">
<a href="https://www.facebook.com/pages/Metanews-ID/771767726172576" target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkNl7euCbykapkKhTnxzcF0qJZuyuDdIpmPSifBE-_elxW6Z0lzWUVC_XzfsN9u8JWgvZFtiFloGcX_D0Z4_yT_P4zQGlVPotJQ12xWMWqXPXMr8w6PN66Dbh4KQnSUpSJoP5OIBjJFfEh/s1600/nl-facebook@2x.png" />
    </a>
    <iframe allowtransparency="true" class="social-box fb-like" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FMetanews-ID&amp;width=90&amp;height=21&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;send=false&amp;appId=519648428126767&amp;locale=en_US" style="border: none; height: 21px; overflow: hidden; width: 90px;">
    </iframe>
  </div>
<div class="social twitter">
<a href="https://twitter.com/MetaNews_ID" target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheOBSBaEMfEZ_uA10H_xbmoOLMtjpSdEGCQdq0mPCr2amskIFiwhThnV4QBkgJPUja4ot_V-qqtKjgQum6UM5ON8V87dRMEkE5DY-RgboTDChAQIUjpgSufks44zGADTUgGlhXjaw2_GyQ/s1600/nl-twitter@2x.png" />
    </a>
    <iframe allowtransparency="true" class="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&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=MetaNews_ID&amp;show_count=false&amp;show_screen_name=false&amp;size=m" style="height: 20px; width: 60px;" title="Twitter Follow Button">
    </iframe>
    <script>
      !function(d,s,id){
        var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;
        if(!d.getElementById(id)){
          js=d.createElement(s);
          js.id=id;
          js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
    </script>
  </div>
<div class="newsletter-form">
<fieldset>
<h2>
       Dapatkan Update Terbaru.
      </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=MetanewsId', '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="MetanewsId" />
          <input name="loc" type="hidden" value="en_US" />
          <input class="subscribe" name="commit" type="submit" value="Subscribe" />
        </form>
</div>
</fieldset>
</div>
</div>
</section>
<style>
.newsletter{text-align:center;margin:20px 0;}
.newsletter .social.facebook{background:none repeat scroll 0 0 #3661A0}
.newsletter .social{padding-top:20%;width:20%;float:left;position:relative}
.newsletter #form-newsletter{display:block;width:90%;max-width:900px;min-width:500px;margin:0 auto}
.newsletter:before,.newsletter:after{content:&quot; &quot;;display:table}
.newsletter:after{clear:both}
.newsletter h2{color:#3B434D;font-family:Open Sans,sans-serif;font-size:1.5em;font-weight:300;width:65%;margin:1em auto}
.newsletter .social.twitter{background:none repeat scroll 0 0 #00ACED}
.newsletter .social a{display:block;left:30%;position:absolute;top:20%;width:40%}
.newsletter .social a img{max-width:100%;width:100%;transition: transform 0.3s ease-out 0s}
.newsletter .social a:hover img{transform:scale(1.1)}
.newsletter .social .social-box{bottom:20px;left:50%;position:absolute}
.newsletter .social .social-box.fb-like{margin-left:-45px}
.newsletter .social .social-box.twitter-follow-button{margin-left:-30px}
.newsletter .newsletter-form{background:none repeat scroll 0 0 #1E293B;float:left;padding-top:20%;position:relative;width:60%}
.newsletter .newsletter-form fieldset{height:38px;left:10%;position:absolute;top:10%;width:80%;border:none}
.newsletter .newsletter-form fieldset h2{color:#FFF;font-family:Open Sans, sans-serif;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px;}
.newsletter .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:medium none;border-radius:0 10px 10px 0;color:#FFF;right:0;position:absolute;padding:10px;transition:all ease 0.6s;}
.fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}
</style>
<script type="text/JavaScript">
fontsize = function () {
    var abtSubs = $(".newsletter #form-newsletter").width() * 0.025; // 10% of container width
    $(".newsletter .newsletter-form fieldset h2").css('font-size', abtSubs);
};
$(window).resize(fontsize);
$(document).ready(fontsize);
</script>

Mengedit Kode

Ubah kode tebal berwarna biru sesuai dengan Facebook, Twitter dan Feedburner anda

Demikianlah Artikel Widget Social Subscriber Untuk Blogger

Sekianlah artikel Widget Social Subscriber Untuk Blogger kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Widget Social Subscriber Untuk Blogger dengan alamat link https://infoasikindo.blogspot.com/2014/07/widget-social-subscriber-untuk-blogger.html

Tweet