| ريمون ستار |
07-04-2013 11:31 AM |
اضافة ازرار المشاركة بشكل جذاب وانيق
كود بلغة HTML:
<style>.StarsBloggingSocialButtonsBorder {margin:0 auto;padding:5px;width:auto;border-radius:5px;border: 1px #BBBBBB solid;}#bloggertrix-SexySocialButtons{list-style:none;text-decoration:none;font-size:0.9em;font-family:trebuchet ms,sans-serif;}#bloggertrix-SexySocialButtons a{text-decoration:none;font-family:trebuchet ms,sans-serif;}#bloggertrix-SexySocialButtons li{position:relative;height:38px;cursor:pointer;padding: 0 !important;}#bloggertrix-SexySocialButtons .facebook, .googleplus, .YouTube, .rss, .twitter{position:relative;z-index:5;display:block;float:none;margin:5px 0 0;width:210px;height:38px;border-radius:5px; background:url(http://1.bp.blogspot.com/-JKq0eFFwx34/UGx39fhHO_I/AAAAAAAABE4/56i9phAS2do/s1600/NBT+Sprites+Social+Icons.png) no-repeat;background-color:rgba(217,30,118,.42);-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;box-shadow:rgba(0,0,0,.28) 0 2px 3px;color:#141414;text-align:left;text-indent:50px;text-shadow:#333 0 1px 0;white-space:nowrap;line-height:32px;-webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out;-moz-transition:width .25s ease-in-out,background-color .25s ease-in-out;-ms-transition:width .25s ease-in-out,background-color .25s ease-in-out;-o-transition:width .25s ease-in-out,background-color .25s ease-in-out;transition:width .25s ease-in-out,background-color .25s ease-in-out;-o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}#bloggertrix-SexySocialButtons li:after{position:fixed;top:0;left:50px;z-index:2;display:block;height:38px; color:#ffffff;content:attr(data-alt);line-height:32px;}#bloggertrix-SexySocialButtons .icon{overflow:hidden;color:#fafafa;}#bloggertrix-SexySocialButtons .facebook{width:32px;height:32px;background-color:rgba(59,89,152,0.42);background-position:0 0;}#bloggertrix-SexySocialButtons .twitter{width:32px;height:32px;background-color:rgba(64,153,255,0.42);background-position:0 -33px;}#bloggertrix-SexySocialButtons .googleplus{width:32px;height:32px;background-color:rgba(228,69,36,0.42);background-position:-3px -66px;}#bloggertrix-SexySocialButtons .YouTube{width:32px;height:32px;background-color:rgba(174,45,39,0.42);background-position:-2px -95px;}#bloggertrix-SexySocialButtons .rss{width:32px;height:32px;background-color:rgba(255,102,0,0.42);background-position:-3px -126px;}#bloggertrix-SexySocialButtons li:hover .icon,.touch #bloggertrix-SexySocialButtons li .icon{width:210px;}.touch #bloggertrix-SexySocialButtons li .facebook, #bloggertrix-SexySocialButtons li:hover .facebook{background-color:rgba(59,89,152,1);}.touch #bloggertrix-SexySocialButtons li .twitter, #bloggertrix-SexySocialButtons li:hover .twitter{background-color:rgba(64,153,255,1);}.touch #bloggertrix-SexySocialButtons li .googleplus, #bloggertrix-SexySocialButtons li:hover .googleplus{background-color:rgba(228,69,36,1);}.touch #bloggertrix-SexySocialButtons li .YouTube, #bloggertrix-SexySocialButtons li:hover .YouTube{background-color:rgba(174,45,39,1);}.touch #bloggertrix-SexySocialButtons li .rss, #bloggertrix-SexySocialButtons li:hover .rss{background-color:rgba(255,102,0,1);}</style><div class="bloggertrixSocialButtonsBorder"><ul id="bloggertrix-SexySocialButtons"><li data-alt="تابعنا على الفيس بوك"><a class="icon facebook" href="https://www.facebook.com/additions.blogger">تابعنا على الفيس بوك</a></li><li data-alt="تابعنا على تويتر"><a class="icon twitter" href="https://twitter.com/add_blogger">تابعنا على تويتر</a></li><li data-alt="تابعنا على كوكل"><a class="icon googleplus" href="https://plus.google.com/108902431338077770336">تابعنا على كوكل</a></li><li data-alt="Subscribe us on YouTube"><a class="icon YouTube" href="https://youtube.com/Username">تابعنا على يوتيوب</a></li><li data-alt="اشترك في خلاصتنا"><a class="icon rss" href="http://feeds.feedburner.com/add-b">اشترك في خلاصاتنا</a></li></ul></div>
</div> __________________
غير ما يلزم تغييرة هوة باللون الاحمر
عزيزي القارئ ان كان الشرح ناقص او انني اقوم بنشر محتوى سيئ
يرجى اخباري لانني اصرف الكثير من الجهود ولا يوجد ردود للتشجيع
دمتم بود
الموضوع الاضلي : اضافات بلوجر
|
