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

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

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

لمشاهدة العرض التوضيحي

للمعاينة

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

تابع معي ...

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

أولا - توجه الى لوحة تحكم مدونتك من هنا
2 - قالب (المظهر) >> تحرير Html >>

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

]]></b:skin>

4 - أضف الكود التالي قبله (فوق)

/* Jumbo Social Share Bar By El3araby Web*/
<link href='http://fonts.googleapis.com/css?family=Raleway%3A400%2C800%2C700&ver=1.0' id='googlewebfont-css' media='all' rel='stylesheet' type='text/css'/>
#sharrrrre{
float:left;
margin: -10px 5px 0 0;
padding: 15px 15px 15px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaT-cddC1L4tYYLsRKxCwBv2seSi5JqjkIRPg-H_v2i6DWy2rZ150yJr_Y_NAhNb-dzr4fRw94kSin1gRYZbyrJvtT9U9mQHkg2_PO7GkF8VzQUV3AbmTlb7649GT4rqoB4a9bnsGRCn0/s1600/diagonal.png) no-repeat 100% 50%;
);
}
.sharrre .count {
color:#7fc04c;
font-weight: bold;
display:block;
font-size:50px;
position:relative;
text-align:center;
text-decoration:none;
width:100px;
line-height: 40px;
padding: 0;
}
.sharrre .share {
color:#666;
display:block;
font-size:10px;
height:10px;
text-align:center;
text-decoration:none;
width:100px;
padding: 0;
}
@import url(http://fonts.googleapis.com/css?family=Raleway:600);
.social-div a{
text-decoration:none!important;
display:inline-block;
}
.social-div a img{
display:inline-block;
width: auto;
height: auto;
margin: 0 8px 0 -5px;
vertical-align:middle
}
#socialshare{
display:inline-block;
vertical-align: middle;
text-align: center;
color:#ffffff;
font-size:16px;
padding:14px 20px 15px 20px;
text-decoration:none;
font-family:Raleway;
margin-right:5px;
-webkit-font-smoothing:antialiased;
-webkit-text-rendering:optimizeLegibility;
}
#socialshare:active {
padding: 15px 20px 15px 20px;
margin-bottom: -1px;
}
#socialshare:hover{
opacity: 0.9;
}
.share-toggle{
position:relative;
display:inline-block;
cursor:pointer;
vertical-align:middle;
text-align:center;
color:#fff;
}
.share-toggle a{
color:#fff;
text-decoration:none;
}
.social-div{
vertical-align:middle;
}
#expand-social{
display:inline-block;
position:relative;
vertical-align:middle;
height: 53px;
}
#social-expand{
display:inline-block;
vertical-align:middle;
position:relative;
top:0px;
left:0px;
}
.expand {
box-shadow: 0px 3px 0px 0px #c5bebe;
background:#cdcccc;
position: relative;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 200%;
}
.expand:active {
box-shadow: 0px 1px 0px 0px #c5bebe;
height: 41px;
margin-bottom:-1px;
}
.expand:hover {
opacity:0.9;
}
.expand-minus{
display:none;
}
.socialshare2 {
width:50px;
height:50px;
display:inline-block;
}
.socialshare2:active {
height:51px;
margin-bottom:-1px;
}
.socialshare2:hover {
opacity:0.9;
}
.ubhfacebook{
background:#507bbf;
box-shadow: 0px 3px 0px 0px #4671b5;
}
.ubhfacebook:active{
box-shadow: 0px 1px 0px 0px #4671b5;
}
.ubhtwitter{
background:#63cef2;
box-shadow: 0px 3px 0px 0px #57c4e9;
}
.ubhtwitter:active{
box-shadow: 0px 1px 0px 0px #57c4e9;
}
.ubhgoogle-plus{
box-shadow: 0px 3px 0px 0px #43454c;
background:#4d4f54 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwSoIUN6zus_N27CXydZdLfGNYtj6hfeXUwG8zi26_hImWUUq4dyvJzsTdVqx1Nks326zNCJ3dqx_j9jrMnpfZsQvS6t09j95eU6k1qs43bc8o_C-jvQ75WXxMeO_rYojRHRK2HRSfTLs/s20/g+.png) no-repeat center;
}
.ubhgoogle-plus:active{
box-shadow: 0px 1px 0px 0px #43454c;
}
.ubhlinkedin {
box-shadow: 0px 3px 0px 0px #12a4db;
background:#1aace3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQPfzihpv6Qe6eeVEiJnl9c8PI36rMIHYuXKgE7mNfWrEP3D9imlm_0Z_0phzeVmteduvmaYIB-HKA0WFUEsCz-qr8xao1wTTh10uQaPUphT0M9Esd2FBLEDCHyZ0BQ1JGHHS-YYIZ8nk/s20/in.png) no-repeat center;
}
.ubhlinkedin:active{
box-shadow: 0px 1px 0px 0px #12a4db;
}
.ubhpinterest{
box-shadow: 0px 3px 0px 0px #e85756;
background:#f16261 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdFhPpvBPqZKBkQaQoly71cpBBGLX6qie1TswS9X32bTxIpWJsxz1Srsb2IQa-jKtbLnJNZY93kpI2VN3wqzeK1eEB01pa6IZxZiMRrha6ITFOAtib3fRvV71xC_7ZNvQeaO1RQ5VMLEY/s20/pinterest.png) no-repeat center;
}
.ubhpinterest:active{
box-shadow: 0px 1px 0px 0px #e85756;
}
.ubhstumbleupon{
box-shadow: 0px 3px 0px 0px #f5a635;
background:#fdaf40 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9qPuYoqellJKRsLmkRi0QdpsNCMHlJwkNXlsEGmPdV_WCINm8fTRTerXBfhq7JGRDg9PJb5Zc7l9ZTIhushAUbI1ux2GQMO61gcHh1mRQMcHavFQJdxHwbESAoO1XdqH_DbAj-o_0_88/s20/stumble.png) no-repeat center;
}
.ubhstumbleupon:active{
box-shadow: 0px 1px 0px 0px #f5a635;
}

