-->
العربي ويب العربي ويب
recent

آخر الأخبار

recent
recent
جاري التحميل ...

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

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


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

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

تابع معي ...

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

أولا - توجه الى لوحة تحكم مدونتك  من هنا 
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;
}
إحفظ النموذج وانتقل إلى مدونتك لمشاهدة النتيجة.

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

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

كاتب الموضوع

محمد العربي

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

  • اضافة تعليق

  • الأبتساماتأخفاء الأبتسامات



    ஜ العربي ويب ஜ | ஜ شعارنا إثراء المحتوى العربي ஜ

    إضغط على | إنضم لموقعنا + متابعتنا عبر مواقع التواصل | وكن أول من يتوصل بجديدنا

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

    إتصل بنا

    اخر تعليقات بلوجر

    تغريداتي علي التويتر

    زوار المدونة

    Statistics

    احصاءات المدونة

    جميع الحقوق محفوظة لـ

    العربي ويب

    2017

    –>