Announcement:

  Hello, We Changed Our Cloth, How It Is Looking? Leave Your Feedback At Our Page.
Showing posts with label Blogspot Navigation Bar. Show all posts
Showing posts with label Blogspot Navigation Bar. Show all posts

Sunday, March 30, 2014

How To Reduce Your Website’s Bounce Rate?

How To Reduce Your Website’s Bounce Rate?

By definition it would mean that people who come visit your website leave only after reading one page. If that happens, if the bounce rate is high, it means that something is wrong with your website and that it is time to intervene to reduce bounce rates.

In a fast changing world it is very hard to create content that will make visitors stay longer, but with the help of analytics tools and what the global trends are, it is possible to change together with the world. Engaging content is a must for any serious company if they want gain new customers.
Read More ...

Friday, March 7, 2014

Stylish Double Style Animated Vertical Menu Bar For Blog And Website

Stylish Double Style Animated Vertical Menu Bar For Blog And Website

As you have seen many stylish horizontal menu bar that we also have shared but this time we are with a vertical menu bar for websites or blogs with animation effect on hover. This menu bar is purely made by HTML-CSS without any JavaScript or jquery. This menu bar work awesome in all major browsers and can be edited fully according to your desire or your theme style.

This menu bar actually contain two text on a single link. One is a short link name and other is a link description that will be visible on the menu place on hover that look more awesome in animation. Here is our preface so now check out our live DEMO in the below link and check out the other features list then garb the code and add it in your blog or website.

Features:

1.) Awesome And Stylish Design.
2.) Pure HTML And CSS.
3.) No JavaScript Or JQuery.
4.) Quick To Load And Easy To Install.
5.) SEO Supported UL LI Coded.
6.) Vertical Design Menu Bar.
7.) Unlimited Link Can Be Added.
8.) Fully Customizable.
9.) Short And Easy Coded.
10.)Animate On Hover.
11.) Will Show Link Desc On Hover On The Same Place.
12.) Change The Second Text On Hover In Animation.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire "Blog".
3.) Go To "Layout".
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click "Save", Now You Are Done.
OR
1.) Go To Your www.blogger.com
2.) Open Your Desire "Blog".
3.) Go To "Template".
4.) Click "Edit HTML".
5.) Now Click Within Code Box.
6.) Press [CTRL+F] To Search </head> Code.
7.) Now Copy The Below Code And Paste It Anywhere After </head> Code Where You Want It.
8.) Click "Save Template" And Done.

How To Add In Website?

1.) Just Go To Your "HTML" File.
2.) Now Copy The Below Code And Paste It Between "<body> </body>".
3.) "Save" It, Now You Are Done.

<style type='text/css'>
/*-----------------------------------------------
Developer: EXEIdeas
Source: www.exeideas.com
Created Date: Friday, Mar 07, 2014
License: Copyright, EXEIdeas. All Rights Reserved. This Menu bar is licensed under DMCA and CreativeCommon3.0. If anyone found to copy or clone it will be under DMCA legal notice. You are free to use it with creator HTML comment.
----------------------------------------------- */
#exe_double_menu {width:225px;overflow:hidden;margin:0 auto;}
#exe_double_menu ul {list-style-type:none;text-align:center;margin:0;padding:0;}
#exe_double_menu ul li {margin:0;padding:0;line-height:40px;width:450px;height:40px;font-size:1em;text-transform:uppercase;letter-spacing:1px;font-weight:200;}
#exe_double_menu ul li .exe_double_menu_before_hover {position:relative;width:225px;float:left;display:inline;transition:all 0.3s ease;color:#000;background:#66bb44;}
#exe_double_menu ul li .exe_double_menu_after_hover {position:relative;width:225px;float:left;display:inline;left:225px;transition:all 0.3s ease;color:#ffffff;background:#161916;}
#exe_double_menu ul li:hover .exe_double_menu_before_hover{left:-225px;}
#exe_double_menu ul li:hover .exe_double_menu_after_hover{left:-225px;}
</style>
<nav id="exe_double_menu">
<ul>
<a href="##########" title=""><li><span class="exe_double_menu_before_hover">Home</span><span class="exe_double_menu_after_hover">Go To Home</span></li></a>
<a href="##########" title=""><li><span class="exe_double_menu_before_hover">About</span><span class="exe_double_menu_after_hover">Know About Me</span></li></a>
<a href="##########" title=""><li><span class="exe_double_menu_before_hover">Work</span><span class="exe_double_menu_after_hover">See My Work</span></li></a>
<a href="##########" title=""><li><span class="exe_double_menu_before_hover">Services</span><span class="exe_double_menu_after_hover">Will Provide You</span></li></a>
<a href="##########" title=""><li><span class="exe_double_menu_before_hover">Contact</span><span class="exe_double_menu_after_hover">Ask Me Anything</span></li></a>
</ul>
</nav>

