اضافة بلوجر لشريط عائم لمواقع التواصل الاجتماعي

هذه الاضافة ستمكنك من اضافة شريط جانبي عائم له ازرار المشاركة والاعجاب لمواقع التواصل الاجتماعي ( فيسبوك - تويتر - جوجل + - pintrest - addthis ) 

الشريط سيظهر بجانب الموضوع

صورة للاضافة 

لتركيب الاضافة اتبع الخطوات التالية 

لوحة تحكم المدونة 

قالب - تحرير 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-left:-60px; float:left;     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/AVvXsEiA9Dju-g0nG9hzFpg4lNcUkh2IfxNp1hkbUQV-51urW2sTZIBJbNsgv5sM_ydhlf9peWse5Qv9LanjItQH3u-6aIJOVm6a898J4yQnhft1q1dns8pbfAp_vbv9NIICZvF7XecQDYKz1jYv/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/AVvXsEiA9Dju-g0nG9hzFpg4lNcUkh2IfxNp1hkbUQV-51urW2sTZIBJbNsgv5sM_ydhlf9peWse5Qv9LanjItQH3u-6aIJOVm6a898J4yQnhft1q1dns8pbfAp_vbv9NIICZvF7XecQDYKz1jYv/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/AVvXsEhOEGXac6o9kIwL-6Plk3lrZwFLiJ856gBZ35kmceSeyV2v3OR71VRKLjDy0i0mN3zZGn25qnK4genq9J_aT85MlZUYAUn1uGThxiz_hnOVinM-OHkMArYK6y1q6o93ukKizMQEsmeBnjm5/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='en-traffic'/>
<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=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.mybloggertricks.com/2012/05/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>

ثم فقط قم بتعيير كلمة en-traffic باسم المستخدم الخاص بك في تويتر .
احفظ التعديلات واذهب لمشاهدة النتيجة

ملحوظة :

اذا لم يعمل زرار الفيسبوك فقط اضف هذا الكود تحت <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>