Latest Blog News: Διαβάζετε πάντα και τα ΣΧΟΛΙΑ των αναρτήσεων!

'Follow us' J-Query Social Bookmarking Widget


Print Friendly and PDFPrintPrint Friendly and PDFPDF

Καλησπέρα στους αναγνώστες του 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

Stumble
Delicious
Technorati
Twitter
Facebook

6 comments:

louie είπε...

ΠΟΛΥ ΧΡΗΣΙΜΟ ΦΙΛΕ. ΕΥΧΑΡΙΣΤΟΥΜΕ.

*************************************
http://sillektes-euro.blogspot.com/

Anonymous είπε...

ΠΙΑΝΕΙ ΣΕ ΠΡΟΤΥΠΑ?

Secra είπε...

Bill τι ακριβώς εννοείς;

giouli είπε...

Γεια σας δεν κατάλαβα στο email τι πρέπει να κάνουμε. Εγώ άνοιξα το email μου στο yahoo και ήμουν στην πρώτη σελίδα που σου δείχνει εισερχόμενα κλπ. Από κει πάτησα αντιγραφή και το έβαλα. Αυτό εννοείτε ή έκανα χαζομάρα?

Secra είπε...

@giouli
Το link για το email είναι η διεύθυνση στην οποία οι αναγνώστες σου μπορούν να εγγραφούν για να τους έρχονται οι νέες αναρτήσεις με email.
Πρέπει να έχεις δημιουργήσει λογαριασμό στο Feedburner, και όταν το κάνεις το link για το email θα είναι της μορφής: http://feedburner.google.com/fb/a/mailverify?uri=το-ονομα-στο-feedburner

Π.χ. το link στο οποίο μπορείς να εγγραφείς για τις νέες αναρτήσεις για το bloggertips είναι το http://feedburner.google.com/fb/a/mailverify?uri=Johnpatrablog

Περισσότερα για το Feedburner εδώ: http://www.bloggertips.gr/2010/11/newsletter-how-to-add-feedburner-email.html

:)

Ανώνυμος είπε...

Πως αλλάζουμε το χρώμα του πκαισιου που είναι μέσα το σήμα του fb ασ'πούμε???

Δημοσίευση σχολίου

Παρακαλούμε τους φίλους αναγνώστες:

ΟΧΙ SPAM,
ΟΧΙ GREEKLISH,
ΟΧΙ ΠΡΟΣΒΛΗΤΙΚΑ ΣΧΟΛΙΑ

Παρακαλώ το σχόλιό σας να είναι σχετικό με την παραπάνω ανάρτηση.
Γενικές απορίες μόνο στη σελίδα μας στο facebook.

 
© Copyright 2009-14 bloggertips.gr | All rights reserved. | Επικοινωνία | LK Magazine v2 from Lasantha | Πίσω στην ΚΟΡΥΦΗ | | Subscribe in a reader (Google,Yahoo κα)

* free blogger tips,tricks,gadgets,widgets,templates,themes,help,hacks,design,domains,xml,html,blogspot.gr *