Customization:

1.) Change All Blue Hashes With Your Desired Links.
2.) Change All Red Text With Your Main Link Name.
3.) Change All Pink Text With Your Link Desc Or Other Text.

Last Words:

As you know that what we have we share so this is what we have now. If you like it then share it and use it, If you still have any quires then feel free to ask me in comments or contact form. Don't forget to leave your feedback in comments.
Read More ...

Saturday, December 28, 2013

Stylish Pure CSS Multi-Colour Menu Bar For Blog And Website

Stylish Pure CSS Multi-Colour Menu Bar For Blog And Website

As everyone want to make his blog more awesome as it is and want to give it a premium look so here we are also working on it to share some awesome widgets that can help you to make your blog more awesome. So this time here we are with a stylish coloured menu bar that will show different colour on each menu item and on hove will give you a sliding effect that will make it more attractive.

So as our all widgets have awesome features so this time its also have a list of best listed features so without any more preface, have a look on live DEMO then check out our list of features then proceed to the code that is easy to add and customize with full features and function.
Read More ...

Friday, December 20, 2013

Page Navigation With (PageCount, Next/Prev) For Blogger

Page-Navigation-With-(NextPrev-PageCount)-For-Blogger

Its a continuous part of our previous blogger navigation widget which have same features but no page count text so this one features is new here in this version. By default Blogger has a simple navigation system to navigate between the posts and pages. This page navigation has just three buttons, one for next one for previous and one for home. this simple page navigation system is best to navigate between the posts but on pages and on post summary pages it does not seems good to work. For example if a visitor has to jump on directly to next to second page then he or she has to go through all the posts by using previous button.
Read More ...

Page Navigation With (Next/Prev) For Blogger

Page Navigation With (Next/Prev) For Blogger

By default Blogger has a simple navigation system to navigate between the posts and pages. This page navigation has just three buttons, one for next one for previous and one for home. this simple page navigation system is best to navigate between the posts but on pages and on post summary pages it does not seems good to work. For example if a visitor has to jump on directly to next to second page then he or she has to go through all the posts by using previous button.

To overcome this problem, there are many beautiful and handy page navigation widgets are available in Blogger world. These page navigation widgets have different styles and way of working. Using these widgets any one can make his or her blog awesome and user friendly.
Read More ...

Tuesday, December 10, 2013

How To Improve Your Website’s PageRank On Next Update?

How To Improve Your Website’s PageRank On Next Update?

If your website appears in Google search results, it already has a Google PageRank. This is a score that determines the quality and popularity of a web site. A rough estimation of a website’s PageRank can be found using the Google Toolbar, which ranks sites from zero to ten – with ten being the most popular.

Scores of nine and ten are reserved for sites like Google, USA Government and CNN, so there’s no need to aim that high. Still, improving your PageRank can be a prominent factor in increasing a website’s amount of visitors. The higher its PageRank, the higher a website will appear in Google’s search results.

As a result, plenty of emphasis has been put on how to improve a website’s PageRank. Even though its scoring system is based on a complex algorithm that changes frequently and is impossible to crack, below are some strategies that have proven in the past to elevate PageRank for websites.
Read More ...

Thursday, September 5, 2013

