Showing posts with label Design. Show all posts
Showing posts with label Design. Show all posts

Monday, 2 September 2013

The Best Websites To Learn HTML And CSS For Novice Bloggers

Guest Post - Our host is Christopher Forsythe, who looks at some great sites to learn the basics of coding.See How To Become a guest author on Spice Up Your Blog.

If you are thinking about starting you own blog, than it's extremely important for you to have, at the very least, a basic understanding and knowledge of how HTML and CSS can properly work to your advantage. Although learning these different coding languages may seem difficult and somewhat foreign at first, as you continue to familiarize yourself with the basics of HTML and CSS, the process will become more clear and easier for you to use. It's critical for you not to give up on learning the specific codes and maintain practicing how to create them in order for your blog to be fully successful. As you continue to learn the "ins and outs" of coding for HTML and CSS, there are many outlets that consist of different websites that will prove to be extremely beneficial in your quest to master these computer languages.Below we list the best sites you can visit to help you learn the basics and get you on the way to become an expert coder.
Click Here To View Full Post >>

Tuesday, 11 December 2012

A Matter Of Style: Why Design Matters More Than Content

Guest Post - Our host is Mara Fuchs, here Mara makes a case on just how important your blog design can be.See How To Become a guest author on Spice Up Your Blog.

Picture the following: you have two plates of food in front of you, both containing cheeseburgers. One plate contains a large but rather greasy fast-food chain burger and a side of stale fries. The second contains a micro-burger: a small, pesto and truffle oil infused patty in a small brioche bun with a side of four thick cut appetizing Belgian fries and a small decorative carrot carving. Which one would you choose?

Odds are you said the latter (unless you were really, really hungry…). That’s because while content is one of the most important things to take into account when trying to attract traffic to your site and rank better it is not the most important thing. The design, layout and ease of use are far more important.

Think of it this way: you might have Pulitzer-worthy content on your page but if the layout is awkward or simply unappealing, very few people will actually make it to your content. Good can help you get potential customers or readers to your page but their efforts will be squandered if the customers just click back after taking a look at your site design.
Click Here To View Full Post >>

Monday, 15 October 2012

6 Blog Design Tips That Will Get You Better Results

Blog design tipsGuest Post - Our host is Abel Velazquez, here Abel has some blog design tips for your blogs.See How To Become a guest author on Spice Up Your Blog.

With most blogging platforms being geared for beginners, blog design can be as simple as choosing from a selection of pre-made templates and uploading a logo for some users. This might work for you, but if you want to take your efforts to the next level, then be prepared to take it up a notch.

Following are six high-level blog design tips that will help you see noticeably better results.
Click Here To View Full Post >>

Thursday, 27 September 2012

8 Expert-Level Blog Design Tips for Beginners

Blog Design LogoGuest Post - Our host is Sara Carter, In this post Sara has some great blog design tips.See How To Become a guest author on Spice Up Your Blog.

When it comes to building a dynamic blog online, it is essential to keep several key factors in mind. Many beginners feel overwhelmed by the assortment of information available, finding it difficult to understand what makes a blog stand out as professional and effective. Fortunately, understanding the essentials of dynamic blog design doesn’t have to feel like an impossible mission. The following 8 tips will start any beginning blogger off on the right foot, equipping a newbie webmaster to build an online destination that will rival the competition.
Click Here To View Full Post >>

Wednesday, 29 August 2012

25 Awesome Examples Of Alluring About Us Pages

Guest Post - Our host is Ben Rogan, In this post Ben has listed 25 amazing About Pages sure to Inspire you.See How To Become a guest author on Spice Up Your Blog.

Whether you own a personal blog or manage an ecommerce platform; the ‘about’ section of your site should be the place where your personality really shines. However, so many sites succumb to the typically dry bios, which ultimately lack originality and a unique ‘voice’. Here’s a variety of sites in a variety of niches, which do a great job of breaking the mould; whether it be a witty write up, clever design, or a mix of the two.

Collection Of About Us Pages

