social cloud sharing buttons

Cloud Social Sharing Buttons για Blogger

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)
FavoriteLoadingΠροσθήκη στα Αγαπημένα μου
31/10/2012 από
adavalas

Σε αυτό το tutorial θα σας εξηγήσουμε πως με απλά βήματα θα μπορέσετε να προσθέσετε όμορφα cloud social network buttons στο blog σας. Για το tutorial μας αυτό χρησιμοποιήσαμε τεχνολογίες css και html. Τα cloud social sharing buttons είναι ένα συστατικό στοιχείο τόσο στην κατασκευή ιστοσελίδας αφού είναι καλαίσθητα και μπορούν να προσθέσουν “πόντους” εικαστικούς αλλά και στην προώθηση ιστοσελίδας αφού μέσω αυτών το περιεχόμενο σας μπορεί να διαμοιραστεί από τους αναγνώστες σας στα διάφορα social media με ευεργετική επίδραση τόσο στον αριθμό των αναγνωστών σας αλλά και στις μηχανές αναζήτησης όπως το google, bing , yahoo κ.α.

 

Cloud Social Sharing Buttons

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/1yGqb95-txE/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. Αυτό ήταν, τελειώσατε.








Hide ↑

Aσφάλεια στο opencart

04 September 2014

Με το θέμα της διαδικτυακής ασφάλειας να γίνεται ένας ολοένα και μεγαλύτερης σημασίας ζήτημα κατά την

Read more...

Μαθήματα opencart - Αλλαγή του navigation bar

02 September 2014

To OpenCart αποτελεί μια από τις πιο διάσημες πλατφόρμες για την κατασκευή[…]

Read more...

WordFence. Ασφάλεια στο wordpress

01 September 2014

Το WordFence είναι ένα ιδιαίτερα δημοφιλές WordPress plugin που χειρίζεται πολλούς διαφορετικούς και κρίσιμους τομείς ασφαλείας τόσο[…]

Read more...






Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Αφήστε ένα σχόλιο

 






RSS για τα σχόλια σε αυτό το άρθρο.  |  TrackBack URL



 
 
 

Eταιρείες παροχής υπηρεσιών διαδικτύου




 

Το Όραμά Μας

3d2 3d2

Η νέα εποχή ξεκινάει…

Είστε έτοιμοι;

Παρά τις όποιες δυσκολίες συναντήσαμε, τελικά μετά από 1 χρόνο περίπου, καταφέραμε να συγκεντρώσουμε τις δυνάμεις μας και να βάλουμε τις σκέψεις μας στο σωστό μονοπάτι.

Ξεκινάμε μια νέα εποχή για τα Ελληνικά δεδομένα. Κοιτάμε μπροστά και οραματίζομαστε το μέλλον με αισιοδοξία σε μία πολύ δύσκολη εποχή!

Αν είστε digital artist (web designer. web developer, programmer, 3d animator, graphic designer κτλ)  δώστε λίγα λεπτά από τον χρόνο σας να διαβάσετε το παρακάτω άρθρο. Σίγουρα σας ενδιαφέρει

 
web design forum

  • Προσεγγίστε νέους αναγνώστες και φίλους
  • Αποκτήστε το δικαίωμα να προωθήστε την σελίδα σας μέσω διαφημιστικών banner στο web design forum
  • Αποκτήστε συνδέσμους και backlinks δωρεάν
  • Αυτόματη προωθηση του άρθρου σας, σε διάφορες ιστοσελίδες κοινωνικής δικτύωσης.