اضافة المواقع الاجتماعية بتاثير 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/AVvXsEg1r-iX5lmX49nr51V_bUssXFDUCY8PJGImQDv3P5exlpeUbp8p8TP-OxbiKxTRhag8l3_Yss7T28rzyyjItCbDmMfNAA8Bb6oHZL1m8RW_w_bfvOE5GNidgY2Kx2R5cff3XPRiLX44ccGf/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/AVvXsEg1r-iX5lmX49nr51V_bUssXFDUCY8PJGImQDv3P5exlpeUbp8p8TP-OxbiKxTRhag8l3_Yss7T28rzyyjItCbDmMfNAA8Bb6oHZL1m8RW_w_bfvOE5GNidgY2Kx2R5cff3XPRiLX44ccGf/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
وانسخ بها الكود ثم الضغط على حفظ

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