Awesome CSS Mega DropDown Menu With Links And Thumbnail

Awesome CSS Mega Drop Down Menu With Links And Thumbnail

Mega Drop Down Menu has been a growing trend in web design. For sites that involve a lot of pages and/or products, this type of menu may able to improve user experience and usability of the entire website. Typically, a mega menu contains product images, brief description, navigation items. As a result, mega menu is famous in e-commence websites and you will notice it in the following design showcase.

The amount of content displayed on today’s popular websites and online news sources is staggering. Web design experts have been struggling to find the best ways of organizing all those articles, pages and posts in a way that would not make the site seem overcrowded and bloated. Starting pages pose the biggest problem, because they have to reflect the overall concept of the site without turning off visitors with walls of text or a rainbow of colorful pictures that seem to jump out from the screen. Fortunately, the problem is about to be solved by CSS mega menus.
Read More ...

Sunday, April 21, 2013

Awesome CSS Fan-Shout Web-Bar For Blog And Website

Awesome CSS Fan-Shout Web-Bar For Blog And Website

Nice to see your here again, After a great time, i am again here with a new Web-Bar that is based upon CSS. After me previous post of Free CSS Hello Bar, the new one is here with new ghraphics and changing of position with a cool style. Many guy's want this to see his news on his blog but tirent of Sticky Simple Bars and want something new so here it is for him.
Read More ...

Sunday, February 24, 2013

HTML-CSS Stylish Page Navigation Bar For Blog & Website

HTML-CSS Stylish Page Navigation Bar For Blog & Website

Here We Have Simple But Stylish Pure HTML-CSS-Kit Cool Color Hover With Curve Corner Links Page Navigation Bar Having jQuery Effect Without JAVASCRIPT/jQuery File Or Code. We are comeback with another simple Navigation menu made up of CSS3 with additional effects using CSS3 Transition property. CSS Transitions make, powerful effect without the use of JavaScript for many common effects. Sometimes you want to add an additional navigational bar on to your website or blog, but many template and themes only support one menu. In my case the SEO hatch blog has a vertical menu which we use for our post categories, but I wanted to add a small additional menu for consulting inquiries without cluttering the main menu. This menu perfectly work only on some browser such as Chrome, Firefox, and Safari. Here we using simple CSS only.

Read More ...

Tuesday, February 5, 2013

MultiLevel DropDown Floating Menu WithOut J-Query (Only HTML-CSS)

Hello again, it’s time for widget article. Here you’ll find pure CSS based drop-down multi level menu with down loadable files and explanations as well. My favorite here is the first pick – Outside the box with very unique navigation menu. It’s always good to have such reference articles in your bookmarks and when you have to create some really big website with a lot of content and menu sections – just return here. Shorten your developing process with already premade menus, which can be easily modified with little touch of CSS.

MultiLevel DropDown Floating Menu WithOut J-Query (Only HTML-CSS)
Preview

I’ve had a few requests from readers asking how to install a drop-down menu without j-query due to heavy load. So here it is, a multi level dropdown/fly-out menu. The original code is from CSS Play. I modified the CSS part a little to adapt to Blogger template. This four level drop-down/fly-out menu should work in most browsers. A tab with small caps indicates it has upper level/levels. A drop-down/fly-out will appear when you hover the tab. First Have A Look On Image Or See The Demo By The Given Link.


Read More ...

Monday, January 28, 2013

Animated Stylish CSS Navigation Menu For Blog And Website

Animated Stylish CSS Navigation Menu For Blog And Website

This is called CSS Spotlight Menu and idea and code provided by Dynamic Drive. I just update some code and share this in easy step here. Spotlight Menu takes advantage of CSS3's border-radius property and transitions to add a circular background to its menu items when the mouse rolls over each one. The result is a Flash-like, sleek spotlight menu! The circular background appears in all major browsers, including IE9, while the transition effect works in browsers that support CSS3 transitions, namely, FF3.5+, Safari 3.1+, Google Chrome, and Opera 11.6+.
Read More ...

Tuesday, January 22, 2013

