[How to] Add Flapper Social Bookmarking Icons to blogpost in blogger [Tutorial]

0
65
views


I already mentioned how important Social Bookmarking Icons are to Grow A Blog.

Preview
So the tutorial for this starts here

Log in to your blogger Dashboard
Go to Design –> Edit HTML
Check “Expand Widget Templates” box
Copy the code below, and paste above ]]></b:skin>

.mbt-bookmarking a {display:block;height:42px;width:48px;padding:0 9px; float:left; background:transparent url(http://4.bp.blogspot.com/_7wsQzULWIwo/SxYPky2M4VI/AAAAAAAACcs/SGTHHyAiZ4A/s1600/flapper.jpg) no-repeat; } .mbt-bookmarking a.delicious { background-position:0px 0px; } .mbt-bookmarking a.delicious:hover { background-position:0px -43px; } .mbt-bookmarking a.digg { background-position:0px -86px; } .mbt-bookmarking a.digg:hover { background-position:0px -129px; } .mbt-bookmarking a.stumbleupon { background-position:0px -344px; } .mbt-bookmarking a.stumbleupon:hover { background-position:0px -387px; } .mbt-bookmarking a.technorati { background-position:0px -430px; } .mbt-bookmarking a.technorati:hover { background-position:0px -473px; } .mbt-bookmarking a.twitter { background-position:0px -516px; } .mbt-bookmarking a.twitter:hover { background-position:0px -559px; } .mbt-bookmarking a.facebook { background-position:0px -172px; } .mbt-bookmarking a.facebook:hover { background-position:0px -215px; } .mbt-bookmarking a.reddit { background-position:0px -258px; } .mbt-bookmarking a.reddit:hover { background-position:0px -301px; } .mbt-bookmarking a.yahoo { background-position:0px -602px; } .mbt-bookmarking a.yahoo:hover { background-position:0px -645px; } .mbt-bookmarking a.rss { background-position:0px -774px; } .mbt-bookmarking a.rss:hover { background-position:0px -817px; }

now search for the code <data:post.body/>


copy the code below, and paste under <data:post.body/>

div class=’mbt-bookmarking’><b:if cond=’data:blog.pageType == &quot;item&quot;’><br/><font color=’#289728′ face=’ms sans serif’ size=’3′><b>Share</b></font><br/><br/> <!– Delicious –> <a class=’delicious’ expr:href=’&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ rel=’external nofollow’ target=’_blank’ title=’Add this to Delicious :&gt;’/> <!–DIGG–> <a class=’digg’ expr:href=’&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url’ rel=’external nofollow’ target=’_blank’ title=’Digg this :&gt;’/> <!–Stumble–> <a class=’stumbleupon’ expr:href=’&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ rel=’external nofollow’ target=’_blank’ title=’Stumble this :&gt;’/> <!– Technorati –> <a class=’technorati’ expr:href=’&quot;http://technorati.com/faves?add=&quot; + data:post.url’ rel=’external nofollow’ target=’_blank’ title=’Fave this :&gt;’/> <!– Twitter –> <a class=’twitter’ expr:href=’&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ rel=’external nofollow’ target=’_blank’ title=’Tweet this :&gt;’/> <!–Facebook–> <a class=’facebook’ expr:href=’&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title’ rel=’external nofollow’ target=’_blank’ title=’Share this on Facebook :&gt;’/> <!– Reddit –> <a class=’reddit’ expr:href=’&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ rel=’external nofollow’ target=’_blank’ title=’Bookmark and tag this :&gt;’/> <!– Yahoo –> <a class=’yahoo’ expr:href=’&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ rel=’external nofollow’ target=’_blank’ title=’Bookmark this :&gt;’/> <a class=’rss’ expr:href=’data:blog.homepageUrl + &quot;feeds/posts/default&quot;’/> </b:if></div>

Just preview,check it Save it,and you are done….dont forget to share this post

Leave a Reply