Ένα Sharing Widget

Η ταχεία πρόοδος και η ανάπτυξη των Social Media και την αύξηση του ενδιαφέροντος σε δικτυακούς τόπους κοινωνικής δικτύωσης έχει προκαλέσει δεκάδες εργαλεία κοινωνικής κατανομής και υπηρεσιών. Αυτό το gadget είναι δομημένο με δημοφιλείς υπηρεσίες όπως το Google Plus, το Facebook, το Twitter και RSS. Είναι κωδικοποιημένο καθαρά χρησιμοποιώντας κάποια βασική HTML και CSS, ενώ το αποτέλεσμα είναι ενδιαφέρον.

Που μπορεί να μπει;
Σε γενικές γραμμές, τα κουμπιά ανταλλαγής τοποθετούνται στη δεξιά. Ως εκ τούτου θα ήθελα να προτείνω να προσθέσετε αυτό το widget στο επάνω δεξιά γωνία του blog σας πάνω από όλες τις διαφημίσεις και άλλα gadgets.

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

Τα παρακάτω είναι τα βήματα για blogger χρήστες

Πηγαίνετε στο Blogger> Layout/Διάταξη
Επιλέξτε προσθέσετε το gadget
Επιλέξτε HTML / JavaScript
Επικολλήστε τον παρακάτω κώδικα σε αυτό κι αποθηκεύστε ...

Αυτό είναι όλο!

Ο Κώδικας παρακάτω ...

<div class='touchme'>
<!--RSS-->
<a class='rss' href="/feeds/posts/default" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="YOUR GOOGLE PROFILE LINK" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="YOUR FACEBOOK LINK" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="YOUR TWITTER LINK" rel='external nofollow' target='_blank' ></a>
</div>
<style>
/*--------Touch Me Sharing Widget ------*/
.touchme a { display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitqK3owGmryE9ri3R-NoCruzsm5MbQi2xM-tK2OT2eqb7OK-tSiNUAd7Ii54nrFCNY0DQNiYbu124a_yzJ4UttNu7DenC3g7WxEL78-ODp2orTspsRJwS_DVilrWNv05U81y1air4W9S-y/s1600/sharing-touch-me.png) no-repeat;
-webkit-transition: ease-in 0.2s all; 
-moz-transition: ease-in 0.2s all; 
-o-transition: ease-in 0.2s all; 
-ms-transition: ease-in 0.2s all; 
transition: ease-in 0.2s all;
cursor:pointer;}
.touchme a.googleplus { background-position: 0px -58px;}
.touchme a.googleplus:hover { background-position: 0px 0px; }
.touchme a.twitter { background-position: 0px -290px;}
.touchme a.twitter:hover { background-position: 0px -232px;}
.touchme a.facebook { background-position: 0px -406px;}
.touchme a.facebook:hover { background-position: 0px -348px;}
.touchme a.rss { background-position: 0px -174px;}
.touchme a.rss:hover { background-position: 0px -116px;}
</style>