ما رأيك في القالب

اقسام

Blogger-Widget

المتابعون

اخر المواضيع

تبادل اعلاني


للتصفح الافضل

اخر التعليقات

يتم التشغيل بواسطة Blogger.

تابعنا على الفيسبوك

ايقونات المشاركات الاجتماعية مصغرة بتأثير css3

شاهد:




ايقونات المشاركات الاجتماعية التى يحتاجها اي مصمم ومدون بتقنية css





بسم الله الرحمن الرحيم , ايقونات المشاركات الاجتماعية التى يحتاجها اي مصمم واي مدون لاختصار صفحاتهم ومتسهيل للزائر الذاهب اليها عن طريق موقعك , ايقونات المشاركات الاجتماعية المصغرة ذات شكل انيق مع تأثير الcss الاحترافي ذات الوان جميلة








معاينة


























































<ul class="spicesocialwidget"><li class="facebook"><a rel="nofollow" href="http://www.facebook.com/" target="_blank" title="facebook"></a></li><li class="googleplus"><a rel="nofollow" href="https://plus.google.com/" target="_blank" title="googleplus"></a></li><li class="pinterest"><a rel="nofollow" href="http://pinterest.com/" target="_blank" title="pinterest"></a></li><li class="twitter"><a rel="nofollow" href="http://twitter.com/" target="_blank" title="twitter"></a></li><li class="rss"><a rel="nofollow" href="http://feedburner.com/" target="_blank" title="rss"></a></li><li class="skype"><a rel="nofollow" href="http://www.skype.com/" target="_blank" title="Skype"></a></li><li class="vimeo"><a rel="nofollow" href="http://www.vimeo.com/" target="_blank" title="vimeo"></a></li><li class="dribbble"><a rel="nofollow" href="http://www.dribbble.com/" target="_blank" title="dribble"></a></li><li class="flickr"><a rel="nofollow" href="http://www.flickr.com/" target="_blank" title="flickr"></a></li><li class="linkedin"><a rel="nofollow" href="http://www.linkedin.com/" target="_blank" title="linkedin"></a></li><li class="youtube"><a rel="nofollow" href="http://www.youtube.com/" target="_blank" title="youtube"></a></li></ul><style>ul.spicesocialwidget {float:right;}ul.spicesocialwidget li {float:left;list-style: none outside none;border:none;}ul.spicesocialwidget li a{background-color:transparent;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiqRDdAUeeQAQdNVMrjYSdZ1xlIdCJo2CrztFp2D4ni6Z3E7QfevT7_6bKt1e6L0bwKu3kGMadZD_9sl_m8TOpxwPDGK9UhCJHEg4dylAcCycYqGXmIznJkXBu-ImU-4RX1VydAzdynJZF/s1600/spice-social-gadget-sprite.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}.ie7 ul.spicesocialwidget li a, .ie8 ul.spicesocialwidget li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiqRDdAUeeQAQdNVMrjYSdZ1xlIdCJo2CrztFp2D4ni6Z3E7QfevT7_6bKt1e6L0bwKu3kGMadZD_9sl_m8TOpxwPDGK9UhCJHEg4dylAcCycYqGXmIznJkXBu-ImU-4RX1VydAzdynJZF/s1600/spice-social-gadget-sprite.png' )}ul.spicesocialwidget li.facebook a{ background-position:0 0}ul.spicesocialwidget li.flickr a{ background-position:-32px 0}ul.spicesocialwidget li.dribbble a{ background-position:-64px 0}ul.spicesocialwidget li.googleplus a{ background-position:-96px 0}ul.spicesocialwidget li.linkedin a{ background-position:-128px 0}ul.spicesocialwidget li.pinterest a{ background-position:-160px 0}ul.spicesocialwidget li.rss a{ background-position:-192px 0}ul.spicesocialwidget li.skype a{ background-position:-224px 0}ul.spicesocialwidget li.twitter a{ background-position:-256px 0}ul.spicesocialwidget li.vimeo a{ background-position:-288px 0}ul.spicesocialwidget li.youtube a{ background-position:-320px 0}ul.spicesocialwidget li.facebook a:hover, #sidebar ul.spicesocialwidget li.facebook a:hover{ background-position:0 -32px}ul.spicesocialwidget li.flickr a:hover, #sidebar ul.spicesocialwidget li.flickr a:hover{ background-position:-32px -32px}ul.spicesocialwidget li.dribbble a:hover, #sidebar ul.spicesocialwidget li.dribbble a:hover{ background-position:-64px -32px}ul.spicesocialwidget li.googleplus a:hover, #sidebar ul.spicesocialwidget li.googleplus a:hover{ background-position:-96px -32px}ul.spicesocialwidget li.linkedin a:hover, #sidebar ul.spicesocialwidget li.linkedin a:hover{ background-position:-128px -32px}ul.spicesocialwidget li.pinterest a:hover, #sidebar ul.spicesocialwidget li.pinterest a:hover{ background-position:-160px -32px}ul.spicesocialwidget li.rss a:hover, #sidebar ul.spicesocialwidget li.rss a:hover{ background-position:-192px -32px}ul.spicesocialwidget li.skype a:hover, #sidebar ul.spicesocialwidget li.skype a:hover{ background-position:-224px -32px}ul.spicesocialwidget li.twitter a:hover, #sidebar ul.spicesocialwidget li.twitter a:hover{ background-position:-256px -32px}ul.spicesocialwidget li.vimeo a:hover, #sidebar ul.spicesocialwidget li.vimeo a:hover{ background-position:-288px -32px}ul.spicesocialwidget li.youtube a:hover, #sidebar ul.spicesocialwidget li.youtube a:hover{ background-position:-320px -32px}</style>




مع تغير ما يلزم , يمكنك وضع الكود فى اي مكان بدون مشاكل والافضل ان تقوم بوضعه داخل اداة جديدة فى التخطيط لتسهيل للزائر خصائص افضل  , اذا اعجبك الموضوع لا تبخل علينا بتعلقيك


0 التعليقات:

إرسال تعليق

صفحات

قسم بلوجر

مدونات صديقة

المتواجدين الان

Web Design Blogs
Ping your blog, website, or RSS feed for Free a7trafy.blogspot.com Real PR

اعلانات