April 3, 2011 By April M
This code below will allow all your links and buttons to open in a new window without having to do any extra work (meaning – WITHOUT adding the target=”_blank” to each and every link). Yay!! The code below will scan your blog for external pages and add the target=”_blank” to each and every one of them.
Before you begin please be sure to save a copy of your current HTML Code to your computer first.
Step 1: Log into Blogger then click on “Design” > “Edit HTML”
Step 2: Press Ctrl+F and find this code . Right before that code copy and paste the following:
//
jQuery(‘a’).each(function() {
// Let’s make external links open in a new window.
var href = jQuery(this).attr(‘href’);
if (typeof href != ‘undefined’ && href != “” && (href.indexOf(‘http://’) != -1 || href.indexOf(‘https://’) != -1) && href.indexOf(window.location.hostname) == -1) {
jQuery(this).attr(“target”, “_blank”);
}
});
//]]>
Step 3: Click “Save Template”
Let me know if it works for you.
April 3, 2011 By April
Hover over this image to see an example of the effect you can do with this code!
Using the code below, paste in your own URL, the URL of your default image, the URL of your hover image, and the alternate text to display.
Be sure to keep the ‘ on either side of your image URLs or this code will not work.
You can paste it in any HTML/Javascript widget, and even use on your menu bar!
April 3, 2011 By April M
Ever wonder how someone was able to center a button or image. Maybe you loved the way their blog looked because all their buttons and images were the same size. Here’s how to do that and make your blog look organized and together.
I will give you an example for a button in your sidebar.
Step 1: When you add a button in your sidebar the HTML Code will look something like this:
Step 2: To have your button centered in the sidebar add the code
at the end. It should look like this:
Step 3: Now to adjust the size of your button/image you will need to add a code for the height and width.
You can change the width to what ever size you need or like. Change 100 to 125 or 80… whatever works for you!
You can use these same tricks in your posts but you need to be in the “Edit HTML” area. Leave me a comment below if you need more help with this.
April 3, 2011 By April M
Sometimes I would like to schedule when my new post will show on my blog at a certain date and time instead of me having to go in and post it manually. Here is how to do that:
Step 1: After you have created a post click on “Post Options” under “Labels”.
Step 2: Choose “Scheduled at” under “Post date and time”. Enter the date and time you would like your post to show on your blog.
Step 3: Click “Publish Post” and wah-la!
April 3, 2011 By April M
Here is a very simple and easy way to add the copy code box under your Button. The copy code box allows others to use and place your button on their site which will drive more followers/readers to your blog.
*New* There is a video at the bottom of the page on how to do these steps.
Step 1: Once you have your button created upload it to Photobucket.com.
Step 2: Click on the HTML code and that will copy it for you.
Step 3: Log into your Blog and click on “Design” and you should automatically be under the “Page Elements” tab.
Step 4: Click on “Add a Gadget” then “HTML/Javascript”
Step 5: Right Click (or press ctrl + v) under the Content area and paste the HTML Code you copied from Photobucket it should look something like this:
Replace the area in blue (above) with your Website URL.
You can center your button by adding
at the end of you HTML Code.
Step 6: Highlight and Copy your HTML Code again and paste it right under the first one and add
plus to the end of the HTML Code. This is what your finished Button with Copy Code will look like.
Step 7: Save it and take a look! Leave a comment below and let me know if it works.
April 3, 2011 By Julie
WordPress and Blogger both have advantages and disadvantages. I could argue both, but that’s not what this post is about. The fact is that many people find Blogger to be a more user-friendly platform but find WordPress less limiting than Blogger. The compromise? A WordPress theme that has been modified to Blogger. There are a number of these themes hanging around Google, but I am about to introduce you to one of my favorites which is called the Revolution Lifestyle template. An example of this template can be found here: http://revolutionlifestyletemplate.blogspot.com/ The blog template is free but is rather basic. This premium template can be downloaded from magznetwork.com for $25 and allows for unlimited use. Beyond the striking organization of this template, the following options are available for use in this template: a smooth slider for featured content, video, automated lists of specified labels, drop down menu, favicon, an optional 3 column footer and more.
The CSS is rather intimidating upon first glance; however, the Magazine Network does a nice job of explaining everything and offers a screenshot of the dashboard with labels corresponding to the CSS, making customization pretty simple. Speaking of customization, there are two options when downloading the premium template: images mode and colors mode. I have used both and even with a background in CSS and HTML found colors mode infinitely more user friendly and easier to customize.
Who would benefit from this template? Blogger users who are nervous about using WordPress, bloggers who have a lot that they want organized (review and giveaway bloggers, for example), bloggers who use tons of labels that they want more organized, bloggers who want seamless features like a featured content slider, and/or bloggers who want a streamlined look.
Do not be fooled. While this template is streamlined, I have seen (and created) some pretty neat designs with this template.
One should be warned that this template is not without flaws. Many of the tutorials, which you obtain access to upon purchasing the premium template, have the statement: “Save and see if it works for you”. I have to say, though, that I have never encountered a problem. I haven’t found their forum to be particularly helpful either.
Don’t let any of that hold you back, though. The template really is a great compromise if you’re a Blogger user or designer looking for a professional, streamlined, and organized template!
April 3, 2011 By Julie
As a designer, I do just about anything I can to save time. Save time on my designing and minimize load time for web readers. This doesn’t mean I skimp on quality. Just the opposite, in fact. Using CSS coding rather than imagery, you can speed up load time of your page and in this tutorial, I will show you how to add a shadow behind elements on your blog and give it a 2 dimensional effect using CSS.
The first thing is to know that not all browsers will recognize this effect. I am going to slowly step off of my soap box regarding not using Internet Explorer; however, IE9 users should be able to see shadows (not all hope is lost, I suppose). At any rate, because we want the most readers possible to see this effect, we will apply 3 different lines, which all have the same purpose.
The basic code is:
box-shadow: 0px 3px 10px 10px #000; -moz-box-shadow: 0px 3px 10px 10px #000; -webkit-box-shadow: 0px 3px 10px 10px #000;
}
We put the box-shadow for Opera users, moz-box-shadow line for Mozilla users, and webkit-box-shadow for Chrome and Safari users.
The next step in successfully using this code is to understand what it means!
The very first number defines the horizontal shadow, the second number defines the vertical line, the third number defines the blur distance and the fourth number defines the spread distance (all in pixels). Where it says #000 is the hex color. You may replace this with an rgb code if you are more comfortable with that. Each of these numbers may be played around with. The above code is just an example.
If you choose to use a shadow and would like to change the side that the border shows up on, try playing with negative numbers for the horizontal and vertical codes. If you would like to see an inner shadow, simply place the code “inset” (without the quotes) after the colon on each line. An outer shadow is default and therefore does not require a code.
And that reminds me, each of your lines should be identical. They are simply representing browser compatibility and since you want your page to look the same in different browsers, just keep it the same!
The next step is to understand where to put this code.
You can place this code under any element in your CSS that you want. I often will place the code within my #outer-wrapper code in Blogger. If you do this, I recommend giving the outer wrapper a background color (here it is white). A border is not necessary either, as your shadow will be your definition bewteen the outer wrapper and background, but can be fun! A border will also ensure that those who cannot see the shadow do see some definition.
The code may look like this:
#outer-wrapper {
width: 1000px;
margin:20px auto;
background: white;
text-align:$startSide;
border: #d7d7d7 ridge 10px;
font: $bodyfont;
box-shadow: 0px 3px 6px #000;
-moz-box-shadow:0px 3px 6px #000;
-webkit-box-shadow:0px 3px 6px #000;
}
You may notice I don’t have a spread distance listed in the above code. Like I said, play around with your numbers, because it’s not always necessary.
You may also leave the shadow code out of your outer wrapper and simply choose to put it on your sidebar to have that stand out. Find #sidebar-wrapper in your CSS and place the code there instead. You can even put a shadow behind photos. To do so, find code .post-img { and put the code there.
You can add things like add rounded corners, color, borders and more to this code. There are many options, so play around and have fun with it!
April 3, 2011 By The Blog Designer Network
Don’t do these 5 dirty design deeds
http://sixrevisions.com/web_design/negative-space-in-webpage-layouts-a-guide/
Negative Space in Webpage Layouts: A Guide
Mega Collection of Cheatsheets for Designers & Developers
http://sixrevisions.com/web_design/how-to-stay-ahead-of-the-curve-as-a-designer/
How to Stay Ahead of the Curve as a Designer
http://www.patterncooler.com/
A Free Seamless Pattern Backroung Design Resource
Free Fonts: 100+ Fresh and Free High-Quality Fonts
http://webdesigneraid.com/5-awesome-things-that-you-can-do-with-css3/
5 Awesome Things That You Can Do with CSS3
http://www.noupe.com/graphics/design-charts-for-better-typography-and-color.html
Desgin Charts for Better Typography and Color
http://www.wpchildthemes.com/plugin/genesis-footer
Genesis Footer
http://webdesign.tutsplus.com/articles/designing-in-browser-a-manifesto/
Designing In-Browers: A Manifesto
http://www.inc.com/magazine/20110301/making-money-small-business-advice-from-jason-fried.html
How to Get Good at Making Money
http://lostandtaken.com/gallery
Texture Gallery
http://wordpressreviewplugins.com/
Turning WordPress Into an Affiliate Review Site is Easy…If You Use the Right Plugin!
http://designshack.co.uk/articles/layouts/10-tips-for-troubleshooting-a-lackluster-design
10 Tips for Troubleshooting Lackluster Design
Workshop: A Better WordPress for your Clients by Troy Dean at WordCamp Melbourne 2011
Workshop: A Better WordPress for your Clients
http://blog.typekit.com/2011/03/17/type-study-typographic-hierarchy/
Type Study: Typographic Hierarchy
http://www.prelovac.com/vladimir/
Organic Search Optimization Strategy for 2011
http://cssmenumaker.com/
CSS Menu Generator
http://www.tehkseven.net/news/475-free-vector-icons
475 Free Vector Icons
http://www.graphicleftovers.com/
Graphic Leftovers (Vector Images)
http://picketfenceblogs.com/
Picket Fence Blogs
http://www.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques/
Technical Web Typography: Guidelines and Techniques
http://wpcandy.com/made/the-sample-post-collection
Easier Theme Development with Sample WordPress Content
http://depositphotos.com/
Deposit Photos (Vector Images)
http://codex.wordpress.org/Template_Hierarchy
Template Hierarchy
http://www.quackit.com/html/codes/html_email_code.cfm
HTML Email Code
Host your own SIFR fonts (Video)
http://tutsplus.com/
tuts+
CSS Tricks
http://makincuteblogs.com/2011/02/20-awesome-high-resolution-texture-freebies/
20 Awesome High Resolution Texture Freebies!
The Pors and Cons of Art Directed Blog Posts
Free Fonts
Kevin & Amanda Fonts
* http://www.kevinandamanda.com/fonts/freescrapbookfonts/ — Scrapbook
* http://kevinandamanda.com/fonts/fontsforpeas/ — Pea Fonts
http://www.dafont.com/
http://misstiina.com/fonts/
http://www.1001freefonts.com/
http://www.urbanfonts.com/
http://www.sugarfrogfonts.com/
http://new.myfonts.com/
http://www.letteringdelights.com/
http://www.fontsquirrel.com/- Commercial free
http://www.google.com/webfonts