احصل على ايقونات التواصل الإجتماعي كالتي في مدونة عالم اتكنولوجيا

طريقة التركيب ايقونات التواصل الإجتماعي في مدونتك كالتي في مدونة عالم التكنولوجيا طريقة سهلة تمكنك من التواصل مع زوارك في المواقع التواصل الاجتماعي

اولا :

توجه إلى التخطيط و اختار

HTML/JAVASCRIPT

: كما هو متبين في الصورة التالية

و اضف هدا الكود :

<ul class="spicesocialwidget"><li class="facebook"><a href="http://www.facebook.com/fhbpro" rel="nofollow" target="_blank" title="facebook">
</a></li>
<li class="googleplus">
<a href="https://plus.google.com/100090336467804108422" rel="nofollow" target="_blank" title="googleplus">
</a></li>
<li class="twitter">
<a href="http://twitter.com/fhbsecurity" rel="nofollow" target="_blank" title="twitter">
</a></li>
<li class="rss">
<a href="http://feeds.feedburner.com/blogspot/fXmbG" rel="nofollow" target="_blank" title="rss">
</a></li>
<li class="skype">
<a href="http://www.skype.com/hamza.benmalek2" rel="nofollow" target="_blank" title="Skype">
</a></li>
<li class="linkedin">
<a href="http://www.linkedin.com/" rel="nofollow" target="_blank" title="linkedin">
</a></li>
<li class="youtube">
<a href="http://www.youtube.com/double2solde" 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/AVvXsEhLmNN5B8UZ7gNkD-jtKQrDzIAg2qmB0Xq2hH5U2TKUFKcV9WU-QnSCXTdmrHewQzSUSYySGcevOOeRGtJSf7c1SCIv8UkIlnteSXiZX72rztu1gVe-Id-N9a7tYrsfRo2kl7k2-RS3uU5l/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/AVvXsEhLmNN5B8UZ7gNkD-jtKQrDzIAg2qmB0Xq2hH5U2TKUFKcV9WU-QnSCXTdmrHewQzSUSYySGcevOOeRGtJSf7c1SCIv8UkIlnteSXiZX72rztu1gVe-Id-N9a7tYrsfRo2kl7k2-RS3uU5l/s1600/spice-social-gadget-sprite.png' )}
ul.spicesocialwidget li.facebook a{ background-position:0 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.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.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.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.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.youtube a:hover, #sidebar ul.spicesocialwidget li.youtube a:hover{ background-position:-320px -32px}
</style>

ادا اعجبكم الموضوع شركوه مع اصدقائكم و ضع كومونت لتشجيعي

مع تبديل المعلوماتي الى معلوماتكم

من فضلك شارك هذا الموضوع اذا اعجبك

الموضوع من طرف : منتصير شفيق

منتصير شفيق 24 سنة ،مدون مغربي مهووس بجديد تكنولوجيا المعلوميات ، مهتم بالحماية المعلوماتية يمكنك متابعته من خلال الفيس بوك . تويتر . جوجل بلس

ضع تعليقا أخي الكريم