إضافة مربع الفيس بوك بجانب أيقونات المتابعة أسفل كل تدوينة

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

 

لوحة التحكم / تحرير القالب / إبحث عن الكود التالى 

<div class='post-footer-line post-footer-line-1'/>

ضع بعدة مباشرة الكود التالى 

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='mdpostfblikebox'>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fmakingdifferent&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23e1e1e1&amp;stream=false&amp;header=false&amp;' style='border:none; overflow:hidden; width:250; height:250px;'/>
</iframe></div>
<div id='mdpost-likebox'>
<div class='row'>
<div class='fb-like' data-href='https://www.facebook.com/mdwanblog' data-send='true' data-show-faces='false' data-width='450'/>
</div>
<div class='row'>
<a href='http://feeds.feedburner.com/00000000' target='_blank' title='Suscribe to RSS feed'>
<img alt='rss' class='middle' src='http://2.bp.blogspot.com/-s_Fv5ETYruQ/UFG9DeJv86I/AAAAAAAADkY/S4TKJ2xfGes/s1600/mdRSS.png'/></a> <a href='http://twitter.com/mdwan_blogger' target='_blank' title='Follow me on Twitter'>
<img alt='twitter' class='middle' src='http://2.bp.blogspot.com/-GRwSCqlR-Ms/UFG9Sk9JpZI/AAAAAAAADkg/5u9Wm3SGH9Q/s1600/mdTwitter.png'/></a> <a href='http://www.facebook.com/mdwanblog' target='_blank' title='Became Fan on Facebook'>
<img alt='facebook' class='middle' src='http://1.bp.blogspot.com/-kkIoLCzsxZc/UFG8PpbWzHI/AAAAAAAADkA/5LFi-PR1F4o/s1600/mdFaceBook.png'/></a>
</div>
<div class='row'>
<h6>إشترك ليصلك كل جديد</h6>
</div>
<div class='row'>
<div class='email'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=00000000&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='00000000'/>
 <input name='loc' type='hidden' value='en_US'/>
 <input class='emailinput' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;أدخل بريدك&quot;;}' onfocus='if (this.value == &quot;أدخل بريدك&quot;) {this.value = &quot;&quot;}' type='text' value='أدخل بريدك'/>
<input class='emailbutton' title='' type='submit' value='سجل'/>
</form>
</div>
</div>
<div class='row'>
<script language="javascript">
document.write( unescape( '%3C%73%6D%61%6C%6C%3E%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%6D%64%77%61%6E%62%6C%6F%67%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%22%3EBy%20Blog%20Mdwan%3C%2F%61%3E%3C%2F%73%6D%61%6C%6C%3E' ) );
</script>
</div>
</div>
</div></b:if>

 الخطوة الأخيرة إبحث عن هذا الكود ]]></b:skin> وضع فوقة مباشرة الكود التالى 

#mdpost-likebox{
margin:10px 10px 0 0;
overflow:hidden;
text-align:center;
float:right;
max-width:250px;
min-width:250px;
min-height:250px
}
#mdpost-likebox h2{
font-size:25px;
font-style:italic;font-variant:small-caps
}
#mdpost-likebox h6{
font-size:1.1em;
font-family:"Myriad Pro",Helvetica Neue,Helvetica,Arial,sans-serif
}
#mdpost-likebox div.row{
text-align:center;
margin-bottom:10px
}
#mdpost-likebox img{
display:inline-block;
border:none !important;
}
#mdpost-likebox .email{
clear:none
}
#mdpostfblikebox{
margin:10px 10px 0 0;
text-align:left;
float:left;
overflow:hidden
}
.emailbutton{
background:#f7f8f9;
background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-ms-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 );
border:1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
padding:6px 12px;
margin:0;
-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
color:#888 !important;
text-shadow:0 1px 0 #fff;
line-height:1.2;
cursor:pointer;
font-size:13px;
font-weight:bold;
text-decoration:none !important
}
.emailbutton:hover{
background:#f1f1f1;
background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-ms-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 );text-decoration:none !important
}
.email{
clear:none
}
.email{
clear:both;
width:100%;
margin:10px 0
}
.emailform{
position:relative;
width:250px;
background:#fff;
margin:0 auto;
-webkit-box-shadow:1px 1px 2px #dfdfdf;
-moz-box-shadow:1px 1px 2px #dfdfdf;
box-shadow:1px 1px 2px #dfdfdf;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;border:1px solid #ddd
}
.emailinput{
width:200px;
height:18px;
margin:0 auto;
padding:8px 40px 8px 10px;
border:none;
background:none;
font-family:georgia;
font-style:italic;
font-size:14px;
color:#666
}
.emailbutton{
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomright:4px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-bottomleft:0px;
border-top-left-radius:0px;
border-bottom-left-radius:0px;
padding:9px;
position:absolute;
right:-2px;
top:-1px;
bottom:-1px;
display:block;
line-height:16px
}
.emailbutton{
padding:8px !important
}
.emailinput{
padding-right:70px !important;
width:170px !important
}
.emailform, .emailinput {
width: 245px !important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing: border-box;
height:auto;
}

الآن إحفظ القالب وتوجه إلى مدونتك وعاين التغييرات