طريقة إضافة أزرار المشاركات أسفل على بلوجر

أهلآ بكم اصدقائي في تدوينة جديدة حول أداة جميلة جدآ قد يفتقدها الكثير منكم ولموقعكم الاكتروني سواء آكانة مدونة أو موقع بشكل عام الاداة صالحة لأي موقع يدعم css والان نحن في عصر التصميم ولا يمكن التخلي عن لغة Css .

الاداة ليست مثل الادوات السابقة التي طرحت لأنها تتميز بمظهر جميل وجذاب والميزة الجديدة مشاركة الموضوع عبر تطبيق الواتساب مفيده جدآ وخاصتآ في المدونات المتجاوبة بمعنى المدونات التي تستخدم قوالب تقبل التصفح بهواتف الذكية سواءآ كانت قياسية أم لوحية لدلك دعونا ننتقل الى كيف ستحصل على الشكل الجديد ولمعاينة الشكل نزول شيئ ما اسفل تدوينة لتجد الشكل

لكن للحصول على الاكواد وطريقة تركيب الازرار بشكل صحيح سابقى معك حتى تنجح معك الطريقة وايت مشكلة ساساعدك حتى تحل مشكلتك

طريقة تركيب :

ادخل مدونتك / ابحث عن  ]]></b:skin>

وقم بأضافة الكود التالي فوقه

<style>
.promote_post_bg {
    height: 110px;
    margin: 15px -60px 15px -60px;
    width: 100%;
}
.promote_twitter {
    width: 153px;
    height: 112px;
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 65px 0px 0px 13px;
    text-align: center;
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJn0EcvZEgF6mMDWo7X7PxNMFIeVQwZcTz_Hmd3xZ8LpjSXRkJg-FviVcfPtZe_HDKqbOuxAGAuqSTyp6y8eVnbxcMXIPx4qgHkRamDeQlEn4E5o11cmDGUhxI1Ojz-ihbxVauamkFdxRt/s1600/twiiter-bg.png') no-repeat scroll 0% 0% transparent;
}
.promote_facebook {
    width: 153px;
    height: 112px;
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 50px 0px 0px 20px;
    text-align: center;
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY6UQAUC47y1mUG4k5FnU3frphfQdZo10WmNP2UmdzRs05xRIUB6arT4b4bg4aVYeBAdkYs6JkdKfHsflwyzH9K9jMRIOVdYm7dvPZZ6YrwEQLbQqTHBjQMdFqEKYkuk6hGrdViPiVaugF/s1600/facebook-bg.png') no-repeat scroll 0% 0% transparent;
}
.promote_google {
    width: 130px;
    height: 112px;
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 65px 0px 0px 40px;
    text-align: center;
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJdRd6g_a17chfLWNbl5JVUuKLt5dusQljdTRMay2hyphenhyphenzbujlTNEEdqSulpgIZYoPSUMQRP4RGeYzhx2sQtF9FdA0GTLMBBuo52AcMFX7sxGVoaS1leUGY2bKOsylYOORY-fQUciGSw_dId/s1600/googleplus-bg.png') no-repeat scroll 0% 0% transparent;
}
.whatsapp2 {
width: 153px;
height: 112px;
float: left;
margin: 0 0px 0 0;
padding: 70px 0 0 0px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiSKtEziqun4agq6j4IBqeYxaCY9q9n-X87EPCRjudUdzOc4YB5YJZNyyItetePv6197WO_EKbdA6pdGgNe9QlufNSk3PgxfcmKj8A8uPFfiBnCk3Q5ajSnDIyOzxZttDJMyMKigkfpIa1/s1600/whatsapp-bg.png) no-repeat;
}
</style>

بعدها قم ببحث عن
<div class='post-footer'> او <div class='post-footer-line post-footer-line-1'>

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

<div class='promote_post_bg' id='promote_post_bg'>
<div class='promote_twitter' id='promote_twitter'>
<a class='twitter-share-button' href='https://twitter.com/share'>
                          Tweet
                        </a>
                        <script>
                          !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class='promote_facebook' id='promote_facebook'>
<iframe allowTransparency='true' expr:src='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;locale=ar_AR&amp;width=85&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:85px; height:21px; margin: 0px -51px 0px -70px; }'/>
<div style='  margin-top: -4px; margin-left: -19px;'>
<div class='fb-share-button fb_iframe_widget' data-layout='button_count' fb-iframe-plugin-query='app_id=&amp;container_width=133&amp;href=&quot; + data:post.url&amp;layout=button_count&amp;locale=ar_AR&amp;sdk=joey' fb-xfbml-state='rendered'><span style='vertical-align: bottom; width: 83px; height: 20px;'><iframe allowfullscreen='true' allowtransparency='true' class='' expr:href='&quot;http://www.facebook.com/share.php? v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' frameborder='0' height='1000px' name='f1da1e73f4fea4a' scrolling='no' style='border: medium none; visibility: visible; width: 83px; height: 20px;' title='fb:share_button Facebook Social Plugin' width='1000px'/></span></div>
<script>
                        (function (d) {
                            var js, id = 'facebook-jssdk';
                            if (d.getElementById(id)) {
                                return;
                            }
                            js = d.createElement('script');
                            js.id = id;
                            js.async = true;
                            js.src = &quot;//connect.facebook.net/ar_AR/all.js#xfbml=1&quot;;
                            d.getElementsByTagName('head')[0].appendChild(js);
                        }(document));
                    </script>
</div>
</div>
<div class='promote_google' id='promote_google'>
<div class='g-plusone' data-size='medium' width='25px'>
   </div>
   <!-- Place this tag after the last +1 button tag. -->
   <script type='text/javascript'>
    (function() {
      var po = document.createElement('script');
      po.type = 'text/javascript';
      po.async = true;
      po.src = 'https://apis.google.com/js/plusone.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(po, s);
    }
    )();
  </script>
</div>
<div class='whatsapp2' id='whatsapp2'>
  <a alt='WhatsApp' expr:data-href='data:post.url' expr:data-text='data:post.title' href='whatsapp://send' style='     color: #555; ' title='Whatsapp'>شارك</a>
</div></div>

وفي الاخير اي تساؤل انا معكم لاجابة و مساعدتكم ولاتنسو مشاركة مدونتكم معنا للمعاينة   على صفحتنا