مجربة من قبلي ويمكنك وضعها بكود html خارجي سهلة
أزرار المشاركة على المواقع الإجتماعية أصبحت أساسية في جميع المواقع والمدونات وتوجد عدة طرق لإستخدام الأزرار وهذه إحدى الطرق المميزة والتي تجتذب عين الزائر وفي نفس الوقت تعطي لمسة جمالية لمدونتك
ولتركيب الإضافة على مدونتك قم بإتباع التالي
قم بتحرير قالبك وفوق الوسم </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/AVvXsEhIOh-FxmSqsW1vAs38pUSO2AHk1_PZOR9Ky1iHvkFxVaMN6-2xGw1I9b5fLe7GYhBNw9t_89__QB86jz16o8nnhjKUWfi9MwMEujKDNQKWQWM-0fQ1k95eWGeP1mHDMYlTazBjwA0ry-Y/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>
موفقين بإذن الله
تحياتي
خارج الموضوع تحويل الاكوادإخفاء الابتساماتإخفاء