Friday, May 31, 2013

Multi Hover Effect On Blogger Images Using Pure CSS

Today I'm going to show you how to add an amazing mouseover effect for Blogger images using only CSS, in which moving your mouse over an image from different directions (from above, from below, etc) will cause an overlay transitioned in from the same vector. This trick will change not only the images appearance when moving mouse over them, but will also allow you to add inside a text with a description.

hover effect, mouseover, blogger hover effects

You can see the effect on this image below: try moving your mouse from the left, right, and above.

hover right hover top hover left hover bottom

Adding Hover Effect From Different Directions on Blogger Images

First thing to do is to add the CSS style to our Template:

Step 1. From Blogger Dashboard, go to Template and press the Edit HTML button

Step 2. Search for the </head> tag - to find it, click anywhere inside the code area, press CTRL + F keys and type it in the search box.

Step 3. After you found it, add the following style just above it:

<style>
/* The container and the image */
div.multi-hover {
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    width: 100%;
    height: 358px;
    line-height: 358px;
}
div.multi-hover img {width: 100%;}

/* The texts that, by default, are hidden */
div.multi-hover span {
    color: #FFF;
    font-size: 32px;
    font-weight: bold;
    height: 100%;
    opacity: 0;
    position: absolute;
    text-align: center;
    transition: all 0.3s linear 0s;
    width: 100%;
}

/* And this is what will generate the effect */
div.multi-hover span:nth-child(1) { /* right */
    background: none repeat scroll 0 0 rgba(255, 189, 36, 0.6);
    left: 90%;
    top: 0;
}
div.multi-hover span:nth-child(2) { /* top */
    background: none repeat scroll 0 0 rgba(106, 170, 255, 0.6);
    left: 0;
    top: -80%;
}
div.multi-hover span:nth-child(3) { /* left */
    background: none repeat scroll 0 0 rgba(204, 87, 166, 0.6);
    left: -90%;
    top: 0;
}
div.multi-hover span:nth-child(4) { /* bottom */
    background: none repeat scroll 0 0 rgba(97, 181, 115, 0.6);
    left: 0;
    top: 80%;
}

div.multi-hover span:hover {opacity: 1;}
div.multi-hover span:nth-child(2n+1):hover {left: 0;}
div.multi-hover span:nth-child(2n):hover {top: 0;}

</style>

Step 4. Save the Template

Now we are going to add the HTML that is nothing but a DIV where we included four SPAN tags with texts and an image:

Step 5. Choose Posts, create a New Post, click on the HTML tab (1) and paste this code inside the empty box:

<div class=multi-hover>
<span>hover right</span>
<span>hover top</span>
<span>hover left</span>
<span>hover bottom</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLEjMEkTzumU3tlcwwmuNKZAoDsxYkNakq8v5vEiBO4HzpF0PCYBUH24sKyAeWxQhZsMxwYyh0njxUS0lfcJzAClSvgmVGmAUBWItY8ZQttFQcb0HSSIJ-oZBQC20oBPf2jOTnSySAhIY/s1600/flowers">
</div>

Add your own text/description to "hover right", "hover top", "hover left" and "hover bottom" (2) and replace the url in blue with the image URL (3) where you want to apply the effect.

Important! Do not click on the Compose tab, otherwise the changes will be lost.

Step 6. After you finished editing your post, click Publish (4)

And that's it... enjoy! :)

Wednesday, May 29, 2013

Google Buzz's last-gasp addition to your Google Drive

This QuickTip is about a file that Google Buzz is going to put into your Google Drive, as part of it's final turn-off routine, for all Buzz accounts that haven't yet been deleted.

Google Buzz was one of Google's early-and-short-lived social networking attempts, but was used by some bloggers looking to promote their blogs.

It was closed down in October 2011

I haven't seen it published in any of the Google blogs that I follow, but recently I was sent an email saying that the last step in the close-down will happen on or after 17 July 2013, when Google will save a copy of the Buzz posts from any remaining active Buzz accounts to the account-holders Google Drive.

