CSS3 Social Network Buttons με Media Pin Style
Σε αυτό το tutorial θα προσπαθήσουμε να σας δείξουμε πως να προσθέτετε media pin style social network buttons στο blog σας. Η όλη διαδικασία όπως θα διαπιστώσετε και μόνοι σας στο παράδεγιμα που ακολουθεί είναι πάρα πολύ απλή και μπορείτε να το κάνετε επίσης πολύ γρήγορα. Στο παράδειγμα γίνεται χρήση τεχνολογιών css και html
Το παράδειγμα μας
1. Συνδεθείτε στοblogger account σας και κάντε κλικ drop down.
2.Τώρα επιλέξτε "Template" όπως παρακάτω.
3. Τώρα μπορείτε να δείτε Live στο blog, Κάντε κλικ στο EDIT HTML Button 4. Δώστε κλικ τώρα στο Proceed button. 5.Βρείτε αυτό τον κώδικα χρησιμοποιώντας Ctrl+F ]]></b:skin> 6. Κάντε paste τον ακόλουθο κώδικα πριν από τον κώδικα ]]></b:skin> code /* 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 και κάντε click drop-down όπως στο 1ο βήμα και επιλέξτε Layout 8. Κάντε κλικ στο Click Add Gadget και επιλέξτε 'HTML/Javascript" 9. Κάντε paste τον ακόλουθο κώδικα.
<ul> <li><a href="http://www.plus.google.com/ID"><img src="http://3.bp.blogspot.com/6Wl6WtVQQxc/UH4qQL04l_I/AAAAAAAAFK0/UIdhpf0rTT0/s1600/bloggertrix-google-icon.png" title="Add to Facebook" /></a></li> <li><a href="http://www.Facebook.com/bloggertrix"><img src="http://4.bp.blogspot.com/m3xEekrbN-k/UH4qRXpdO3I/AAAAAAAAFLE/Vlo1Xt13NtA/s1600/bloggertrix-twitter-icon.png" title="Add to Facebook" /></a></li> <li><a href="http://www.digg.com/Username"><img src="http://4.bp.blogspot.com/-lKL4eF3Ub8/UH4qO4dDDSI/AAAAAAAAFKo/kgtUmhjhWPQ/s1600/bloggertrix-digg-icon.png" title="Add to Digg" /></a></li> <li><a href="http://www.twitter/bloggertrix"><img src="http://4.bp.blogspot.com/-m3xEekrbNk/UH4qRXpdO3I/AAAAAAAAFLE/Vlo1Xt13NtA/s1600/bloggertrix-twitter-icon.png" title="Add to Twitter" /></a></li> <li><a href="http://feeds2.feedburner.com/bloggertrix"><img src="http://1.bp.blogspot.com/UcbRyWbGDCQ/UH4qQliKd-I/AAAAAAAAFK8/GVd1eYqV7h4/s1600/bloggertrix-rss-feed-icon.png" title="Add RSS Feed" /></a></li> </ul>
*Μην ξεχάσετε μόνο να αντικαταστήσετε τα url με αυτά των δικών σας social media 10. Απλά σώστε το template. Τα νέα σας buttons είναι έτοιμα! Σύντομα θα ακολουθήσουν και άλλα web design tips για ιδιοκτήτες blogs και όχι μόνο. Όπως έχετε δει στο web design forum ανανεώνουμε τα παραδείγματα και την ενημέρωση σας σε καθημερινή βάση.