السلام عليكم ورحمة الله وبركاته
اليوم سوف نتعرف على إضافة مميزة ومهمة في نفس الوقت لمدونات بلوجر ، وهذه الإضافة تكون تحت كل تدوينة من تدوينات مدونتك .
- طريقة التركيب :
1- خذ نسخة من قالب مدونتك خوفاً من الوقوع في الخطأ لا سمح الله
2- ادخل إلى مدونتك | ثم أختر تحرير قالب .
3- إبحث عن هذا الوسم : <data:post.body/> وهو مكرر أكثر من مرة في قوالب بلوجر المقصود الثاني أو الثالث
4- ضع الكود التالي تحت الوسم <data:post.body/> .
<section class="newsletter">
<h2>
إذا أعجبتك المشاركة إضغط لايك أوشاركها مع أصدقائك
</h2>
<div id="form-newsletter">
<div class="social facebook">
<a href="https://www.facebook.com/homeblogger" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtNaorgtnd2KRxoXWJNELPEPijcCm0rB223bzIJzc-I_rS9nj6k-1UxXGoaezWKknb6v5dDQ324c7SLEbcLxaoPcJyNhKxOxF0_4ZQrZzCOviHGfKUfAyvgDvpeX26V1rvCFIruVePaeQN/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%2Fhomeblogger&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="social twitter">
<a href="https://twitter.com/homeblogger" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQikWGZWSHRzLlyRCNpAVDvq-NFpzuaSnDfCoY37epHlEG6ad4px3G_P21SPpkd8PLlD4pFkq30MCAEL9lctYa9-7KzUFdHmB-Xh-4n7EeeRo5rpOFpP309e7ll6OHjTHQSv8De51r6Sw1/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&id=twitter-widget-0&lang=en&screen_name=homeblogger&show_count=false&show_screen_name=false&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)?'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="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=homeblogger', '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="homeblogger" />
<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:" ";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>
- التعديلات :
1- عدل ماهو باللون الأحمر بخاصيتك على الفيس بوك وتويتر و RSS
تنويه : أحبائي وأعزائي : تحية طيبة وبعد ، أنتم تعلمون كم يبذل كاتب التدوينة من جهد وعصف ذهني كي يخرجها إلى حيز الوجود أرجو من شخصكم الكريم عند النقل ذكر المصدر .
كتب بواسطة Expert Blogger
بلدي هو الأردن مشرف سابقا على عدة منتديات و مواقع و صفحات تعليمية على الفيسبوك و من عشاق البحت و الاكتشاف أشياء جديدة و حصرية حول شبكت الأنترنيت من أهمها مدونات بلوجر و وود دبرس و الصفحات على الفيسبوك أحب مساعدة المبتدئين لإنجاز طموحاتهم كما أسعى لتحقيقي طموحاتي من خلال هذا الموفع المتواضع أتمنى أن تنال مقالاتي إعجابكم و أن أكون أول من يدعمكم لشق طريقكم نحو التطور و الإحتراف و الإستفادة من خلال عرض مجموعة من المعلومات و المواضيع القيمة .
0 التعليقات:
إرسال تعليق