My Experiences And Tips From Setting Up A New Blog

Guest Post - Our host is Matthew Barby, Matt has some tips for setting up a new blog from content to SEO.See How To Become a guest author on Spice Up Your Blog.

I took a little time out recently to recharge my batteries and explore a bit of the world by venturing across to East Asia. During my time out there I thought it would be a great idea for me (and a few friends) to set up a travel blog that would share some of our travel experiences and offer a useful resource for fellow travellers.

Due to the fact that this project was purely focused around pleasure, I didn’t put too much work in at the start but I soon realised that there was a good potential to make a bit of cash that could supplement my travel costs. With this in mind I decided to use my background in SEO to bring in some good levels of traffic to the website. Six months on and my blog traffic is growing exponentially month-on-month – I decided that it would only be fair to share some of my strategies with the community so that they can also benefit from this.

The content Strategy

Click Here To View Full Post >>

Best Places To Go To Hone Your Creativity As A Blogger

Guest Post - Our host is Jake Fisher, Jake lists his favorite places to get your creative juices flowing.See How To Become a guest author on Spice Up Your Blog. No matter if you're a writer, an artist, an actor, or any other type of creative professional, finding inspiration for your work is crucial to growing in your field. However, running into a creative block can become common if you simply sit at your desk all day.

Lindsey Leesmann, a communication specialist at Grantham University, says that one of the best ways to overcome writer's block, or any creative block for that matter, is to get away from your desk and change the scenery. Expand your creativity and find inspiration at one of the following locations.

1. The Library

Image via Flickr by Tulane Publications
Click Here To View Full Post >>

7 Reasons For Starting A Travel Or Expat Blog

Guest Post - Our host is Olga Mecking, Olga shares her experiences as an expat blogger.See How To Become a guest author on Spice Up Your Blog.

There are many reasons why you should start a blog. Your hobbies or interests, such as cooking or crafting or technology, are perfect blog topics. Changes in life can inspire you to start blogging as well. One of these changes is when you leave your home country and move somewhere else. I hadn’t even considered starting a blog before I moved from Poland to the Netherlands because I considered my life boring. Then I met my husband, became an expat and had children. Suddenly, my life became exciting and chaotic. Having an expat blog turned out to be fun and exciting, but soon became more than that. Here are all the reasons why you should consider starting a travel or expat blog if you haven’t done it already.
Click Here To View Full Post >>

Discover New And Exciting Techniques Of Creating Blog Content

The days of simply writing content and posting it online are long gone. I've heard the phrase „content is king” time and time again, and while I do not disagree with it, hell, I've actually written an article on the subject myself, I have to say that content is not only written. Images, videos info-graphics are also content, visual content, but still, content. The problem with today's internet is the fact that it is over-saturated with information.

Let's be honest, how many of you read articles from start to finish?  I don't. Even if I find something that interests me, I usually skim through the text, and bookmark it for later. Many writers are faced with a major problem: people do not read their blog. Moreover, in most cases, it is the first few seconds that attract a user. You can be sure that a block of text isn't as attractive as a post rich in images or videos. Written content is without a doubt the most popular content creation technique, and it is also one of the most poorly done. Any respected agency will tell you that high-quality content is one of the most powerful business promoters. That being said, let us discover alternative content techniques.
Click Here To View Full Post >>

How To Select The Right Narrative Style For Your Blog

Guest Post - Our host is Jessica Davis, Jessica is taking an interesting look at Narrative writing styles you can use on your blog.See How To Become a guest author on Spice Up Your Blog.

“There is no greater agony than bearing an untold story inside you.” -- Maya Angelou. Before you can get your story out and write it down, you need to decide which narrative style you are going to use. You may have vivid memories, amazing plot lines and great ideas but they will not have the desired effect if your narrative style or type is flawed. When you sit down to write a novel, having a clear narrative style can help you keep track of the story and prevent your from straying too much.

There is no hard and fast rule that you have to stick to one narrative style throughout the novel or short story. Many legendary authors like Margaret Atwood have often used third and first person narrative styles in the same book to great effect. This is done when more than one character presents the story. There may be numerous ways to write your story but there are only a few ways to narrate it.

Third person narrative style

Click Here To View Full Post >>

How Teachers Are Using Blogs to Enhance Their Lessons

The technology tools at the fingertips of a modern-day teacher are better than ever. Many teachers are leveraging blogs in the classroom in order to supplement their lessons. Whether it be by creating their own classroom blogs, incorporating teaching ideas from the blogs of other teachers, or incorporating data from topic-specific blogs into a lesson plan, there are multiple ways to leverage blogs in the classroom.

Here, we’ll review some of these in further detail.

Teachers no longer have to rely exclusively on offline tools for their lessons.

