Cloud Social Sharing Buttons για Blogger
Σε αυτό το tutorial θα σας εξηγήσουμε πως με απλά βήματα θα μπορέσετε να προσθέσετε όμορφα cloud social network buttons στο blog σας. Για το tutorial μας αυτό χρησιμοποιήσαμε τεχνολογίες css και html. Τα cloud social sharing buttons είναι ένα συστατικό στοιχείο τόσο στην κατασκευή ιστοσελίδας αφού είναι καλαίσθητα και μπορούν να προσθέσουν "πόντους" εικαστικούς αλλά και στην προώθηση ιστοσελίδας αφού μέσω αυτών το περιεχόμενο σας μπορεί να διαμοιραστεί από τους αναγνώστες σας στα διάφορα social media με ευεργετική επίδραση τόσο στον αριθμό των αναγνωστών σας αλλά και στις μηχανές αναζήτησης όπως το google, bing , yahoo κ.α.
Cloud Social Sharing Buttons
Τα βήματα που πρέπει να ακολουθήσετε.
1. Συνδεθείτε στο blogger λογαριασμό σας και δώστε drop down όπως φαίνεται στην φωτογραφία που ακολουθεί.
2. Τώρα επιλέξτε "Template" όπως φαίνεται στην φωτογραφία που ακολουθεί.
3. Τώρα μπορείτε να δείτε live στο blog κάντε κλικ στο button EDIT HTML 4. Κάντε κλικ στο button Proceed . 5. Βρείτε τον κώδικα που ακολουθεί κάνοντας χρήση του συνδυασμού πλήκτρων Ctrl+F ]]></b:skin> 6. Κάντε paste τον κώδικα που ακολουθεί πριν τον κώδικα ]]></b:skin> /* Bloggertrix
*/
.bubblewrap{ list-style-type:none; margin:0; padding:0; } .bubblewrap li{ display:inline; width: 60px; height:60px; } .bubblewrap li img{ width: 50px; /* width of each image.*/ height: 50px; /* height of each image.*/ border:0; margin-right: 4px; /*spacing between each image*/ -webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */ -o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */ }
.bubblewrap li img:hover{ -moz-transform:scale(1.8); /*scale up image 1.8x*/ -webkit-transform:scale(1.8); -o-transform:scale(1.8); }
7. Πηγαίντε στο blogger και κάντε κλίκ στο drop-down όπως στο 1ο βήμα και επιλέξτε Layout 8. Κάντε κλικ στο Add Gadget και επιλέξτε 'HTML/Javascript" 9. Κάντε paste τον ακόλουθο κώδικα. <ul> <li><a href="http://www.plus.google.com/107955298793879607964"><img src="http://4.bp.blogspot.com/-6bSpz7O2wNo/UIwJ2BIt19I/AAAAAAAAFe0/1yGqb95txE/s1600/bloggertrix.com-google-plus.png" title="Add to Facebook" /></a></li> <li><a href="http://www.facebook.com/bloggertrix"><img src="http://2.bp.blogspot.com/AvobUUaVmtw/UIwJ0_VFqRI/AAAAAAAAFes/7006YZuHjuM/s1600/bloggertrix.com-facebook.png" title="Add to Facebook" /></a></li> <li><a href="http://www.digg.com/Username"><img src="http://1.bp.blogspot.com/exROKBHdGpg/UIwJzwlIMMI/AAAAAAAAFek/0iwcDJat2l4/s1600/bloggertrix.com-digg.png" title="Add to Digg" /></a></li> <li><a href="http://www.twitter/bloggertrix"><img src="http://4.bp.blogspot.com/1yKLFUor6js/UIwJ4ueMH0I/AAAAAAAAFfE/J_MFgDtPwFc/s1600/bloggertrix.com-twitter.png" title="Add to Twitter" /></a></li> <li><a href="http://feeds2.feedburner.com/bloggertrix"><img src="http://2.bp.blogspot.com/n7WtdKue65w/UIwJ3akwfPI/AAAAAAAAFe8/_68hjH4iKsQ/s1600/bloggertrix.com-rss.png" title="Add RSS Feed" /></a></li> </ul>
*Μην ξεχάσετε να αντικαταστήσετε τα url στον κώδικα με τα δικά σας. 10. Σώστε το template. Αυτό ήταν, τελειώσατε.