Change Older and Newer posts with Post Titles for Blogger

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 Spiceupyourblog.com .This trick done using some jquery script.

Add Jquery script

• Copy and paste the below code before

<br /><!--Start post title http://netoopsblog.blogspot.com --><br /><a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikZ_t5NVft4aFH5Q3wYHoqmiX9YPnKOYWxcIaMl_6Ym4URZG2wD3YJgIjeojDTnwW9KswlR3GBRb6BrtTTd50TxVQIA5M2P7fbJnK3ZCY3rUBnHnDzbMZYuCMWkURHfPfAlwW_cxdq17g/s1600/1x1juice.png'/></a><br /><b:if cond='data:blog.pageType == "item"'><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(/\/([^\/_]+)(_.*)?\//);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")/("<< 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")/("Older Post >><br />"+b)}}},500)});/*]]>*/</script><br /></b:if><br /><a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikZ_t5NVft4aFH5Q3wYHoqmiX9YPnKOYWxcIaMl_6Ym4URZG2wD3YJgIjeojDTnwW9KswlR3GBRb6BrtTTd50TxVQIA5M2P7fbJnK3ZCY3rUBnHnDzbMZYuCMWkURHfPfAlwW_cxdq17g/s1600/1x1juice.png'/></a><!--End post title http://netoopsblog.blogspot.com -->

Add CSS code

• Add the following css code before ]]> (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

Step 3:

• Copy the below code inside   or   
  

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

• Then click save.

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

Link Nudge using css3 and jquery blogger widget

This is a Simple Link nudge Effect tutorial.You can add this to links in your Blog.While Mouse over the link a simple animation works.This can be done through two methods.You can use any one of these.

1. Through CSS3 .
2. With jQuery Effect.

Live Demo of Link nudge is following





Live Demo of Link nudge is following

• Blogger Widgets
• Blogger Tips
• Increase Traffic
• Page Navigation
• SEO
• Blogger Hack
• Widget Generators

Link Nudge Using CSS3

• Go to Blogger Account
• Design -> Edit HTML
• Find ]]>  and copy the below code BEFORE it

.noopln {
-moz-transition: all 0.1s ease-in 0s ;
-webkit-transition: all 0.1s ease-in 0s ;
-o-transition: all 0.1s ease-in 0s ;
}

.noopln:hover {
margin-left: 12px;
}

• Save it.
• If you want link nudge effect to a link add class noopln to each link

Eg: Blogger

If you want this Link Nudge Effect to labels follow the steps below

• Go to Design->Edit HTML
• Find and copy the following code BEFORE it

.noopln,Label li,#Label1 ul li a,.Label li a {
-moz-transition: all 0.2s ease-in 0s ;
-webkit-transition: all 0.2s ease-in 0s ;
-o-transition: all 0.2s ease-in 0s ;
}

.noopln:hover,Label li:hover,#Label1 ul li a:hover,.Label li a:hover {
margin-left: 14px;
}

• That's all the Link Nudge with CSS3

Link Nudge using jQuery

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

• Save it

You can put link nudge effect to a link by adding a class noopln

Eg: Your Link

If your link already have a class then add this class after a space.

Eg: Your Link

The above jQuery code snippet is also work with your Labels,If you don't need Link Nudge effect to your labels then delete the red blinking highlighted code in it.

And Save the Template

Its almost finished,If you enjoyed this article share and like us.
Check out more Blogger Tips and Spice your blog tips

Dynamic Views Button with jquery Effect for Blogger Blog

Here is a Simple Tip to Set a Button for Changing the Blog View to Dynamic Views.I added Smooth jquery Hover Effect to Button.You can set any template to your Blogger Blog.If you add this Button to your Blog.It lets your Blog visitors to View Blog in Dynamic Views when they Click this Button.

View Demo

Add Dynamic Views Button to Blog

Make sure you had Backed up your Template before editing Template.(How to Backup Template)

• Go to Design -> Edit HTML

Step 1.Add jQuery Plugin( If your Blog already have a jQuery plugin ignore this Step ),

• Go to Design->Edit HTML
• Copy and Paste Below code inside section

Step 2: Add Dynamic view button,

•  Go to Design-> Page Elements
• Click on Add Gadget ,Select HTML/Javascript from it
• Leave Title as blank, Copy the below code inside content section.

Click this for change the view to Dynamic views

   

• Then Save it.
• That's all,you are done..

I hope you enjoyed this article,if so please share n like us.

Stylish Static animated Flash Clock for Blogger

Here I am saying about How to Add a Stylish Flash Animated Clock to your Blogger Blog.Here is a huge collection of Clock widgets for your taste.Follow the Simple Steps below to make your Blog Stylish,Cool, and Smart looking Blog.

• First of all SignIn to your Blogger Account 
• Select Design->Page Elements
• Click on Add Gadget
• Select HTML/javascript from it,then copy the code of clock you want.

 

Step 1: If you want a NON Static Clock Widget,then Just copy and paste the code to HTML/javascript content.

If you want a cool static clock,then first do the step above and Click HERE

Add Stylish Flash Clock 1

• If you want to add this Clock,then Copy  and paste the below code

Free Clock

Add Stylish Flash Clock 2

• If you want to add this Clock,then Copy  and paste the below code

Free Clock

Add Stylish Flash Clock 3

• If you want to add this Clock,then Copy  and paste the below code

Free Clock

Add Stylish Flash Clock4

• If you want to add this Clock,then Copy  and paste the below code

Free Clock

Add Stylish Flash Clock4

• If you want to add this Clock,then Copy  and paste the below code

FreeWidgets

Free Clock

Add Stylish Flash Clock5

• If you want to add this Clock,then Copy  and paste the below code

Free Clock

Add Stylish Flash Clock6

• If you want to add this Clock,then Copy  and paste the below code

Free Clock

Add Stylish Flash Clock#

• If you want to add this Clock,then Copy  and paste the below code

Free Clock

Add Stylish Flash Clock 7

• If you want to add this Clock,then Copy  and paste the below code

Add Stylish Flash Clock 8

• If you want to add this Clock,then Copy  and paste the below code

Add Stylish Flash Clock 9

• If you want to add this Clock,then Copy  and paste the below code

Add Stylish Flash Clock 10

• If you want to add this Clock,then Copy  and paste the below code

Add Stylish Flash Clock@

• If you want to add this Clock,then Copy  and paste the below code

Add a Static Clock

Step 2:

• Copy and Paste the CSS code below after the code of clock.

•  Then click on Save.

With this tutorial you have got a Beautiful Clock.
If you feel any confusion or doubt then please do comment.

Add Flying Letters below Mouse Pointer Animation

How to setup flying letters below mouse pointer.This a simple article that Spice your Blog.After inserting this Code,When you move mouse over your Blog, you will see that Letters you SET in the below code will flying like a Animation.

VIEW DEMO

Install Flying Letters Below Mouse Widget

Make sure you had Backed up your Template(How To BackUp Template?)

• Sign In to your Blogger Account
• Go to Design->Edit HTML
• Find (Find Easily Using Ctrl+F) and Copy and Paste the below Code

• Save it,its all.....you are almost done.