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

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

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب. 

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

خطوات إضافة أزرار مواقع التواصل أسفل عناوين المشاركات

تابع معي ...

تنبيه : قبل أي تعديل على القالب يرجى تحميل أو أخذ نسخة احتياطية للقالب الخاص بك منعاً لحدوث أي أخطاء
لمن لا يعرف كيفية أخد نسخة إحتياطية للقالب الخاص به  من هنا 

أولا - توجه الى لوحة تحكم مدونتك  من هنا 

2 - قالب ' المظهر ' >> ' تحرير Html " >>

3 - إضغط Ctrl + F وإبحث عن الوسم التالي

]]></b:skin>

4 - ألصق الرمز التالي مباشرة قبل </b:skin>

#floating-social-buttons {
padding: 6px 0px 12px;
position: absolute;
background: #F6F6F6;
border-bottom: 1px solid #DEDEDE;
width: 550px;
height: 25px;
z-index: 99;
}
.floating-social-buttons {
margin-left: 5px !important;
}
.floating-social-buttons li {
float: left;
margin-left: 5px;
list-style:none;
}
.floating-social-buttons .facebook {
background-color:#003471;
border-radius: 5px;
color: #fff;
display: inline-block;
padding: 8px 20px;
font: normal 700 12px/1 "Calibri", sans-serif;
text-align: center;
}
.floating-social-buttons .twitter {
background-color: #00BFF3;
border-radius: 5px;
color: #fff;
display: inline-block;
padding: 8px 20px;
font: normal 700 12px/1 "Calibri", sans-serif;
text-align: center;
}
.floating-social-buttons .googleplus {
background-color: #EA4D29;
border-radius: 5px;
color: #fff;
display: inline-block;
padding: 8px 20px;
font: normal 700 12px/1 "Calibri", sans-serif;
text-align: center;
}
.floating-social-buttons .pinterest {
background-color:#C6393D;
border-radius: 5px;
color: #fff;
display: inline-block;
padding: 8px 20px;
font: normal 700 12px/1 "Calibri", sans-serif;
text-align: center;
}

5 - إبحث الآن عن الوسم التالي

</head>

6 - الصق هذا الرمز مباشرة قبله

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function() {
var $movesbuttons = $("#floating-social-buttons"),
$window = $(window),
offset = $movesbuttons.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$movesbuttons.css({'position' : 'fixed', 'width' : '550px', 'top' : '0px'});
} else {
$movesbuttons.css({'position' : 'absolute', 'top' : 'auto'});
}
});
});
//]]>
</script>

7 - الآن إبحث عن هذا الوسم

<div class='post-header'>

8 - الصق الرمز التالي بعده

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:5px 0 35px 0;clear:both;'>
<div id='floating-social-buttons'>
<ul class='floating-social-buttons'>
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span> Facebook</span></a></li>
<li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span> Twitter</span></a></li>
<li><a class='googleplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span> Google+</span></a></li>
             
<li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest-p'/><span> Pinterest</span></a></li>
</ul>
</div>
</div>
</b:if>

تخصيص الإضافة

إذا كنت تريد الأزرار في نهاية المشاركات. قم بلصق الرمز الأخير بعد هذا الوسم (أسفل)

<div class='post-footer'>

إذا كنت ترغب في تغيير حجم الأزرار قم بتغيير القيمة 12 المشار إليها باللون الأزرق.

font: normal 700 12px/1 "Calibri", sans-serif;

إذا كنت ترغب في تغيير لون خلفية الأزرار عند مرور الماوس فوقها.
أضف الرمز التالي أسفل الرمز الأول الذي وضعناه قبل ]]></b:skin> مباشرة

.floating-social-buttons .facebook:hover {
background-color: #fff;
color: #003471;
}
.floating-social-buttons .twitter:hover {
background-color: #fff;
color: #00BFF3;
}
.floating-social-buttons .googleplus:hover {
background-color: #fff;
color: #EA4D29;
}
.floating-social-buttons .pinterest:hover {
background-color: #fff;
color: #C6393D;
}

إحفظ النموذج وانتقل إلى مدونتك لمشاهدة النتيجة.

تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها

باب التعليقات مفتوح للجميع