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

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

1. قم  بالدخول الى لوحة تحكم بلوجر 
2. اختر المدونة 
3. القالب
4. تحرير html 
5. ثم ابحث عن هدا الكود    

]]></b:skin>


ثم اضف فوقه هدا الكود

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";html,body{min-height:100%} body{background-image:linear-gradient(45deg,rgba(194,233,221,0.5) 1%,rgba(104,119,132,0.5) 100%),linear-gradient(-45deg,#494d71 0%,rgba(217,230,185,0.5) 80%);margin:0} #buttons{border-radius:5px;padding:14px 7px;background:white;width:660px;overflow:hidden;margin:150px auto 0;box-shadow:0 2px 3px rgba(71,71,71,0.31)} .button{background:#DCE0E0;position:relative;display:block;float:left;height:40px;margin:0 7px;overflow:hidden;width:150px;border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px} .icon{display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:38px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:3px;-webkit-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;text-align:center} .icon i{color:#fff;line-height:42px} .slide{z-index:2;display:block;margin:0;height:100%;left:38px;position:absolute;width:112px;-moz-border-radius-topleft:0;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-bottomleft:0;-webkit-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0} .slide p{font-family:Open Sans;font-weight:400;border-left:1px solid #fff;border-left:1px solid rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;margin:0;position:absolute;text-align:center;top:10px;width:100%} .button .slide{-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out} .facebook iframe{display:block;position:absolute;right:16px;top:10px;z-index:1} .twitter iframe{width:90px !important;right:5px;top:10px;z-index:1;display:block;position:absolute} .google #___plusone_0{width:70px !important;top:10px;right:15px;position:absolute;display:block;z-index:1} .linkedin .IN-widget{top:10px;right:22px;position:absolute;display:block;z-index:1} .facebook:hover .slide{left:150px} .twitter:hover .slide{top:-40px} .google:hover .slide{bottom:-40px} .linkedin:hover .slide{left:-150px} .facebook .icon,.facebook .slide{background:#305c99} .twitter .icon,.twitter .slide{background:#00cdff} .google .icon,.google .slide{background:#d24228} .linkedin .icon,.linkedin .slide{background:#007bb6;}

الحين ابحث عن   <data:post.body/>  وادا وجدته اكثر من مرة قم بالتجربة حتى تجد المكان المناسب

ثم اضف تحته هدا الكود وقم بحفظ القالب ومبروك عليك

<div id="buttons">
<div class="facebook button">
<i class="icon">
<i class="icon-facebook">
</i>
</i>
<div class="slide">
<p>
facebook
</p>
</div>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Freference%2Fplugins%2Flike&send=false&layout=button_count&width=80&show_faces=false&font&colorscheme=light&action=like&height=20&appId=568581339861351" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:20px;" allowTransparency="true">
</iframe>
</div>
<div class="twitter button">
<i class="icon">
<i class="icon-twitter">
</i>
</i>
<div class="slide">
<p>
twitter
</p>
</div>
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div class="google button">
<i class="icon">
<i class="icon-google-plus">
</i>
</i>
<div class="slide">
<p>
google+
</p>
</div>
<div class="g-plusone"></div>
<script type="text/javascript">
window.___gcfg={lang:"id"};(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/platform.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
</script>
</div>
<div class="linkedin button">
<i class="icon">
<i class="icon-linkedin">
</i>
</i>
<div class="slide">
<p>
linkedin
</p>
</div>
<script type="IN/Share" data-counter="right">
  </script>
<script src="//platform.linkedin.com/in.js" type="text/javascript">lang:en_US;</script>
</div>
</div>