لا يخفى علينا دور الشبكات الاجتماعية في مشاركة ونشر مواضيع المدونات و المواقع وكسب حركة مرور اضافية, من خلال هدا الشرح سنتعرف على كيفية اضافة ازرار المشاركة لاهم المواقع الاجتماعية الى الاداة القياسية لبلوجر التي تقتصر على الفايسبوك, تويتر, بلوجر و الارسال عبر الاميل, سنعمل على اضافة كل من Pinterest, stumbleupon ,linkedin, hellocoton,Google Plus, iGoogle.
| معاينة شكل الأزرار |
| ازرار رمادية صغيرة |  |
|---|---|
| ازرار ملونة صغيرة |  |
| ازرار رمادية كبيرة |  |
| ازرار ملونة كبيرة |  |
الخطوة الأولى: تفعيل أزرار المفضلات الاجتماعية في بلوجر
لتفعيل أزرار المفضلات الاجتماعية في بلوجر نتوجه من لوح تحكم المدونة إلى "عناصر الصفحة" ثم في مربع "رسائل المدونة الإلكترونية" نضغط "تحرير" و في النافذة المنبثقة نفعل الخيار بوضع علامة في الخانة التي تظهر جنب أزرار المفضلات كما يبدو في الصورة أسفله ثم نضغط زر الحفظ.
الخطوة الثانية: إضافة الأزرار إلى القالب
| [1] | من لوحة التحكم بلوجر نتبع المسار: تصميم » تحرير HTML » توسيع القالب |
|---|---|
| [2] | نبحث عن <b:includable id='shareButtons' var='post'> ونضع بعده مباشرة الكود الاتي: |
<b:includable id='shareButtons' var='post'>
<span class='post-share-buttons'>
<b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' target='_blank' title='أرسل عبر الإيميل'><span class='share-button-link-text'>أرسل عبر الإيميل</span></a></b:if>
<b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' target='_blank' title='دون المشاركة'><span class='share-button-link-text'>دون المشاركة</span></a></b:if>
<b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' target='_blank' title='شارك على تويتر'><span class='share-button-link-text'>شارك على تويتر</span></a></b:if>
<b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' target='_blank' title='شارك على الفايسبوك'><span class='share-button-link-text'>شارك على الفايسبوك</span></a></b:if>
<b:if cond='data:blog.pageType == "item"'><a class='goog-inline-block share-button sb-pinterest' href='javascript:void(bookmarks())' id='pinbookmarks' title='شارك على Pinterest'><span class='share-button-link-text'>شارك على Pinterest</span></a><script type='text/javascript'>
function bookmarks() {
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);
document.body.appendChild(e);
}
</script></b:if>
<a class='goog-inline-block share-button sb-stumble' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.canonicalUrl + "&title=" + data:post.title' expr:onclick='"window.open(this.href, \"_blank\", \"height=580,width=800\"); return false;"' target='_blank' title='شارك على StumbleUpon'><span class='share-button-link-text'>شارك على StumbleUpon</span></a>
<a class='goog-inline-block share-button sb-linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url="+ data:post.canonicalUrl + "&title=" + data:post.title' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' target='_blank' title='شارك على Linkedin'><span class='share-button-link-text'>شارك على Linkedin</span></a>
<b:if cond='data:blog.pageType != "static_page"'><a class='goog-inline-block share-button sb-hc' expr:href='"http://www.hellocoton.fr/vote?url=" + data:post.canonicalUrl' target='_blank' title='صوت على HelloCoton'><span class='share-button-link-text'>صوت على HelloCoton</span></a></b:if>
<a class='goog-inline-block share-button sb-gplus' expr:href='"https://plus.google.com/share?url="+ data:post.canonicalUrl' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' target='_blank' title='شارك على جوجل +'><span class='share-button-link-text'>شارك على جوجل +</span></a>
<b:if cond='data:feedLinks'><a class='goog-inline-block share-button sb-rss' expr:href='"http://fusion.google.com/add?feedurl=" + data:blog.homepageUrl + "feeds/posts/default"' target='_blank' title='أضف على آي جوجل'><span class='share-button-link-text'>أضف على آي جوجل</span></a></b:if>
<b:if cond='data:top.showDummy'><a class='goog-inline-block share-button sb-bc' href='http://prote9.blogspot.com/2012/08/blog-post_17.html' target='_blank' title='get this widget'><span class='share-button-link-text'>get this widget</span></a><div class='goog-inline-block dummy-container'><data:post.dummyTag/></div></b:if>
</span>
</b:includable>
الخطوة الثالثة : تشخيص الازرار
[1] نختار الحجم و الستايل الذي يناسبنا : [2] من لوحة التحكم بلوجر نتبع المسار: قالب » تخصيص » متقدم
[3] نضع الكود اعلاه في تبويبة "إضافة CSS"
|
ليست هناك تعليقات:
إرسال تعليق