6 GRAB THIS AWESOME SOCIAL BOOKMARKING WIDGET WITH 3D EFFECT.

In our previous post,we discussed on “How to Add Animated Follow-us widget to blogger”.

So likewise,in this tutorial we will be dealing with how to add animated social bookmarking widget with 3D effect.

This widget is so cool that when hovered on,spins 360 degrees and spins back when released.
To add the widget on your blog,just follow the instructions below.

Login to Blogger,then go to Design » Page element and select 'Add a gadget'.
Now,locate "HTML/JAVASCRIPT" and select ADD.
Just copy/paste the code below and save the widget.

<style>
#social a:hover{background-color:transparent;opacity:0.7;}
#social img {-moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition:all 0.8s ease-in-out; transition: all 0.8s ease-in-out;}
#social img:hover { -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg);}</style>
<center>
<div id="social">
<!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR FEED URL HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIeRwrqwuAqvcUlwOwBBPYsSwYp_gHalossIBr5iagaK30uLcU9OdQe2cvNlf_3CHy9N_tlUXxFty0PdyLurPaDz-b61JKynG2M1aDI3ycG5sRFikvhfyYBRbSVAbzkWCbhjkS_oDa99zq/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End RssIcon-->
<!--Start Email Rss Icon-->
<a rel="nofollow" title="Get Free Updates Via Email" href="YOUR EMAIL RSS URL HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKC-yW01-1uo6VQlHHA162gbzntUdytr-CVfz0WJ63cBvIBVlh6sdyFkXE-hp6rumqHWmyqjY-i1CNCeMSRJIMbLl_DtTH-Dkd8cYcHx8Tahir0AUlSqZxGAGacuH6ElvUrzo8ZwNLmkbd/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End Email Rss Icon-->
<!--Start Facebook Icon-->
<a rel="nofollow" title="Like Our Facebook Page" href="YOUR FACEBOOK PAGE URL HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4M97PcF8xNpiPBPVb-Z_IUEVWHPLXFdMYFRkaathLgvNQdQ8eobpfsfpjRS-4nl8i-WmyRlMh7mXI2X-xdj7sNz1T0pkNIB3hsBwGKYWVsUFot3I3mJiY0rQqR8lLaY2_9G41kEwKYdTe/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End Facebook Icon-->
<!--Start Twitter Icon-->
<a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR TWITTER URL HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir0aVbHXHydX2402mJnzrAEumNIHNHqwDw5IXFpVSL0Pl8O255f0PJ_RQltFYfvIxuocSSpBPlqGGvtyp1267KCn4hEHPXR5pZGlkskyQK1cRrwz0SPbIO2_HlCoQfrmEAe5lqhtWBURAx/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End Twitter Icon-->
<!--Start Google Icon--> <a title="Follow Us On Google " rel="nofollow" href="YOUR GOOGLE PLUS URL HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgGSZLpT5k_J6AHfesUJWnmuVZbnMVN2BxQjEFK2Tu8jZMr-8U8oPWQuPIxe53xSYbUGfD015KO2l8tSkhefy33JPijF5l6SKHuyeBc_SyfzoiFy18KnioUYcBm_6PSTH_q44hRjhVUzSs/s1600/GOOGLE-PLUS-48x48.png"/></a>
<!--End Google Icon-->
<!--Start Pinterest Icon-->
<a title="Follow Our Pins" rel="nofollow" href="YOUR PINTEREST URL HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQXPpMuezF38H6B7pr3J9ElPTkKinCrvBjmoEMY1muNG6DfYS4QjR7EypB90RHP9sQaFUeVH9zRzwsMIzdixNTXguvySbPa-qjNYZ6dzaENmT8KJ99zReAFWdC2qGBzfFYx3W3fabbXO7V/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a>
<!--EndPinterest Icon--></div>
<!--Start Feed Count Button--> <a href="FEEDBURNER URL HERE" target="_blank"><img alt="Feedburner" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a>
<!--End Feed Count Button--> </center>

