إضافة هل أعجبك الموضوع وبجانبها أزرار النشر في مواقع الشبكات الإجتماعية بتقنية جديدة

بــسم الله الرحمن الرحــيم

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

للمعاينة من هنا

1- انتقل إلى لوحة تحكم مدونتك

2- والضغط على القالب إحفظ نسخة ، ثم تحرير html ، ومتابعة ثم تضع علامة على توسيع واجهة المستخدم وتضغط في مفاتيح جهازك على ctrl+f وتبحث عن هذا الكود:

]]>< /b:skin&gt:   و ضع كود فوقها

/* CSS Social Share */
h9 {
color: #fff;
font-family: ge_dinar_tworegular;
margin-right: 140px;
}
.share-box{background-color:#fff;font-size:14px;padding:10px 0 11px;position:relative;margin-top:10px;color:#666;border-bottom: 1px solid #fff;}
/* 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: #FFFFFF;
    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: 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: 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;
}
 




*إن وجدته أكثر من مرة فالثاني او الاخير  هو المقصود هنا.
< data:post.body/ >

              أضف تحتها مباشرة الكود التالي

<div class='share-box'> <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'/> <div> <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> شارك</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'/> </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: 'id'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[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>

                    ان واجهك اي مشكل انا هنا