There will be two types of file, and the files won't count against your storage limits. They say:

The first will be private, only accessible to you, and have a snapshot of the Google Buzz public and private posts that you wrote.
The second will have a copy of your Google Buzz public posts. It will be visible to anyone with the link, unless you change it later, and may appear in search results and on your Google Profile (if you've linked to your Buzz posts). Any existing links to your Google Buzz content will redirect to this file.

Something to be aware of, if you used Buzz to make controversial comments: Comments that you made on other users' posts will be saved to those users' files. After the file-download described here id done, the other user can change the sharing settings of those files, if they choose to do so. And if they do, and if you have commented on another person's private post, that person could choose to make that post and its comments public. To remove the chance of that happening, you could delete all your Buzz content well before 17 July 2013

The Buzz-download Google Drive files will only contain comments from users who had enabled Google Buzz. They won't include any comments that you deleted before Google moved your data to your Google Drive.

Tuesday, May 28, 2013

AdSense now allow changes to their advertisement code

This QuickTip is about a change to AdSense's policies about modifying their ad code: in short, you are now allowed to change the code in certain way, to achieve certain things.

AdSense have announced changes to their "Modifying ad code" policy.

In the past, publishers weren't allowed to change AdSense ads in any way other than what could be done through the AdSense ad-code generator or Blogger's Add-a-gadget / Adsense tools.

Now, however, some changes are allowed, so you can do things like:

Responsive design: creating a single webpage that adapts to the device on it’s being viewed on (eg laptop, smartphone or tablet).
A/B testing: creating multiple versions of a page and comparing how they are used to see which page is the most effective.
Setting custom channels dynamically:
Ad tag minification: Enabling your site pages to load faster by reducing the amount of data to be transferred.

In several places, AdSense say that the goals of these changes should be to "maximize ad and user experience" - and most of their Terms and Conditions about what you're not allowed to do still hold, so it's clearly not carte blanche to make any changes you want.

Provided you have enabled a mobile template then responsive / adaptive website design isn't and issue which Blogger users have to worry much about - although there are some things you can and should do.

A/B testing is certainly relevant- and I'll be looking to see how much support their code offers for this.

Right now, I'm not sure how relevant dynamic custom channels and minification are for Bloggers - will be investigating this over the coming weeks.

See AdSense's help-centre article for details and the specific code snippets related to the these types of changes.

Sunday, May 26, 2013

How To Add Social Media Icons to Blogger Header

This tutorial will help you to add social media icons in the top right corner of the page which could increases the likelihood that readers can follow through the various social networks. There are several ways to do this, like adding a new widget section to the blog header but now, we'll do it using an unordered list that uses icons of Facebook, Twitter, Google+ and blog feed, and as a bonus, the icons will rotate when you hover over them.

You can see a demo in this test blog.

Adding Social Media Icons to Blogger Header

Step 1. From your Blogger dashboard, go to Template and click on the Edit HTML button:

blogger blogspot, blogger template, blogger gadgets

Step 2. To expand the style, click on the small arrow on the left of <b:skin>...</b:skin> (screenshot 1), then click anywhere inside the code area to search (using CTRL + F) for the ]]></b:skin> tag (screenshot 2) and add this code just above it:

/* Social icons for Blogger
----------------------------------------------- */

#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
display:block;
clear:both;
z-index: 2;
position: relative;
}
.social-media-icons {
display:table
}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

Screenshot 1:

Screenshot 2:

Step 3. Now search for this line

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Step 4. And just above it, add this code:

<div class='social-media-icons' id='social-icons'>
<ul>

<li class='media_icon'><a href='http://facebook.com/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGVj6zWCkAWDbDGJusvJGM_Rvblczk6BCon1TlYBVRHMb-XfLudJ6ZOAzCq3VX1yD6a-ri2CIKhml-TcexXfNJ34aDtqecQ7U31r7XHDXJ5Gv8JTL0A4YIKO2H3Ma9JPUCehkZSz0JrKg/s1600/Facebook.png'/></a></li>

