أضافة أزرار المشاركه الاجتماعيه أسفل الموضوع مث التى فى الوردبريس بشكل فلاتى أحترافى

السلام عليكم ورحمة الله وبركاته
كل عام وانتم بالف خير واحسن صحه وحال
اليوم معى أضافة رائع نادر ما تدها فى المنتديات وهى أضافة المشاركه أسفل الموضوع مثل التى فى الورد بريس تماما يمكن مشاهدة الصور التاليهأو معاينة المثال المباشر من هنا





مثال مباشر من هنا

طريقة التركيب

1.أذهب الى لوحة التحكم لمدونتك
2.أضغط على قالب
3.أضغط على تعديل القالب
4.أبحث عن

رمز Code:

<b:skin>

5.واضف الكود التالى قبله (فوقه)

رمز Code:

<link href='http://fonts.googleapis.com/css?family=Raleway%3A400%2C800%2C700&amp;ver=1.0' id='googlewebfont-css' media='all' rel='stylesheet' type='text/css'/>

6.والان أبحث عن

رمز Code:

]]></b:skin>

واضف الكود التالى قبله أبضا

رمز Code:

#sharrrrre{
float:left;
margin: -10px 5px 0 0;
padding: 15px 15px 15px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtl9vxhYjtkdowtwhNQYZhWa1xZC18UYkrkppoGmoUMD2tOSD6euBZlOywO4m20ErUbvAHNFnApt7ExOsFaDU8JpTRrEFDtj8QTWZ01djn6lfEZg-saUHkUaODHhk5LRDRE8tVVOaieXc/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;
}
.mbafacebook{
background:#507bbf;
box-shadow: 0px 3px 0px 0px #4671b5;
}
.mbafacebook:active{
box-shadow: 0px 1px 0px 0px #4671b5;
}
.mbatwitter{
background:#63cef2;
box-shadow: 0px 3px 0px 0px #57c4e9;
}
.mbatwitter:active{
box-shadow: 0px 1px 0px 0px #57c4e9;
}
.mbagoogle-plus{
box-shadow: 0px 3px 0px 0px #43454c;
background:#4d4f54 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpUvpcVY447ohcxTf6eBUTI0JSDLEZISknHCAckiVwCbJDa9iH6fzFtCsn21_MSQJ5_yQ1gOTj-anR6ZB_gdHDQgBb1buugdz4_fh0-rfS-dzNCjnwe0UUlSgXlChqwD2URJ5jeSpaUaM/s20/g+.png) no-repeat center;
}
.mbagoogle-plus:active{
box-shadow: 0px 1px 0px 0px #43454c;
}
.mbalinkedin {
box-shadow: 0px 3px 0px 0px #12a4db;
background:#1aace3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWJpi5rrpD394eHjvlVqQLeg69of6ULTlm3il_56gGDDJU2HZGwZhXAATgljm8OxLT4HCaZBIXwIoXriKaRHghKwrCs6yIuykPTG5_mD52EgrtyNdFEM6tTmy9h0C3XP_JyGyWoZf7g2Q/s20/in.png) no-repeat center;
}
.mbalinkedin:active{
box-shadow: 0px 1px 0px 0px #12a4db;
}

.mbapinterest{
box-shadow: 0px 3px 0px 0px #e85756;
background:#f16261 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikE6IxMbY5zL37G-4Zo_5-qGNWr_Mf4rltR0SjP_sjuv5mrZr8GRMCC8ByHsFsjPDxBC1oVYUUge3lzTD221gYYwVnmFsr7cGKto-fv6e0v0P8ihgx5JVDbT3Jk-3VL_igICBL9YX2_To/s20/pinterest.png) no-repeat center;
}
.mbapinterest:active{
box-shadow: 0px 1px 0px 0px #e85756;
}
.mbastumbleupon{
box-shadow: 0px 3px 0px 0px #f5a635;
background:#fdaf40 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKIPtj33CLhB07iePINJkeP910HsUQ_XmuyxLcDHrh73ylJshgf9OntyO0V7S8mGYYkuTFBXc8S4ahwupdOJEULhyphenhyphenUQSGeICPwg-0QwQEDrSTfvSDkVY50WPtQFTwMmcIrYDio6i74Kz8/s20/stumble.png) no-repeat center;
}
.mbastumbleupon:active{
box-shadow: 0px 1px 0px 0px #f5a635;
}

7.والان أبحث عن

رمز Code:

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

واضف الكود التالى قبله (فوقه)

رمز Code:

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

8.الان أبحث عن

رمز Code:

</body>

وضع الكود التالى قبله أيضا

رمز Code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/>
<script src='http://sharrre.com/js/jquery.sharrre-1.3.4.min.js?v=3'/>
<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)
{
$(&quot;#&quot; + d).animate({width:'toggle'},400);
}
$(document).ready(function(){
$(&quot;#social-expand&quot;).click(function(){
$(&quot;.expand-plus&quot;).toggle();
$(&quot;.expand-minus&quot;).toggle();
});
});
</script>

اقتباس

ملحوظه ربما لا تجد الكود

رمز Code:

<div class='post-footer-line post-footer-line-1'> فقط أبحث عن أى كود شبيه له أو ضع الادة فى أى مكان يناسبك وسف تعمل بدون مشاكل أنشاء الله