اضافة المشاركة عبر الشبكات الاجتماعية عائمة بشكل جديد

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

شرح طريقة اضافة هاذه الاضافة

اولا تذهب لمنصة بلوجر ثم قالب ثم تحرير القالب ثم تبحث بالضغط على 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: 5px solid #E74C3C;

border-left: 5px solid #19666F;

border-bottom: 5px solid #E74C3C;

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/AVvXsEhRW6cXGvE04VL2r8UufgzhnR1zKAzDUVBgSKBLTFVmDBR07UxdWaRBo4MZYRhCk99EJdPRjLL71TGFhbd5phDMjZeVIaxNEulAvZSEpLLg5t4fBjleCy8vw3DqjYUHFJdXBt0Q-4CRag4/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/AVvXsEhRW6cXGvE04VL2r8UufgzhnR1zKAzDUVBgSKBLTFVmDBR07UxdWaRBo4MZYRhCk99EJdPRjLL71TGFhbd5phDMjZeVIaxNEulAvZSEpLLg5t4fBjleCy8vw3DqjYUHFJdXBt0Q-4CRag4/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(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSn4z-VPra2juS_pmYkZpsehgmnehvB5zr__GusfchyphenhyphenfNtjRDodl60U93UH9THZJlTC_kovnF8gqlBZJPMUmOybdhUbo7NJX12wXMPxQUfvUXBi1v6-KfwGH1JG8gUPogx5M8N4mPdi-s/s400/bubble_arrow_pinterest.png&#39;) !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='aouadi2ilyas'/> 

<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>

 

ثم غير aouadi2ilyas  باسم المستخدم الخاص بك على التويتر 

اذا اردت تغيير الوان الحدود الخارجي يمكنك التعديل على الاكواد التالية بتغير الكود الون المحدد بالكود الذي تريده من الالوان

border-top: 5px solid #E74C3C;border-left: 5px solid #19666F;border-bottom: 5px solid #E74C3C;