<li class='media_icon'><a href='http://twitter.com/#!/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVOEYs8bW9YgOWFDduO99khWfgjIe5CRSso8JizAS4_DX2vLtyKzyumRKJj6TcXN-ieMbP6LFVxRYT8LoxO4V9CORYWTY9Jfi0I5y3M73-OKgNlYT3QuuG2GFQlgTGJId1caG0XzfU0N0/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFIVf9XGZqujNb-Rfkj0xq_8OrbWE7AEGBlVmNrkIP3ciHlpc4-Hipu5HZ2hXundAt96WfmLOk5t_50-3UJihQI9ZuvHp9pe3CCK12rW_iLwAR-hn0XMPuJC7ToCkZzlKAN9h4Q0W631s/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://name-of-your-blog.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlqrJGbHdDfSJETbj5uRA2vriU0AN-ZJtZ9cgTds0k0tzPeohkkpbzS8rn-Ob05zAaf2UsxJeL1scQwb7EYMOhSwsIvEeu5XuA5GIweQHjcxBA_D-ypWFbR6941W04AoUqf9-X7XpEYWc/s1600/RSS.png'/></a></li>

</ul></div>

Customization

- Change what's in red with your usernames and id: the first is your Facebook username, the second is that of Twitter, in the third you should change the X by the ID of your Google+ profile and in the fourth you will put the name of your blog.
- To change the icons, just replace the urls in blue with the ones of your images.
- You can add more icons if you want, you just have to add before </ul></div> a line like this for each extra icon you want:

<li class='media_icon'><a href='Link URL'><img border='0' src='Image URL'/></a></li>

Step 5. Finally, Save the Template to apply the changes.

The effect is done with CSS3, so this effect will not work in older browsers.

Saturday, May 25, 2013

Fading Box With Newer/Older Posts Links and Titles for Blogger

The navigation links are those that appear at the bottom of the page that says "Older Posts", "Newer Posts" and "Home" and help us to move through the blog posts. This tutorial will show you how to change the word "Older Posts" and "Newer Posts" for post titles and make these to appear in a box "fading" when you scroll down the page.

You can see it in action on this demo blog - when you scroll down, the navigation links will appear showing the post titles for the older/newer entries.

This way to display the navigation links will be seen only in individual entries, while those on the homepage and other parts of the blog will still be displayed as usual.

How to Add Navigation Box with Newer & Older Posts on Blogger

Step 1. From your Blogger Dashboard, go to Template > Edit HTML, click anywhere inside the code area and search - using CTRL + F - for this line:

<b:include name='nextprev'/>

Screenshot:

Step 2. REPLACE the code above with this one:

<b:if cond='data:blog.pageType != "item"'>
<b:include name='nextprev'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div id='blog-pager-box'>
<h4>Other posts published:</h4>
<b:include name='nextprev'/>
</div>
</b:if>

Note: you can change the "Other posts published" title with your own

Step 3. Now add just above </head> the following code:

<b:if cond='data:blog.pageType == "item"'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script>
// <![CDATA[
$(function() {
$('#blog-pager-box').toggle()
.css({
width: '520px',
height: '150px',
position: 'fixed',
padding: '1em',
bottom: 0,
right: 0,
background: 'url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1dRLxrZloI_3gwNBxEdCnpTYeShbODXtKipGDazklddylB9y0BjE2cuCs9HUVVMPAWcubNNWV3i5YVceX9oO0_vTE9IYLxD9tvHkM8ovuxGUwhsGbMZHr01OLa9W96V6V7FnlOd9CaJa3/s1600/paper.jpg)'
});

$(window).scroll(function() {
if($(this).scrollTop() > 100) {
$('#blog-pager-box').fadeIn();
} else {
$('#blog-pager-box').fadeOut();
}
});
});
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$(".blog-pager-newer-link").html("<div>Newer Posts:</div>" + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$(".blog-pager-older-link").html("<div>Older Posts:</div>" + olderLinkTitle);
});
});
// ]]>
</script>

<style type='text/css'>

