-->

إضافة منزلقة لأزرار المشاركة





أغسطس 12, 2018



الرئيسية > إضافات بلوجر

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

إضافة منزلقة لأزرار المشاركة

إضافة منزلقة لأزرار المشاركة

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

ولتركيب الإضافة على مدونتك قم بإتباع التالي

قم بتحرير قالبك وفوق الوسم </head> اضف الكود التالي

ملحوظة إن كان لديك كود مكتبة جي كويري فتجاوز هذه المرحلة ولا تضيف الكود

ثم إختر أحد الكودين التاليين وأضفه في اداة HTML/JavaScript

الإضافة على يسار المدونة

<script type="text/javascript">
    /*<![CDATA[*/
    jQuery(document).ready(function () {
        jQuery(".hbslidebox").hover(function () {
            jQuery(this).stop().animate({
                left: "0"
            }, "medium");
        }, function () {
            jQuery(this).stop().animate({
                left: "-70"
            }, "medium");
        }, 500);
    });
    /*]]>*/
</script>
<style type="text/css">
    .hbslidebox {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmBhDQV27F7DOrdi2TQ3ki51WFpuhKBA0pCd2pYsLg1OnirHGOU66IwftTXuU8PKTG8KUIj4mpoKv_eIPAiag8eIYTtSQgLIgpxUu1GdgGI6tXg_mRAS7BKLKpABbVPP2WVcLrVXNFIHo/s102/share-left.png") no-repeat scroll right top transparent !important;
        display: block;
        float: left;
        height: auto;
        padding: 0 45px 0 0px;
        width: 65px;
        height:102px;
        z-index: 99999;
        position:fixed;
        left:-70px;
        top:20%;
    }
    .hbslidebox div {
        border:none;
        position:relative;
        display:block;
    }
    #floatingbuttons {
        background: #fff;
        border-radius: 5px 5px 5px 5px;
        border: 1px solid #CCCCCC;
        float:left;
        padding:0 0 3px 0;
        bottom:15%;
        z-index:399;
    }
    #floatingbuttons .floatbutton {
        float:left;
        clear:both;
        margin:5px 4px 0 4px;
    }
    .addbuttons {
        clear:both;
        text-align:center;
        padding-top:5px;
    }
    .addbuttons a span.getfloat, .addbuttons a span.sharebuttons {
        color:#000;
        background:none;
        font-family:arial, sans-serif;
        display:block;
        font-size:9px;
        font-weight:bold;
        text-decoration:none;
        line-height:11px;
    }
    .addbuttons a:hover span {
        color:#0502CD;
        background:none;
        text-decoration:underline;
    }
</style>
<div class="hbslidebox" style="">
    <div>
        <div id='floatingbuttons' title="Share this post!">
            <script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
            
            </script>
        <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>
            
            <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
            <div class='floatbutton' id='facebook'>
                <fb:like layout="box_count" show_faces="false" font=""></fb:like>
            </div>
<div class='floatbutton' id='google+1'>
                <g:plusone size="tall"></g:plusone>
            </div>
<div class='floatbutton' id='twitter'>
                <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
            </div>
<div class="addbuttons">

<a href="http://cnmu.blogspot.com/2013/01/Share-slider.html"target="_blank" title="أضف هذه الآداة الى مدونتك!"><span class="getfloat">كود الإضافة</span></a>
            </div>
</div>
</div>
</div>

الإضافة على يمين المدونة

<script type="text/javascript">
    /*<![CDATA[*/
    jQuery(document).ready(function () {
        jQuery(".hbslidebox").hover(function () {
            jQuery(this).stop().animate({
                right: "0"
            }, "medium");
        }, function () {
            jQuery(this).stop().animate({
                right: "-70"
            }, "medium");
        }, 500);
    });
    /*]]>*/
</script>
<style type="text/css">
    .hbslidebox {
        background: url("https://lh3.googleusercontent.com/-KgklF6q4Bxg/UQOnO6tIrOI/AAAAAAAAAW8/OqtCfwr9c5w/s102/share-right.png") no-repeat scroll left top transparent !important;
        display: block;
        float: right;
        height: auto;
        padding: 0 0px 0 45px;
        width: 65px;
        height:102px;
        z-index: 99999;
        position:fixed;
        right:-70px;
        top:20%;
    }
    .hbslidebox div {
        border:none;
        position:relative;
        display:block;
    }
    #floatingbuttons {
        background: #fff;
        border-radius: 5px 5px 5px 5px;
        border: 1px solid #CCCCCC;
        float:right;
        padding:0 0 3px 0;
        bottom:15%;
        z-index:399;
    }
    #floatingbuttons .floatbutton {
        float:right;
        clear:both;
        margin:5px 4px 0 4px;
    }
    .addbuttons {
        clear:both;
        text-align:center;
        padding-top:5px;
    }
    .addbuttons a span.getfloat, .addbuttons a span.sharebuttons {
        color:#000;
        background:none;
        font-family:arial, sans-serif;
        display:block;
        font-size:9px;
        font-weight:bold;
        text-decoration:none;
        line-height:11px;
    }
    .addbuttons a:hover span {
        color:#0502CD;
        background:none;
        text-decoration:underline;
    }
</style>
<div class="hbslidebox" style="">
    <div>
        <div id='floatingbuttons' title="Share this post!">
            <script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
            
            </script>
        <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>
            
            <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
            <div class='floatbutton' id='facebook'>
                <fb:like layout="box_count" show_faces="false" font=""></fb:like>
            </div>
<div class='floatbutton' id='google+1'>
                <g:plusone size="tall"></g:plusone>
            </div>
<div class='floatbutton' id='twitter'>
                <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
            </div>
<div class="addbuttons">
                <a href="http://cnmu.blogspot.com/2013/01/Share-slider.html"target="_blank" title="أضف هذه الآداة الى مدونتك!"><span class="getfloat">كود الإضافة</span></a>
            </div>
</div>
</div>
</div>