ولتركيب الإضافة على مدونتك قم بإتباع التالي
قم بتحرير قالبك وفوق الوسم </head> اضف الكود التالي
ملحوظة إن كان لديك كود مكتبة جي كويري فتجاوز هذه المرحلة ولا تضيف الكود
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
ثم إختر أحد الكودين التاليين وأضفه في اداة 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/AVvXsEg0ScBY7ZkMOBEhUaUUU40qB3PPLKw0T-jzMW19Bau9cZc0VStNZuTKbkNtVOMj3ojxwqsmoUGiMyam4cmF8fKIcHMPaysToZkwAahblkOZGkFSO3CRKti0ooUyh0hSgdhZj4DU9R3MRHQ/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>
<!-- Medium Button -->
<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>
<!-- Medium Button -->
<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>
موفقين بإذن الله
تحياتي
