طريقة التركيب ايقونات التواصل الإجتماعي في مدونتك كالتي في مدونة عالم التكنولوجيا طريقة سهلة تمكنك من التواصل مع زوارك في المواقع التواصل الاجتماعي
اولا :
توجه إلى التخطيط و اختار
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>
ادا اعجبكم الموضوع شركوه مع اصدقائكم و ضع كومونت لتشجيعي
مع تبديل المعلوماتي الى معلوماتكم
