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

Tweet

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

تركيب الاضافة علي مدونة بلوجر 

1- قم بالدخول الي لوحة تحكم البلوجر الريئسية 

2-  قم بالدخول الي التخطيط او "Layout"

3- قم بإضافة خاصية HTML/JAVASCRIPT

4- قم بلصق الكود التالي فوق </head> مباشره 

<b:if cond='data:blog.pageType == "item"'>

<script type='text/javascript'>

// Twitter
(function (a, b, c){var d=a.getElementsByTagName(b)[0];if (!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a, d)}})(document, "script", "twitter-wjs");
// Stumbleupon
(function (){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a, b)})();

</script>


<style type='text/css'>

/*Social Bar By c4geek ----------------------------------- */
#SocialBar {
    float: left;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    width: 610px;
    margin-bottom: 20px;
    margin-left: -10px;
    margin-top: 10px;
}

.headingsharer h5 {
    float: left;
    padding-right: 20px;
    padding-top: 18px;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0px;
    padding-left: 10px;
}

.tweeetero, .fbwolo, .g-plusones, .stumblo {
    float: left;
    border-left: 1px solid #eaeaea;
    padding-left: 18px;
    padding-top: 15px;
    padding-bottom: 10px;
}

.g-plusones {
    margin-left: 20px;
}

</style>

</b:if> 

5- الان قم بعمل حفظ للقالب 

6- الان قم بالبحث عن ذلك الكود  <div class='post-body entry-content'>

7- مباشره قبل الكود السابقة قم بلصق الكود التالي 

<b:if cond='data:blog.pageType == "item"'>
<div id='SocialBar'>
<div class='headingsharer'>
<h5>SOCIALIZE IT →</h5>
</div>
<div class='tweeetero'>
<a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<div class='fbwolo'>
<iframe allowtransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
</div>
<div class='g-plusones'>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
</div>
<div class='stumblo'>
<su:badge expr:location='data:post.url' layout='1'/>
</div>
</div>
</b:if>