أحدث إضافة لأزرار المشاركات الإجتماعية

اهمية ازار مشاركات المواضيع مهمة في كل موقع أو مدونة الكل يستخدمها ، توجد اضافات تقدمها مواقع منها المجانية وتظهر بها الحقوق ومنها المدفوعة بمميزات اعلى ، ولذا اضافتنا ليست لأي موقع يقدم تلك الخدمة للأزرار فهي إضافة مصممة خصيصا لتكن لمدونتك بدون أي رابط خارجي ليس هذا فقط فهي تحتوي على الأزرار المهمة من تويتر ، فيسبوك ، جوجل بلس .. بها تأثير ولا أروع بتطبيق سلايدر - Css3 ، يمكنك الإنتقال للمعاينة المباشرة

معاينة الإضافة

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

1 . نتوجه لقالب >> تحرير 

2. ابحث بإستعمال CTRL+F عن  <b:skin/><[[

3. ضع الكود التالي قبله [ فوقه ]

/* Slide Share */
#button-count-share {
    width: 100%;
    overflow: hidden;
    background: transparent;
    margin: 0 auto;
    padding: 3px;
}

#button-count-share span {
    float: left;
    position: relative;
    font-size: 13px;
    color: #fff;
    margin: 12px 5px 12px 5px;
}

.button-share {
    background: #dce0e0;
    position: relative;
    display: block;
    float: left;
    height: 40px;
    overflow: hidden;
    width: 140px;
    margin: 4px;
    border-radius: 3px;
}

.ikons {
    display: block;
    float: left;
    position: relative;
    z-index: 3;
    height: 100%;
    vertical-align: top;
    width: 38px;
    text-align: center;
}

.ikons i {
    color: #fff;
    line-height: 33px;
}

.slide-share {
    z-index: 2;
    display: block;
    height: 100%;
    left: 38px;
    position: absolute;
    width: 108px;
    margin: 0;
}

.slide-share p {
    font-family: Verdana;
    font-weight: 400;
    border-left: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 14px;
    left: 0;
    position: absolute;
    text-align: center;
    top: 10px;
    width: 100%;
    margin: 0;
}

.button-share .slide-share {
    transition: all 0.4s ease-in-out;
}

.facebook .fb_iframe_widget {
    display: block;
    position: absolute;
    right: 5px;
    top: 0;
    z-index: 1;
}

.twitter iframe {
    left: 50px;
    top: 10px;
    z-index: 1;
    display: block;

: absolute;
}

.google #___plusone_0 {
width: 90px!important;
top: 10px;
right: 5px;
position: absolute;
display: block;
z-index: 1;
}

.facebook .ikons,.facebook .slide-share {
background: #4f79bc;
}

.twitter .ikons,.twitter .slide-share {
background: #63cef2;
}

.google .ikons,.google .slide-share {
background: #f36261;
}

.facebook:hover .slide-share,.twitter:hover .slide-share,.google:hover .slide-share {
left: 180px;
opacity: 0.6;
}

4. ابحث عن : <head/>

5. ضع الكود التالي قبله [ فوقه ]

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>




6. ابحث عن : <data:post.body/>

 * قد تجده متكرر الأخير هو المقصود

7. ضع الكود التالي أسفله مباشرة




<div class='clear'/>
<div id='button-count-share'>
<div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>
<div class='slide-share'>
<p>Share</p>
</div>
<a class='fb-share-button' name='fb_share' rel='nofollow' share_url='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' type='button_count'/>
</div>
<div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>
<div class='slide-share'>
<p>Like</p>
</div>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
</div>
<div class='google button-share'><i class='ikons'><i class='icon-google-plus icon-large'/></i>
<div class='slide-share'>
<p>G+</p>
</div>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/>
<script type='text/javascript'>
  window.___gcfg = {lang: &#39;id&#39;};
 
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
<div class='twitter button-share'><i class='ikons'><i class='icon-twitter icon-large'/></i>
<div class='slide-share'>
<p>Tweet</p>
</div>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div class='clear'/>
</div>
<div class='clear'/>

8. يمكنك حفظ العمل .. ومبروك عليك الإضافة