</style>
</b:if>

Note that this gadget uses jQuery, so try to have only one version.

Customization:

- There are three URLs in blue, the first is the paper background image for the box, the other two are the icons that correspond to the arrows. You can replace these with your own.
- In green you can see where to change the text colors.
- The red number is the distance in pixels that activates the gadget, this means that the box will appear when you scroll down the 100px. You can use a higher value if your posts are usually long and therefore the "height" of the scroll is greater.

Step 4. Now, Save the Template and that's it!

You can also change the "Older Posts" and "Newer Posts" links with posts titles or images.

Friday, May 24, 2013

New Blogger Widget: Contact form - Change Style & Install in a Static Page

Just a few days ago, Blogger introduced a new widget. It is about a contact form that you can add to your blog easily. It is very basic, because - at least for now, does not permit incorporating files or send anything other than plain text.

The contact form for Blogger has the following features:

Field for the user name
Field for email
Field for the message (textarea)
Submit Button

Screenshot

contact form, blogger gadgets, static page

The design is simple and the text colors inherit the section where you add it. At the moment, this widget has no configuration options and is not available for dynamic views.

How to Add Contact Form to Blogger

To add it to your blog, just select the Layout tab, then click on Add a gadget in the section you want to show, for example, in the sidebar. Then, select the More gadgets tab and add the Contact Form gadget.

blogger gadgets, blogger widgets, contact form

Styling Contact Form

As the background is transparent, the form will integrate well, aesthetically speaking, but nevertheless it is easy to modify using Style Sheets (CSS) to the appropriate selectors. Here's an example:

/* Contact Form Container */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}

/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}

/* Submit button style */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}

/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}

This is how it will look like after applying the style:

contact form, blogger gadgets, contact form for blogger

To add this style, go to Template > Edit HTML, click on the sideways arrow next to <b:skin>...</b:skin> and paste the code just above ]]></b:skin> (press CTRL + F to find it):

How To Add Contact Form In A Static Page

First step is to add the Contact Form gadget (Layout) and second, to edit the template (Template > Edit HTML) to remove most of the gadget. You have to search for the id "ContactForm", expand the widget by clicking on the black arrow on the left (same with the includable) and then delete the part that I have colored in red (see below):

Part to be removed:

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'>
<b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
</b:if>
<div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
        </div>
      </form>
    </div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

After you have saved the template, go to Pages and paste the following code into a new blank page with the title you want:

<div class='widget ContactForm' id='ContactForm1'>
<div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>Name<p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>E-mail *</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Message *</p>
        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
      </form>
    </div>
</div>
</div>

Messages will be sent to the same email that you have registered in Blogger.

Here's a demo page where you can test it (it is an account that I don't use, so don't expect reply).

That's it! If you have any questions or comments please post below.

Monday, May 20, 2013

How To Add Snow Effect On The Blogger Mouse Cursor Area

