Tech Time: Mini Social Icons With CSS

TRANSLATUM

Μία πολύ χρήσιμη online εφαρμογή είναι
το Translatum το οποίο μας βοηθά να μεταφράσουμε λέξεις και κείμενα μέσα από πάρα πολλά λεξικά!Δεν θέλει εγκατάσταση απλά πατήστε στην εικόνα για να μεταφερθείτε στην ιστοσελίδα του Translatum, επιλέξτε

ότι σας ενδιαφέρει και πατήστε Μετάφραση!

Τρίτη 13 Μαρτίου 2018

Mini Social Icons With CSS

Φίλες και φίλοι γεια σας, σε αυτήν την ανάρτηση θα δούμε ένα widget bar με social icons,
διαφορετικό ως προς το μέγεθος από τις άλλες αναρτήσεις που έχουμε αναρτήσει με ένα πολύ ωραίο
Sprite Flip Effect κάνοντας την συγκεκριμένη social bar ιδανική, έτσι ώστε να μπορούμε να την χρησιμοποιήσουμε μαζί με άλλην
στο blog μας, λόγω του μικρού μεγέθους της!Αριστερά, Δεξιά, κάτω στο footer, μπαίνει
παντού!

Δείτε εδώ το DEMO

και για να το εγκαταστήσετε και εσείς στο blog σας....

Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript

και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα-->
..........................................................................................................................

<ul class="spicesocialwidget">
<li class="facebook">
<a rel="nofollow" href="http://www.facebook.com/" target="_blank" title="facebook">
</a></li>
<li class="googleplus">
<a rel="nofollow" href="https://plus.google.com/" target="_blank" title="googleplus">
</a></li>
<li class="twitter">
<a rel="nofollow" href="http://twitter.com/" target="_blank" title="twitter">
</a></li>
<li class="rss">
<a rel="nofollow" href="http://feedburner.com/" target="_blank" title="rss">
</a></li>
<li class="skype">
<a rel="nofollow" href="http://www.skype.com/" target="_blank" title="Skype">
</a></li>
<li class="flickr">
<a rel="nofollow" href="http://www.flickr.com/" target="_blank" title="flickr">
</a></li>
<li class="linkedin">
<a rel="nofollow" href="http://www.linkedin.com/" target="_blank" title="linkedin">
</a></li>
<li class="youtube">
<a rel="nofollow" href="http://www.youtube.com/" 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/AVvXsEjXRtn6TZjfmqibCvuj2Z9mVVXQ48p6CTs3DzlWg0yOsNjfNXHcb3ia6C4nCy04-8BA1pP4yXlbEBeeMmDlJw1I4tp-s7UxwIgC5OMNuEmdqh5UTQmMkyukgTSFjY0dZCA04bHUkUz4Jqv6/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/AVvXsEjXRtn6TZjfmqibCvuj2Z9mVVXQ48p6CTs3DzlWg0yOsNjfNXHcb3ia6C4nCy04-8BA1pP4yXlbEBeeMmDlJw1I4tp-s7UxwIgC5OMNuEmdqh5UTQmMkyukgTSFjY0dZCA04bHUkUz4Jqv6/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.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>

..........................................................................................................................................................
ΑΛΛΑΓΕΣ

Βάζετε τα δικά σας αντίστοιχα urls των social media στα υπογραμμισμένα πεδία και
πατάτε Αποθήκευση!!Αυτό ήταν!

Έχω αφαιρέσει τα-vimeo-pinterest-dribble από τον κώδικα της μπάρας!Εάν θέλετε κάποιο
από αυτά μπορείτε από την πηγή που δίνω στο τέλος της ανάρτησης να χρησιμοποιήσετε
ατόφιο τον κώδικα!!

Αν θέλετε να αφαιρέσετε και άλλα πχ το flickr,
Αφαιρείτε αυτό

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

και αυτό

ul.spicesocialwidget li.flickr a:hover, #sidebar ul.spicesocialwidget li.flickr a:hover{ background-position:-32px -32px}

Καλή επιτυχία!!!

Πηγή κώδικα
thanks to spiceupyourblog.com

Edit by

Σας άρεσε το άρθρο? Διαδώστε το!

If you enjoyed this Post Please take 5 Seconds to share it and Join Us Our Latest Updates By Email and Social Networks.