Click Here To View Full Post >>

Monday, 27 August 2012

Twenty Must-Have Online Image Tools For Bloggers

Old Can With Image ToolsGuest Post - Our host is Goranka Radojcic, in this post Goranka goes through the best online image tools.See How To Become a guest author on Spice Up Your Blog.

The Web has definitely gone visual. Pinterest is the latest craze and trend. Various surveys and reports show that the site is a great source of traffic and incoming links to content creators. And the popularity of visual content is still growing. Savvy bloggers turn this visual trend to their advantage.

Here is the list of twenty free and nifty web tools that can help us to create more appealing imagery for spicing up our blogs and sites.
Click Here To View Full Post >>

Tuesday, 21 August 2012

15 Things You Do To Your Blog Without Knowing They Are Harmful

Dos And Dont's Correct Tick And Red XGuest Post - Our host is Patrick Del Rosario, In this post Patrick has some great blog tips to keep in mind so you work with your blog not against it.See How To Become a guest author on Spice Up Your Blog.

The benefits of blogging in today’s digital age almost go without saying. From better rankings on search engines, more value to website visitors and a forum to speak you and your brands voice, blogs have taken the online world by storm and lent a way for businesses and people to engage better and more with others. Still, in spite of the increasing popularity, many bloggers still make crucial mistakes that hurt the quality of their blog and may end up harming their own image unintentionally.

Here are 15 ways you may be harming your blog without realizing it.

Click Here To View Full Post >>

Monday, 9 January 2012

How To Use A Drop Cap Large First Letter In Posts On Blogger

A very popular effect used in magazines and newspapers is a drop cap first letter to paragraphs.This effect can also be found on many blogs and websites.The effect is a large first letter stretching down three or four lines with the text wrapped around.The drop cap letter can also use a different font and can be a different color to the rest of the text.Almost two years ago i published a post showing how to add a Drop Cap to your blog, in this post i have an even easier more effective method.This method needs just a few lines of Css to be added to your template then the first letter of every post on your blog will automatically be a drop cap.You can then choose the color and font of the drop cap.Check out the Blogger screenshot, demo and tutorial below.Wordpress users can use the Wordpress Drop Cap Plugin.


View Demo Button

Add The Drop Cap Large First Letter To Your Blogger

Click Here To View Full Post >>

Friday, 5 August 2011

How To Add Stacked Polaroid And Other Cool Effects To Images

Edit ImagesThere are hundreds of image editing and resizing services available online so finding a quick and easy option can be hard.One service i use regularly is Dr Pic as it has just a few quick editing options and a re size option with an instant preview.The stacked Polaroid effect is probably the one i use most and i have received a few Emails asking how it's done.So i have created a short video to show you how to use Dr Pic to edit and re size your images.
Click Here To View Full Post >>

Wednesday, 3 August 2011

A Neat Bold Red Drop Down Menu For Blogger Using Just Css

In the last post we had a tutorial for a very unique style of drop down navigation menu for Blogger.That menu used a horizontal bar as the drop down to display links on hover.This menu uses the more conventional style of a vertical drop down to display links.It has a large bold red on grey color scheme that stands out and looks great.As with the last menu it's built purely from Css using just two images.Below you can see the screenshot and a live demo to see it in action.

drop down menu blogger

View Demo Button

This menu is also courtesy of the awesome Free Css Menu, let's add it to your blog.

Add The Bold Red Drop Down Menu To Blogger


Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

Step 1. In Your Blogger Dashboard Click Design > Edit Html

Design Edit Html Blogger

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

]]></b:skin>

Step 3. Copy and paste the following code Directly Above / before ]]></b:skin>