5 - إبحث عن الشفرة التالية

<div class='post-footer-line post-footer-line-1'>

6 - وأضف الكود التالي قبلها (فوق)

<b:if cond='data:blog.pageType == "item"'>
<div class='social-div'>
<div id='sharrrrre'>
<div data-title='SHARES' id='shareme'/>
</div>
<div style='display: inline-block; margin-bottom: 20px;'>
<a class='ubhfacebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' id='socialshare' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
<img src='https://googledrive.com/host/0B8D3MQmcZTyvN1kzV3lfS2h6NW8'/>
Share on Facebook
</a>
<a class='ubhtwitter' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' id='socialshare' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
<img src='https://googledrive.com/host/0B8D3MQmcZTyvVXp2Qm5OSzRMUmM'/>
Share on Twitter
</a>
</div>
<div id='expand-social' style='display:none;'>
<a class='socialshare2 ubhgoogle-plus' data-title='Google+' expr:href='"https://plus.google.com/u/0/share?url=" + data:post.url' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
</a>
<a class='socialshare2 ubhlinkedin' data-title='Linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&source=" + data:blog.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' target='_blank'>
</a>
<a class='socialshare2 ubhstumbleupon' data-title='Stumble-Upon' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
</a>
<a class='socialshare2 ubhpinterest' data-title='Pin it' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
</a>
</div>
<div class='share-toggle'>
<div id='social-expand' onClick='toggle('expand-social');'>
<div class='expand-plus expand'>+</div>
<div class='expand-minus expand'>-</div>
</div>
</div>
</div>
</b:if>

7 - وأخيرا إبحث عن هذا الوسم

</body>

8 - أضف الكود التالي قبله (فوق)

<script src='http://code.jquery.com/jquery-1.7.min.js'/>
<script src='https://c8e27177358b76154f67a92cab4608cc54cd08c0.googledrive.com/host/0B72-8N3aLQVmai0zWDl1U1AxeTQ'/>
<script type='text/javascript'>
$(function(){
$('#shareme').sharrre({
share: {
googlePlus: true,
facebook: true,
twitter: true,
stumbleupon: true,
linkedin: true,
pinterest: true
},
enableTracking: true,
enableHover: false,
});
});
</script>
<script type='text/javascript'>
function toggle(d)
{
$("#" + d).animate({width:'toggle'},400);
}
$(document).ready(function(){
$("#social-expand").click(function(){
$(".expand-plus").toggle();
$(".expand-minus").toggle();
});
});
</script>

9 - حفظ المظهر

الآن توجه لمدونتك وشاهد النتيجة

ملحوظة : قد لا تجد الشفرة <div class='post-footer-line post-footer-line-1'> في النموذج الخاص بك، لذا يرجى البحث عن أي شفرة مشابهة، كما يمكنك لصق الشفرة في أي مكان تريد عرض الأداة فيه.

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

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