الجمعة، 21 يونيو 2013
الجمعة, يونيو 21, 2013

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

بسم الله الرحمن الرحيم

السلام عليكم ورحة الله تعالى وبركاته، اهلا وسهلا بمتتبعي مدونة محترفي الويب.



يسعدني اليوم ان اقوم بشرح درس يتعلق حول كيفية اضافة اداة هل اعجبك الموضوع تحت كل تدوينة.

تتميز هذه الخاصية بزر الإعجاب و النشرعبر الفيس بوك وخاصية الإشتراك عبر البريد الإلكتروني وتتميز هذه الخاصية ايضا

بحسابك على الشبكات الإجتماعية كـ ( الفيس بوك و التويثر ). وعلى خلاصات المواضيع ايضا.

لنبدا‘ على بركة الله الشرح.

الشرح:

اولا قم بالتوجه الى لوحة تحكم مدونتك.

تانيا اختر القالب.

ثالثا اضغط على تحرير HTML

رابعا قم بتوسيع القالب.

خامسا ابحت عن هذا الكود 

سادسا ضع هذا بعده مباشرة.

<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/AVvXsEjRp2aGhEW7e8xLiEHr0Fp2NOKmRusABglofuUyo71lJ3LTurJkJMNZ-G03Er2N45TOUVTH6dQgRIxgqwMutwYUbFtgJ4FrGXk3B8MoMgp6pwGtFvaNSUUezVKi-gLbxaRSsrbrMB_SXNUt/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/AVvXsEjm6Q5oc0BOUKjUofzKbPHH6BOiovYT_AcnMuuhMmFu5OFT27gEr7PEHhL8mn1Bj1aijmq6wTOLXqxGenXgXe_cdFptWGuFXWMrEwpyOYPeHozj5a3IPxXvNpYBRVOKDR-dsxbPvv7m3iw/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/AVvXsEg6_pN6lWeDbi-e-6bKcwI5XpGBV6O2fTgpbCgJjQdUTkG6irev6j1hXsA0hVruX7dDXsO1UQceefeNiHzH6Qf6xEwNrOZIYDNPj90IpmkPOmsiGmMhh9ehetaObHI1mV6g6j2gBy9DGvk/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/AVvXsEiV4hhyphiAOUCeDc3Td94_Kec1WPXMXZ9_IM_-3ie-_QZXCWJO6HR1GlqensKo2gVN-VNxajRly1j0vSmruXPo-jSnQI4M9hQJaN1XsFsu3hCW2-mwrqwB9mPShZUEH-hkFRTdeNg6BIE/s1600/facebook.png'/></a>
</td>
</tr>
</tbody></table></div></div>
</b:if>

التعديل على الكود:

* modawanatmohamed : ضع اسم صفحتك على الفيس بوك.

* prof_blogger : ضع الإسم الخاص بك على تويتر.

* hamedblog : ضع الإسم الخاص برابط التغدية.

انتهى درس اليوم الى اللقاء الى درس اخر وشكرا.





 

0 التعليقات:

إرسال تعليق