إضافة رائعة تحت الهيدر لمدونات بلوجر

السلام عليكم زوار مدونة ديزاد فان
في موضوع اليوم أحضرت لكم إضافة جد رائعة يمكنكم وضعها أسفل الهيدر لتعطي لووك و جمال للمدونة
الإضافة هي عبارة عن المتابعة عبر مواقع التواصل الإجتماعي و الإشتراك في النشرة البريدية
المهم أترككم مع معاينة الإضافة
معاينة

و الأن بعد معاينتكم للإضافة سأريكم كيفية تركيب الأضافة
الخطوة الأولى

سجل دخولك للمدونة و إذهب للتخطيط

الخطوة الثانية

HTML إظغط على القالب ثم تحرير

الخطوة الثالثة

Ctrl+F  وذلك بالظغط على <div id='content-wrapper'> إبحث عن

ثم أضف فوقه هذا الكود

<section class="newsletter">

<div id="form-newsletter">

<div class="social facebook">

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

      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm1hob1VBP4Y2ofQmXOm_XK40CxLUEekgDBZ9bnLD2GWM5gkgOHva6_-Sn4MYBbW956ghgaadLdD5yoAc2OwrU7yJrcrtX_J4GwIJ2eaN_MGDpbxJ-pLFte1I_e_gSAuGDmjc6qpMRhkMd/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/AllBloggerTrick" target="_blank">

      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXw0YOBvzIQnF-e7qUFug0LttrJfAdoKDtvrbguIvuzid32a4G3V4Aq6pPw-J7arsxSJgYUUWoOvu9aKEoShmE3XpMtLVYrsWwdRcYStbyo-NpTHEMZWdPONDpy_HOBAuKtDme78Rhe_u0/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>

       إشترك في النشرة البريدية ليصلك كل جديد المدونة

      </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=dzfun', '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="أدخل إيميلك هنا و إظغط على إشترك" />

          <input name="uri" type="hidden" value="Dz Fun" />

          <input name="loc" type="hidden" value="en_US" />

          <input class="subscribe" name="commit" type="submit" value="إشترك" />

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

و الأن إحفظ القالب و تمتع بالإضافة
إلى موضوع آخر إن شاء الله

• شارك
• شارك
• شارك
• شارك

آدم مصطفى السبع

فتى متواضع يريد فقط النجاح عن طريق التدوين و جلب كل جديد بين يديكم.