Make your Navigation Fixed when Scrolling on Blogger

Many popular sites, like Facebook for example, are starting to use a scrollable or sticky navigation bar. This is a menu navigation bar that is under/above your header and once you scroll and the top of the window "hits" the navigation bar, the navigation bar will "stick" to it and scroll down the content of the page. I have one planned for the update to this site. It means that the user/reader, doesn't have to scroll back to the top of the page to choose a different page or topic. Here's how to do it on Blogger.


UPDATED - http://xomisse.com/create-a-sticky-navigation-when-scrolling-on-blogger

read more " Make your Navigation Fixed when Scrolling on Blogger "

Quickly Alter Your Blog Design

Huge post from me today, hopefully it makes sense. If not, I will split it up into smaller posts and explain things a little more but for now this is kind of an overview. If you have any questions leave them below. You can do so much in HTML & CSS that its hard to include everything but here is the main things you can do to alter your blog design.

Please download a backup of your template before editing anything!

Main Post Area

Post Title, Sidebar Title & Date Header

Altering your Blog Titles can really change the look of your blog. Changing small little things such as borders, colours and sizing will create a new theme and style. Open Template > Edit Html and depending on what you want to alter, find one of the following

Blog Post/Page Title = h3.post-title
SideBar Title = h2 (*)
Date Header = h2.date-header (*)
Blog Post Title/ Link Colour = a:link
Hover Link Colour = a:hover
Visited Link Colour = a:visited
Comment Heading = .comments h4
Comment Link = .post-comment-link

(*) Notice that these are both h2, meaning changes to one will slightly alter the other. To separate them you have to alter the name in HTML so they are no longer connected.

Whats in Blue is the code, Alter whats in Red. The OR's mean you have to pick one option.

Change Background
background-color: #Hex Color ;
background: url("Direct URL for Image");

Change Font
font-size: Number px OR Number em) ;
font-family: font name ;
text-transform: lowercase OR uppercase OR capitalize ;

Align Title
text-align: left OR center OR right ;

Decoration
text-decoration: underline OR overline OR line-through OR blink ;

Borders
border: Width Size px solid OR dashed OR dotted OR double OR groove OR ridge OR inset OR outset #Hex Color ;

Or if you only want a border on one side you can use the following
border-left:
border-right:
border-top:
border-bottom:

If you want your border to have circular edges, then use the following

border-radius: Size px;

Custom Headings & BlockQuotes

Similarly to above, you can alter your headings. I use h4 & h5 to create the blue & orange heading you see to break up this post into categories. You can also customise your .post blockquote using the CSS coding above.

Example of an altered Heading

Example of an altered Block Quote

Spaces

Have a look at padding and margins to create space between different elements and make your blog look less cluttered.

• Remove Space/Gap between Images
• Blog Size Larger than 1000px

---

Entire Blog

Add Navigation, Buttons, Links

One thing that can really improve your blog is a good navigation. Here are some tutorials to help

• Social media links beneath your post
• Center Page Tabs
• Horizontal Navigation with Images
• Social Media Buttons
• Drop Down Navigation Menu

Sidebar Area

Clean up this area, make sure it's easy to read and is clutter free. Use Titles to categorise areas and link to important areas. Change the background or titles like shown above. Take note of the size of your sidebar and make sure images fit nicely. Have a little bit about yourself, with an image. Learn how to enlarge Bloggers Profile image here & experiment with rounded corners for images.

To change the design find either .main-inner .column-right-outer or .main-inner .column-left-outer and again edit using the above coding.

Increase SEO, Increase Traffic

I wrote this post about some easy steps to better SEO. This will bring more traffic to your blog and keep Google happy.

For more Tutorials visit my Archive Page

Don't forget, I'm always happy to help with any HTML questions. I do get a lot so please be patient, I do try and get back to you right away but sometimes it takes me a little bit. I also take blog design orders if anyone wants a blog re-design, I take care of everything I've mentioned in this post and loads more so you can get details about that here.

Read more ...

read more " Quickly Alter Your Blog Design "

Setting up nRelate - Increase Traffic

This post has been moved - http://xomisse.com/set-up-nrelate-to-increase-blog-traffic

