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

السلام عليكم ورحمة الله وبركاته

في كل يوم وكما تعودتم اليوم نقدم لمدونينا العرب إضافة جديدة على مدونات بلوجر ازرار المشاركة عبر مواقع التواصل الاجتماعي جوجل بلس تويتر فيس بوك وهذه هي أهم المواقع
لنرى الشكل الجديد الآن:



هل أعجبتك؟

طريقة إضافتها أسفل كل تدوينة


طبعاً في كل مرة نتوجه إلى لوحة التحكم www
القالب -->> نضغط على تحرير html ثم نبحث عن الرمز
<data:post.body/>
ثم نضيف الكود التالي أسفله مباشرةً:



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align: center;'>
<span style='color: #3d85c6; font-family: Century Gothic, serif; font-size: x-large;'><b>هل أعجبك الموضوع&#1567; شارك! &#8595; </b></span></div>
<style>@import url(http://fonts.googleapis.com/css?family=Open+Sans);@import &quot;//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css&quot;;#cajared{width:430px;overflow: hidden;margin: 10px auto 0;}
.botones{float:left;margin-right: 10px;width: 120px;background: #eaeaea;border: 1px solid #cbcbcb;border-radius: 3px; -o-border-radius: 3px;-ms-border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow:inset 0 1px 0px #fdfdfd;padding:15px 5px 5px;box-sizing:border-box;}
.botones i{background: #c5c5c5;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: 12px;color: #656565;line-height: 54px;font-family: Open Sans;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,.botones 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;transition: all 0.2s ease-in-out;position: absolute;height: 45px;width: 100%;top: -35px;}
.slide::after {content: &quot;&quot;;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;}
.botones:hover .slide {top: 0;border-radius: 3px;}
.IN-widget,.botones iframe, .google #___plusone_0 {top:-2px;position: relative;}
.twitter iframe {width: 79px !important;}
.google #___plusone_0 {width: 60px !important;}
.botones.facebook:hover i, .facebook .slide {background:#305c99;color: white;}
.botones.twitter:hover i, .twitter .slide{background: #00cdff;color: white;}
.botones.google:hover i, .google .slide{background: #d24228;color: white;}
</style><div id='cajared'><div class='facebook botones'> <i class='icon-facebook'/> <div class='social-container fb'> <div class='slide'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=true&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px'/> </div> Facebook </div></div><div class='twitter botones'> <i class='icon-twitter'/> <div class='social-container tw'> <div class='slide'><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)?&#39;http&#39;:&#39;https&#39;; if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script></div>Twitter </div></div><div class='google botones'> <i class='icon-google-plus'/> <div class='social-container tw'> <div class='slide'><div class='g-plusone' data-size='medium'/><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></div>Google+</div></div></div><div style='text-align: right;'/></b:if>


ملاحظة: إذا لم تظهر الإضافة هناك أكثر من رمز مثل <data:post.body/> جرب الرمز الذي يليه من الرموز <data:post.body/> حتى تظهر الإضافة بشكل صحصح

أختر حفظ القالب وهذا كل شيء لدينا اليوم 
نتمنى لكم أوقات طيبة بأمان الله.

مشاركات أقدم المقال التالي
5 تعليق
  • غير معرف
    غير معرف 30‏/03‏/2014، 9:48:00 م

    ameeralaomara.blogspot.com

  • ysf
    ysf 21‏/05‏/2014، 1:25:00 م

    السلام عليكم ، شكرا اخي على هده الاضافة الجميلة (h)

    • مداد الجليد
      مداد الجليد 21‏/05‏/2014، 5:40:00 م

      عفوا عزيزي يوسف, أشكر مرورك الكريم على الموضوع

  • تقناوى
    تقناوى 24‏/08‏/2014، 4:06:00 ص

    شكرا لك ولكننى اريد زيادة عدد الموقاع
    ماذا افعل؟

    • مداد الجليد
      مداد الجليد 24‏/08‏/2014، 10:18:00 م

      مواقع ماذا أخي
      طبعا يمكنك زيادة عدد الازرار بتكرار كود واحد مثل كود تويتر ووضع رابط مشاركة موقع اخر

أضف تعليق
عنوان التعليق