Βαζουμε social buttons στο blog μας

Γεια σας φιλοι μου. Αυτο το tutorial θα σας βοηθησει να βαλετε socials buttons διπλα απο τον τιτλο του ιστολογιου για να μπορουν οι επισκεπτες να μοιραζονται τις αναρτησεις σας. Εχει εικονιδιο του facebook twitter google+ εικονιδιο rss feed και οταν περνατε το ποντικι απο πανω θα περιστρεφονται.

Παμε να δουμε πως μπαινουν.

Απο τον πινακα ελεγχου παμε προτυπο - επεξεργασια html και με control + f βρισκουμε τον κωδικο
]]></b:skin>

ακριβως απο πανω του βαζουμε αυτον

 /* Social icons for Blogger
----------------------------------------------- */
#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
display:block;
clear:both;
z-index: 2;
position: relative;
}
.social-media-icons {
display:table
}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

Τωρα ψαχνουμε για αυτον τον κωδικο

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

 και ακριβως απο πανω του βαζουμε αυτον

<div class='social-media-icons' id='social-icons'>
<ul>

<li class='media_icon'><a href='http://facebook.com/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimr6rEEo6IAaKFqgC4TswUlgb-ThXWpcBM8ayCctw7SWHJaEWBDsz0RlFXntSDjygWJwNkmj5ncz6W1Ftna3WQiUwTPzrD0Qrssf3-KEIYXIjbKbyXLJLzPbsv0a8JDa6KByo2Lm41xCQ/s1600/Facebook.png'/></a></li>

<li class='media_icon'><a href='http://twitter.com/#!/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyypAZAsJS2uqbNQazy1VZcjeazyGFWO3luj3qnBE1r2AjF0V6QKpL-fNuuyL6L-9gyxK2Fu3LOnLMMNkpxoKKyS5a1aCSlEVJEvNiWsXlFEDYIcy9dwLXl56rd3LITvTTKTHfZRK_YMI/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcBE4q4Ld8r4nk9-k6TZKovUL8ayU9BTT5jdGUvfpqlvI3v4CrxXmoROla9ry2XA0bkQl56uAAVZMjfvqVzpimltMXP8yUaGrhwAjc1ZzkiAPcsPr10nwRy2zZLiCTLBlqQSxA7HsIMwA/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://name-of-your-blog.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPnSc9qyC9KgPRSHJajRa3-z90LyGpZjRyA7nUD2jwtrqSn_PDjkfoN-N4OJ5CKgmsNkqQx7IVja24jVSNl-uXIWsWwfRRXPrAUMhOlSy0vfa1S1i063sWFFjaxBYLYTwtZZsQQxGqMZk/s1600/RSS.png'/></a></li>

</ul></div>

τωρα στον παραπανω κωδικο πρεπει να αλλαξουμε τα κοκκινα γραμματα με το δικο μας username  η ολοκληρο το λινκ με το δικο μας λινκ στο facebook, twitter, google+ και rss feed

αν δε θελετε καποιο απο τα εικονιδια να εμφανιζεται μπορειτε να αφαιρεσεται εντελως τον κωδικο του. π.χ αν δε θελετε το εικονιδιο για το facebook πρεπει να αφαιρεσετε αυτο το κωδικο

 <li class='media_icon'><a href='http://facebook.com/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimr6rEEo6IAaKFqgC4TswUlgb-ThXWpcBM8ayCctw7SWHJaEWBDsz0RlFXntSDjygWJwNkmj5ncz6W1Ftna3WQiUwTPzrD0Qrssf3-KEIYXIjbKbyXLJLzPbsv0a8JDa6KByo2Lm41xCQ/s1600/Facebook.png'/></a></li>

Μπορειτε να αλλαξετε και τα εικονιδια αλλαζοντας το λινκ απο το εικονιδιο δηλαδη τα μπλε γραμματα

 Αν θελετε καποια βοηθεια αφηστε μου ενα σχολιο και μολις το δω θα σας απαντησω