اضافة css اكثر من رائعة 2014

[walid]

السلام عليكم ورحمة الله وبركاتة

تحية طيبة على اعضاء تريد نت الكرام.......




اضافة جميلة للورد بريس وهيا مواقع التواصل الاجتماعى بشكل جديد وانيق CSS

طريقة التركيب install سهلة وبسيطة

دخول لوحة تحكم الورد بريس , المربعات الجانبية , اختيار اضافة نص HTML ثم سحبها الى المربع الجانبى الرئيسى

ثم نقوم بالتعديل على الكود code واضافتة الى مربع النص HTML ثم الحفظ

صورة لــ الاضافة وهناك مثال لمدة 24 ساعة

المثال : سفن ستار

رمز Code:
<ul class=&quot;spicesocialwidget&quot;> <li class=&quot;facebook&quot;> <a rel=&quot;nofollow&quot; href=&quot;http://www.facebook.com/&quot; target=&quot;_blank&quot; title=&quot;facebook&quot;> </a></li> <li class=&quot;googleplus&quot;> <a rel=&quot;nofollow&quot; href=&quot;https://plus.google.com/&quot; target=&quot;_blank&quot; title=&quot;googleplus&quot;> </a></li> <li class=&quot;pinterest&quot;> <a rel=&quot;nofollow&quot; href=&quot;http://pinterest.com/&quot; target=&quot;_blank&quot; title=&quot;pinterest&quot;> </a></li> <li class=&quot;twitter&quot;> <a rel=&quot;nofollow&quot; href=&quot;http://twitter.com/&quot; target=&quot;_blank&quot; title=&quot;twitter&quot;> </a></li> <li class=&quot;rss&quot;> <a rel=&quot;nofollow&quot; href=&quot;http://feedburner.com/&quot; target=&quot;_blank&quot; title=&quot;rss&quot;> </a></li> <li class=&quot;skype&quot;> <a rel=&quot;nofollow&quot; href=&quot;http://www.skype.com/&quot; target=&quot;_blank&quot; title=&quot;Skype&quot;> </a></li> <li class=&quot;vimeo&quot;> <a rel=&quot;nofollow&quot; href=&quot;http://www.vimeo.com/&quot; target=&quot;_blank&quot; title=&quot;vimeo&quot;> </a></li> <li class=&quot;dribbble&quot;> <a rel=&quot;nofollow&quot; href=&quot;http://www.dribbble.com/&quot; target=&quot;_blank&quot; title=&quot;dribble&quot;> </a></li> <li class=&quot;flickr&quot;> <a rel=&quot;nofollow&quot; href=&quot;http://www.flickr.com/&quot; target=&quot;_blank&quot; title=&quot;flickr&quot;> </a></li> <li class=&quot;linkedin&quot;> <a rel=&quot;nofollow&quot; href=&quot;http://www.linkedin.com/&quot; target=&quot;_blank&quot; title=&quot;linkedin&quot;> </a></li> <li class=&quot;youtube&quot;> <a rel=&quot;nofollow&quot; href=&quot;http://www.youtube.com/&quot; target=&quot;_blank&quot; title=&quot;youtube&quot;> </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('http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/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('http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/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>

التعديل على الروبط بالون الازرق بما يناسب موقع

الله المستعان

الصور المرفقة



©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©