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

ازرار المشاركة من بين اكتر الاضافات الاساسية في مدونة بلوجر فهي تلعب دور كبير في الدعاية وجلب الزوار ومشاركة الموضوع مع الاخرين وطبعا هده الازرار هناك بعض المواقع التي تقدمها مدفوعة وهناك مجانية ايضا او هناك من تكون مصممة خاصة للمدونة لا يمكن مشاركتها مع المدونات اخرى لدى في هدا الموضوع سوف اقدم لكم ازرار مشاركات فيسبوك وكوكل و تويتر ....

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

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

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

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

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


/* Slide Share */

#button-count-share {

    width: 100%;

den;
    background: 

    overflow: hi

dtransparent;

    margin: 0 auto;

-share span {
   

    padding: 3px;
}


tton-coun
#b
u
t float: left;

    position: relative;

   margin: 12px 5px 

    font-size: 13px;
    color: #fff;



 12px 5px;
}


tton-share {
  
.b

u  background: #dce0e0;

left;
    height: 40px;

    position: relative;
display: block;


float
:

 

    overflow: hidden;
width: 140px;


margin: 4px;

 float: left;
    posit

    border-radius: 3px;
}

.ikons {

 block;
  
display

:

 ion: relative;
z-index: 3;

;
    vertical-al
height: 100
%ign: top;

 line-height: 33
    width: 38px;
    text-align: center;
}

.ikons i {
    color: #fff;
  
 px;
}

.slide-share {
    z-index: 2;
    display: block;
    height: 100%;

slide-share p {
    left: 38px;
    position: absolute;
    width: 108px;
    margin: 0;
}


.
    font-family: Verdana;
    font-weight: 400;


    color: #fff;
    font-size: 14px;
    left: 0
    border-left: 1px solid rgba(255,255,255,0.35)
;;
    position: absolute;
    text-align: center;
    top: 10px;
    width: 100%;
    margin: 0;
}


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

.facebook .fb_iframe_widget {

 ion: absolute;
    right: 5px;
    top: 0;
    z-index: 1;
}

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


    position: abso
    display: block;
    position: absolute;
}

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

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


ound: #f36261;
}

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

.google .ikons,.google .slide-share {
    backg
re-share,.twitter:hover .slide-share,.google:hover .slide-share {
    left: 180px;
    opacity: 0.6;


}

4. ابحث عن :

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'/>

type='text/javascript'/>

<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share'

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>


='nofollow' share_url='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' type='button_count'/>
</div>

ass='facebook button-share'><i 
<div c
l
<a class='fb-share-button' name='fb_share' re
lclass='ikons'><i class='icon-facebook icon-large'/></i>
<div class='slide-share'>
<p>Like</p>
</div>


'false'/>
</div>

ass='google button-share'><i class='ikons'><i class='icon-google-plus icon-large'/></i>
<div c
l
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces
=
<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'>

;https://apis.google.com/js/plusone.js&#
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 = &#3
939;;
    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>

re' title='Share via Twit
<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/sh
ater'>Tweet</a>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div class='clear'/>
</div>


<div class='clear'/>