tutorial: Social Bookmark

Showing posts with label Social Bookmark. Show all posts

Tuesday, August 24, 2010

Animated (On Hover) Fixed-Floating Twitter-Follow Me Badge

Steps to follow:

STEP #1
Log in to Blogger -> Layout -> Edit HTML and select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template
</head>

And immediately before it, paste this code:

<!--FOLLOW-ME-STARTS-->

<style type='text/css'>

.feedbacktw {

width: 31px;

height: 116px;

display: block;

font-size: 10px;

text-decoration: none;

background-repeat:no-repeat;

background-image:url(http://i26.tinypic.com/1zb4509.jpg);

position:fixed;

top:20%;

right:2px;

}



.feedbacktw:hover {

width: 31px;

height: 116px;

display: block;

text-decoration: none;

background-repeat:no-repeat;

background-image:url(http://i26.tinypic.com/xpu99c.jpg);

position:fixed;

top:20%;

right:10px;

}

</style>

<!--FOLLOW-ME-STOPS-Widget-by-http://bdlab.blogspot.com-->

Now click Save Template

STEP #1 Log in to Blogger, go to Layout

Add a Gadget of HTML/JavaScript type.

Then add this code in to it:.

<!--FOLLOW-ME-STARTS--><a style="display:scroll;" href="http://twitter.com/rohul786" class="feedbacktw"> </a><!--FOLLOW-ME-STOPS-->

Change the link in RED color to your own Twitter profile.

Now click Save

Image Floating Twitter Follow Me With Different Styles

Direct link image	On Hover Direct link
01. http://i42.tinypic.com/353cvh4.jpg	http://i42.tinypic.com/212en7t.jpg
02. http://i40.tinypic.com/j65sts.jpg	http://i44.tinypic.com/2cncvq1.jpg
03. http://i40.tinypic.com/x283dc.jpg	http://i43.tinypic.com/m9sj5y.jpg
04. http://i42.tinypic.com/30kf7mp.jpg	http://i42.tinypic.com/330ab9s.jpg
05. http://i43.tinypic.com/20hwowl.jpg	http://i41.tinypic.com/i1mauo.jpg
06. http://i43.tinypic.com/x5nygw.jpg	http://i43.tinypic.com/2nk2qn9.jpg
07. http://i44.tinypic.com/1zqsowk.jpg	http://i39.tinypic.com/33nukja.jpg
08. http://i43.tinypic.com/24c8jm9.jpg	http://i39.tinypic.com/14112c7.jpg
09. http://i44.tinypic.com/r8ug3o.jpg	http://i43.tinypic.com/18nf54.jpg
10. http://i44.tinypic.com/2rz7u9s.jpg	http://i44.tinypic.com/2gxmamx.jpg
11. http://i44.tinypic.com/6jozr4.jpg	http://i43.tinypic.com/25iaycy.jpg
12. http://i39.tinypic.com/2a68u1k.jpg	http://i42.tinypic.com/2rnk9py.jpg
13. http://i43.tinypic.com/34zjfo5.jpg	http://i43.tinypic.com/a4ak2v.jpg
14. http://i43.tinypic.com/8wjfbs.jpg	http://i41.tinypic.com/5wbecx.jpg
15. http://i42.tinypic.com/23uucco.jpg	http://i43.tinypic.com/fee7ht.jpg
16. http://i41.tinypic.com/dcfzag.jpg	http://i44.tinypic.com/200g0w4.jpg
17. http://i41.tinypic.com/2quhswn.jpg	http://i42.tinypic.com/f5a83s.jpg

Thanks to http://loneeagle110.blogspot.com/2010/04/17-styles-animated-on-hover-floating.html

Friday, August 20, 2010

How to Install Floating Social Bookmark on Blogger.

STEP #1
Log in to Blogger -> Layout -> Edit HTML and select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template

]]></b:skin>

And immediately ABOVE/BEFORE it, paste this code:

#divStayTopLeft {left:5px;position:absolute;top:15px;}

.sidetab {}

.sidetab ul {list-style-type: none;margin: 0;margin-top: 220px;margin-left: -2px;padding: 0;}

.sidetab ul li {border-bottom: 0;margin-bottom: 0;padding: 0;}

.sidetab a {background: none;display: block;height: 25px;margin-top: 0px;padding: 2px;width: 25px;}

