أيقونات مواقع التواصل الإجتماعي لمدونتك .. جديد2013

أيقونات مواقع التواصل الإجتماعي لمدونتك .. جديد2013

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


                                                     طريقة التركيب
                              أولا : تتوجه إلى التخطيط
                              ثانيا : html/javascript
                              ثالثا تضيف الكود التالي

<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>

<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/AVvXsEj4DvCRD15gU6mEd1OhcyrsAowkri9MmoedUliBpUQJWLyJjyMCtjsNjlrNDpYr5zndCekz8IsikrwH1MmVYqAexq-Xgq8XGlefpSslVFhIR_weveGCNpQ0OokQPO1gm5tTkTt4tSBcywMU/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/AVvXsEj4DvCRD15gU6mEd1OhcyrsAowkri9MmoedUliBpUQJWLyJjyMCtjsNjlrNDpYr5zndCekz8IsikrwH1MmVYqAexq-Xgq8XGlefpSslVFhIR_weveGCNpQ0OokQPO1gm5tTkTt4tSBcywMU/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>

تم النشر في : blogger internet