Before Starting our tour in searching for Social Sharing Widgets, I humbly claims that the majority of this Widget's Credit must put on the Account on Mustafa Ahmedzai who is the author of MBT. This is one of his widgets and all I did was a little Customization. This Social Bookmarking Widget is mainly created out of CSS and it appears on your blog posts footer with 10 social website connectors. So adding a widget like this to your blog posts will surely increase your Blog's popularity through Social Sites and will also help you to increase your Google page rank and as well as your Alexa Traffic Rank.
The original creator Mustafa Claims about the Widget as this,
" This widget uses a total of 20 Icons but believe it or not it is super-fast and loads with in seconds. I merged all 20 Icons into one big image and used CSS Image stripes technique to make the icons appear at right positions. Fortunately this saves a lot of load time, because the browser will load all images at once and doesn’t need to contact the image server several times for uploading the images. "
Add Them To Your Blog Posts
- Go to Your Blogger Dash Board > Template
- Edit HTML and Press Ctrl+F
- Search For ]]></b:skin> and Paste the below Code
4. Now Check the box “Expand Widget Templates” at the top-right-corner/*--------BI Bookmarking Widget (CSS#2)------*/.bi-bookmarking a {
display:block;
height:55px;
width:64px;
padding:0 5px;
float:left;
position:relative;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMZBTnesyiGo0qRM3gAbmUjyd_8TmysLtFPWXCTTIbcdbb9s1qgaJorbi9tpjmMj_29008LEN24j_Pw7pNBkEQdBU7MmrO5PRON6_G4Hp7cYMkWvXcwaeiYk1VCYloIV9DTQ7Li42UnKHa/s1600-h/flapper2.jpg) no-repeat;
}
.bi-bookmarking a.delicious {background-position:0px 0px;
}
.bi-bookmarking a.delicious:hover {
background-position:0px -57px;
}
.bi-bookmarking a.digg {
background-position:0px -114px;
}
.bi-bookmarking a.digg:hover {
background-position:0px -171px;
}
.bi-bookmarking a.stumbleupon {
background-position:0px -228px;
}
.bi-bookmarking a.stumbleupon:hover {
background-position:0px -285px;
}
.bi-bookmarking a.technorati {
background-position:0px -570px;
}
.bi-bookmarking a.technorati:hover {
background-position:0px -627px;
}
.bi-bookmarking a.twitter {
background-position:0px -684px;
}
.bi-bookmarking a.twitter:hover {
background-position:0px -741px;
}
.bi-bookmarking a.facebook {
background-position:0px -456px;
}
.bi-bookmarking a.facebook:hover {
background-position:0px -513px;
}
.post-bookmark a.reddit {
background-position:0px -342px;
}
.bi-bookmarking a.reddit:hover {
background-position:0px -399px;
}
.bi-bookmarking a.yahoo {
background-position:0px -798px;
}
.bi-bookmarking a.yahoo:hover {
background-position:0px -855px;
}
.bi-bookmarking a.rss {
background-position:0px -912px;
}
.bi-bookmarking a.rss:hover {
background-position:0px -969px;
}
5. Search for this code <data:post.body/>
If you can not find it then search for this one <p><data:post.body/></p>
6. Just below <data:post.body/> OR <p><data:post.body/></p>, paste this code,
<!--BI Bookmarking Widget (HTML)--> <div class='bi-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>
7. If you prefer You can change the text Colour #289728
Save your template and view your blog to see a colorful bookmarking widget just below all your Blog posts.
Warning : Don't Copy from this Post Without Linking Back to the Post
Hi! I am Dulshan, a Pro Blogger, an E-money Guider for the those who need. I have created Blogrithm and currently runs it. Helping to the People who struggle to make money from the Internet is the cause which motivate me in creating the Site. 
0 comments:
Post a Comment