السلام عليكم و رحمة الله تعالى و بركاته, إخواني أخواتي زوار و متتبعي مدونة محمد. في هذا الموضوع أحببت أن أضع لكم شرح حول كيفية إضافة أداة المتابعة عبر الشبكات الإجتماعية (شكل رائع) إلى مدونات البلوجر, هذه الأداة تتضمن ثلاث مواقع يستعملها أغلب المدونين و هي (تويتر – فايسبوك – جوجل+) و كما أن هذه الأداة تتميز بشكلها الرائع و الخفة و التباث, بالإضافة إلى أنها تمكنك من تحديد عدد المتابعين لديك في كل موقع من مواقع الشبكات الإجتماعية.
يمكنك مشاهدة مثال مياشر للأداة عبر الرابط التالي : مثال مباشر
إذا أردت إضافتها إلى مدونتك فالأمر جد بسيط, كل ما عليك فعله هو :
- اذهب إلى لوحة التحكم الخاصة بمدونتك ثم التخطيط بعد ذلك اضغط على إضافة أداة HTML/Javascript
- الآن انسخ الكود التالي و ضعه داخل الأداة :
<style type="text/css">
.container {
margin: 0px auto;
width: 270px;
text-align: center;
float: center;
}
.btn-sbm {
display: inline-block;
vertical-align: top;
position: relative;
margin: 0 5px;
padding-top: 40px;
width: 75px;
font-weight: bold;
text-align: center;
text-decoration: none;
border-radius: 8px;
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
.btn-sbm:active {
margin-top: 3px;
}
.btn-sbm:active .btn-sbm-action {
padding-bottom: 3px;
-webkit-box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
}
.btn-sbm:active .btn-sbm-action:after {
bottom: 3px;
}
.btn-sbm-count {
position: absolute;
top: 0;
left: 0;
right: 0;
line-height: 40px;
font-size: 20px;
letter-spacing: -1px;
color: #555;
text-shadow: 0 1px white;
background: #e6eff5;
border-width: 1px 1px 0;
border-style: solid;
border-color: #c5c5c5 #bbb;
border-radius: 8px 8px 0 0;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
}
.btn-sbm-count:before, .btn-sbm-count:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
border: 6px solid transparent;
border-top-color: #e6eff5;
}
.btn-sbm-count:before {
margin-left: -7px;
margin-top: 1px;
border-width: 7px;
border-top-color: rgba(0, 0, 0, 0.07);
}
.btn-sbm-action {
display: block;
position: relative;
line-height: 32px;
padding: 2px 0 6px;
font-size: 18px;
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
border: solid rgba(0, 0, 0, 0.18);
border-width: 0 1px;
border-radius: 0 0 8px 8px;
}
.btn-sbm-action:after {
content: '';
position: absolute;
top: 0;
bottom: 6px;
left: 0;
right: 0;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
}
.btn-sbm-tweet {
background: #83cfe8;
background-image: -webkit-linear-gradient(top, #83cfe8, #6ebbd4);
background-image: -moz-linear-gradient(top, #83cfe8, #6ebbd4);
background-image: -o-linear-gradient(top, #83cfe8, #6ebbd4);
background-image: linear-gradient(to bottom, #83cfe8, #6ebbd4);
-webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
}
.btn-sbm-tweet:after {
-webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
}
.btn-sbm-tweet + .btn-sbm-count {
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
}
.btn-sbm-like {
background: #6480bd;
background-image: -webkit-linear-gradient(top, #6480bd, #3c5894);
background-image: -moz-linear-gradient(top, #6480bd, #3c5894);
background-image: -o-linear-gradient(top, #6480bd, #3c5894);
background-image: linear-gradient(to bottom, #6480bd, #3c5894);
-webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
}
.btn-sbm-plus {
background: #626262;
background-image: -webkit-linear-gradient(top, #626262, #404040);
background-image: -moz-linear-gradient(top, #626262, #404040);
background-image: -o-linear-gradient(top, #626262, #404040);
background-image: linear-gradient(to bottom, #626262, #404040);
-webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
}
</style>
<br/>
<div class="container">
<a href=https://twitter.com/Username rel="nofollow" target="_blank"rel="author" title="تابعنا عبر التويتر" class="btn-sbm">
<span class="btn-sbm-action btn-sbm-tweet">تويتر</span>
<span class="btn-sbm-count">150+</span>
</a>
<a href=http://www.facebook.com/modawanatmohamedrel="nofollow" target="_blank" title="صفحتنا على الفايسبوك" class="btn-sbm">
<span class="btn-sbm-action btn-sbm-like">فايسبوك</span>
<span class="btn-sbm-count">650+</span>
</a>
<a href="Google Plus" class="btn-sbm" target="_blank" rel="author" title="تابعنا على جوجل+">
<span class="btn-sbm-action btn-sbm-plus">جوجل+</span>
<span class="btn-sbm-count">140+</span>
</a><br/>
</div>
التعديل على الكود :
- 270px : غيره إذا أردت تغيير حجم الأداة.
- Username : غيره باسم المستخد الخاص بك على التويتر.
- +150 : استبدله بعدد المتابعين لديك على التويتر.
- modawanatmohamed : غيره باسم صفحتك على الفايسبوك.
- +650 : استبدله بعدد المتابعين لديك على الفاسبوك.
- Google Plus : غيره برابط صفحتك على جوجل+.
- +140 : استبدله بعدد المتابعين لديك على جوجل+.
و بهذا نكون قد انتهينا من شرح كيفية إضافة هاته الأداة إلى مدونات البلوجر.
إذا واجهتك أي مشكلة المرجو طرحها عبر تعليق
0 التعليقات