دکمه اشتراک گذاری بازشو

دکمه اشتراک گذاری بازشو این کد دکمه های اشتراک گذاری به سایتها که اکثرا در زیر نوشته ها قرار داره رو در گوشه سایت به صورت کشویی قرار میده که با رفتن ماوس روی ان باز خواهد شد.

دکمه اشتراک گذاری بازشو

دمو کد

 

<style>
.image-overlay:hover {opacity: 0.6;}#codebazan-share_it{background:url(img/btn-share.gif) repeat-y scroll 0 0 #F4F4F4;border:1px solid #888;float:left;height:107px;padding:5px 0;position:fixed;left:0;z-index:1001;width:35px;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0 5px 5px 0;-o-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0;top:215px}#codebazan-share_it a.sharetext{display:block;float:left;line-height:30px;text-decoration:none;cursor:pointer}#codebazan-share_it a.sharetext img{border:0;display:block;margin-left:10px}#codebazan-share_it .flyout{background:none repeat scroll 0 0 #AAA;height:113px;left:40px;position:relative;top:-4px;width:0;transition:width 1s ease-in-out;-o-transition:width 1s ease-in-out;-moz-transition:width 1s ease-in-out;-webkit-transition:width 1s ease-in-out}#codebazan-share_it .flyout ul{background:#FFF;list-style:none;position:absolute;left:-570px;top:10px;width:370px;height:85px;border:1px solid #888;border-left:0;padding-right:10px;z-index:500;padding-left:5px;overflow:hidden;transition:1s ease-in-out;-o-transition:1s ease-in-out;-moz-transition:1s ease-in-out;-webkit-transition:all 1s ease-in-out;-o-border-radius:0 5px 5px 0;-icab-border-radius:0 5px 5px 0;-khtml-border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0;-o-box-shadow:2px 2px 5px rgba(0,0,0,.5);-icab-box-shadow:2px 2px 5px rgba(0,0,0,.5);-khtml-box-shadow:2px 2px 5px rgba(0,0,0,.5);-moz-box-shadow:2px 2px 5px rgba(0,0,0,.5);-webkit-box-shadow:2px 2px 5px rgba(0,0,0,.5);box-shadow:2px 2px 5px rgba(0,0,0,.5)}#codebazan-share_it:hover .flyout ul{left:-4px}#codebazan-share_it .flyout ul li{float:left}#codebazan-share_it .flyout ul li.drop-li{position:relative;width:65px;height:65px;float:left;z-index:100;margin-top:3px}#codebazan-share_it .flyout ul li.drop-li a.drop-a{display:block;width:100px;float:left;text-decoration:none;line-height:16px}#codebazan-share_it .flyout ul li.drop-li a.drop-a img{display:block;border:0;position:absolute;left:5px;top:5px;z-index:-1;opacity:1;filter:alpha(opacity=100);margin-left:20px;transition:.4s ease-in-out;-o-transition:.4s ease-in-out;-moz-transition:.4s ease-in-out;-webkit-transition:all .4s ease-in-out}#codebazan-share_it .flyout ul li.drop-li a b{background:#add8e6;padding:2px 0;font-family:arial,sans-serif;display:block;width:100px;margin-top:58px;text-align:center;cursor:pointer;color:#000;font-size:14px;opacity:0;filter:alpha(opacity=0);transition:.4s ease-in-out;-o-transition:.4s ease-in-out;-moz-transition:.4s ease-in-out;-webkit-transition:all .4s ease-in-out;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;-o-border-radius:10px}#codebazan-share_it .flyout ul li.drop-li:hover>a img{opacity:.5;filter:alpha(opacity=50)}#codebazan-share_it .flyout ul li.drop-li:hover>a b{opacity:1;filter:alpha(opacity=100)}#codebazan-share_it .flyout ul li.drop-li a:hover img{filter:alpha(opacity=50)}#codebazan-share_it .flyout ul li.drop-li a:hover b{filter:alpha(opacity=100)}
html,body{min-height:100%;overflow-x:hidden;font-family: 'BYekan' !important;direction: rtl !important;}
</style>


<div id="codebazan-share_it">
	<a class="sharetext"><img src="https://dl.codebazan.ir/uploads/1526683599.jpg"><!--[if gte IE 7]><!--></a><!--<![endif]-->

		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<div class="flyout">
			<ul class="icons">


<li class="drop-li"><a href="<?php the_permalink() ?>&amp;title=<?php the_title(); ?> target="_blank" class="drop-a"><img alt="" src="https://dl.codebazan.ir/uploads/1528940842.png"><b>اشتراک در فیسبوک</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li">


<a href="http://twitter.com/share?url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" target="_blank" class="drop-a"><img alt="" src="https://dl.codebazan.ir/uploads/1473059222.png"><b>Tweet This</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li">

<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" target="_blank" class="drop-a"><img alt="" src="https://dl.codebazan.ir/uploads/1546803101.png"><b>Stumble It</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li">

<a href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" target="_blank" class="drop-a"><img alt="" src="https://dl.codebazan.ir/uploads/1469004595.png"><b>Digg This</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li">

<a href="http://delicious.com/post?url1=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" target="_blank" class="drop-a"><img alt="" src="https://dl.codebazan.ir/uploads/1481567059.png"><b>Delicious</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>

			</ul>
		</div>
</div>



شما میتوانید کد فوق را در ابزار پیش نمایش کدبازان تست نمایید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *