Live Demo
Features
- Supports almost every browser
- Super Fast Loading,loads in split seconds
- Very easy coding and easy to install
- It will not affect the blog speed
- looks cool and stylish
- Pure css based
- No javascript/jquery
Add Widget into Blogger
- Login to your Blogger Dashboard.
- Go to Template.
- Backup your Template, it is very necessary.
- Next click on edit html.
- Find </b:skin> in Blogger template.
- Now click on the arrow to expand the code
- Now Paste the following code directly above ]]></b:skin> tag.
.tth-bookmarking a {
display:block;
height:42px;
width:48px;
padding:0 9px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs2uNttppucJ4vxYJ1YA2vz7AQYY6CFfcVkagpqGLSK0IZWE-zGDWL6XXo6lwhIr_YBQ0_ZPehr6SZxqGen3vilndnhl9sL8JXgxQdpT61z1UXefL_yGY_7KPgWBkr3bikQxxB7BPOlWMU/s1600/flapper.jpg) no-repeat;
}
.tth-bookmarking a.delicious {
background-position:0px 0px;
}
.tth-bookmarking a.delicious:hover {
background-position:0px -43px;
}
.tth-bookmarking a.digg {
background-position:0px -86px;
}
.tth-bookmarking a.digg:hover {
background-position:0px -129px;
}
.tth-bookmarking a.stumbleupon {
background-position:0px -344px;
}
.tth-bookmarking a.stumbleupon:hover {
background-position:0px -387px;
}
.tth-bookmarking a.technorati {
background-position:0px -430px;
}
.tth-bookmarking a.technorati:hover {
background-position:0px -473px;
}
.tth-bookmarking a.twitter {
background-position:0px -516px;
}
.tth-bookmarking a.twitter:hover {
background-position:0px -559px;
}
.tth-bookmarking a.facebook {
background-position:0px -172px;
}
.tth-bookmarking a.facebook:hover {
background-position:0px -215px;
}
.tth-bookmarking a.reddit {
background-position:0px -258px;
}
.tth-bookmarking a.reddit:hover {
background-position:0px -301px;
}
.tth-bookmarking a.yahoo {
background-position:0px -602px;
}
.tth-bookmarking a.yahoo:hover {
background-position:0px -645px;
}
.tth-bookmarking a.rss {
background-position:0px -774px;
}
.tth-bookmarking a.rss:hover {
background-position:0px -817px;
}
- Search for this code <data:post.body/> . If you can not find it then search for this one <p><data:post.body/></p>
- Just below <data:post.body/> OR <p><data:post.body/></p>, paste this code
<!--TTH Bookmarking Widget (HTML)-->
<div class='tth-bookmarking'>
<b:if cond='data:blog.pageType == "item"'>
<br/><font color='#289728' face='ms sans serif' size='3'><b>Kindly Bookmark and Share it:</b></font>
<br/><br/>
<!-- Delicious -->
<a class='delicious' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :>'/>
<!--DIGG-->
<a class='digg' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank' title='Digg this :>'/>
<!--Stumble-->
<a class='stumbleupon' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :>'/>
<!-- Technorati -->
<a class='technorati' expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank' title='Fave this :>'/>
<!-- Twitter -->
<a class='twitter' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :>'/>
<!--Facebook-->
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :>'/>
<!-- Reddit -->
<a class='reddit' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Bookmark and tag this :>'/>
<!-- Yahoo -->
<a class='yahoo' expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Bookmark this :>'/>
<a class='rss' expr:href='data:blog.homepageUrl + "feeds/posts/default"'/>
</b:if></div>
You can replace the bolded text in green with any statement you like. You can also change the text colour i.e #289728 with any colour you like. Use our Color Chart for this purpose.
So if you're facing any problem regarding this just leave your question through the below comment section,we'll try our best to help you as soon as possible.
|
Articles You May Like |
I should add some social sharing widget for my blogspot account.
ReplyDeleteyes,you should.
Delete