Stylish HTML-CSS Drop Down Menu For Blog & Website

Stylish HTML-CSS Drop Down Menu For Blog & Website
You can find a lot of different menu styles on the web today. Similarly designers and developers are often more than happy to share their techniques with the world. And through these tutorials new designers can learn about trends and how to build websites semantically.Today, I am Going to posting a article about how to add css Horizontal drop down Menu with sub menu for blogger blog. if you are using blogger platform blog and if you want to add sub-menu for each category this are not available from blogger by default templates. So you can add this hovering Menu which are good and attractive black color.
Read More ...

Sunday, January 13, 2013

Stylish Hover HTML-CSS Text Menu With Images On It

Stylish Hover HTML-CSS Text Menu With Images On It

Many of my friends are asking about this that he want something like this to make them site stylish, Today i think he will be happy and also i am.So with out any loss of time first see the demo then use our simple coding.As we know "That An Image Is Much Better Then Thousand Words." so put some images on your menu bar to describe him in gentle way.One of the most important gadget in blog is navigation menu. Navigation menu help to you access your blog category pages, and your blog readers can easy to access your category pages.
Read More ...

Friday, December 21, 2012

Awesome & Cute Multi-Level DropDown Menu Bar For Blog And Website

Awesome & Cute Multi-Level DropDown Menu Bar For Blog And Website

It is always fun to learn and explore the new standards introduced for CSS. With growing development in HTML5 and CSS3, heavy scripts and flash tools are pushed back. This Mac-like multi-level drop down menu that we will learn to create and how to add it to Blogger is solely based on Pure CSS3 with no jquery used at all! It uses simple box-shadow, text-shadow and border-radius properties.
Read More ...

Monday, April 16, 2012

Best 3 Stylish CSS Page Navigation Widget For Blogger

Numbered Page Navigation Widget is a JavaScript hack for blogger to easily navigate blogger pages. In this post i am giving stylish navigation with different colorful styles.
Page Navigation is awesome widget which enables page number navigation to visitors. You might have seen numbered page navigation on many WordPress blogs. There is simple JavaScript which enables your older posts, newer posts & home links to numbers. Have you seen that older posts, newer posts & home links are boring feel.
Best 3 Stylish CSS Page Navigation Widget For Blogger

Page Navigation is a really awesome and long awaited feature. It really was an awesome trick which was made at a time when nobody could even think of implementing it on blogger. When you use this hack,you will see this kind of navigation on your blog’s home page and label pages (needs little customization).


Read More ...

Simple Blogspot Page Navigation Widget With Full Features

Today we will see how to add a nice page number navigation hack blogger. The default navigation links (i.e Older Posts) is not the friendly visitor if you are having a lot of jobs and bloggers readers.Few has some problems with the above script navigation page. Now here is a completely new script and work for numbered page navigation (i.e. Panigation) for Blogger. The paging widget for blogger it easy for the visitor. It is a must have for any new blogs.This new script allows you to add numbered page navigation to blogger/ blogspot blog with page numbers starting(1, 2, 3, 4 ….) like those of a book.
One of the important features of a good blog or site is that it is very easy for the blog visitors to navigatethroughout the site. A site which is structured in such a way that the visitors have to take efforts to move from one page to another is seen as a poorly designed site.

Simple Blogspot Page Navigation Widget With Full Features
Features:
1.) Page Counter.
2.) Direct Navigation To First, Last With Working Buttons From Any Page.
3.) Next, Previous Button Also Included.
4.) Simple And Easy To Use.


How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.
Read More ...

Blogger Page Navigation Widget Generators With Styles

Here Is The Blogger Pagination Online Widget Generators List With Full Customization. So Come On First Discuss How It Will Effect On Blogging.
Blogger Page Navigation Widget Generators With Styles

