هذه التدوينه من قسم : , , , , , ,

كيفية إضافة ازرار المشاركة الاجتماعية العائمه على بلوجر( Blogger )

Floating Share Buttons Gadget
مرحبا جميعا , اداة  أزرار المواقع الاجتماعيه هي من أفضل الادوات التي يمكن أن تساعدك على زيادة عدد زوار مدونتك ععلى بلوجر ونشر ما تكتب . ان تقوم بكتابة العديد من التدوينات الجيده لكن لا يوجد اداة لكي يقوم القارئ بنشر تدوناتك هذا شي غير جيد . لذلك انصحك باستخدام هذه الاداء.افضل مكان لوضع ازرار المواقع الاجتماعيه هي اسفل عنوان التدوينه لأنه اكثر مكان يتم مشاهدته من قبل الزائر. اليوم جئت لكم بأداة تبقى ملاصقه بجانب التدوينة لذلك ستقوم بلفت انتباه الزائر وتحتوي على ازرار لمواقع ووسائل الاعلام الاجتماعية مثل الفيسبوك وتويتر، وجوجل بلس وبينتيريست أيضا. هذه الأداة هي مشهورة جدا بين كبار المدونين لأنها تطفو مع شريط التمرير وبالتالي فرص أفضل للحصول على المزيد من النشر من القراء. الآن دعونا نرى كيفية إضافة هذه الاداة العائمة على مدونتك بلوجر.



فيما يلي بعض الخطوات السهلة جدا لديك لمتابعة لإضافة هذه الأداة إلى بلوجر الخاص بك. 

  1. الذهاب إلى لوحة التحكم الرئيسية في Blogger.
  2. الذهاب إلى القالب.
  3. قم بأخذ نسخه احتياطية لقالب بلوجر الخاص بك .
  4. الآن انتقل إلى تحرير HTML.
  5. اضغط على CTRL + F وابحث عن :
<b:includable id='post' var='post'>
\ 6. الآن قم بلصق الكود أدناه بعد الكود الذي بالاعلى مباشره.


<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/AVvXsEicitHHn8XpshfaPsNDDCCOeoceDAU-YWikI57MyO6skSvCT8PoQDjwq57_Cv2OixzMTw3oIRJHxrGb2IyOg8TFCBsoxWBgLaR4IRQb_U_c_37wrDeGy76WQI5f8pR_ZDVt5iqpafKLgyuw/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/AVvXsEicitHHn8XpshfaPsNDDCCOeoceDAU-YWikI57MyO6skSvCT8PoQDjwq57_Cv2OixzMTw3oIRJHxrGb2IyOg8TFCBsoxWBgLaR4IRQb_U_c_37wrDeGy76WQI5f8pR_ZDVt5iqpafKLgyuw/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/AVvXsEgtOaNwqNoiRCpvOYXFBRE6VGvTccKl9MaYweXbaTVNPpZj8umvmSkhse29p_kUSEc3zaxj8OBmLW0W0-dSYXPUh-z1o9H__HXhSHz6bDpNPSizxUTWXRqg23UWzr7hsR7xq9kzkkvAGtOt/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='blogtiptricks'/>
<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 rel="nofollow" href='http://how-wd.blogspot.com/2013/05/floating-share-buttons-gadget.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>



7. انقر على زر حفظ القالب.
8. مبرووك لقد خصلت على هذه الاداة !

لتعديل على تويتر: 
  1. استبدال blogtiptricks مع اسم المستخدم الخاص بك على تويتر.
  2. افتراضيا هذه الأداة سوف تطفو على الجانب الأيسر، إذا كنت تريد أن الجانب الأيمن ثم تغيير اليسار إلى اليمين من الخط الأحمر في التعليمات البرمجية. حتى يمكنك تغيير لون الخلفية من هناك نفسها.


تعليقاتكم!                                                                                                                                  



 هذه الأداة رائعه حقا وتساعد الكثير من المدونين. الرجاء ترك تعليقاتك وردود الفعل حول هذه الأداة. شكرا!