Help students to communicate with one another in the written form - By creating a blog for a class to utilize together, a teacher creates a platform by which students can communicate around things like written assignments, poetry, or personal feelings (akin to a journal entry).
Click Here To View Full Post >>

Horizontal menu with sub-tabs in two columns for Blogger

This is a very nice horizontal menu in which its sub-tabs are displayed in two columns and is also made with CSS, without any scripts.

The "advantage" so to speak, is that the sub-tabs when arranged in two columns are not very long, so it will be neat and less space along. You can see an example here:

• Tab 1 Title Here
• Tab 2 Title Here
• Tab 3 Title Here
  • Sub Tab 3.1
  • Sub Tab 3.2
  • Sub Tab 3.3
  • Sub Tab 3.4
  • Sub Tab 3.5
  • Sub Tab 3.6
• Tab 4 Title Here
  • Sub Tab 4.1
  • Sub Tab 4.2
  • Sub Tab 4.3
  • Sub Tab 4.4
  • Sub Tab 4.5
  • Sub Tab 4.6
• Tab 5 Title Here
  • Sub Tab 5.1
  • Sub Tab 5.2
  • Sub Tab 5.3
  • Sub Tab 5.4
  • Sub Tab 5.5
  • Sub Tab 5.6
  • Sub Tab 5.7
  • Sub Tab 5.8
• Tab 6 Title Here

Adding A Horizontal Menu With Sub Tabs in Two Columns To Blogger

STEP 1: In Blogger, go to your "Layout" and on the "Page Elements" section.

• Click on the "Add a Gadget" link just under your header image
• From the Gadget's List, select "HTML/JavaScript" option.

STEP 2: Simply copy and paste this ENTIRE code into your widget. Note: Leave the "Title" section of this widget blank.

• Tab 1 Title Here


• Tab 2 Title Here


• Tab 3 Title Here
  
  
  
  • Sub Tab 3.1
  
  
  • Sub Tab 3.2
  
  
  • Sub Tab 3.3
  
  
  • Sub Tab 3.4
  
  
  • Sub Tab 3.5
  
  
  • Sub Tab 3.6
  
  
  
  


• Tab 4 Title Here
  
  
  
  • Sub Tab 4.1
  
  
  • Sub Tab 4.2
  
  
  • Sub Tab 4.3
  
  
  • Sub Tab 4.4
  
  
  • Sub Tab 4.5
  
  
  • Sub Tab 4.6
  
  
  
  


• Tab 5 Title Here
  
  
  
  • Sub Tab 5.1
  
  
  • Sub Tab 5.2
  
  
  • Sub Tab 5.3
  
  
  • Sub Tab 5.4
  
  
  • Sub Tab 5.5
  
  
  • Sub Tab 5.6
  
  
  • Sub Tab 5.7
  
  
  • Sub Tab 5.8
  
  
  
  


• Tab 6 Title Here

Customize your main tabs by changing the Tab Titles to whatever you want. Include a URL for each one if you want it to be 'clickable'. If not, you can just put a # sign where it says http://YOUR URL HERE.com

You can add or delete as many of the main tabs as you need, just make sure to copy the entire code for the main tab for each additional tab you want:

Tab 7 Title Here

• Sub Tab 7.1


• Sub Tab 7.2


• Sub Tab 7.3

STEP 3: Now let's go a step further and add the CSS style in our Template

• Go to Template > Edit HTML

• Click on the sideways arrow next to ... 

• Then click anywhere inside the code area and search - using CTRL + F keys - for the ]]> tag and just above ]]> add this code:

/* Horizontal menu with 2 columns
----------------------------------------------- */
#menucol {
width:940px;
height:37px;
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);
border-bottom:1px solid #666666;
border-top:1px solid #666666;
margin:0 auto;padding:0 auto;
overflow:hidden;
}
#topwrapper {
width:940px;
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#top {
width:100%;
}
#top, #top ul {
padding: 0;
margin: 0;
list-style: none;
}
#top a {
border-right:1px solid #333333;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee;
}
#top a:hover {
background:#000000;
color:#F6F6F6;
}
#top a.submenucol {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtKqVt4zFRQsgaCGdqgy3sducrVULT3nywgwcEPJ38SHHOTI-dCxDQ3FD75LPxnsjEZEfS6expVGZSwAvtINIrwyA_0_q9M1daj-E1Hz7Db5OHiZLaX9B_NX-qUBS4Z8nQOzdVwCeILDU/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {
float: left;
position: relative;
}
#top li {
position: static !important;
width: auto;
}
#top li ul, #top ul li {
width:300px;
}
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#F1F1F1;
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px;
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {
display: block;
}
#top li:hover ul a, #top li.hvr ul a {
color:#333;
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#444444 !important;
}

