Techie Vinayak: Widgets

Showing posts with label Widgets. Show all posts

Tuesday, September 28, 2010

Add a Floating Back–To-Top button

If your blog has lengthy posts, then this back-to-top button is a must for you too. I have added this on Techie Vinayak because sometimes the codes of a widget makes the post longer, so in order to come back to top of the blog will be easy with these buttons. I have got 3 designs with me with their codes. Here we go with the first one:-

Here’s the code of this button:-

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src='http://i521.photobucket.com/albums/w331/Vinnutter/hodge_podge-hodge_podge_icons-hodge_podge-left_arrowico-48x484.png'" src="http://i521.photobucket.com/albums/w331/Vinnutter/hodge_podge-hodge_podge_icons-hodge_podge-left_arrowico-32x324.png" onmouseout="this.src='http://i521.photobucket.com/albums/w331/Vinnutter/hodge_podge-hodge_podge_icons-hodge_podge-left_arrowico-32x324.png'"/></a>
<!--BACK-TO-TOP-STOPS—>

Now, lets move on to the second button:-

Here’s the code:-

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src='http://i521.photobucket.com/albums/w331/Vinnutter/Up1Blue4.png'" src="http://i521.photobucket.com/albums/w331/Vinnutter/Up1Blue9.png" onmouseout="this.src='http://i521.photobucket.com/albums/w331/Vinnutter/Up1Blue9.png'"/></a>

<!--BACK-TO-TOP-STOPS—>

Last, but not the least. Here’s the third button:-

Here’s the code:-

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src='http://i521.photobucket.com/albums/w331/Vinnutter/24.png'" src="http://i521.photobucket.com/albums/w331/Vinnutter/back-to-top-small-14.png" onmouseout="this.src='http://i521.photobucket.com/albums/w331/Vinnutter/back-to-top-small-14.png'"/></a>
<!--BACK-TO-TOP-STOPS—>

That’s it. So, try it out. It will make your blog more good.

Saturday, August 28, 2010

Add A Survey For Your Blog

What does a reader wants? He wants that a blog should write something of the reader’s interest. So, what about a adding a survey on your blog which pops up from the bottom right asking for “What should we write about next?”. That would be simple for a reader to suggest the blog owner for something he wants. So, in order to get it follow the simple steps below:-
1. Create an account at KissInSights.
2. Complete the form and choose the survey you want.

3. Complete the form and click the button “Get the code”.
4. Copy the given code and go to your dashboard—> design—> edit html.
5. Find <body> and paste the KissInSights code right after it.
6. View your blog and have fun.

NOTE: I recommend you not to add this if you have wibiya toolbar because if you add it with the wibiya toolbar the submit button will hide behind the toolbar. I deleted the toolbar and then got this widget.

Saturday, May 29, 2010

Add facebook like button to your blog posts

The new like button just made available from Facebook make sharing blogs as easy as possible and this is great news for us bloggers.With the New Facebook Like Button just one click is required in the very same way as you would click like on a friends picture or comment your own Facebook homepage.Unlike other sharing options you don't get a pop up or have to go to the website you just click like or recommend and your done…
Here is the screenshot of the facebook like button:-

Here is the code for facebook like button:-
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href="+ data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
You can add the like button at three places:-
Below the post title
At the top of the post
Below the entire post
Now here are the steps for adding the like button:-
1.Go to dashboard—> Edit Html—> Tick the Expand Widget Templates box
(a) To add the button directly below the post titles find(ctrl+f) the following code:-
<div class='post-header-line-1'>
Now paste the facebook button code Directly Below / Under <div class='post-header-line-1'>
(b) To add the button at the top of the posts find(ctrl+f) the following code:-
<data:post.body/>
Now paste the Facebook button code Directly Before / Above <data:post.body/>
(c) To add the button below the posts find(ctrl+f) the following code:-
<data:post.body/>
Now paste the Facebook code Directly Below / Under <data:post.body/>
Preview your template and then save it.Now you have the facebook like button.Enjoy!!!This is really a great way to share your blog posts…What do you think?

Saturday, April 3, 2010

Falling flower effect for blogger

Falling flower effect is very popular.I have an example for it:-
http://www.blogbark2.blogspot.com
Flower effect has 3 choices.Here they are:-
Pink Flower

Purple Flower

Yellow Flower