Page navigation widget for blogger is most popular widget, and almost all bloggers are using this. as these widgets are only provided in wordpress blogs or hosted blogs.But now his hack has been made available in bloggers also Here is I am giving this Page Navigation Widget with Different styles, and full Customization options.
Numbered Page Navigation Widget is a JavaScript hack for blogger to easily navigate blogger pages. In this post i am giving stylish navigation with different colorful styles.
Page Navigation is awesome widget which enables page number navigation to visitors. You might have seen numbered page navigation on many WordPress blogs. There is simple JavaScript which enables your older posts, newer posts & home links to numbers. Have you seen that older posts, newer posts & home links are boring feel.
Older Post, Newer Post, Home Buttons
Read More ...

Sunday, April 15, 2012

Colorful Java-Script Numbered Page Navigation For Blogger

Colorful Java-Script Numbered Page Navigation For Blogger
Numbered Page Navigation Widget is a JavaScript hack for blogger to easily navigate blogger pages. In this post i am giving stylish navigation with different colorful styles.This is easy to customize and install because of widget generator. Special Thanks To www.24work.blogspot.com
Read More ...

Saturday, April 14, 2012

Stylish Colorful Hover Style Page Navigation Menu For Blog And Website

One of the most important gadget in blog is navigation menu. Navigation menu help to you access your blog category pages, and your blog readers can easy to access your category pages. So now we going to show you how to add stylish animated navigation menu to blogger/blogspot. This navigation menu make your blog attractive and stylish blog.

Stylish Colorful Hover Style Page Navigation Menu For Blog And Website



Features:
1.) Green Menu Bar With Orange Hover.
2.) Only HTML-CSS.
3.) Simple, Stylish, Easy To Use And Quick Load.

Read More ...

Wednesday, April 11, 2012

Stylish Hover Page Navigation Menu For Blog & Website

One of the most important gadget in blog is navigation menu. Navigation menu help to you access your blog category pages, and your blog readers can easy to access your category pages. So now we going to show you how to add stylish animated navigation menu to blogger/blogspot. This navigation menu make your blog attractive and stylish blog.

Stylish Hover Page Navigation Menu For Blog & Website





Features:
1.) Simple And Very Easy To Install.
2.) Menu With Hover And Awesome Look.
3.) Easy To Add Links And Use.
4.) No J-Query File.
5.) Speed Loading Time.


How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.


How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.


<style>
#exenav-left{float:left; display:inline; width:100%; padding-left:2px; padding-top:5px}
#exenav{clear:both; margin:0 auto}
#exenav ul{position:relative; overflow:hidden; padding:0; margin:0; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:12px}
#exenav li{cursor:pointer; float:left; margin:0 1px 0 0; padding:0 1px 0 0; height:40px; display:inline;}
#exenav ul li a, #exenav ul li a:visited{text-decoration:none;border:0px solid #000000; margin:0 1px 0 0; float:left; padding:8px 9px; color:#fff; font-weight:bold; font-size:12px;margin-top:-2px; background:#333333; border-radius:4px 4px; -moz-border-radius:4px 4px 0 0; -khtml-border-radius:4px 4px 0 0; -webkit-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0}
#exenav ul li a:hover{border:2px solid #111; background:#3399FF top left repeat-x; border-radius:8px 8px; -moz-border-radius:8px 8px 8px 8px; -khtml-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px}
#exenav ul li a.current, #exenav ul li a.current:visited,
a:hover {text-decoration:none;} a img {border-width:0;}
#hb{height:40px;margin-bottom:10px; margin-top:50px; background:#333333; border-radius:8px 8px; -moz-border-radius:8px 8px 8px 8px; -khtml-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px}
#exenav-element{width:100%; margin-top:-24px; padding:0}
</style>
<div id='hb'>
<div id='exenav-element'>
<div id='exenav-left'>
<div id='exenav'>
<ul>
<li><a href='########## '>HOME</a></li>
<li><a href='##########'>Portfolio</a></li>
<li><a href='##########'>News</a></li>
<li><a href='##########'>Blog</a></li>
<li><a href='########## '>About</a></li>
<li><a href='##########'>Contact</a></li>
</ul>
</div>
</div>
</div>
</div>



Customization:
1.) Change All Red With Your Text.
2.) Change All Blue With Your Links.
3.) Done.
Read More ...