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

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

نمر الٌان الى طريقة تركيب هذه الاضافة

1. اولا وقبل القيام باي شئ  قم بأخذ نسخة إحتياطية من قالب مدونتك
2. نذهب الى  modifier le code HTML
3. نبحث عن الكود  ]]></b:skin>
4. ويتم وضعه كود css فوقه مباشرة

/* CSS Social Share */
h9 {
color: #fff;
font-family: ge_dinar_tworegular;
margin-right: 140px;
}
.share-box{background-color:#2e3138;font-size:14px;padding:10px 0 11px;position:relative;margin-top:10px;color:#666;border-bottom: 1px solid #353942;}
/* Slide Share */
#button-count-share {
    margin-left:45px;
    overflow: hidden;
    background: transparent;
    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: 1;
    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: ge_dinar_tworegular;
    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;
    position: absolute;
}
 
.google #___plusone_0 {
    width: 15px!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;
}
 
/* CSS Print */
.printfriendly{float:left;left:10px;background:transparent;color:#666;text-decoration:none;padding:3px 0 3px 5px;font-family:'Open Sans';font-size:20px;font-weight:400;}
.printfriendly span.print{opacity:0.7;background:url(http://3.bp.blogspot.com/-lk5nzkiNUx8/U8aAFYhsEZI/AAAAAAAAEZI/aH7XVyZ0K3M/s1600/print.png) no-repeat;border:none;box-shadow:none;margin:3px 6px -3px;padding-right:20px;transition:all 0.5s ease-in-out;}
.printfriendly span.print:hover{opacity:1;background:url(http://3.bp.blogspot.com/-lk5nzkiNUx8/U8aAFYhsEZI/AAAAAAAAEZI/aH7XVyZ0K3M/s1600/print.png) no-repeat;border:none;box-shadow:none;margin:3px 6px -3px;padding-right:20px}
.printfriendly span.pdf{opacity:0.7;background:url(http://1.bp.blogspot.com/-I0-5NsWqte0/U8Z_1fuHXlI/AAAAAAAAEYA/Wk_SRupt4j4/s1600/PDF.png) no-repeat;border:none;box-shadow:none;margin:3px 0 -3px;padding-right:20px;transition:all 0.5s ease-in-out;}
.printfriendly span.pdf:hover{opacity:1;background:url(http://1.bp.blogspot.com/-I0-5NsWqte0/U8Z_1fuHXlI/AAAAAAAAEYA/Wk_SRupt4j4/s1600/PDF.png) no-repeat;border:none;box-shadow:none;margin:3px 0 -3px;padding-right:20px;}

قم بالبحث عن <head/> وضع فوقها أو قبلها الكود التالى

<link href='http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

<link href='https://ar1web-com.googlecode.com/svn/trunk/font-ge_dinar.css' rel='stylesheet'/>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

قم بالبحث عن الكود التالى  <b:if cond='data:blog.pageType == &quot;item&quot;'>

و أخيرا قم بوضع الكود التالي بعده أو أسفل منه

<div class='share-box'>
<span class='likebtn-wrapper' data-show_like_label='false' data-style='padded'/>
<script async='async' src='//w.likebtn.com/js/w/widget.js' type='text/javascript'/>
 
<script async='async' src='http://static.addtoany.com/menu/page.js' type='text/javascript'/>
<a class='printfriendly' href='http://www.printfriendly.com' onclick='window.print();return false;' title='طباعة التدوينة'><span class='print'/> <span class='pdf'/></a>
 
  <h9>اذا أعجبك الموضوع قم بمشاركته فى المواقع الإجتماعية</h9>
<div>
<div class='clear'/>
<div id='button-count-share'>
<div class='facebook button-share'><i class='ikons'><i class='icon-share icon-large'/></i>
<div class='slide-share'>
<p>نشر</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>إعجاب</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>جوجل +</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;en-US&#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/platform.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>تويتر</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'>غرد</a>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div class='clear'/>
</div>
<div class='clear'/>
 
 
  </div>
</div>

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