Note - This is a scroll box make sure to get all the code.
/*Start Css Menu*/
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimTwg5sk8zNhFGoE6JfCZ4pZKFWhjDW9IjYpBkkCJQJGAsmyFepBJBRYo2rRyQ7XvERBvZvDE8kgWVM2G-1BC3kt-91N2BGbfxbDqapP-1oLrIV_v2H6wANdb747SFPZM3ZsIO9GipeeTZ/s1600/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #a80329;
border-right:2px solid #a80329;
border-bottom:2px solid #a80329;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNQsJa9k5QsTDHNtKZVbRuMQCgMDtHVsIwO7ivkbPEw-Rp7K5QKvhMhfA5cLUKjwKHBMVX7ZRzS5_CQGlVT8Stwj4WnWcbSCPern86hHgn9whbfFZ_R-LoDhChuAe0ob3pIozmxmz2lnoQ/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}

/*End Css Menu from http://www.spiceupyourblog.com*/

Step 4. Save your template.

That's the Css added next is to add the html for your menu.

Now go to your blogs Design Page, we will be adding the menu across your blog below the header.This area is called Cross Column and can be seen in the image below.If your blog does not have this section available you can see how to enable it here - Add Full Width Cross Column Gadgets To Blogger.


Add The Menu Html


In your blogs Design Page click Add A Gadget > Choose Html/Javascript > Copy and paste the following code into the Html/Javascript gadget :

<div class="menu">

<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#" >Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>

