سبايدي للمعلوميات: اضافة ايقونات المواقع الاجتماعة بشكل رائع

بسم الله الرحمن الرحيم 

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

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

كيفية اضافة الاداة : 

انتقل إلى لوح تحكم مدونتك: 

إختر "تخطيط" 

ثم إضافة أداة .

ثم اختر  HTML/Javascript

الآن الصق الكود التالي 

<ul class="spicesocialwidget">

<li class="facebook">

<a href="http://www.facebook.com/" rel="nofollow" rel="nofollow" target="_blank" title="facebook">

</a></li>

<li class="googleplus">

<a href="https://plus.google.com/" rel="nofollow" rel="nofollow" target="_blank" title="googleplus">

</a></li>

<li class="pinterest">

<a href="http://pinterest.com/" rel="nofollow" rel="nofollow" target="_blank" title="pinterest">

</a></li>

<li class="twitter">

<a href="http://twitter.com/" rel="nofollow" rel="nofollow" target="_blank" title="twitter">

</a></li>

<li class="rss">

<a href="http://feedburner.com/" rel="nofollow" rel="nofollow" target="_blank" title="rss">

</a></li>

<li class="skype">

<a href="http://www.skype.com/" rel="nofollow" rel="nofollow" target="_blank" title="Skype">

</a></li>

<li class="vimeo">

<a href="http://www.vimeo.com/" rel="nofollow" rel="nofollow" target="_blank" title="vimeo">

</a></li>

<li class="dribbble">

<a href="http://www.dribbble.com/" rel="nofollow" rel="nofollow" target="_blank" title="dribble">

</a></li>

<li class="flickr">

<a href="http://www.flickr.com/" rel="nofollow" rel="nofollow" target="_blank" title="flickr">

</a></li>

<li class="linkedin">

<a href="http://www.linkedin.com/" rel="nofollow" rel="nofollow" target="_blank" title="linkedin">

</a></li>

<li class="youtube">

<a href="http://www.youtube.com/" rel="nofollow" rel="nofollow" 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/AVvXsEjorAMkQ09k0lW7flevWKvKHeZRtwddOkFShuYyaY2rNgn14i4S5SIpRLbhgIrrgjcV2PeV7Add8cTMIFeg7zZ60cScoaTIYKA5MCcE-fUpvQ15qOS2ilVPagJgCsbbSLxkEqtjMZ-E9AXT/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/AVvXsEjorAMkQ09k0lW7flevWKvKHeZRtwddOkFShuYyaY2rNgn14i4S5SIpRLbhgIrrgjcV2PeV7Add8cTMIFeg7zZ60cScoaTIYKA5MCcE-fUpvQ15qOS2ilVPagJgCsbbSLxkEqtjMZ-E9AXT/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>

تم قم بحفض الاضافة ومبروك عليك مع تحيات ابراهيم شكري من مدونة محبي المعلوميات