Hello! `How are you guys? Adding snow effect when you move the mouse cursor will change the look of your blog. here is the effect of fresh snow in your area simple mouse blog. This will make your blog more cold than snow falling from the mouse cursor. Effect is very simple gadget to use. So this is very fast. I tested this effect in Internet Explorer, Mozilla Firefox and many other web browsers. This simple and not flash based image works great! I hope you enjoy using this very cool snow effect gadget. So, let's see how to Add Snow Effect On The Mouse Cursor On The Blog..

Live Demo

Snow Effect On The Blogger Mouse Cursor Area Generator

How To Add Snow Cursor Mouse Cursor Area Widget To Blogger?

Choose a type of Mouse Cursor below
Click on "Genetate" button
Finally click on "Add to Blogger" to add it to your blog.

Note: We are going to add more cursor, cursor pointer, cursors, mouse cursor, Totally Free Cursors, Myspace Cursors, Animated Cursors and cursors oftenly so keep visiting this page.

How to Install Blogger Snow Cursor Code Generator Widget

Now let's start adding it...

Step 1. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link.

Blogger Tips And Tricks|Latest Tips For Bloggers

Step 2. After click on Add a Gadget link A pop-up box will open now
with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget.

Step 3. Select 'HTML/Javascript' and add the one of code given below.

Step 4. Now Click On Save 'JavaScript' You are done.

How to make snow cursor in blogspot

Follow these very simple steps make a snow effect on the mouse cursor on the blog.

Step 1 : Go To Blogger > Design > Page Elements

Step 2: Click on "Add a Gadget" link

Step 3: From the pop-up window, choose HTML/JavaScript

Step 4: Copy and paste the following code below

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script type="text/javascript">
// <![CDATA[
var colour="black";
var sparkles=100;

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}

}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
};
document['write']('<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>');
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {

tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

And now click Save

# you can change :

var colour="black";

How to Make Sparkling Cursor [Starry Cursor] Snow Effect

never seen a blog with a star-studded Cursor ? follow these steps: Make a Starry Cursor

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script type="text/javascript">
// <![CDATA[
var colour="black";
var sparkles = 65;

var x = ox = 400;
var y = oy = 300;
var swide = 800;
var shigh = 600;
var sleft = sdown = 0;
var tiny = new Array();
var star = new Array();
var starv = new Array();
var starx = new Array();
var stary = new Array();
var tinyx = new Array();
var tinyy = new Array();
var tinyv = new Array();
window.onload = function () {
if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i = 0; i < sparkles; i++) {
var rats = createDiv(3, 3);
rats.style.visibility = "hidden";
document.body.appendChild(tiny[i] = rats);
starv[i] = 0;
tinyv[i] = 0;
var rats = createDiv(5, 5);
rats.style.backgroundColor = "transparent";
rats.style.visibility = "hidden";
var rlef = createDiv(1, 5);
var rdow = createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top = "2px";
rlef.style.left = "0px";
rdow.style.top = "0px";
rdow.style.left = "2px";
document.body.appendChild(star[i] = rats);
}
set_width();
sparkle();
}
}

function sparkle() {
var c;
if (x != ox || y != oy) {
ox = x;
oy = y;
for (c = 0; c < sparkles; c++) if (!starv[c]) {
star[c].style.left = (starx[c] = x) + "px";
star[c].style.top = (stary[c] = y) + "px";
star[c].style.clip = "rect(0px, 5px, 5px, 0px)";
star[c].style.visibility = "visible";
starv[c] = 50;
break;
}
}
for (c = 0; c < sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}

function update_star(i) {
if (--starv[i] == 25) star[i].style.clip = "rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i] += 1 + Math.random() * 3;
if (stary[i] < shigh + sdown) {
star[i].style.top = stary[i] + "px";
starx[i] += (i % 5 - 2) / 5;
star[i].style.left = starx[i] + "px";
} else {
star[i].style.visibility = "hidden";
starv[i] = 0;
return;
}
} else {
tinyv[i] = 50;
tiny[i].style.top = (tinyy[i] = stary[i]) + "px";
tiny[i].style.left = (tinyx[i] = starx[i]) + "px";
tiny[i].style.width = "2px";
tiny[i].style.height = "2px";
star[i].style.visibility = "hidden";
tiny[i].style.visibility = "visible"
}
};
document['write']('<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>');
function update_tiny(i) {
if (--tinyv[i] == 25) {
tiny[i].style.width = "1px";
tiny[i].style.height = "1px";
}
if (tinyv[i]) {
tinyy[i] += 1 + Math.random() * 3;
if (tinyy[i] < shigh + sdown) {
tiny[i].style.top = tinyy[i] + "px";
tinyx[i] += (i % 5 - 2) / 5;
tiny[i].style.left = tinyx[i] + "px";
} else {
tiny[i].style.visibility = "hidden";
tinyv[i] = 0;
return;
}
} else tiny[i].style.visibility = "hidden";
}
document.onmousemove = mouse;

function mouse(e) {
set_scroll();
y = (e) ? e.pageY : event.y + sdown;
x = (e) ? e.pageX : event.x + sleft;
}

function set_scroll() {
if (typeof (self.pageYOffset) == "number") {
sdown = self.pageYOffset;
sleft = self.pageXOffset;
} else if (document.body.scrollTop || document.body.scrollLeft) {
sdown = document.body.scrollTop;
sleft = document.body.scrollLeft;
} else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft = document.documentElement.scrollLeft;
sdown = document.documentElement.scrollTop;
} else {
sdown = 0;
sleft = 0;
}
}
window.onresize = set_width;

function set_width() {
if (typeof (self.innerWidth) == "number") {
swide = self.innerWidth;
shigh = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientWidth) {
swide = document.documentElement.clientWidth;
shigh = document.documentElement.clientHeight;
} else if (document.body.clientWidth) {
swide = document.body.clientWidth;
shigh = document.body.clientHeight;
}
}

function createDiv(height, width) {
var div = document.createElement("div");
div.style.position = "absolute";
div.style.height = height + "px";
div.style.width = width + "px";
div.style.overflow = "hidden";
div.style.backgroundColor = colour;
return (div);
}
// ]]>
</script>

And now click Save

# you can change :

var colour="black";

Color Code Generator

Snow Effect for Blogger Blogs! Make snow fall from your blog!

Show Falling Christmas Snow on your Blogs!

That’s All!

Hope you have enjoyed the post.

Wednesday, May 15, 2013

How to change mouse cursor in blogger blog to animated cursors

How to change mouse cursor in blogger blog to animated cursors.One of the best way to add extra fun to your blog is, changing mouse cursor on your blog. Changing the mouse cursor in blogger or blogspot blogs is very easy.This tutorial will help you to change the mouse cursor of your blog to animated cursors.Many bloggers are asking such kind of questions but there is no tutorial available on the internet.I created this post because there are a blogger friend who asked how to change the pointer / cursor on the blogger. This you can do to decorate the look of blog.

Live Demo

I take the cursor image from http://www.cursors-4u.com and http://rw-designer.com you can change it anytime depends on your festive moods.

How to Install mouse cursor in blogger blog to animated cursors

How to add HTML-CSS-Javascript Codes to your Blog ?

This is very simple and easy you only follow below steps and add this widget in your blog.

Step 1 Log-in to your Blogger account.

Step 2 Backup your Template.

Step 3 Click on The Template>> Edit HTML>> Proceed.

Step 4 Now find [by pressing Ctrl + F ] this code in the template:

</head>

And immediately Before it, paste this code:

And now click Save Template

Change Mouse Cursor Generator by 24work.blogspot.com

How To Add Mouse Cursor Widget To Blogger?

Choose a type of Mouse Cursor below
Click on "Genetate" button
Finally click on "Add to Blogger" to add it to your blog.

Note: We are going to add more cursor, cursor pointer, cursors, mouse cursor, Totally Free Cursors, Myspace Cursors, Animated Cursors and cursors oftenly so keep visiting this page.

Blogger MySpace Cursor Code Generate

You can change the appearance of the cursor on the MySpace profile page (the cursor is the little that moves on the screen by moving the mouse). For example, you could make the appearance of the cursor as a question mark when the user hovers over an object.The widget is originally developed by code-generator.net, i just changed something in the widget.

How to Install Blogger MySpace Cursor Code Generator Widget

Now let's start adding it...

Step 1. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link.

Step 2. After click on Add a Gadget link A pop-up box will open now
with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget.

Step 3. Select 'HTML/Javascript' and add the one of code given below.

Step 4. Now Click On Save 'JavaScript' You are done.

Saturday, May 11, 2013

NOKIA LUMIA 928 with wireless charging

Verizon exclusively marketing Nokia’s new Lumia 928 in US market. This model probably would be available to worldwide markets on next week of May. This slimmer, lighter and unibody polycarbonate body is an upgrade of previously launched Lumia 920. Though we’ve 8 core processor smartphone already in hand but still this dual core processor based mobile with 1GB RAM and 32GB internal memory could turn NOKIA users to grab one.

Major negative side of this Nokia Lumia 928 having no FM Radio and no external card slot. Else this Lumia 928 could be your best handy gadget from the house of NOKIA – connecting people since very long time.

Nokia Lumia 928

Here are some salient features of Nokia Lumia 928

1.5 GHz Dual Core Processor
4.5 inch AMOLED Display
8.7MP PureView Camera with Carl Zeiss Lens
541 hours of Standby Time

Release Date: May 2013

SIM System:Single GSM microSIM

Network:

*2G: GSM/GPRS/EDGE: 850 / 900 / 1800 / 1900 MHz

*3G: WCDMA/HSPA: 850 / 900 / 1900 / 2100 MHz

*4G: LTE

Build:

*Processor: 1.5 GHz Dual Core Qualcomm Snapdragon S4 Processor

*GPU: Adreno 225

*RAM: 1.0GB

*In-Built Memory: 32 GB

*Expandable Memory: No external memory card slot

Body:

*Dimension H x W x D: 133.0mm X 68.9mm X 10.1mm

*Weight: 162.0 gram

*Available Color: Black, White

Display: Big TrueColor display with AMOLED Super-sensitive Touch screen with Corning Gorilla Glass 2 for better viewing and gaming experience

*Size: 4.5 inch

*Type: WXGA TrueColor HD+ AMOLED IPS Capacitive Full Super-Sensitive Touch Screen Display with Corning Gorilla Glass 2 protection

*Screen Resolution: 768 x 1280 pixels @334ppi

*Display Colors: 16 Millions

Camera: Dual Camera

*Main Rear Camera: 8.7 MP PureView Full HD Autofocus Camera with Carl Zeiss Lens and Xenon Flash

*Image Resolution: 3264 x 2448 pixels (highest)

*Features: Touch Focus, Geo Tagging, Automatic motion blur reduction, HD Video Recording etc.

*Front Camera: 1.3 MP Camera for video recording, still image and video calling

*Image Resolution: 1280 x 960 pixels

Connectivity:

*GPRS/EDGE: Yes

*Bluetooth: Yes, V 3.0

*WLan / Wi-Fi: Yes 802.11 a/b/g/n with Wi-Fi Hotspot for up to 8 devices

*GPS: S-GPS, aGPS with GLONASS

*NFC: Yes

*USB: MicroUSB 2.0

*3.5mm Audio Jack

Media Player:

*Audio: MP3, MP4, WAV, WMA, AAC, AMR, 3GP and some more

*Video: MP4, MPEG4, WMV, 3GP, DivX, Xvid, MOV and some more

FM Radio: NO (Internet Radio)

Messaging: SMS / MMS / IM /Email (POP3/SMTP/IMAP4)

Operating System: Windows Phone 8

Web Browser: Internet Explorer 10 support HTML/Flash

Other Software: Lync, SkyDrive, Office 365 (Word, Excel, Powerpoint, One Note), Google Talk, Adobe Acrobat Reader, Skype, Facebook, Twitter, LinkedIn, Flickr, HERE Maps etc.

Sensors: Ambient Light Sensor, Accelerometer, Proximity Sensor, Gyroscope, Magnetometer

Ringtones: MP3, MIDI, MP4, Polyphonic 64 Cord

Battery: Model- BV-4NW

*Type: Wirelessly rechargeable non-removable Lithium-Ion

*Capacity: 2000 mAh

*Stand-by Time: Up to 606 hours (2G)

*Talk Time: Up to 11.8 Hours (2G)

*Music Play: Up to 80 hours

SAR Value: No specific SAR data found yet.

** FCC and IC limits for SAR Value is 1.6 W/kg averaged over 1 gm of human tissue.

If you think that any of these information contains wrong information and need an upgrade or change, please kindly inform via comment box below. Your valuable comments will definitely make this blog rich and informative also.

**Disclaimer:Information and images collected mainly from manufacturer's website, manuals, user guides and some other online resources. Only some editorial touch given for better understanding and viewing experience. Author of this blog will not bear any liabilities on this regards.