FUN IT MASTI: March 2012

Awesome CSS3 animated Menu for blogger Blog

There are many menus available on internet .Here I am saying about some pure css3 menus for your Blogger Blog.Here is a collection of pure css3 sliding animation menus.Let us see how to setup a beautiful menu for your Blogger Blog.

Want to see demo??Click the link below.

View Demo

Go to Design->Page Elements [Take Layout in new template]
Click on Add gadget just below the Header

Select HTML/Javascript and leave title as blank and copy the corresponding code of menu listed below
You can change RED highlighted text with your Menu title and GREEN with LINK

Add Elemic Blue Menu

Add Green Menu

Add Grape Purple Menu

Add Light-Dark SkyBlue Menu

Add Tree Brown Menu

I hope you enjoyed this Menu and also except more from us.

Create your own google type search engine

Here is a funny and interesting trick I am going to show you.Create a Google Type search engine with your Google type Logo.It can be done very easily..

Netoops Blog Search Engine check it

View Demo

Go to FunnyLogo
Select the logo type (eg: Google type,Yahoo type,Harry potter type)

Enjoy.......!Have a nice Day...

How to Disable lightbox in blogger

Blogger also provides lightbox for viewing images.But if you take one image,it will open and the whole pictures in the page are listed ,Sometimes it may be a good feature also a bad feature.Here is a Simple trick to disable lightbox in blogger.

Go to Settings->Formatting (as shown in figure)

You see a Option Showcase images with Lightbox select No.

That all.No longer Light box appear in your blog.

Change Older and Newer posts with Post Titles for Blogger

change older posts newer posts with titles

Change posts Navigation Links Newer posts and older posts by the Corresponding Post Titles.This Awesome Blogger Hack lets your blog visitors to Know Newer and Older posts and they can go to that Posts.I got this hack from YABTB blog .This hack is done by MS-potilas of YABTB blog.All credits goes to YABTB. This awesome trick done using some jquery script.

Add Jquery script

Copy and paste the below code before </body>

<br /> <!--Start post title http://netoopsblog.blogspot.com --><br /> <a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGKSDpeTYBNngVoKNaSDEMaOULa3ccyDTk2OwPtaiT0PFP27Hd0c6af96wydXPQXcRHxdgFS4hStHWHefPjdvDgQ2SpiElrpbH9NGBbU06Vgi4nmOtL41khatH6ISfTpRZtnwBakCD2hc/s1600/1x1juice.png'/></a><br /> <b:if cond='data:blog.pageType == &quot;item&quot;'><br /> <script type='text/javascript'>/*<![CDATA[*/var urlToNavTitle={};function getTitlesForNav(d){for(var c=0;c<d.feed.entry.length;c++){var e=d.feed.entry[c];var b="";for(var a=0;a<e.link.length;a++){if(e.link[a].rel=="alternate"){b=e.link[a].href;break}}if(b!=""){urlToNavTitle[b]=e.title.$t}}}document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"><\/script>');function urlToPseudoTitle(a){var b=a.match(/\/([^\/_]+)(_.*)?\.html/);if(b){b=b[1].replace(/-/g," ");b=b[0].toUpperCase()+b.slice(1);if(b.length>28){b=b.replace(/ [^ ]+$/,"...")}}return b}$(window).load(function(){window.setTimeout(function(){var a=$("a.blog-pager-newer-link").attr("href");if(a){var b=urlToNavTitle[a];if(!b){b=urlToPseudoTitle(a)}if(b){$("a.blog-pager-newer-link").html("&lt;&lt; Newer Post<br />"+b)}}a=$("a.blog-pager-older-link").attr("href");if(a){var b=urlToNavTitle[a];if(!b){b=urlToPseudoTitle(a)}if(b){$("a.blog-pager-older-link").html("Older Post &gt;&gt;<br />"+b)}}},500)});/*]]>*/</script><br /> </b:if><br /> <a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGKSDpeTYBNngVoKNaSDEMaOULa3ccyDTk2OwPtaiT0PFP27Hd0c6af96wydXPQXcRHxdgFS4hStHWHefPjdvDgQ2SpiElrpbH9NGBbU06Vgi4nmOtL41khatH6ISfTpRZtnwBakCD2hc/s1600/1x1juice.png'/></a><!--End post title http://netoopsblog.blogspot.com -->

Add CSS code

Add the following css code before ]]></b:skin> (Add CSS code another way)

.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}
#blog-pager{height:100% !important;}

Add Page Peel effect with jQuery & CSS to Blogger

You may saw this awesome trick used by many professional and other Websites/Blogs.This Page peel is used to Show ads ,this page peel attract Blog visitors and they may have the tendency to click on ad and your earnings increases.Also this page peel can be used to increase your Subscribers.Here I am going to show you how to add a page peel trick to Blogger blog.

Click the link below to view demo

View Demo

Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)

Copy the below code inside <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Add page peel effect to blogger blog

Step 2 :

Go to Design->Edit HTML
Copy and paste the below code above </head>

Step 3:

Copy the below code inside <body> or <body ...............>

Change can the RED highlighted text with url image url that you want,else leave it default(needn't change)
Change the BLUE highlighted text with your feed URL or place your advertisement

Save the Template

You are done..! If any problem persists please do comment.

Change Animated favicon to Blogger blog

Changing the favicon of your blog is a simple trick.By default blogger puts the blogger orange color logo to favicon.This can change to your blog logo.
Favicon appears next to the URL or title in the browser.If you have a logo of your blog then you can simply upload to blogger.Else there are many sites providing free favicon generator.See Netoops blog favicon on the top your browser.
Follow the instructions below.

Go to Design->Page Elements
You can see a small bar with blogger icon and a link EDIT click it.

Then select your blog's logo by clicking Browse and click on Save.

Insert Animated Favicon

You can also insert Animated gif favicon.

Go to Favicon Generator
Upload your blog's logo and give scrolling text then click Generate favicon

It will generate your animated favicon,right click on the icon shows there and Save it.Then upload to root of website or upload to free image uploading sites like tinypic you will get the link to image from there.

Go to Design->Edit HTML
Copy the following inside <head>

Then click save.

If any problem with this please inform via comment.Feel free to ask.

FUN IT MASTI

Awesome CSS3 animated Menu for blogger Blog

Add Elemic Blue Menu

Add Green Menu

Add Grape Purple Menu

Add Light-Dark SkyBlue Menu

Add Tree Brown Menu

Create your own google type search engine

How to Disable lightbox in blogger

Change Older and Newer posts with Post Titles for Blogger

Add Jquery script

Add CSS code

Add Page Peel effect with jQuery & CSS to Blogger

Add page peel effect to blogger blog

Change Animated favicon to Blogger blog

Insert Animated Favicon

Search This Blog

Video

Blog Archive