.

.
إضافة ايقونات التواصل الاجتماعي بتأتيرات Css لمدونات البلوجر

إضافة ايقونات التواصل الاجتماعي بتأتيرات Css لمدونات البلوجر

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

متابعي مدونة محترفي التقنية في درس جديد من دروس بلوجر في هذا الدرس سوف أضع لكم إضافة جميلة جدا التقيت بها وقت تصفحي للانترنيت فأردت مشاركتها معكم  في تقريبا اغلب الشبكات الاجتماعية.

  صورة لإضافة


  طريقة التركيب
تخطيط > جافا سكربت 
ثم ألصق هذا هو الكود فى المكان الذي يناسبك ^_^
TH3_Professional_of_informatique|+->>copy/past this code and Enjoy+->>
<ul class="spicesocialwidget">
<li class="facebook">
<a href="http://www.facebook.com/" rel="nofollow" target="_blank" title="facebook">
</a></li>
<li class="googleplus">
<a href="https://plus.google.com/" rel="nofollow" target="_blank" title="googleplus">
</a></li>
<li class="pinterest">
<a href="http://pinterest.com/" rel="nofollow" target="_blank" title="pinterest">
</a></li>
<li class="twitter">
<a href="http://twitter.com/" rel="nofollow" target="_blank" title="twitter">
</a></li>
<li class="rss">
<a href="http://feedburner.com/" rel="nofollow" target="_blank" title="rss">
</a></li>
<li class="skype">
<a href="http://www.skype.com/" rel="nofollow" target="_blank" title="Skype">
</a></li>
<li class="vimeo">
<a href="http://www.vimeo.com/" rel="nofollow" target="_blank" title="vimeo">
</a></li>
<li class="dribbble">
<a href="http://www.dribbble.com/" rel="nofollow" target="_blank" title="dribble">
</a></li>
<li class="flickr">
<a href="http://www.flickr.com/" rel="nofollow" target="_blank" title="flickr">
</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/" rel="nofollow" target="_blank" title="youtube">
</a></li>
</ul>
<a href='http://dahouyasser.blogspot.com/' style='display:none;'>محترفي التقنية</a>
<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/AVvXsEgbaN0AGPQW7K-yiw4XDJdlmvjkwgJL0z0ONdcGR3KlTvnvFSye9-YwcncVyajxMrvm_Pq0alv14cC29AeKPnxjZ9VXg3gmlR63N-6TAUegvy7VlbMyeRb2fSXDSTQCFpOq-LUDkd_NUuuk/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/AVvXsEgbaN0AGPQW7K-yiw4XDJdlmvjkwgJL0z0ONdcGR3KlTvnvFSye9-YwcncVyajxMrvm_Pq0alv14cC29AeKPnxjZ9VXg3gmlR63N-6TAUegvy7VlbMyeRb2fSXDSTQCFpOq-LUDkd_NUuuk/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>

 الان ما عليك فعله هو تغير ما هو باللون الاحمر بما يناسبك 

عن الكاتب

حو ياسر 15 سنة مدون جزائري مهووس بجديد تكنولوجيا المعلوميات مهتم بتطوير المواقع الالكترونية ،
التعليقات
0 التعليقات

.

.