تالار میدوری

نسخه کامل: اشتراک گذاری متحرک و جديد با CSS3 (سایدرول)
شما در حال مشاهده نسخه تکمیل نشده می باشید. مشاهده نسخه کامل با قالب بندی مناسب.
اشتراک گذاری متحرک و جديد با CSS3 (سایدرول)
طرح و ايده ای جالب و زيبا با استفاده از استایل بندی و بدون هیچ فایل جاوا و یا دستور جاوا . نمونه ی زنده را در زیر ببینید ( ماوس را روی دایره قرمز ببرید تا شروع شود )

اگر علاقه مند شدید و مایل , کد زیر را در فوتر سایت خودتان قرار دهید و فایل فشرده را در جای مناسبی آپلود و آدرس دهی کنید . در مورد انجمن ساز مای بی بی پوشه ی موجود در فایل فشرده را در پوشه ی images قرار دهید .

کد PHP:
<!--Social Sharing Board Pop-up Roll START-->
<div class ="midori-yuvarclanan ciscimcik-midori"><div class ="divxix">
<div style="position:absolute;top:0px;left:0px;font-family:Helvetica, Arial, sans-serif;font-weight:normal;
font-size:13px;color:#fff;background-color:#e84343;overflow:visible;" class ="iyisenden">
<div style="float:right;margin-left:40px;margin-top:-10px;width:270px;"><div class ="addthis_toolbox addthis_default_style addthis_32x32_style">
<a href="#"class ="addthis_button_facebook"><img style="border:none;background-color:transparent;padding:0px;margin:0px;" alt="facebook" src="images/scroll-share/Facebook-icon.png"/></a>
<a href="#"class ="addthis_button_google_plusone_share"><img style="border:none;background-color:transparent;padding:0px;margin:0px;" alt="google+" src="images/scroll-share/Google-plus-icon.png"/></a>
<a href="#" class ="addthis_button_twitter"><img style="border:none;background-color:transparent;padding:0px;margin:0px;" alt="twitter" src="images/scroll-share/Twitter-icon.png"/></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script></div>
</div>
<style>.divxix{height:95px;position:absolute;top:0px;left:0px;min-width:86px;}.naber{text-decoration:none !important;text-align:center;line-height:60px;font-family:Helvetica, Arial, sans-serif;font-weight:bold;font-size:17px;color:#fff;position:absolute;top:0px;left:-3px;display:inline-block;height:80px;width:80px;background:#e84343;border:2px solid #ff9c9c;}</style>
<div class ="naber">Share</div></div></div><style>.naber{text-decoration:none !important;text-align:center;line-height:60px;font-family:Helvetica, Arial, sans-serif;font-weight:bold;font-size:17px;color:#fff;position:absolute;top:0px;left:-3px;display:inline-block;height:80px;width:80px;background:#e84343;}.naber{-webkit-transition: all 1s cubic-bezier(0.6, -0.83, 0.805, 1.425);-moz-transition: all 1s cubic-bezier(0.7, -0.8, 0.805, 1.3);-o-transition: all 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);transition: all 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);cursor:pointer;}.iyisenden{padding-right:30px;height:80px;text-decoration:none !important;padding-top:4px;overflow:hidden;background:#fff;border:none;border-color:#ff9c9c;border-width:0px;width:0px;-webkit-transition: width 1s cubic-bezier(0.6, -0.83, 0.805, 1.425);-moz-transition: width 1s cubic-bezier(0.7, -0.8, 0.805, 1.3);-o-transition: width 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);transition: all 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);}.divxix:hover .naber{height:80px;margin-left:300px;transform:rotate(360deg);-ms-transform:rotate(360deg); /* IE 9 */-moz-transform:rotate(360deg); /* Firefox */-webkit-transform:rotate(360deg); /* Safari and Chrome */-o-transform:rotate(360deg); /* Opera */-webkit-border-radius: 40px;border-radius: 40px;}.divxix:hover .iyisenden{background-color:#e84343;border:1px solid #ff9c9c;width:298px;height:78px;}
div.midori-yuvarclanan{position:fixed;z-index:999999;}div.ciscimcik-midori{top:240px;left:0px;}</style><style type="text/css">div.midori-yuvarclanan{_position:absolute;}div.ciscimcik-midori{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}
</style>
<!--Social Sharing Board Pop-up Rol STOP-->

در داخل کد ها هم باید آدرس شبکه های اجتماعی سایت خودتان را وارد کنید .
کار تمام است . امید که بکارتان بیاید .

یادداشت
متن پیام :
فایل اجرایی را هم در فایل فشرده قرار دادم تا بتوانید بدون اینترنت هم آزمایش کنید .



[attachment=1713]
لینک مرجع