The most special and trusted way to promote your blog is social media and when we are talking about social media promotion the it means it will not worth you a single penny.In these days social media is helping the new and old bloggers to promote their blog wifely so that more and more visitors will get attracted towards their blog or sites.Our promotion method is also same, and when are talking about social media promotion the it need to install a quality of widgets so that every single visitor of your blog could easily interact with you and your blog.Adding such social sharing widget are getting common in blogger sphere.You may already saw the presence of all such widget on various popular blogs.So today here in this tutorial we're going to provide such an unique social sharing widget for your blog,which will definitely help you to increase your blog traffic.You can see the live demo in below screenshot.
Must Read : Add Flying Twitter Bird on Blogger
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.
Must Read : Scroll Back To Top Button For BloggerSo 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 |
About The Author
I should add some social sharing widget for my blogspot account.
ReplyDeleteyes,you should.
Delete