Ads 468x60px

Δευτέρα, 17 Οκτωβρίου 2016

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('http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/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('http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/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

0 σχόλια :

Δημοσίευση σχολίου

Icon Icon Icon

spice up your blog