Posts

Showing posts with the label Navigation

Blogger Navigation with Post Title

Image
In my blog I've discussed how to customize blogger newer-post and older-post navigation. Today I'll show you how to display post titles with these navigation links. It actually looks good to display blog post titles instead of showing just page navigation buttons.The basic concept behind this trick is simple. We'll use jQuery .get() function to display titles with these links. jQuery introduced this function to load data from the server using a HTTP GET request. Since blogger does not have proper data tag that can load title of previous page or next page, we'll use this jQuery function to load data from the server. I'ill also show you some stylish appearance of post titles with these navigations. However if you know a little bit of css, you can easily customize your blogger appearance. Before you make any changes in your blogger template, it is recommended to backup your blog if anything goes wrong. Moreover do it at your own risk. Bloganalyzer is not responsi...

Breadcrumb Navigation

Image
Breadcrumb navigation (as well recognized as 'Breadcrumb trail') is a navigation widget that lets users to know their position in the hierarchy of a website and to retrace their steps to fail back to beginning with less time and elbow grease. It can be seen in many websites horizontally just above the post title (or maybe below header), and contains links to categories that related to the posts, the reader is currently on. It is an alternative method of navigation which in fact increases the usability of a website. Often a slash ( / ), a single right angle quote ( › ) or even a double right angle quote ( » ) is used as separator in breadcrumb hierarchy. Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It allows users to keep track of their locations within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairy-tale. Wikipedia Before we start with the co...

Stylize Older, Newer and Home Navigation Links

Image
Visitors like that blog which are well decorated because it helps them to navigate easily throughout the blog. All professional bloggers always try something new to decorate their blog in a unique way. Blogger navigation links are also part of that decoration. Although by default blogger provides some styles for these links but those are so dull and boring. This tutorial will show you different ways of changing the appearance of newer (or next), older (or previous) and home navigation links. This is very simple but useful trick for blogger blog. Before you make any changes, it is recommended to backup your blog template if anything goes wrong. Modify those texts with your own. Replace those texts with images. Switch the positions of those texts. Remove those texts from blog. Let's proceed. Sign in to 'Blogger' dashboard . Click the drop-down arrow adjacent to 'Go to post list' icon and select 'Template' form the drop-down menu list. Cl...

Scroll to an Internal Link

Image
Scrolling within page i.e. scroll to an internal link has experienced a huge growth in popularity in web design in recent years. Perhaps you’ve seen it before that when you click a link in the navigation, it takes you not to another page but a specific point within the current page. Actually it is very easy to do with some extremely basic HTML but if you want a nice scrolling animation when page goes up or bottom, you have to add some jQuey along with the HTML. This tutorial is about how to scroll to an internal link. I wish this simple and little trick works for you. Before you make any changes, it's recommended to backup your blog template to avoid template crush if anything goes wrong. Demo Let's begin. Go to 'Blogger' dashboard . Click the drop-down arrow adjacent to 'Go to post list' icon and select 'Template' form the drop-down menu list. Click 'Edit HTML'. Skip this step if jQuery library already included in your blog tem...

Scroll to Top and Bottom

Image
Every professional blogger should look after the decoration of their blog carefully so that visitors can navigate easily throughout the blog. If your blog have infinite page scroll or your post contains information, a lot, it would be very annoying for every reader to go back to the top of the page by either refreshing the page or dragging the scroll bar all the way back to the top. Jump to top (and bottom) is that's why very essential element for every blog decoration. But it would be far more stunning to scroll gradually instead of just jump to the top (which exactly Home button does). You can find this feature in almost every blog and website. This tutorial will show you how to add a modern and simple scroll button to your blog. Before you make any changes, it's recommended to backup your blog template to avoid template crush if anything goes wrong. Let's begin. Go to 'Blogger' dashboard . Click the drop-down arrow adjacent to 'Go to post li...

Dropdown Menu for Blogger

Image
It is really important and essential to give an abstract view of your blog to your blog readers. This not only increases your blog traffic but also shows your sophistication level. Now in order to do that, you have to implement various widgets in your blog; among which navigation menu is an essential one. But among all of the different types of menus that can be used on a website, a dropdown menu benefits the most. A dropdown menu is able to organize all contents into smaller sub-categories that are easy to navigate. By using a dropdown menu with a large list of categories and sub-categories, the surfing experience of your visitors can be improved. Features Very simple CSS code. Clear indication of mouse over. Easily editable. Some of these are multilevel. Compatible with all modern browsers. All right, let's proceed. Before you make any changes, it's recommended to backup your blog template in case something goes wrong. Go to 'Blogger' dashboard . ...