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

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

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

ابحث في القالب عن ]]></b:skin>

ضع الكود التالي فوقه 

/* 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:&#39;Open Sans&#39;;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>

وبعد ذلك قم بحفظ القالب واستمتع بالاضافة في مدونتك