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

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


https://i.servimg.com/u/f58/19/42/85/47/uo_ouo11.jpg
طريقة التركيب
اذهب الى لوحة الادارة. مظهر المنتدى. صور والوان. الوان. ورقة css وضع الكود الاتي
الكود:

h9 {
color: #fff;
font-family: Arial;
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: Arial;
    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:Arial;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;}


ثم اذهب الى لوحة الادارة. مظهر المنتدى. قوالب التومبلايت. ادارة عامة. قالب overall_header ونبحث عن
الكود:
</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'/>

ثم سجل وانشر

الخطوة الاخير مكان وضع يكون بالمواضيع
افتح قالب viewtopic_body
واضيف اوله الاتي وسجل
الكود:

<div class='share-box'>
<span class='likebtn-wrapper' data-show_like_label='false' data-style='padded'/></span>
<script async='async' src='http://w.likebtn.com/js/w/widget.js' type='text/javascript'/></script>
 
<script async='async' src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></script>
<a class='printfriendly' href='http://www.printfriendly.com' onclick='window.print();return false;' title='طباعة التدوينة'><span class='print'/> <span class='pdf'/></span></span></a>
 
  <h9>اذا أعجبك الموضوع قم بمشاركته فى المواقع الإجتماعية</h9>
<div>
<div class='clear'/></div>
<div id='button-count-share'>
<div class='facebook button-share'><i class='ikons'><i class='icon-share icon-large'/></i></i>
<div class='slide-share'>
<p>نشر</p>
</div>
<a class='fb-share-button' name='fb_share' rel='nofollow' share_url='"http://www.facebook.com/sharer.php?u=" + data:blog.url' type='button_count'/></a>
</div>
<div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i></i>
<div class='slide-share'>
<p>إعجاب</p>
</div></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></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: 'en-US'
      };
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div></div>
<div class='twitter button-share'><i class='ikons'><i class='icon-twitter icon-large'/></i></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'/></script>
</div></div>
<div class='clear'/>
</div>
<div class='clear'/>
 
 
  </div>
</div></div>


m13
  افضل مساهمة2
قالب جميل جدا
بارك الله فيك
لي ملاحظه لم افهم ضيف اعلاه قالب overall_header ونبحث عن
وضيف اعلاه الاكواد الاتية
ممكن توضيح لو سمحتي
  افضل مساهمة3
تم توضيح هع لان الوسم لا يظهر بسبب تفعيل html هنا فلازم اضعه بين وسم الاكواد


m13
  افضل مساهمة4
تم التجربة
كود جميل ورائع في اعلى صفحات الموضوع يتناسب مع النشر على صفحات المواقع الاجتماعية
سؤال كيف اغير الخلفيه لكي تتناسب مع لون وصفحات الاستايل . من ورقى CSS
بورك نبضك ومجهودك الجميل ..
  افضل مساهمة5
تفضل
الكود:

.share-box{background-color:#2e3138;
خلفية الكود دة
2e3138


m13
لاتستطيع الرد على المواضيع في هذا المنتدى