NOTE 
If you don't have any of these urls,you can simply remove it for the time being.
Just delete all codes from where you see 'START' to the 'END' part.

Read more »

3 ANIMATED FOLLOW-US WIDGET FOR BLOGS.

Have you ever wondered if it's really possible to have an animated widget?...

If yes,then I'm glad to introduce to you this animated 3D[three dimension] FOLLOW-US widget which can easily catch the attention of your blog visitors.

It was designed in form of a square which rises and changes from gray to a stupefying color when hovered upon.

To add this widget in your blog,here's what you need do →
Login to Blogger,then go to Design » Page element and select 'Add a gadget'.
Now,locate "HTML/JAVASCRIPT" and select ADD.
Just copy/paste the code below and save the widget.

<style>.blogtoolz-flt-wdt{position:fixed; right:10px; top:36%;}
.blogtoolz-flt-wdtimg {float:right; clear:right; margin:1px; -webkit-transition:all .0s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition:all .2s ease-in-out; transition: all .2s ease-in-out;}
.blogtoolz-flt-wdt img:hover{-moz-transform:scale(1.2) rotate(6deg);-webkit-transform: scale(1.2) rotate(6deg);-o-transform: scale(1.2) rotate(6deg); -ms-transform: scale(1.2) rotate(6deg); transform: scale(1.2) rotate(6deg);}</style>
<div>
<style>
.BlogToolz1{display: block;width:64px;height: 64px;background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/facebook_rollout_64x64.png') bottom; text-indent:-99999px;}
.BlogToolz1:hover{background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/facebook_color_64x64.png')bottom; height: 64px;}
</style>
<a href="Your Facebook Link Here"></a>
<style>
.BlogToolz2{display:block;width:64px;height:64px;background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/twitterl_rollout_64x64.png') bottom;text-indent:-99999px;} .BlogToolz2:hover{background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/twitter_color_64x64.png') bottom; height: 64px;}
</style>
<a href="Your Twitter Link Here"></a>
<style>
.BlogToolz3{display:block;width:64px;height:64px;background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/feed_rollout_64x64.png') bottom;text-indent: -99999px;}
.BlogToolz3:hover{background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/feed_color_64x64.png') bottom; height:64px;}
</style>
<a href="Your Rss Feed Link Here"></a>
<style>
.BlogToolz4{display:block;width:64px;height:64px;background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/google_rollout_64x64.png')bottom;text-indent: -99999px;}
.BlogToolz4:hover{background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/google_color_64x64.png') bottom; height: 64px;}
</style>
<a href="Your Google Plus Link Here"></a> </div>
<!-- Animation widget ends -->

That's it.Just replace the necessary things there i.e the blue texts and save the widget.

Read more »

0 HOW TO MOVE BLOGGER NAVIGATION BAR DOWN.

There are couple reasons you might want to keep the default blogger navigation-bar in your blog.

In a post sometimes ago,I gave a quick tip on how you can remove the bar from a blog.
But,if you think the bar is useful and you would like to retain it in your blog,you might consider moving it from its position down to the bottom of the blog.

Here's How To...

Login to Blogger.
Go to Design/Layout»»Edit HTML.[Backup your template in case something goes wrong.]

Check the box next to
Expand Widget Template and search for ]]></b:skin> by pressing CTRL+F

When found,just Copy-Paste the following piece of code directly ABOVE it.

#navbar-iframe {position: fixed;right:0px;bottom:0px;left:0px;}

Next,preview your blog to ensure the are no errors and thereafter,SAVE your template.

That's all.You should see the bar at the bottom of the blog now!!!

Read more »

0 HIGHLIGHT AUTHOR COMMENTS IN BLOGGER.

Many are cases whereby the visitors of a blog go through the stress of viewing each comment on a post in order to locate the author's comment.

In order to save them that stress,it is very necessary to highlight your comments "as a blogger".

Apart from the stress being curbed in the process,it also helps to dignify a blog author's comment amongst several others.

Before we proceed with this tutorial,you might want to spare a little time to go through the following tutorials →

1. Add a Reply Button To Blogger Comments.
2. How To Change “Post A comment” Text in Blogger.
3. How To Customize Blogger Comment-Message.
   
4. Add a Comment Policy To Blogger.
5. Numbered Comment Hack For Blogger Blogs.

How To Highlight Author Comments in Blogger.

First,Login to Blogger.
Go to Design/Layout→→Edit HTML.[Backup your template in case something goes wrong.]

Check the box next to
Expand Widget Template and search for the following piece of code by pressing CTRL+F

<p><data:comment.body/></p>

Note»
The above code will be seen twice,you have to use the second

Next,Replace the code found above with the following snippet of code.

<b:if cond='data:comment.author== data:post.author'>
<p style='border:1px dotted#008e00; color:#00ff00;background:#d80000;width:auto;padding:4px;'>
<data:comment.body/></p>
<b:else/>
<p>
<data:comment.body/></p>
</b:if>

Having done that,preview your template then finally save it.

To change the color,background,border style etc of the comment,simply play around with the css codes highlighted in the snippet above and that will be all.

Read more »

39 HOW TO TAKE SCREENSHOTS ON COMPUTER.

This post can be said to be the third-part on Screenshots-taking,with part 1 & 2 being “How to take Screenshots on Java and Symbian phones.”
Though,those two posts specifically talked about taking screenshots on mobile phones.

In this tutorial,I will be taking you through the flight on “how to take screenshot on both Windows & Mac OS”.
So,fasten your seat-belt & let's begin…

How to Take Screenshot in Windows.

There are couple of ways to capture a screen in Windows.
So,the easiest of them is what we will be going through here.

1. The first is by using the default screen-capture key on every computer,i.e The PrtScn on your keyboard.
   Locate it & let's start.
   • To take the shot of everything currently displaying on the screen including all open windows,press PrtScn.
     This will be automatically placed in the Clipboard.
   • To capture just the active window,press Alt+PrtScn.
   • Now to save the shots,open Microsoft paint by navigating to
     Start » Programs » Accessories » Paint and paste it there.
   • Next,select “File”from the top menu and choose “Save as”
   • Finally,give it any name you want and choose a directory to save the image.
2. The second method involves using the “SPINNING TOOL”.

   This tool is by default part of both Windows 7 & Windows vista.

   It is capable of capturing a specified area of a page instead of the whole screen as with the previous method.
   You can choose to use an amoeba-like[irregular] shape,a rectangle or capture the whole screen.

   How To Use “SNIPPING TOOL”.

   • Go to start » All Programs » Accessories » Snipping Tool.
   • Select a snipping type by clicking on the arrow next to “New” button.
   • Select the window or portion of the screen you want to capture using your mouse.
   • To highlight part of the screenshot,click on the pen/highlighter button in the menu.
   • Likewise,to capture a menu/drop-down menu,press ESC after you've launched the Snipping tool,then open the menu you want to capture & press Ctrl + PrtScn.

THAT'S ALL FOR WINDOWS.

How To Take Screenshot on Mac OS X.

Mac OS has an in-built screen-grabbing function,which enables you to take shots by clicking on some key combinations.

When these keys are pressed,a click sound will be heard,then the screen-shot will immediately be saved in .PNG format.

• To capture the whole screen,press Cmd + Shift + 3 all at once.
• To capture just a portion of the screen,press Cmd + Shift + 4.
  Just drag the crosshair that appears around the area to be captured.
• To capture a specific window,press Cmd + Shift + 4 and immediately after that,hit the Spacebar.
  The crosshair will then turn into a small camera,highlighting all menus that can be captured.

That's all.
I believe taking of screenshots shouldn't be a difficult task for you any longer.

For contributions/questions,don't forget to leave your comments behind.

Read more »