• Now find (CTRL + F) this line:

/* Tabs

• It will also have some little lines beneath:

/* Tabs
----------------------------------------------- */

• And just below these little lines, delete the code below until you reach at:

/* Columns
----------------------------------------------- */

• Instead of the code that you have removed, add this one:

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs-inner {padding: 0 0px;}

See this screenshot for more info:

STEP 4: The final step is to Save the Template and you are done!

Visit your blog to see a beautiful navigation menu just below header.
If you have any questions or need help, leave a comment below.

Fade In/Out Page Loading Effect On Blogger Posts

A very common effect in jQuery is the fade effect that hides or shows an element by fading it, and we can use it in many ways as for example in the blog's navigation. The following script does just that, by loading the page with a fading effect when we browse on internal links that are in the blog, such as post titles, labels links, archive, navigation links, etc..

You can see an example in this demo blog, click on the title of any post and see the fading effect when the page is loading.

How To Implement the Fade In Loading Effect

1) To put this fading effect on your blog, go to your Template > Edit HTML :

2) Click anywhere inside the code area and search for the tag using CTRL + F keys:

3) Then, just above add the following code:

4) Save the changes and that's it. In green you can see where to change the color that fades on a loading page.

The original script hides the body of the page while loading, I prefer to change that property with a negative z-index to avoid problems with the search engine robots that may effect the positioning.

Problems?

Consider that such effects could increase the blog loading time, so I recommend using it only when your blog loads fast and does not have too many scripts.

If you already use another version of jQuery remove the other, leaving only this which will be readed first.

If you are using Mootools or Scriptaculous, then you have to make some modifications to the code in order to be compatible.
If you have another script with a fade effect, then it could interfere with this and you might not see anything on the page except the color fading, in such cases it is better without this script.

You can also use this effect only on some links, for example, if you want to appear only when you click on the post titles in the navigation links (older posts and newer posts), and on the top tabs, then replace this line:

$("a").click(function(event){

With this:

$(".post-title a, .blog-pager-older-link, .blog-pager-newer-link, .tabs").click(function(event){

In some cases, the page can load for a second and then load with the fade effect, this may be "normal" because the browser is slow to read the script on page load.

Apart from these drawbacks, I think it's a very elegant way to load blog pages while browsing them, don't you think?

How To Insert Microsoft Word Tables In Blog Posts

Guest Post - Our host is Abhishek, who shows us how and why to use Microsoft Word tabels on your blog.See How To Become a guest author on Spice Up Your Blog.

Inserting tables in blog posts organizes your data in a tabular form which looks more tidy and clear.Tables can be of many sizes including different rows or columns.Mostly today all bloggers use HTML tables,and there is one drawback of using these tables that it is quite cumbersome for a new blogger because it requires right coding for full customization and it wastes more time.

Tables are extremely needed if you are showing your blog post in a tabular form or are comparing the specifications of any service or product.In case if you just write a blog post then it would be unclear to understand,it would be like that you have just thrown colors on the canvas and haven’t created your masterpiece.In this post you will learn a trick to insert Microsoft office tables in your wordpress or blogger blog’s HTML.I am using Microsoft office 2007 to create tables.

How To Insert Microsoft Office Word Tables In Wordpress Or Blogger Posts

Click Here To View Full Post >>

Using the :before and :after Pseudo Elements on Sidebar Titles

This is another method of using the :after and :before properties and it will work without too many problems in any browser, including IE8. What this trick will do is to divide the header bar into left and right sections, where the left will contain an explanatory title and the right, a related link.

The idea of generating Adobe-like Arrow Headers was actually discussed by css-tricks and adapted to Blogger.

How to Add Adobe-like Headers to Blogger

Step 1. Log in to your Blogger dashboard > go to Template > Edit HTML, then click anywhere inside the code area to search - using the CTRL + F keys - for the following tag:

Step 2. Just above it, copy and paste this code:

 

Step 3. Save the Template.

Screenshot:

Step 4. Now go to Layout and Add a new HTML/JavaScript Gadget with one of the codes below for each of the widget title:

Background in blue:

Title in Link URL">Blue

Background in yellow:

Title in Link URL">Yellow

Background in green:

Title in Link URL">Green

Background in red:

Title in Link URL">Red

Note: Change "Title in" text with your widget's title and Blue, Yellow, Green and Red with the text on the right, then add a Link URL to it.
Step 5. After you saved the HTML/Javascript gadgets containing the codes above, drag and drop them just above the widgets you want to show... and Save the Arrangement.

DEMO

You can see how the sidebar titles has been replaced with some cool header bars on this demo blog.