Read more ...

read more " Setting up nRelate - Increase Traffic "

Add LinkWithin to Blog

LinkWithin is a realy handy widget to have installed on your blog. It shows stories (previous posts) at the end of each blog post that you publish. This helps to navigate people around your blog, making them stay longer. When they finish reading your newest post, they might see something interesting and click on it to read. Setting up LinkWithin is really easy and almost automatic.

First thing you need to do is head over to LinkWithin here, Fill in your details in the box that appears and follow the online instructions (click "Instal Widget" in point 1). After selecting your blog, it will ask you to name & save ("Add Widget").

Usually, it will appear on the top of your sidebar, either right or left. Move it to under your blog posts gadget, like I show in the following photos.

Now you will see something similar to this image beneath each post. They tend to be similar topics. Make sure to use an image in your blog posts, as this will catch the readers attention.

A new alternative is nRelate, read about it here.

Read more ...

read more " Add LinkWithin to Blog "

Add Social Media Links beneath each Post

I was asked by Jessica how I got the links under my posts, so todays post is a tutorial on how to add your social networking links under each blog post. First things first, BACKUP your template.

Template > Backup/Restore > Download Full Template

---

Template > Edit HTML > Proceed > Tick "Expand Widget Templates" >

CTRL F (PC) or CMD F (Mac) & Search for <data:post.body/>

Under <data:post.body/> paste <div class='sociallinks'> </div>

Now you add your links between <div class='sociallinks'> & </div>, you can add buttons here or plain links like I've done.

To Add a Link with an Image;
<a href="LINK URL" target="_blank"><img src="IMAGE URL" border="0" alt="DESCRIPTIVETEXT"></a>

Read more ...

read more " Add Social Media Links beneath each Post "

Read more »

Setting Images/Photos as Links

I got asked this the other day so I thought I'd do a quick post about it. This can be used for buttons, photos...any image that you want to link to somewhere else, be it another website, a blog post, a certain label, anywhere.


Layout > Add a Gadget > HTML/Javascript.

The code

<a href="URL LINK" target="_blank"><img src="IMAGE DIRECT ADDRESS/LINK" border="0" alt="DESCRIPTION"></a>

URL LINK - The link to the post/tag/label/website or whatever it is you want to link to.

IMAGE DIRECT ADDRESS/LINK - The address/link of the image itself, should be hosted somewhere such as shutterfly, tinypic, photobucket, flickr, etc.

DESCRIPTION - Of the Link/Image.

Add Multiple Images

To add another image, simply add it again underneath so it looks like...

<a href="URL LINK1" target="_blank"><img src="IMAGE DIRECT ADDRESS/LINK1" border="0" alt="DESCRIPTION"></a>

<a href="URL LINK2" target="_blank"><img src="IMAGE DIRECT ADDRESS/LINK2" border="0" alt="DESCRIPTION"></a>

To use a Tag/Label as a Link

Click the label which you want to create a link for, so whatever label/tag you've given it. Copy the URL link which should look something like;

yourblogname.blogspot.com/search/label/yourlabelname

As you can see under my blog post title, it says "posted in: Tutorials" so my link would be 

http://missedesign.blogspot.com/search/label/Tutorials

Simply use this as your URL for the image

It's that simple!

You can see a table of contents of all tutorials here & learn how I used the above coding to make social media buttons that change once you hover over them here.

Read more ...

read more " Setting Images/Photos as Links "

Create a Drop Down Navigation Menu

This post has been updated and can be found on - http://xomisse.com/create-a-drop-down-navigation-menu/

Read more ...

read more " Create a Drop Down Navigation Menu "

Useful Apps & Websites

Warning: Text Heavy!

I tried, tested and researched a few different app's and websites aimed at bloggers and social network users.

When I'm online (more so my laptop than my mac) I like to use 2 browsers, one for my personal facebook, mail, internet use, the other for blogging, twitter, blog, mail, lookbook etc. That way I can have all I need bookmarked, automatically logging in...so on. Most of us that blog use a range of sites, sometimes it can get messy and confusing so I've recently started organising it a little more, using different app's, tools and websites. So here we are...

Read more ...

read more " Useful Apps & Websites "

Read more »