Tutorial Membuat Sosial dan Box Subscribe Widget Cantik

Tutorial Membuat Sosial dan Box Subscribe Widget Cantik | Ghiyats Blogs - Hai, Salam Untuk sobat semua.. Widget yang saya akan bagikan ini berguna dan bermanfaat untuk membuat blog menjadi bisa di kenal, dan memang sangat di perlukan widget seperti ini.

Widget Sosial dan Box Subscribe atau ( Kotak Berlangganan ) sangat berguna untuk membuat blog lebih di kenal lagi Seperti Widget sosial media yang sangat membantu kita para admin untuk bisa menyebar artikel artikel kita supaya bisa di kenal lagi lebih jauh dan membuat pengunjung bisa berkomunikasi dan berinteraksi dengan admin blog tersebut.

Sedangkan Widget Kotak Berlangganan sangat membantu para pengunjung yang suka para blog tersebut dan ingin bisa mendapat update artikel terbaru dari blog tersebut, Tapi yang akan saya bagikan langsung keduanya dalam satu widgetnya yang membuat lebih keren dan juga dengan tampilan warna yang stylish membuat widget begitu cantik, dan ini dia demonya.

DEMO

Kalau sobat tertarik ini dia tutorialnya :

• Login Ke Blogger.com
• Setelah berada di Dasbor blogger >> Menu Template
• Edit HTML >> CarI kode <data:post.body/> Setelah ketemu masukan kode di bawah ini di atas/sebelum kode <data:post.body/>
• Ket : Kode <data:post.body/> ada 2-4 kode, jadi kalau widget ini tidak muncul coba anda ganti lokasi kodenya

<section class="newsletter">

<h2>

Tired of checking for new posts ?

</h2>

<div id="form-newsletter">

<div class="social facebook">

<a href="https://www.facebook.com/Username" target="_blank">

      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGxpkiHaYPi8Ufiay47VJvaibz37SlWBGMP0GmZbN9Xy-qogXyidKNswrtUtw6P0nmOtKdlU8LVbmDJD7YV-ULXvAaHwBSn_0T72rj0yJIfaBGWuzgcpdPkhvLsAySIrfpxGi1QbG8tHRz/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%2FAllBloggerTricks&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/ Username " target="_blank">

      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN8opOnNsb5rnWA-X6DIvlrh3FRJpj09Bk1F43C8i4tr0XG-QjI-pNdEB3yCTZQJ7RPuCRT63nRekDcqocgckty4faVvmt0CJqcN-7jEEcVeEUAMwrETk3ZZwM3vtQbWkWbB0a8yjGmohS/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=AllBloggerTrick&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>

       Get all posts directly in your mail.

      </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= Username ', '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=" Username" />

          <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>

• Ganti  Username  Dengan Username id Sesuai Sosial media  
• Ganti Dengan kata kata yang anda inginkan
• Setelah anda selesai Klik SIMPAN

Demikianlah artikel yang berjudul ''Tutorial Membuat Sosial Dan Box Subscribe Widget Cantik'' Semoga Bermanfaat Dan Mudah untuk di gunakan, Silakan Beri pendapat anda tentang artikel ini dan kalau sobat punya informasi silakan berkomentar di kolom komentar di bawah ini, Terima Kasih...

Via : All Blogger Tricks

Keep Blogging..