اضافة المواقع الاجتماعية بتاثير CSS

اضافة المواقع الاجتماعية بشكل وتاثير رائع

تلائم جميع قوالب بلوجر 



تشمل الاضافة المواقع التالية 

facebook

 google plus

pinterest

twitter

feedburner

skype

vimeo

dribbble

flickr

linkedin

youtube






للمعاينة الحية

كود الاضافة

<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/AVvXsEiX1lh_6IcVpYwAuRSkz4usnW8GcLcKEsFLp5f1XjNsLgiLHPup6MbCF2mkrkk8lBjhMRHPrhJCU3YEbhYj3nYxJ6HA0FzQfp7tQxT4UPRijpxjZldxGDB0Y6uJaZIuPllDRCuDWPcFUyit/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/AVvXsEiX1lh_6IcVpYwAuRSkz4usnW8GcLcKEsFLp5f1XjNsLgiLHPup6MbCF2mkrkk8lBjhMRHPrhJCU3YEbhYj3nYxJ6HA0FzQfp7tQxT4UPRijpxjZldxGDB0Y6uJaZIuPllDRCuDWPcFUyit/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>

مكان وضع الكود 

ادخل مدونتك
ثم التخطيط
ثم اختر اداة جديده HTML/JavaScript 
وانسخ بها الكود ثم الضغط على حفظ



استبدل روابط المواقع بحسابك الخاص