» » » » » » » » » » » » 'Follow us' J-Query Social Bookmarking Widget

'Follow us' J-Query Social Bookmarking Widget

, , , , , , , , , ,
?a??sp??a st??? a?a???ste? t?? bloggertips.gr.


S?�e?a ?a p??s??s??�e ??a a??�? gadget st? s?????? �a? �e ta Social Bookmarking Gadgets, t? ?p??? ep?te?e? 4 ?e?t?????e?: RSS Feed, ????af? st? blog �?s? e-mail ?a? link ??a t?? se??de? �a? sta Facebook ?a? Twitter.

??�e ?a d??�e p?? ?a t? p??s??s??�e st? blog �a?:

1. S??des? st? ???a??as�? blogger
2. S?ed?as?
3. ?pe?e??as?a HTML
4. ?e Ctrl + F a?a??t??�e t? ]]></b:skin> ?a? a???�?? p??? ap? a?t? ep???????�e t?? pa?a??t? ??d??a:
#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/AVvXsEjmZsvVikPzm3pC2Ff_KdmStfyp9bXn8QwqtsAVCzLPIcSBvVSf_8qIpsx5dxVDxVHFqDLfoGKxTtUqQceHHgQe6gVMi6FANW50TrbbOFlQkX3LUQ-S9dXifnFDtF9BoVx6iHA_O7i2aew/) 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/AVvXsEjMDLU0-TDAMUn1bVnRV6afBfRF1S39r0Y7mJXp4y20KRQkVBbTSi9s4_m6Iw2rItwKq5leKugEW2sIav1F8pjhvGFWv9f7npQx46rUMWNw5SBR5tGmgrNAW-oOsC8_-ffqZkcjplDFn6s/s400/allblogtools_rss.png);
}

#social #facebook {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJS0qcPo9pDU93QJQbrotxf6CMTOeUYth3NqavoED7eyEE0In9Pp-hAWkRPwrdtTRswe7CClY64BWdV1poT-79N_PkBxUx9QeSm21Ir0Uk6eSasCRqezV6Y0_MpYoPvJ8QJ8uiS1RY3jg/s400/allblogtools_facebook.png);
}
#social #twitter {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOqn2nq_R1dF1z2kJ9Xbcvjwo2m6ymVVOgO9rb6he9pt9Haps1Qq6uQoVs1g_DBhDflHxU21qMKWdRvWuffFNL2JH6MfXT9ZX1Z_3r3rrBc8ILBVRy4_PlAPjWQFMzsUGIhVX2Na1cVoY/s400/allblogtools_twitter.png);
}
#social #mail {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-R-tShmOKSpQOrtGWIfAJfzuVGAsfqD4G1LAB8UQtMxqz3VtKEpu_0TNy4JeMgaX6pfsBL8tbVP1c-Qp6PGi3IBH26940hD5R5hBgYARv7AnxHMxocq0hZKK7hdVjdhncBlEh0kWnTH4/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. St? s????e?a, p??? �e Ctrl + F, a?a??t??�e t? </body> ?a? a???�?? p??? ap? a?t? ep???????�e t?? pa?a??t? ??d??a:
<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. ?p????e?s? p??t?p??

??�e t??a ?a p??s??s??�e t? gadget st? blog �a?:

7. ??�e S?ed?as? > ???s???? gadget > HTML/Javascript ?a? st? pa?????? p?? ?a a????e? ep???????�e t?? pa?a??t? ??d??a:
<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>

??t??a??st??�e t? http://blog-name.blogspot.com �e t? d?e????s? (url) t?? blog �a? (? a? ??ete ???a??as�? st? Feedburner, a?t??atast?ste t? http://blog-name.blogspot.com/feeds/posts/default?alt=rss �e t? url ap? t? Feedburner (?p?? ?a de?te st? pa??de??�a pa?a??t?), t? Mail-Link# �e t? d?e????s? st?? ?p??a ?? a?a???ste? �p????? ?a ?????? e???af? (subscribe) st? blog �a? �?s? e-mail, t? Facebook-Link# �e t? url t?? se??da? ? t?? p??f?? �a? st? Facebook ?a? t? Twitter-Link# �e t? url t?? se??da? �a? st? Twitter.

G?a ?a ?ata??�ete ?a??te?a t? ?a? p?? ?a t? a?t??atast?sete, ???te �?a �at?? st?? pa?a??t? ??d??a, ? ?p???? ap?te?e? pa??de??�a ??a t? 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>

G?a ?p???d?p?te p??�??�a ? ap???a af?ste t? s????? sa?.

?????: 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

Related Posts