إضافة أداة هل ( أعجبك الموضوع…؟ ) أسفل كل تدوينة


السلام عليكم و رحمة الله, إخواني الكرام في هذا الموضوع سنتعرف و إياكم على طريقة إضافة أداة ( هل أعجبك الموضوع…؟ ) لمدونة البلوجر  تحتوي هاته الأداة على خاصية الإشتراك عبر البريد الإلكتروني و زري النشر و الإعجاب من الفايسبوك و كذلك حسابك على الشبكات الإجتماعية ( الفايسبوك – تويتر ) بالإضافة إلى خلاصة المواضيع, لقد عدلت على هاته الأداة و خصصتها لتناسب المدونات العربية. يمكنك مشاهدة مثال مباشر للأداة أسفل هاته التدوينة, ولإضافتها إلى مدونتك يجب عليك اتباع الخطوات التالية : 
separator 1
  1. اتجه إلى لوحة التحكم في مدونتك => اختر تصميم => ثم تحرير HTML. هذا بالنسبة لواجهة البلوجر القديمة.
  2. أما بالنسبة لواجهة البلوجر الجديدة فتوجه إلى => لوحة التحكم في مدونتك => ثم قالب=> بعد ذلك اختر تحرير HTML => ثم اضغط على متابعة.
  3. قم بتوسيع القالب.
  4. وابحث عن الكود التالي : <data:post.body/>
  5. بعد إيجاد الكود السابق قم بوضع الكود التالي أسفله مباشرة :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style> 
form.emailform{ 
margin:20px 0 0; 
display:block; 
clear:both; 
} 
.text{ 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_7BETWEKTMZFfB2sPX0Df09WzPHekPuDB_QTVI-C8lGE8tt8ae-ii5tliY_iMhI1Zh35Qg4gLQiaskQ6qC7qi-AzhiDOYzAyz0gD8TY-mG5-uZGLtNGf8FT7FdRDgaXpZXFh7RN4si_Py/s28/w2b-mail.png) no-repeat scroll 4px center transparent; 
padding:7px 15px 7px 35px; 
color:#666; 
font-weight:bold; 
text-decoration:none; 
border:1px solid #D3D3D3; 
-moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
border-radius: 4px; 
-moz-box-shadow: 1px 1px 2px #CCC inset; 
-webkit-box-shadow: 1px 1px 2px #CCC inset; 
box-shadow: 1px 1px 2px #CCC inset; 
} 
.button{ 
color:#666; 
font-weight:bold; 
text-decoration:none; 
padding:6px 15px; 
border:1px solid #D3D3D3; 
cursor: pointer; 
-moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
-goog-ms-border-radius: 4px; 
border-radius: 4px; 
background: #fbfbfb; 
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4)); 
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); 
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); 
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 ); 
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); 
}
#doulike-outer { 
-moz-border-radius: 10px 10px 10px 10px; 
-webkit-border-radius: 10px 10px 10px 10px; 
-goog-ms-border-radius: 10px 10px 10px 10px; 
border-radius: 10px; 
background: none repeat scroll 0 0 transparent; 
border: 1px solid #000000; 
padding: 8px; 
-moz-transition: all 0.3s ease-out; 
-o-transition: all 0.3s ease-out; 
-webkit-transition: all 0.3s ease-out; 
-ms-transition: all 0.3s ease-out; 
transition: all 0.3s ease-out; 
width:480px; 
} 
#doulike-outer:hover{ 
background: none repeat scroll 0 0 #FFF; 
-moz-box-shadow: 1px 1px 2px #CCC inset; 
-webkit-box-shadow: 1px 1px 2px #CCC inset; 
box-shadow: 1px 1px 2px #CCC inset; 
} 
#doulike-outer td{ 
padding:3px 0; 
} 
</style>
<div id='doulike-outer'> 
<div id='doulike'> 
<table width='100%'> 
<tbody> 
<span style='font-style: bold; font-size: 30px; font-family: arial,sans-serif, verdana;  color:#11958A;'>هل أعجبك الموضوع ...&#1567;</span> 
<tr> 
<td>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='300'/>
</td>
</tr>
<tr>
<td align='right'> <p style='color:#666; font-style:normal; margin:0px 0px 5px 0px; '> اشترك معنا و تابع جديد المدونة :)   </p> 
<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=tntbystc&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'> 
<input name='uri' type='hidden' value='hamedblog'/> 
<input name='loc' type='hidden' value='ar'/> 
<input class='text' 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 alt='' class='button' title='' type='submit' value='اشترك'/> 
</form> 
</td>
<td><p style='color:#666; font-style:normal; margin:0px 0px 5px 0px;  '>كن من متابعينا </p> 
<a href='http://feeds.feedburner.com/hamedblog' rel='nofollow' target='_blank' title='تابعنا عبر خلاصات المدونة'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis-XwEqXIMmrf5oRZvIYLjL1vsQrJa9Exvtmc4BZ-iJZ0OpCJdG9TccVMPtu4UCp2immyxrQ4rvTvX7hCOFZePXnT31lMEKNr_CvymqJKqnLxs81sxu3PFQ0CQDptZy6ybVGvQfho2kuU/s1600/RSS.png'/></a>
<a href='http://twitter.com/prof_blogger/' rel='nofollow' target='_blank' title='تابعنا عبر تويتر'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD7rekO77TM1ElTZPhtJOEEqLtJ3DKPCUvypUjIRYs676w7cJfrRoLLARIoNHOxt0x6HSX4P0lk3F1C3gU3R3rSAkqHcY3KEhnES58zUV19cst8hJ9uBXxsPRGHGPUImJwJkjLjd9cJ4w/s1600/twitter.png'/></a>
<a href='http://www.facebook.com/modawanatmohamed/' rel='nofollow' target='_blank' title='تابعنا عبر صفحتنا على الفايسبوك'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkDtTR-U5nPWJfGubdeUyD5aMT7s0sKmy8JDS1rMTlQ3GvH4B6aAAarB4aoC-7ndxIv0S6EOiPU4ENO82DQXC1qOXODpJz6HUWgKKQteBG6dUYLTI6QE1CWQb5WKR3RUlG4AeulKn8p80/s1600/facebook.png'/></a> 
</td>
</tr>
</tbody></table></div></div> 
</b:if>
التعديل على الكود :
  • modawanatmohamed : اسم صفحتك على الفايسبوك.
  • prof_blogger : الإسم الخاص بك على تويتر.
  • hamedblog : الإسم الخاص برابط التغدية.
إذا واجهتكم أي مشكلة فلا تترددو في طرحها لنجد لها حلا بإذن الله
____
التصنيفات

إرسال تعليق

0 تعليقات