اضافة ازرار المشاركة والاعجاب وجوجل بلس بجانب الموضوع عائمة لبلوجر

مقدمة ومعلومات عن الاضافة

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

مثال مباشر

طريقة التركيب

توجه الى بلوجر ثم القالب ثم تحرير html

واضغط  ctrl+f بداخل القالب لكى تبحث عن الكود التالى :

<b:includable id='post' var='post'>

ثم ضع بعده (اسفله) هذا الكود :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.mbt_social_floating{
position: fixed;
bottom: 10%;
margin-right: -78px;
float: right;
width: 60px;
background-color: #f7f7f7;
padding: 5px 0 0px 0px;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd;
z-index: 9999px !important;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mbt_social_floating .mbt_side_social_button{
margin-bottom:5px;
float:none;
height:auto;
width:60px;
}
.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
margin-left:5px;
}
.mbt_social_floating .st_fblike_vcount{
margin-left:5px;
}
.mbt_social_floating .stButton_gradient{
background:none !important;
height:21px !important;
padding-left:0 !important;
}
.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGBoBQrsxDbdYMMHuC348RNgVQ7H2k7KuODo8G4stckvPuGRjui1eKToicLS04VVkZ80XwrjQiEGBBwSZxIAwGvq_HgVrf9_j_g3d-zjEEFAeiG-hXJAGc0-lgXqLz6Ya4azE6YyHCWXI/s400/gc_social_sprite.gif&#39;) no-repeat !important;
height:19px !important;
width:45px !important;
padding:0 !important;
}
.st_email .chicklets{
background-position:0 -77px !important;
background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGBoBQrsxDbdYMMHuC348RNgVQ7H2k7KuODo8G4stckvPuGRjui1eKToicLS04VVkZ80XwrjQiEGBBwSZxIAwGvq_HgVrf9_j_g3d-zjEEFAeiG-hXJAGc0-lgXqLz6Ya4azE6YyHCWXI/s400/gc_social_sprite.gif&#39;) !important;
}
.mbt_social_floating .st_twitter_vcount .st-twitter-counter{
background-position:0 -58px !important;
}
.mbt_social_floating .stButton_gradient{
border:none !important;
}
.mbt_social_floating .stBubble_count{
width:44px !important;
font-size: 15px !important;
font-weight: normal !important;
padding-top:7px !important;
height:23px !important;
background:none !important;
}
.mbt_social_floating .st_twitter_vcount .stBubble_count{
color:#00a6df;
background-color:#f8fbfc !important;
}
.st_fblike_vcount{
margin-bottom: 0px;
display: block;
}
.st_twitter_vcount{
margin-bottom: 3px;
display: block;
}
.st_email{
margin-bottom: 5px; margin-top: 3px;
display: block;
}
.mbt_social_floating .stBubble{
background-position: 21px 31px !important;
height:35px !important;
}.mbt_social_floating .st_pinterest_vcount{
margin-left:5px;
}
.mbt_social_floating .st_pinterest_vcount .st-pinterest-counter{
background-position:0 -19px !important;
}
.mbt_social_floating .st_pinterest_vcount .stBubble_count{
color:#FF0505;
background-color:#fbf8f8 !important;
}
.mbt_social_floating .st_pinterest_vcount .stBubble{
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifsJbDKd25gUo8G107o2XqT1BPLKqPD_XWukP1wMc0iV0TFgOAu6cHIDMaslXelmQUPa0NSAH3rS-Ka_6MXFzz9e1M9vFWwIWy354Kb2-p-SjzFMkWQBjsaSG_stObpG7XOAhCAvgw_kg/s400/bubble_arrow_pinterest.png') !important;
}
.st_pinterest_vcount{
margin-bottom: 0px;
display: block;
}
</style>
<div class='mbt_social_floating'>
<script type='text/javascript'>var switchTo5x=true;</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({onhover:false, , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
<!-- No more works properly so removing it from mbt list<span class='st_fblike_vcount' displaytext=''/>-->
<div style='margin:0px 0 0px 10px;'><div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></div>
<span class='st_twitter_vcount' displaytext='' st_via='HUSSAM_BILAL'/>
<span class='st_pinterest_vcount' displaytext=''/>
<div style='margin:0px 0 0 5px;'>
<span class='st_plusone_vcount' displaytext=''/>
</div>
<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
ui_cobrand: &quot;MY BLOGGER TRICKS&quot;,
ui_header_color: &quot;#ffffff&quot;,
ui_header_background: &quot;#0080FF&quot;
}
</script>
<span class='st_email' displaytext=''/>
</div>
</b:if></b:if>

بعض التعديلات

استبدل HUSSAM_BILAL برابط حسابك فى تويتر

يمكنك تخصيص وضع الاضافة ان كنت تريد تحريكها لليمين او اليسار من خلال التعديل على قيم الاوامر التالية :

position: fixed;
bottom: 10%;
margin-right: -78px;
float: right;
width: 60px;
background-color: #f7f7f7;

ماذا لو : لم تعمل الاضافة ..

اذا لم تعمل الاضافة فضع هذا الكود اسفل الوسم :

<body>

هذا الكود :

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

وبالتوفيق للجميع :)