أدوات المشاركة بشكل عداد جميل

تبحث عن أدوات مختلفة ففي تدوينة اليوم أداوات مشاركة بشكل رائع مع عدد المشاركين أو المعجبين.

 (لا تبخل علينا بإعجابك ^_^ )

قم بحفظ نسخة احتياطية للقالب.
ثم قم بتحريره وابحث عن ]]></b:skin>
واضف فوقها مباشرة الكود التالي

.mblsocial-container{
font-size: 13px;
color: #666;
font-family: arial,sans-serif;
line-height: 25px;}
.mblsocial-container a,.mblsocial-container a:visited
{color:#45BAF5;
text-decoration: none;}
.count
{font-weight:bold;}
.row{
    position: relative;
    width: 320px;
    margin: 20px 0px;
    height: 100px;
}
.col_4{
    width: 155px;
    float: left;
    margin: auto;
    text-align: center;
}
.box{
    width: 130px;
    height: 100px;
    margin: auto;
    border: 1px solid #E5E7EB;
    background: #F1F3F8;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius:3px;
}
.cell_1{
    width: 30px;
    height: 80px;
    position: relative;
    float: left;
    margin: auto;
}
.cell_2{
    font-size: 30px;
    height: 80px;
    width: 80px;
    text-align: center;
    line-height: 80px;
    font-family: arial, sans-serif;
    font-smooth: always;
    position: relative;
    margin: auto;
    color: #333;
}
.cell_3{
    height: 20px;
    width: 132px;
    float: left;
    margin: auto;
    line-height: 20px;
    font-size: 12px;
    color: #999;
    background: #ccc;
    margin-left: -1px;
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
.icon{
    width: 40px;
    height: 40px;
    margin-top: 17px;
    border: none;
}
.facebook-blue{
background-color: #5074BF;
background-image: -moz-linear-gradient(top, #88AEFC, #3B5998);
background-image: -ms-linear-gradient(top, #88AEFC, #3B5998);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#88AEFC), to(#3B5998));
background-image: -webkit-linear-gradient(top, #88AEFC, #3B5998);
background-image: -o-linear-gradient(top, #88AEFC, #3B5998);
background-image: linear-gradient(top, #88AEFC, #3B5998);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#88AEFC', endColorstr='#3B5998');
border-color: #23487E;
color: #fff;
text-shadow: 0 1px 1px rgba(60, 60, 60, 0.75);
}
.twitter-blue{
background-color: #44B8F2;
background-image: -moz-linear-gradient(top, #96DCFF, #2BA6E3);
background-image: -ms-linear-gradient(top, #96DCFF, #2BA6E3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#96DCFF), to(#2BA6E3));
background-image: -webkit-linear-gradient(top, #96DCFF, #2BA6E3);
background-image: -o-linear-gradient(top, #96DCFF, #2BA6E3);
background-image: linear-gradient(top, #96DCFF, #2BA6E3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#96DCFF', endColorstr='#2BA6E3');
border-color: #149BDE;
color: #fff;
text-shadow: 0 1px 1px rgba(60, 60, 60, 0.75);
}
.green {
background-color: #41AD2B;
background-image: -moz-linear-gradient(top, #4FDE33, #368F24);
background-image: -ms-linear-gradient(top, #4FDE33, #368F24);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4FDE33), to(#368F24));
background-image: -webkit-linear-gradient(top, #4FDE33, #368F24);
background-image: -o-linear-gradient(top, #4FDE33, #368F24);
background-image: linear-gradient(top, #4FDE33, #368F24);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4FDE33', endColorstr='#368F24');
border-color: #1B7808;
color: #fff;
text-shadow: 0 1px 1px rgba(60, 60, 60, 0.75);
}
.black {
background-color: #333;
background-image: -moz-linear-gradient(top, #666, #000);
background-image: -ms-linear-gradient(top, #666, #000);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#666), to(#000));
background-image: -webkit-linear-gradient(top, #666, #000);
background-image: -o-linear-gradient(top, #666, #000);
background-image: linear-gradient(top, #666, #000);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
border-color: #000;
color: #fff;
text-shadow: 0 1px 1px rgba(60, 60, 60, 0.75);
}
#mycontent{
color:#a1a1a1;
text-align:center;
line-height: 1.9;
width:310px;
border: 1px solid #E5E7EB;
background: #F1F3F8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius:3px;
}

ثم اذهب إلي التخطيط واضف أداة HTML/JavaScript واضف إليها هذا الكود

<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/jquery-1.7.1.min.js"></script>

<script>
$(document).ready(function(){
$('#shared').mblsocialcount({
'service':'facebook',
'countof':'shares',
'query':'http://www.mybloggerlab.com',
'callback':'formatCount'
});

$('#tweets').mblsocialcount({
'service':'twitter',
'countof':'tweets',
'query':'mybloggerlab',
'callback':'formatCount'
                });


$('#fblikes').mblsocialcount({
'service':'facebook',
'countof':'likes',
'query':'mybloggerlab',
'callback':'formatCount'
                });

$('#followers').mblsocialcount({
'service':'twitter',
'countof':'followers',
'query':'mybloggerlab',
'callback':'formatCount'
                });          
            });
function formatCount(element,count)
{var display_count='';
count=parseInt(count,10);
if(count>1000000)
{count=count/1000000;
count=count.toFixed(1);
display_count=count+'m';}
else if(count>1000)
{count=count/1000;
count=count.toFixed(1);
display_count=count+'k';}
else{display_count=count;}
element.html(display_count);}
        </script>
<div class="mblsocial-container">
    <div class="row">
         <div class="col_4">
            <a href="http://www.facebook.com/th3skill" target="_blank" rel="nofollow">
<div class="box">
    <div class="cell_1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDYvU8greWS-ZZOph7VA5UzNrW6nbWGRtMWD24VVr1p2V7_0x4Ziwy5jeWblBhgLZkqinYxFKpQwIDO-gDfFnKke4xoQMztmQGiTbbe_xWs54x_Nx6kKm_UwWaXGg5APLOyuRKEmpoGXE/s100/facebook.png" class="icon"/></div>
        <div class="cell_2"><span id="fblikes" class="count"></span></div>
            <div class="cell_3 facebook-blue">Likes</div>
              </div>
                 </a>
                   </div>  


<div class="col_4">
    <a href="http://www.th3skill.com" target="_blank" rel="nofollow">
<div class="box">
        <div class="cell_1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDYvU8greWS-ZZOph7VA5UzNrW6nbWGRtMWD24VVr1p2V7_0x4Ziwy5jeWblBhgLZkqinYxFKpQwIDO-gDfFnKke4xoQMztmQGiTbbe_xWs54x_Nx6kKm_UwWaXGg5APLOyuRKEmpoGXE/s100/facebook.png" class="icon"/></div>
            <div class="cell_2"><span id="shared" class="count"></span></div>
                <div class="cell_3 green">Shares</div>
                </div>
                     </a>
                         </div>
                      </div>


<div class="row">
     <div class="col_4">
         <a href="http://www.twitter.com/th3skill" target="_blank" rel="nofollow">
<div class="box">
     <div class="cell_1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8wCKz7ISdyxWrxkQLn4Q6HaRG9mBAyktbP2vU9JrhYV-I8vIjwBDe2xq3NkWvmqKXTyzowx_myd-IJfQ0aIWxA4YA61gWjpfNG8MUSx_kUwSfB8Hg4rgkaDeqYMXMq0k9iW2TLkNrBJY/s100/twitter.png" class="icon"/></div>
        <div class="cell_2"><span id="followers" class="count"></span></div>
            <div class="cell_3 twitter-blue">Followers</div>
              </div>
                 </a>
                   </div>
   
   
<div class="col_4">
    <a href="http://www.twitter.com/th3skill" target="_blank" rel="nofollow">
<div class="box">
     <div class="cell_1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8wCKz7ISdyxWrxkQLn4Q6HaRG9mBAyktbP2vU9JrhYV-I8vIjwBDe2xq3NkWvmqKXTyzowx_myd-IJfQ0aIWxA4YA61gWjpfNG8MUSx_kUwSfB8Hg4rgkaDeqYMXMq0k9iW2TLkNrBJY/s100/twitter.png" class="icon"/></div>
         <div class="cell_2"><span id="tweets" class="count"></span></div>
             <div class="cell_3 black">Tweets</div>
                </div>
                    </a>
                       </div>
            </div>
<div id="mycontent">Created By <a href="http://www.th3skill.com">th3skill.com</a>
</div>
   </div>
     
<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/mblsocialcount.js"></script>

ثم قم بحفظ القالب والأداة واستمتع بالإضافة.