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

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

و الصلاة و السلام على أشرف المرسلين

أحبتي في الله سأقدم في هذا الشرح كيفية إضافة أزرار المواقع الإجتماعية ( زر لايك للفيسبوك, زر التويت للتويتر, و زر المشاركة عبر جوجل بلس ). هذه ألإضافة أنا بنفسي وضعتها بمدونتي شكلها الرائع و تصميمها الدقيق و أحببت أن أشارككم إياها في هذا الموضوع.

هذا هو شكل الإضافة :

كيفية إضافة الأداة :

نتجه من مدونتنا إلى قالب : 

ثم تحرير html

ثم إضغط على ctrl + f و ابحث عن :

<data:post.body/>

ثم بعد الكود السابق أضف الكود التالي :

<b:if cond='data:blog.pageType == &quot;item&quot;'> <p align='right'>                                           <h2 style='color: #33FF00; font: 15px droidkufi-bold; padding: 5px 8px; background: #1797ed; display: inline-block; border: none;'>                                            شجعنا بلايك أو بمشاركة على المواقع الإجتماعية                                          </h2>                                       </p> <style> .promote_post_bg {     height: 103px;     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcfbQaYVg8t92Hrk7rmddhmLaWUY766g5NnVKWLwlSTssoeac7yi0B3fxCh0kjSo3f21SeySA0G-0DBzgg5d_K1vuvhoxfC3es4RwEj-Wiu-hzQGRn-VED3oaVBX5uJCzHrakE5Uj2SqE3/s1600/chamelcool2.gif) 0 -7px no-repeat;     width: 500px;     margin-left: 65px; } .promote_twitter {     width: 130px;     height: 38px;     float: left;     margin: 0 39px 0 0;     padding: 65px 0 0 13px;     text-align: center; } .promote_facebook {     width: 115px;     height: 40px;     float: left;     margin: 0 39px 0 0;     padding: 63px 0 0 28px;     text-align: center; } .promote_google {     width: 65px;     height: 40px;     float: left;     margin: 0 39px 0 0;     padding: 65px 0 0 28px;     text-align: center; } </style>     <div class='promote_post_bg'>         <div class='promote_twitter'>             <a class='twitter-share-button' data-via='مدونة عماد الرافعي' href='https://twitter.com/share'>Tweet</a>             <script>                 !                 function (d, s, id) {                     var js, fjs = d.getElementsByTagName(s)[0];                     if (!d.getElementById(id)) {                         js = d.createElement(s);                         js.id = id;                         js.src = &quot;//platform.twitter.com/widgets.js&quot;;                         fjs.parentNode.insertBefore(js, fjs);                     }                 }(document, &quot;script&quot;, &quot;twitter-wjs&quot;);             </script>         </div>         <div class='promote_facebook'>             <div>                 <b:if cond='data:post.isFirstPost'>                     <script>                         (function (d) {                             var js, id = &#39;facebook-jssdk&#39;;                             if (d.getElementById(id)) {                                 return;                             }                             js = d.createElement(&#39;script&#39;);                             js.id = id;                             js.async = true;                             js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;                             d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);                         }(document));                     </script>                 </b:if>                 <fb:like action='like' colorscheme='light' expr:href='data:post.canonicalUrl' font='verdana' layout='button_count' send='false' show_faces='false'/>             </div>         </div>         <div class='promote_google'>             <script type='text/javascript'>                 (function () {                     var po = document.createElement(&#39;script&#39;);                     po.type = &#39;text/javascript&#39;;                     po.async = true;                     po.src = &#39;https://apis.google.com/js/plusone.js&#39;;                     var s = document.getElementsByTagName(&#39;script&#39;)[0];                     s.parentNode.insertBefore(po, s);                 })();             </script>             <g:plusone annotation='none' size='medium'/>         </div>     </div> <p style='display:none;'> Sharing Widget by<a href=' http://imad-13.blogspot.com/'>Imad Rafai</a></p> </b:if>

ثم قم بحقظ النموذج :

ثم انظر لمدونتك و استمتع بالإضافة الجديدة و الرائعة لمدونتك . 

إلى اللقاء في الحلقة المقبلة في درس جديد.

دمتم بود.