This is the code that makes up the menu in the demo above.Replace the hash tags (#) with your links and the text with your text.If you take a few minutes to reference the demo and the code you should see how it works.If you want to add more links you can do so in the same way, once again take a few minutes to look at the layout of the code and you will see how its done.

Template Designer Tabs Fix


If you use a template from the Blogger Template Designer there is a section of Css that will effect this or any menu you place in the cross column section.This is called tabs and you will need to remove or over ride the tabs css.I have made a short video to show you how to remove it.You can see the video here - Remove Tabs Css.

That's it simple ! Make sure to check out more of our Css tutorials and Blogger gadgets.

Drop Your Comments And Questions Below.

Sunday, 26 June 2011

How To Use Images For List Bullet Points On Your Blog

Images As Bullet Points In ListsIn this post i have a really cool Blog Design Tip to spice up the lists on your blog.When you create an ordered list, items in the list are numbered, and in an unordered list items have what is called a bullet point.What we will do in this post is replace the default bullet point with an image.We do this with just a small snippet of Css including the image URL.To make it as easy as possible i have 10 ready to use images for your bullet points but you can of course use your own image.I also have this set so you can just use the image bullet point on selected lists.If we set it to work on all lists on your blog it could mess up your sidebar and other sections.
Click Here To View Full Post >>

Wednesday, 8 June 2011

New Blogger Feature - Add A Favicon To Your Blog

One of the things that can give a blog more of an identity and a brand is a logo that people will come to associate with the blog.In the same way we become used to seeing the logo of a blog also used as the favicon.Favicons are an important part of how we see a blog and how we remember a blog.In a previous Blogger Tip i showed you how to add a favicon to blogs on Blogger but today Blogger have taken action and made it part of the options on your blogs design page.So from now on with just two clicks you can add a custom favicon to your blog.

favicon on blogger

What is a favicon ? A Favicon is the small image you see beside the address bar in your browser and depending on the browser you use it is also visible in the tab menu.If you look beside the address for this page at the top of your page you should see the same brush logo that is in the header.For more information here is a link to the wikipedia page on Favicons.

To see how to have a custom favicon on your blog check out the blogger in draft post here - Customize Your Favicon.

Drop Your Comments And Questions Below.

Monday, 6 June 2011

Beautiful jQuery Lavalamp Floating Bubble Menu For Blogger In 6 Styles

Blogger jquery menuI recently realised i had not covered navigation menus too much in our Blogger Tips on Spice Up Your Blog.I Guess most custom templates already have a menu and templates from the template designer have tabs enabled which will turn a link list or page list into a menu.However i knew i wanted to cover the jQuery lava lamp or floating bubble menu as it is seriously cool, interactive and i have not seen it on any Blogger blog.The lava lamp menu has an effect you may have seen on other websites, a bubble is visible behind the first link title (Usually Home) on the menu and when you place your cursor over another link title the bubble slides up to that link.It looks awesome and as ever the use of jQuery makes it possible and smooth.As an extra bonus we have this effect added to 6 different color styles of menu you can quickly add to your blog !
Click Here To View Full Post >>

Wednesday, 11 May 2011

Display Post Author, Date And Labels With Icons Below Blogger Post Titles

On the recent post showing how to Display A Default Avatar For Anonymous Comments a comment by RedCherii asked "How do you put those little icons beside your post details (author, date, label) and make them appear below your post title?".The icons and details RedCherii asked about can be seen below the title of this and every post on Spice Up Your Blog.So for Redcherri and anyone else who likes them, in this post i will show you how to add them to your blog.What we are adding is the default Author Name, Post Date And Labels from the post with 16x16 icons to the left of each.I also have a pipe character splitting each, the code will be placed in your template to display this directly below the post titles.
Click Here To View Full Post >>

Tuesday, 10 May 2011

An Amazing jQuery Image Zoom Effect For Blogger

Many of the latest posts have been looking at Css effects and Image effects so in this post we will continue with the images but bring some jQuery into the mix.If your a beginner thinking whats he talking about don't worry we will have all the steps set up for simple copy and paste.The effect we will achieve in this post is very cool.When you add an image to your blog you can allow users to hover over that image and a larger version appears.Users can then move the cursor around the small image and see it zoomed.The demo below will show you exactly how it works.


View Demo Button

Click Here To View Full Post >>

Monday, 9 May 2011

Add A Simple Css Bump Effect To Your Blogs Images

css3 logoWe all like images effects and adding some style to the pictures we use in our blogs posts.Some effects can be quiet elaborate (I have the very cool light box effect just about ready to publish) but sometimes a simple hover effect looks great.In a recent post i showed a rollover effect with some social icons changing one image to another on hover (we may look at using Css Sprites in future), in this post we will make your images simply Bump !
Click Here To View Full Post >>

Thursday, 5 May 2011

Simple Css Only Tooltip Hover Descriptions For Blogger

The Tooltip has become a common resource and is used by all the major sites to describe a link or give more help and information on a section of text.Often when using Google products you will see a small question mark that you can hover over to see a pop up with more information.I covered tooltips before using html, javascript and images to create the actual pop up.In this post however i have a really cool way to have tooltips on your blog using just Css.If your not too savy when it comes to this sort of thing, basically this is much easier, much faster to load and presents less chance of errors.
Click Here To View Full Post >>

Sunday, 24 April 2011

Display A Default Avatar Image For Anonymous Comments On Blogger

In the comments for my Recent Post about the New Blogger Design And Dashboard Going Live Ahmad Nuzul Asked "Can u make a post on how to make a custom avatar for anonymous comments? Thanks.".

No Problem ! In this post i will show you how you can have a default image appear as the Avatar Thumbnail for comments not only by anonymous commenter's but also for comments left using some of the other log in options or people that have no Image Uploaded to their Blogger / Google account.
Click Here To View Full Post >>

Tuesday, 19 April 2011

The New Blogger Dashboard And Design Is Live

Blogger In Draft Design LogoBlogger today announced they have started the release of the New design Blogger Dashboard and User Interface Design.The release at first will be on Blogger In Draft, Quiet common for new releases but it will also be added to only some accounts at first .A random number of users will have the new Blogger dashboard from today when they log in via Blogger In Draft and over the next few days and weeks it will be added to more until all users have the new Dashboard in draft.Usually a new addition to blogger that is tested in draft finds its way on to the main blogger site within a week or two but a change this big could be longer.
Click Here To View Full Post >>

Use A Cool Envelope Background Image On Your Blogger Comments


In this post we are going to see how to add a really cool envelope image behind your Blog Comment Form.The envelope image will blend in with the comment form itself along with the Post A Comment Message, Post Comment and Preview Buttons and subscribe by email link.The image is grey with a nice design in the top left and a small icon will be below the subscribe by Email link users click to be notified of replies.
Click Here To View Full Post >>