Now here are the steps to add them.
1.Pink Flower
For pink flower first go to Layout—> Edit Html—> Click the Expand Widget Templates check box.
Then find the following code:-
</body>
And just before that code paste the following code:-
<script src="http://flowerfall.googlecode.com/files/spiceupyourblog1.js" type="text/javascript">
/***********************************************
* Flower fall effect by Vinayak Nagri www.superstarvinayak.blogspot.com
* Please keep this notice intact
***********************************************/
</script><a href="http://www.spiceupyourblog.com/2010/01/falling-flower-effect-add-3-types-of.html" target="_blank"><font size="1">Get Flower Effect</font></a>
2.Purple Flower
For purple flower first go to Layout—> Edit Html—> Click the Expand Widget Templates check box.
Then find the following code:-
</body>
And just before that code paste the following code:-
<script src="http://flowerfall.googlecode.com/files/spiceupyourblog2.js" type="text/javascript">
/***********************************************
* Flower fall effect by Vinayak Nagri www.superstarvinayak.blogspot.com
* Please keep this notice intact
***********************************************/
</script><a href="http://www.spiceupyourblog.com/2010/01/falling-flower-effect-add-3-types-of.html" target="_blank"><font size="1">Get Flower Effect</font></a>
3.Yellow Flower
For purple flower first go to Layout—> Edit Html—> Click the Expand Widget Templates check box.
Then find the following code:-
</body>
And just before that code paste the following code:-
<script src="http://flowerfall.googlecode.com/files/spiceupyourblog3.js" type="text/javascript">
/***********************************************
* Flower fall effect by Vinayak Nagri www.superstarvinayak.blogspot.com
* Please keep this notice intact
***********************************************/
</script><a href="http://www.spiceupyourblog.com/2010/01/falling-flower-effect-add-3-types-of.html" target="_blank"><font size="1">Get Flower Effect</font></a>
Thats it.Save your template and see your blog.

Sunday, March 28, 2010

Add the facebook share button

Most of the people know what is facebook so there is no need of describing it.So do you want the facebook share button?If yes then go to http://www.facebook.com/facebook-widgets/share.php and choose the style you want.You will get the code of the button from there but they have not told how to apply it.For that follow the steps given below:-
1.Go to Layout—> Edit Html—> Click on Expand Widget Templates check box.
2.Find the following code:-

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

3.And after it, paste your button code you got from the site.

4.Did you got it?If no then find this:-

<data:post.body/>

5.And then paste the button code before it.

Thursday, March 25, 2010

Add Cloud Label widget for blogger

Labels are a must to have in a blog but when you have the labels like a cloud it looks more good so here are the steps to add cloud label widget for blogger.First of all if you don’t have labels then get it from Layout—> Add a gadget and search Labels.Then add the widget.After adding the widget follow the steps given below:-

1.Go to Layout-> Edit Html(Do not click the Expand Widget Templates for an easy explanation)

2.The find(ctrl+f) the following code:-

<b:section class='sidebar' id='sidebar' preferred='yes'>

3.Now add the following code directly after the above post:-

<b:widget id='Label99' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>

<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>

<script type='text/javascript'>

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

// uncomment next line to enable transparency

//so.addParam("wmode", "transparent");

so.addVariable("tcolor", "0x333333");

so.addVariable("mode", "tags");

so.addVariable("distr", "true");

so.addVariable("tspeed", "100");

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

so.addParam("allowScriptAccess", "always");

so.write("flashcontent");

</script>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

Save the template and you are done.

Share It- Huge bookmarking widget for blogger

Share It is one of the biggest bookmarking widgets for blogger.Here is its picture:-

If you want to get it follow the steps given below:-

Read Further

Sharing Is Caring social bookmark widget for blogger

Sharing Is Caring is one of the best social bookmarking widgets.Here is its picture:-

The twitter icon is up because I had my cursor on it.To get this widget apply the following steps:-
1.Go to Layout—>Edit Html.
2.Save your existing template before making any changes.
3.Click the Expand Widget Templates check box.
4.Now find(ctrl+f) the code:-
</head>
5.Add the code given below directly before </head>
<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCJ9buHDS9QOSw6gt40aahxbsYQ2r8aIF6vr3P4Sj7s3YxMplNeVUTGS_9Vh12gx7nvqwo1mCxMIo_rNHTK2dgyVPiWxI3EyWOoM731BvWtouKQCEkb1ByiOwW-SMwAdhO6E_IsSyIvbFQ/s1600/sharing.png') no-repeat left bottom;
position:relative;
width:540px;
}
div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') 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('http://i941.photobucket.com/albums/ad259/spiceupyourblog/sexybookmarksbuttons.png') 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>
6.Now find(ctrl+f) the code:-
<data:post.body/>
7.Add the code given below right after <data:post.body/>
<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-syndicate'><a href='ADD YOUR FEEDBURNER FEED URL HERE' title='Subscribe to RSS'/></li>
<li class='sexy-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
</ul>
<span class='sexy-rightside'/></div><a href='http://www.techievinayak.co.cc/2010/03/sharing-is-caring-social-bookmark.html' target='_blank'>Get This Blog Gadget</a>
After doing all that see the ADD YOUR FEEDBURNER FEED URL HERE in the code given above and replace it with your Feedburner URL like:- http://superstarvinayak.blogspot.com/feeds/posts/default
Then Save Your Template and it is done.

Pages