Τετάρτη 20 Αυγούστου 2014

Pop Out Effect Candy Social Icons για Blogger

   Σήμερα έχουμε ένα άλλο μεγάλο σύνολο των Social Icons που δημιουργήθηκε με καθαρό CSS. Τα εικονίδια έχουν ένα υπέροχο σχεδιασμό καραμέλας που θα τραβήξει την προσοχή των αναγνωστών σας και είναι τόσο εύκολο να τα προσθέσετε στο blog σας. Τα εικονίδια μπορούν να προστεθούν στο sidebar του blog σας για να σας ακολουθήσουν γρήγορα στα αγαπημένα σας κοινωνικά δίκτυα και έχουμε εικονίδια για Rss Feed σας, e-mail, Facebook, Twitter, Google+, LinkedIn, YouTube και το Skype.
   Παρακάτω θα βρείτε οδηγίες για να προσθέσετε τις συνδέσεις σας και να αφαιρέσετε τα εικονίδια που δεν θέλετε. Έχω προσθέσει την ετικέτα no-follow στα εικονίδια και να ανοίγουν σε νέο παράθυρο. Αλλά πρώτα ας δούμε τον μικρο δαίμονα εν λειτουργία.
   Εδώ είναι ένα ζωντανό παράδειγμα, περάστε πάνω από κάθε εικονίδιο τον κέρσορα για να δείτε πως λειτουργεί.


   Λοιπόν, αν σας αρέσει η λειτουργία των πλήκτρων και θέλετε να τα προσθέσετε στο προσωπικό σας blog, ακολουθήστε τα βήματα.
   1) Ανοίξτε Blogger> Διάταξη> Προσθήκη Gadget.
   2) Επιλέξτε HTML / JavaScript επιλογή Gadget.
3) Προσθέστε τον παρακάτω κώδικα: μέσα στο Gadget.
<!--Rss Feed-->
<a class="spice-popout" rel="nofollow" href="RSS-FEED-URL-HERE" target="_blank"><img src="http://i.imgur.com/7lsUogp.png" /></a>
<!--Email-->
<a class="spice-popout" rel="nofollow" href="EMAIL-URL-HERE" target="_blank"><img src="http://i.imgur.com/oJeNikj.png" /></a>
<!-- Google Plus-->
<a class="spice-popout" rel="nofollow" href="GOOGLE-PLUS-URL-HERE" target="_blank"><img src="http://i.imgur.com/F70aY6r.png" /></a>
<!--Facebook-->
<a class="spice-popout" rel="nofollow" href="FACEBOOK-URL-HERE" target="_blank"> <img src="http://i.imgur.com/g4KQ38R.png" /></a>
<!--Twitter-->
<a class="spice-popout" rel="nofollow" href="TWITTER-URL-HERE" target="_blank"> <img src="http://i.imgur.com/rRbcRlQ.png" /></a>
<!--LinkedIn-->
<a class="spice-popout" rel="nofollow" href="LINKEDIN-URL-HERE" target="_blank"><img src="http://i.imgur.com/dofbMIX.png" /></a>
<!--YouTube-->
<a class="spice-popout" rel="nofollow" href="YOUTUBE-URL-HERE" target="_blank"><img src="http://i.imgur.com/OukhzWK.png" /></a>
<!--Skype-->
<a class="spice-popout" rel="nofollow" href="SKYPE-URL-HERE" target="_blank"><img src="http://i.imgur.com/8c35IfD.png" /></a>
<style>
.spice-popout{height:48px; width:48px; margin:10px; float:left; display:inline-block; -webkit-transition:all ease 0.5s; -moz-transition:all ease 0.5s; -o-transition:all ease 0.5s; -ms-transition:all ease 0.5s; transition:all ease 0.5s}
.spice-popout img{border-radius:50%; margin:8px; width:100%; box-shadow:0px 0px 4px 1px rgba(0,0,0,0.8); -webkit-transition:all ease 0.5s; -moz-transition:all ease 0.5s; -o-transition:all ease 0.5s; -ms-transition:all ease 0.5s; transition:all ease 0.5s}
.spice-popout img:hover{margin:0px; box-shadow:6px 6px 4px 4px rgba(0,0,0,0.3)}
</style>
   4) Προσθέστε τον σύνδεσμο από το κάθε κοινωνικό προφίλ σας, όπως τονίζεται στα κίτρινα. Κάθε εικονίδιο έχει και τον τίτλο του παραπάνω έτσι ώστε να μπορείτε εύκολα να αφαιρέσετε αυτά που δεν θέλετε.
   5) Τώρα πατήστε Αποθήκευση του Gadget & ανανεώστε το blog σας για να δείτε αυτό το φοβερό κουμπί.
   Αυτό ήταν. Τώρα οι αναγνώστες του blog σας θα σας μπορούν πλέον εύκολα να εγγραφούν και να σας ακολουθήσουν. Ευχαριστώ για την επίσκεψη.

0 σχόλια:

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