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

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

أهلآ بكم اصدقائي في تدوينة جديدة حول أداة جميلة جدآ قد يفتقدها موقعك الاكتروني سواءآ كان مدونة أو موقع بشكل عام الاداة صالحة صالحة لأي موقع يدعم 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/AVvXsEhEl_k44X6CBGd-pLE8Yg-pBvfnziGRgvNky4gLclrBJEHJ0WGQbpHjMMgbnBgshyphenhyphenRprBzyZ1htP323WLptgL9FC2zUJWshdg5qqsItwFwOpTgjZskO7CuuPiv6nGTfk83ZThOIhSXy-ah3/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/AVvXsEhfYCd0zxU1HfuvZs6HIwrAQOI9HRjzTNvC8oH0NP889hYZ4M6kNxH3b27g16NPVUoHEjIiB7mQfNCppkLK4pwoXigNBN3P5l9AN8S1Jf2BuB6TjatINPN-JaIl61wevloz1zFrKo5xDN5k/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/AVvXsEh2fjGk5bgQ4l5VtUoEE96fyGaeMz4XdsUvBHEYxHGZiIDNwQNuPExkOhtql_mLK3x-FZ_ptAtRLgXnNjAB9HlnXO2kW2yE3K__3N7WibDiZoXyekjLdAsiAapzZb4s_hchxbREpYR2kTCN/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/AVvXsEh9Oks3mZjw2UoxgABmO6DLeEipWJ51na7u9m0eUgaJ9uy289hprnH8vsCEb80rckpnRuat5yrNms6_MwE7P41erow5mQNV6qOKowOiIcP64fJ57y5sMG3zoRtHUqxt-M5qjvYq5viz8hv_/s1600/whatsapp-bg.png) no-repeat;
}
</style>

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

رمز Code:

<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>