شرح | اضافة ازرار المشاركه اسفل المواضيع فى بلوجر

السلام عليكم ورحمة الله وبركاته متابعى مدونة الحنفى للمعلوميات

اليوم سوف نقوم بشرح : 

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

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

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

اضافة مواقع التواصل الاجتماعى اسفل المواضيع 

1. من لوحة تحكم المدونة اختر (قالب)
2.  اختر تحرير HTML
3. ابحث عن هذا الكود  وضع الكود التالى بعده 
4. ثم اضغط حفظ التغيرات

<b:if cond='data:blog.pageType == "item"'><style>@import url(http://fonts.googleapis.com/css?family=Open+Sans); @import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css"; #buttons {     width: 475px;     overflow: hidden;     margin: 20px auto -10px; }   .social-sharing-title{     background: #E74C3C;     color: #ffffff;     text-align: center;     line-height: 40px;     font-size: 18px;     width: 643px;     height: 40px;     display: block;     margin: 20px 0px -5px; }   .button {     float: left;     margin-right: 10px;     width: 110px;     background:#E2E2E2;     border: 1px solid #cbcbcb;     border-radius: 3px;     -o-border-radius: 3px;     -ms-border-radius: 3px;     -moz-border-radius: 3px;     -webkit-border-radius: 3px;     padding: 15px 5px 5px;     box-sizing: border-box; }   .button i {     background: #353535;     color: #eaeaea;     text-align: center;     line-height: 40px;     font-size: 18px;     width: 40px;     height: 40px;     display: block;     margin: 0 auto 10px;     border-radius: 50%;     -o-border-radius: 50%;     -ms-border-radius: 50%;     -moz-border-radius: 50%;     -webkit-border-radius: 50%; }   .social-container {     text-align: center;     text-transform: uppercase;     font-size: 18px;     color: #353535;     line-height: 54px;     font-family: GESSTwoMediumRegular;     background: #d8d8d8;     width: 100%;     height: 45px;     box-shadow: inset 0 -2px 4px #c7c7c7;     border-radius: 3px;     -o-border-radius: 3px;     -ms-border-radius: 3px;     -moz-border-radius: 3px;     -webkit-border-radius: 3px;     position: relative;     overflow: hidden; }   .slide, .button i {     -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; }   .slide {     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);     border-radius: 0 0 22px 22px;     -o-border-radius: 0 0 22px 22px;     -ms-border-radius: 0 0 22px 22px;     -moz-border-radius: 0 0 22px 22px;     -webkit-border-radius: 0 0 22px 22px;  /* top fix */     transition: all 0.2s ease-in-out;     position: absolute;     height: 45px;     width: 100%;     top: -35px; }   .slide::after {     content: "";     display: block;     position: absolute;     width: 100%;     height: 10px;     box-shadow: inset 0 1px 0px #fdfdfd, 0 3px 0px #cdcdcd;     border-radius: 3px;     -o-border-radius: 3px;     -ms-border-radius: 3px;     -moz-border-radius: 3px;     -webkit-border-radius: 3px;     background: #eaeaea;     border: 1px solid #cbcbcb;     box-sizing: border-box;     bottom: 0; }   .button:hover .slide {     top: 0;     border-radius: 3px; }   .linkedin .IN-widget, .button iframe, .google #___plusone_0 {     top: 1px;     position: relative; }   .twitter iframe {     width: 79px !important; }   .google #___plusone_0 {     width: 60px !important; }   .button.facebook:hover i, .facebook .slide {     background: #305c99;     color: white; }   .button.twitter:hover i, .twitter .slide {     background: #00cdff;     color: white; }   .button.google:hover i, .google .slide {     background: #d24228;     color: white; }   .button.linkedin:hover i, .linkedin .slide {     background: #007bb6;     color: white; }   .button.linkedin {     margin-right: 0; }   .credit {    display: none; }   .credit a {    display: none; } </style><b:if cond='data:blog.pageType == "item"'>  <div class='social-sharing-title'>الرجاء مشاركة الموضوع لتعم الفائده على الجميع</div><div id='buttons'><div class='facebook button'> <i class='icon-facebook'/> <div class='social-container fb'>  <div class='slide'>   <iframe allowTransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=85&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:85px; height:21px; margin: 0px; }'/>  </div>فيس بوك  </div></div><div class='twitter button'> <i class='icon-twitter'/> <div class='social-container tw'>  <div class='slide'>   <a class='twitter-share-button' data-hashtags='المايسترو' data-via='iTh3Maestro' href='https://twitter.com/share'>   غرد </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></div><div class='google button'> <i class='icon-google-plus'/> <div class='social-container tw'>  <div class='slide'>   <!-- Place this tag where you want the +1 button to render. -->   <div class='g-plusone' data-size='medium'>   </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></div><div class='linkedin button'> <i class='icon-linkedin'/> <div class='social-container tw'>  <div class='slide'>   <script src='//platform.linkedin.com/in.js' type='text/javascript'> lang: en_US    </script>   <script type='IN/Share'/>  </div>لينكدان  </div></div></div><div class='credit'>  <a href='http://goo.gl/vnNkHv' target='_blank' title='Get'><span style='font-size: x-small;'>get</span></a></div></b:if>