Blogger Follow us Widget ( Social Icons )

Σημερα βρηκα ενα πολλη ωραιο Gadget/Widget για να βαλετε τα Social Networks οπου ειστε γραμμενη και θελετε μεσω του Blog σας να δειξετε στους επισκεπτες σας. Το κοκκινο ειναι το κανονικο, απο κει και περα σας εχω εγω και αλλα 2 χρωματα το μπλε και το γκρι.

1) Πρώτα από όλα, συνδεθείτε στο λογαριασμό σας Blogger.

2) Κάντε κλικ στο Σχεδίαση. και επιλέξτε Επεξεργασία HTML.

Προσοχή:

3) Πριν ξεκινήσουμε:

- Πρέπει να είστε προσεκτικοί κατά την αλλαγή του προτύπου σας.

- Πριν κάνετε οποιαδήποτε αλλαγή, αποθηκεύστε το προτυπο σας σε ασφαλή μέρος (Στον υπολογιστη σας).

4) Τώρα, ψάξτε για αυτήν την γραμμή. (Ctrl+F)

]]></b:skin>

5) Μέτα αντιγράψτε τον επόμενο κωδικά και επικολλήστε πριν από το ]]></b:skin>: 

#social {
  width: 98%;
  height: 45px;
  margin: 0;
  padding: 10px 5px 5px 30px;
  list-style: none;
  border-right:solid 1px #853529;
  position: relative;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3DJPZY0varJR1Af6UkrTSFD6vV_CE_J-sthEWztJP165CeuAoh6e7-_CAS1kMh_W05ORsfDwi6O020bfvm6QdgKWZv_GB64ruMexcsfXtKtSjX6A7DNcltbPRtbz31NbN3eMsXFqqAHo/) no-repeat left top;
  }

#social p{
  font-size:1.5em;
  color:#FFFB98;
  font-weight:bold;
  float:left;
  margin: 10px 10px 0 0;
  text-shadow: 1px 1px 0px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=1);
  }

.abt{
  font-size:0.8em;
  color:#787878;
  float:right;
  margin: 0 -30px 0 0;
  text-shadow: 1px 1px 0px #ffffff;
  filter: dropshadow(color=#ffffff, offx=1, offy=1);
  }

#social li {
  width: 32px;
  height: 32px;
  float: left;
  margin-right: 3px;
  }

#social li a {
  float: left;
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -1000em;
  background-repeat: no-repeat;
  text-decoration: none;
  }

#social #rss {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi27DIQcq9PyyKVKGJEpfS8TNPdWIOuZ_-dqdhrYV8RdyApWCDk6Xh7Rda1qBW9LyRE3aTTcjUudK4BptbfXOE1UNj8Hf6S15X_-eki7tTtS1PzlkmzZPdzeTYJ2NXzr6rr-lJn0oQUNdY/s400/allblogtools_rss.png);
  }

#social #facebook {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu5RogLNvlbpXcdFhDo8rPIoWFRWgcsSPcZmI15QZK6Ea6nTNnHpyynfO-7aX7TiN7KoZTLpEywjJwc1VTLmaB44hiU_2A0dicscbCnJuKIrg22zODmQ4R2tVSmMRs2Pj0qwcpwNBkURg/s400/allblogtools_facebook.png);
  }
  #social #twitter {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhII8npCoxmLIREa02zJOhf7KCtN70RHiJ8nZZ3u84afuoXTcSMaOr1FYtJ18FhgL5Dr26OEADKNAA4DFDmNMZ1fc2NtIgcjdD3ytX5ZeNUa8AlrQHRCdAq7ZRW8OPJqr8FegSJ0lncE_E/s400/allblogtools_twitter.png);
  }
  #social #mail {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib_KRBv9vPESOKsA44Vi_VZT9I5U8a-BULXsf7Pdo3S0mqezbdtfs8ss1J-Wlbb-w5NFSeMbFuKh1MxtoXEDw9rOeCYqVGGxO9SfD237vkL4p-xUrGsEKEYfNEWX1HgZVIeTft2WqHDjU/s400/allblogtools_email.png);
  }

span.tooltip {
  background: #575757;
  padding: 3px;
  display: block;
  width: 140px;
  border: 1px solid #000000;
  position: absolute;
  margin-top:-40px;
  color: #F0F0F0;
  font-size:10px;
  text-indent: 0;
  font: Arial, sans-serif;
  text-align: center;
  -webkit-box-shadow: inset 2px 2px 2px #616161;
  -moz-box-shadow: inset 2px 2px 2px #616161;
  box-shadow: inset 2px 2px 2px #616161;
  -moz-border-radius: 5px;
  border-radius: 5px;
  }

 

- Αν θελετε να αλλαξετε το κοκκινο background απλα αλλαξτε τα κοκκινα γραμματα με τις παρακατω διευθυνσης:

 

http://img560.imageshack.us/img560/3305/followbgabtblue.png

http://img6.imageshack.us/img6/9766/followbgabtgrey.png

6) Τώρα, ψάξτε για αυτήν την γραμμή: 

</body> 

7) Αντιγράψτε τον παρακάτω κωδικά και επικολλήστε των ακριβώς πριν από το </body>:

<script type='text/javascript'>
  window.setTimeout(function() {
  document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
  }, 10);
  </script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[
  $(document).ready(function() {
 $('#social li').each(function() {
  var $li = $(this);
  var title = $li.find('a').attr('title');
  $li.find('a').removeAttr('title');
  $('<span class="tooltip"/>').text(title).appendTo($li.find('a')).hide();
  $li.find('a').mouseover(function() {
  var top = $(this).position().top;
  var left = $(this).position().left;
  $(this).find('span').fadeIn()({
  top: top,
  left: left
  }, 'slow');
  });
  $li.find('a').mouseout(function() {
  $(this).find('span').fadeOut('slow');
  });
  });
});
//]]>
  </script>

- Αποθηκευση προτυπου.

8) Παμε τωρα να βαλουμε το Gadget/Widget 

- Παμε δηλαδη στα Στοιχεια Σελιδας- Προσθηκη Gadget- Html / JavaScript.

9) Και επικολλουμε τον παρακατω κωδικα:

<ul id="social">
  <p>Follow Us </p>
  <li><a href="http://BLOG-NAME.blogspot.com/feeds/posts/default?alt=rss" id="rss" title="Follow Our Feeds">Rss</a></li>
<li><a href="MailLink#" id="mail" title="Subscribe To Our News Letter">Mail</a></li>
<li><a href="FaceBookLink#" id="facebook" title="Be Our FaceBook Fan">Facebook</a></li>
<li><a href="TwitterLink#" id="twitter" title="Follow Us On Twitter">Twitter</a></li>
  </ul> 

- Και παταμε αποθηκευση.

10) Και ειναι ετοιμο.

- Demo ειναι το παρακατω Βιντεο:

-Για ότι πρόβλημα υπάρξει μην διστάσετε να επικοινωνήστε μαζί μας μεσώ του

κουμπιού "Επικοινωνία" που θα βρείτε πάνω πάνω.

- Αμα σας αρεσε παρακαλω προωθηστε το Blog μας ή καντε παρακολουθηση.

  Ευχαριστω.

Copyrights: BlogyTricks©

Πηγη κωδικα: Αllblogtools