.sidetab a:link, .navlist a:visited {color: #555;text-decoration: none;}

.sidetab a:hover {border: none;background: #e8e8e8;}

.sidetab .button a {background:none;height: 25px; width: 25px;}

STEP #2:

Now find this code in the template:

</body>

And immediately above it, paste this code:

<DIV id='divStayTopLeft'>

<div class='sidetab'>

<ul class='navlist'>



<li class='button'><a href='http://bdlab.blogspot.com/feeds/posts/default'><img height='25' src='http://upic.me/i/ci/rss_48.png' title='Subscribe to RSS feed' width='25'/></a></li>

<a class='addthis_button_facebook'><img alt='Facebook' height='25' src='http://upic.me/i/8n/facebook_32.png' width='25'/></a>

<a class='addthis_button_delicious'><img alt='Delicious' height='25' src='http://upic.me/i/k6/delicious.png' width='25'/></a>

<a class='addthis_button_email'><img alt='Email' height='25' src='http://upic.me/i/bo/emailsmall.jpg' width='25'/></a>

<a class='addthis_button_favorites'><img alt='Favorites' height='25' src='http://upic.me/i/ij/favorites.png' width='25'/></a>

<a class='addthis_button_twitter'><img alt='Twitter' height='25' src='http://upic.me/i/bx/twitter_32.png' width='25'/></a>

<a class='addthis_button_google'><img alt='Google' height='25' src='http://upic.me/i/fm/gsmall.jpg' width='25'/></a>

<a class='addthis_button_digg'><img alt='Digg' height='25' src='http://upic.me/i/0v/mdigg.png' width='25'/></a>

<a class='addthis_button_more'><img alt='More' height='25' src='http://upic.me/i/5e/wmore.png' width='25'/></a>

</ul>

</div>

</DIV>

<script src='http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a65e1d93cd75e94' type='text/javascript'/>

<script src='http://hackublog.googlecode.com/files/FloatingMenu.js' type='text/javascript'/>

Now Click Save Template

Note: Replace the YOUR-BLOG-ADDRESS-HERE with your Feed Link if the run ends blogspot domain. If they run their own domains replace the YOUR-BLOG-ADDRESS-HERE / feeds / posts / default in your Feed link.

Thursday, August 19, 2010

Add AutoHiding Social Bookmarking [Sharing is Sexy/Caring] Widget To Your Blog

You must have noticed Sharing is sexy/caring social bookmarking autohide widget on many blogs and websites. This widget is very different than other available social bookmarking buttons. The graphics looks very stylish and different. The button of this widget has autohide effect when hover on it. All that makes it a must have widget for any blog. Here in this post, i will explain how you can add Sharing is sexy widget to Blogger blog after every post.

STEP #1
Log in to Blogger -> Layout -> Edit HTMLand select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template:

</head>

And immediately before it, paste this code:

<style type='text/css'> div.sexy-bookmarks { height:54px; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja90l95jI44J_7u6PfH29l8il2ApesIlJ2h_N3eomkeiqfpla1aD3TttEip23uLwrfM0Kes_gkxi4iV3Q0v4g7jpTvrRUHUo9HrYTUo5XCVWeURW6HZVxjz634dfWSQ1ZWNMN__ScUeStO/') no-repeat left bottom; position:relative; width:540px; } div.sexy-bookmarks span.sexy-rightside { width:17px; height:54px; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja90l95jI44J_7u6PfH29l8il2ApesIlJ2h_N3eomkeiqfpla1aD3TttEip23uLwrfM0Kes_gkxi4iV3Q0v4g7jpTvrRUHUo9HrYTUo5XCVWeURW6HZVxjz634dfWSQ1ZWNMN__ScUeStO/') no-repeat right bottom; position:absolute; right:-17px; } div.sexy-bookmarks ul.socials { margin:0 !important; padding:0 !important; position:absolute; bottom:0; left:10px; } div.sexy-bookmarks ul.socials li { display:inline-block !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:48px !important; cursor:pointer !important; padding:0 !important; } div.sexy-bookmarks ul.socials a { display:block !important; width:48px !important; height:29px !important; font-size:0 !important; color:transparent !important; } .sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWzUBkd7PqOvOFkm77gr0bKAYHJAV7s-4VNtVhcGCKn0YRnJ7-sG_6qm578PqLNURkT850ejG_C7O0YWX2TroxrT1oJfoRkoXkMH5a69S-oYztXl4nZC_v0qP83nzaP1_M2am5o2E05k5F/') no-repeat !important; } .sexy-furl { background-position:-300px top !important; } .sexy-furl:hover { background-position:-300px bottom !important; } .sexy-digg { background-position:-500px top !important; } .sexy-digg:hover { background-position:-500px bottom !important; } .sexy-reddit { background-position:-100px top !important; } .sexy-reddit:hover { background-position:-100px bottom !important; } .sexy-stumble { background-position:-50px top !important; } .sexy-stumble:hover { background-position:-50px bottom !important; } .sexy-delicious { background-position:left top !important; } .sexy-delicious:hover { background-position:left bottom !important; } .sexy-yahoo { background-position:-650px top !important; } .sexy-yahoo:hover { background-position:-650px bottom !important; } .sexy-blinklist { background-position:-600px top !important; } .sexy-blinklist:hover { background-position:-600px bottom !important; } .sexy-technorati { background-position:-700px top !important; } .sexy-technorati:hover { background-position:-700px bottom !important; } .sexy-myspace { background-position:-200px top !important; } .sexy-myspace:hover { background-position:-200px bottom !important; } .sexy-twitter { background-position:-350px top !important; } .sexy-twitter:hover { background-position:-350px bottom !important; } .sexy-facebook { background-position:-450px top !important; } .sexy-facebook:hover { background-position:-450px bottom !important; } .sexy-mixx { background-position:-250px top !important; } .sexy-mixx:hover { background-position:-250px bottom !important; } .sexy-script-style { background-position:-400px top !important; } .sexy-script-style:hover { background-position:-400px bottom !important; } .sexy-designfloat { background-position:-550px top !important; } .sexy-designfloat:hover { background-position:-550px bottom !important; } .sexy-syndicate { background-position:-150px top !important; } .sexy-syndicate:hover { background-position:-150px bottom !important; } .sexy-email { background-position:-753px top !important; } .sexy-email:hover { background-position:-753px bottom !important; } </style>

STEP #2

Now find (CTRL+F) this code in the template:

<data:post.body/>

And immediately BELOW/AFTER it, paste this code:

<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/YOUR-FEEDBURNER-ID' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>
<span class='sexy-rightside'/></div>

You may of course remove any button code, if you do not want to show it.

Now Click Save Template

Monday, August 16, 2010

How To Add Twittley Retweet Counter Buttons to Blogger

Twitter has become the most important tools for webmasters as its among the top social bookmarking websites. Its a headache for them to Search the appropiate retweet button and script for there Blogs and websites. So here is a little thing you can do by using one of those impressive Twitter Retweet Counters so that your readers can share your blog posts with ease.

Instructions To Follow:

STEP #1

Log in to Blogger, go to Layout -> Edit HTML

and mark the tick box "Expand Widget Templates"

STEP #2

Now find (CTRL+F) this code in the template:

<div class='post-header-line-1'/>

3.Now Copy your "Twittley Retweet" bookmarking buttons code and paste it just below the above code.

NOTE: If you can't find <div class='post-header-line-1'/> in your template, paste your "Twittley Retweet" bookmarking buttons code just before <data:post.body/> .

Code 1:

<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "0";</script><script src='http://twittley.com/button/button.js'/>
</div>

Result:

Code 2:

<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "1";</script><script src='http://twittley.com/button/button.js'/>
</div>

Result:

Code 3:

<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "2";</script><script src='http://twittley.com/button/button.js'/>
</div>

Result:

Code 4:

<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "3";</script><script src='http://twittley.com/button/button.js'/>
</div>

Result:

Code 5:

<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "4";</script><script src='http://twittley.com/button/button.js'/>
</div>

Result:

Code 6:

<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "5";</script><script src='http://twittley.com/button/button.js'/>
</div>

Result:

Code 7:

<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "6";</script><script src='http://twittley.com/button/button.js'/>
</div>

Result:

Tuesday, August 24, 2010

Animated (On Hover) Fixed-Floating Twitter-Follow Me Badge

Friday, August 20, 2010

How to Install Floating Social Bookmark on Blogger.

Thursday, August 19, 2010

Add AutoHiding Social Bookmarking [Sharing is Sexy/Caring] Widget To Your Blog

Monday, August 16, 2010

How To Add Twittley Retweet Counter Buttons to Blogger

NOW CLICK SAVE TEMPLATE