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

 

السلام عليكم و رحمة الله, إخواني الكرام في هذا الموضوع سنتعرف و إياكم على طريقة إضافة أداة ( هل أعجبك الموضوع…؟ ) لمدونة البلوجر  تحتوي هاته الأداة على خاصية الإشتراك عبر البريد الإلكتروني و زري النشر و الإعجاب من الفايسبوك و كذلك حسابك على الشبكات الإجتماعية ( الفايسبوك – تويتر ) بالإضافة إلى خلاصة المواضيع, لقد عدلت على هاته الأداة و خصصتها لتناسب المدونات العربية. يمكنك مشاهدة مثال مباشر للأداة أسفل هاته التدوينة, ولإضافتها إلى مدونتك يجب عليك اتباع الخطوات التالية : 

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/AVvXsEiUX0w0R4Zwms8gR9KQGnu8YDgOx6E97JN08j_beTVmCwecxfyNWBWsNOrNbOXs9QA3Cli1-ssl5FRjsSwORkn39Jq_RpP98eI-RWBdza-RzchOfr6d2M4PGdj_2TLZ2kBmo5iRisLjnwmm/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/AVvXsEiDg1RBFek2jhyphenhyphenC5Q0XA5l3Rwxuo98_CZQ-g4qPCh52OPE9EXYnkfjXviS9AT9YGS6seZ7Klvf35hhZWDQWYY4ZfjhXGHKef2I5hVlGnEEp59fh7ohE9ogzW0aQfZTK6nwK82CCmhRgdWw/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/AVvXsEjqzcJURNHCU3Wr1z4BGxIEKZqktGWnuuEJGsXTd6TZVWHi9V3eBXEVbDMwkXjKPJ1Wr0kalj3x7sXDBcqZb_QvqsYohmgJmCczB9Sm7crSrpeg6p4ui9qlsPmOsO3OFqtXUJy0PlugyFc/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/AVvXsEh8atRZc3MVAmS1tzm3z50IJRr8PH_ePZ9aCl3RUdBzUD-ZXxlisXsHcv9wYsMPmBz9gVv-OMzTu7HLkf4WRhkcGutSS2RHHTy_z0IhiPsVlv4EB3lUHkN8dG8dB7O7U_ssqLLZqsNaj-4/s1600/facebook.png'/></a>
   </td>

   </tr>

   </tbody></table></div></div>
   </b:if>

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

• modawanatmohamed : اسم صفحتك على الفايسبوك.
• prof_blogger : الإسم الخاص بك على تويتر.
• hamedblog : الإسم الخاص برابط التغدية.