'Follow us' J-Query Social Bookmarking Widget

Καλησπέρα στους αναγνώστες του bloggertips.gr.


Σήμερα θα προσθέσουμε ένα ακόμη gadget στη συλλογή μας με τα Social Bookmarking Gadgets, το οποίο επιτελεί 4 λειτουργίες: RSS Feed, Εγγραφή στο blog μέσω e-mail και link για τις σελίδες μας στα Facebook και Twitter.

Πάμε να δούμε πως θα το προσθέσουμε στο blog μας:

1. Σύνδεση στο λογαριασμό blogger
2. Σχεδίαση
3. Επεξεργασία HTML
4. Με Ctrl + F αναζητούμε το ]]></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/AVvXsEi1BzSR4226GX73jc-fL58PXZdMRHJmt6u-9ajaaWFWsW2d_hehAK0rbakgImYva5nztLXikEBp1dlxacYkecAdZbI8MFREGpJqYJMk6tQHOhs-_bLgSzKsuMK1hgy72WSTeOdH6avpbhI/) 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/AVvXsEhLxi6OW4oL72p86p_if4lwhVYeItAjblCQBPYRtkCnwn8lg8OFMQeOdFIQZwqRH2F0WXy-jyXufViqFLwd3K6YOGdLKmNOpOYAFrf4qiLHh-e7V9tPGtxVIEGyj7d0J5L3VX55PLDgsRQ/s400/allblogtools_rss.png);
}

#social #facebook {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Wco0LXy9vLBKbVqrbqKvt8Y1tPhntD8d0mUArSGHYxGiC6GfbGjOYtlw5Kn4QVsqeYhz3V58_SkZaY8ta7yLxxuD-e0RwaSAmnVaj3lQj6E5yca7bC3XfhJDNRDuFdVPOVsnnsU5_08/s400/allblogtools_facebook.png);
}
#social #twitter {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEios1oCHn8MfxxJ4S5jZQIhpKlaKWDjtxIe_NwSCSJuzUMpdziUxltMF_D0J0pCo29W_9gVrQPh3S0BMJIzzOpiABPR0RwGIADAjt6IMrpFNb7ioqc6kwoMJbSdyTPwTSqfoT48G7Ymyis/s400/allblogtools_twitter.png);
}
#social #mail {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfoNMb2paP6aI4TARxiE_zYFZ3HRsUNJ1IKZkMguWbVgcLCQIakZjLglXM5xCesSdL-bgYrCn3ItnkIlQqP90EQL8afNDT8aAsLaBKBvtDBNIRUc8UlVZZ49IrDO1D8qnrFT1qjGPc8PE/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;
}

5. Στη συνέχεια, πάλι με Ctrl + F, αναζητούμε το </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>

6. Αποθήκευση προτύπου

Πάμε τώρα να προσθέσουμε το gadget στο blog μας:

7. Πάμε Σχεδίαση > Προσθήκη gadget > HTML/Javascript και στο παράθυρο που θα ανοίξει επικολλούμε τον παρακάτω κώδικα:

<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="Mail-Link#" id="mail" title="Subscribe to our newsletter">Mail</a></li>

<li><a href="Facebook-Link#" id="facebook" title="Like us on Facebook">Facebook</a></li>

<li><a href="Twitter-Link#" id="twitter" title="Follow us on Twitter">Twitter</a></li>
</ul>

Αντικαθιστούμε το http://blog-name.blogspot.com με τη διεύθυνση (url) του blog μας (ή αν έχετε λογαριασμό στο Feedburner, αντικαταστήστε το http://blog-name.blogspot.com/feeds/posts/default?alt=rss με το url από το Feedburner (όπως θα δείτε στο παράδειγμα παρακάτω), το Mail-Link# με τη διεύθυνση στην οποία οι αναγνώστες μπορούν να κάνουν εγγραφή (subscribe) στο blog μας μέσω e-mail, το Facebook-Link# με το url της σελίδας ή του προφίλ μας στο Facebook και το Twitter-Link# με το url της σελίδας μας στο Twitter.

Για να καταλάβετε καλύτερα τι και πως θα το αντικαταστήσετε, ρίξτε μια ματιά στον παρακάτω κώδικα, ο οποίος αποτελεί παράδειγμα για το bloggertips.gr:

<ul id="social">
<p>Follow Us</p>
<li><a href="http://feeds.feedburner.com/Johnpatrablog" id="rss" title="Follow our Feeds">Rss</a></li>

<li><a href="http://feedburner.google.com/fb/a/mailverify?uri=Johnpatrablog" id="mail" title="Subscribe to our newsletter">Mail</a></li>

<li><a href="https://www.facebook.com/bloggertips.gr" id="facebook" title="Like us on Facebook">Facebook</a></li>

<li><a href="https://twitter.com/#!/johnpatrablog" id="twitter" title="Follow us on Twitter">Twitter</a></li>
</ul>

Για οποιοδήποτε πρόβλημα ή απορία αφήστε το σχόλιό σας.

Πηγές: http://www.allblogtools.com/tricks-and-hacks/blogger-follow-us-j-query-widget-social-icons/

Copyrigths: http://www.bloggertips.gr/

Post by Secra from Web in Greece