Different Backgrounds For Each Post

Hi all! Are you ready for a new blog tutorial here at Design It Chic!?! Then let's get started! Without further ado, the topic for today is: how to create different backgrounds for each post. This will definitely be a super hit especially if your blog focuses on more topics:)



1. This little trick it's as easy as 1, 2, 3. First thing, you need to sign in your blog's "Dashboard" and then go to "Posting" and select the "New Post" tab. Make sure you're in the "Edit Html" composing mode as shown in the picture below:


2. Now before you start writing your post as you regularly do, you need to add this piece of code in your blog's text editor:

<div style="background:url(YOUR_PICTURE'S_LINK) no-repeat;"></div>
3. Once you added the code, you now need to upload the picture you want to use as the post's background to a free image web-host. A few examples are: Flickr, ImageShack, TinyPic, etc.


4. Once you have uploaded your picture, you need to copy the direct link of your picture and paste it instead of "YOUR_PICTURE'S_LINK" part of the code given in the second step of this tutorial. If you don't know how a "picture's link" looks like, here's an example:

http://www.flickr.com/photos/tutorials/uploads/
5. Now you can start typing your post, but your text should be written before the ending "div" tag as shown in the picture below:


6. After you're done writing your post, everything should look something similar to this:


7. Now you can hit "Publish Post", and your post should look like this:


That's it! Hope you guys enjoyed this little tutorial. Now you can have a different background to each post you want, by simply uploading new photos in your Flickr account and change the picture's link in the code above. This way not only will you impress your readers with how cool you are but you can also keep your posts organized by the background theme:) Pretty neat, right?!

And don't forget, if you missed anything here at Design It Chic, you can check the Blogger tutorial section for more tutorials, the SEO department for more tips to improve your blog's traffic or check out the Unclutter tips column for more tips on making your blog clean and easy to access!
Have a great week everybody!

Create "after the jump" Post Summaries

Hi all! Are you ready for a new blog tutorial here at Design It Chic!?! Then let's start our engines! This tutorial will be focusing on some special features for our blog posts, so the topic for today is: how to create "after the jump" post summaries. This will definitely help you catch your reader's eye with the main phrase of your post and display as many posts as you'd like without having to scroll down for five minutes until you reach the bottom of your main page:)



1. First thing, you need to sign in your blog's "Dashboard" and then go to "Posting" and make sure you're on the "New Post" tab.


2. Now there's two methods you can do the post summaries. If you're using the old editor to write your posts, the only thing you need to do is make sure you're in the "Edit Html" mode and then add this piece of code where you'd like your post summary to stop, like shown above.

<!–– more ––>

3. If your using the new editor you need to make sure you're in the "Compose" mode and look for the "Insert Jump Break" button like shown in the picture below.


4. Now hit "Publish Post" when you think you're done and voila! This is how the blog post should show before the jump break:

5. And this is how the post should look after pressing the "Read more" button:


6. Now you can even change the link to say what you want. You can customize the "Read more" button by going to "Design", then on the "Page Elements" tab and then hit the "Edit" button in the "Blog Posts" area.


7. Now a pop up window will appear. On the top right corner of the pop up window you will find a field that says "Read more". That's where you can click and write you own message. Now on top of that field there's also the option where you can choose the number of post you want to display on your main page, so you can take care of that now too.


8. After you're done, you hit "Save" and enjoy the new post summaries you just created. Hope this little tutorial will help you display as many posts as you'd like without actually showing the entire post content on the main page:)

And don't forget, if you missed anything here at Design It Chic, you can check the Blogger tutorial section for more tutorials, the SEO department for more tips to improve your blog's traffic or check out the Unclutter tips column for more tips on making your blog clean and easy to access!
Have a great week everybody!

How To Remove The Posting Date

Hi all! Are you ready for a new blog tutorial here at Design It Chic!?! Then let's get going! Today's tutorial will be focusing on making our blogs look more professional, so the topic for today is: how to remove the posting date. This will definitely help you free up some space in the most visually targeted spot on your blog, as well as make your overall blog look more professionally:)



1. First thing, you need to sign in your blog's "Dashboard" and then go to "Design" and hit the "Page Elements" tab.


2. Now scroll down and hit the "Edit" button on the "Blog Posts" area.


3. A pop-up window will open. Next thing, you will need to unmark the first and the third bullet and then hit "Save".


4. Now make sure to click the "Save" button in the "Add and Arrange Page Elements" area, and you're done.

That's it! No more dates and other unnecessary lines that occupy space and distract attention from the posts. Hope this little tutorial will help you on the way of getting your blog look a little more professional and have fun with it:)

And don't forget, if you missed anything here at Design It Chic, you can check the Blogger tutorial section for more tutorials, the SEO department for more tips to improve your blog's traffic or check out the Unclutter tips column for more tips on making your blog clean and easy to access!
Have a great week everybody!

Add a header to your blog

Hi all! Are you ready for a new blog tutorial here at Design It Chic!?! All right, then let's get down to business! Many of you have asked about this one, so without further ado, the topic for today is: how to add a header to your blog. So here's the chance to get rid of that old school text to the top of your blog:)


1. First thing you need to create a header of 760px wide either using a free software like GIMP or a paid software like Photoshop or you can simply pay a small fee to a designer to create it for you. Once you have the header image, here's how you can install it in your blog without it interfering with your blog title.

2. You need to sign in your blog's Dashboard first and then go to Design.


3. Now hit the "Edit" button on the "(Header)" area. A pop-up window will open. You will need to mark the "From your computer" bullet and add the image from where you have it saved on you computer.

4. Then make sure you check the "Instead of title and description" option.


5. And now click Save.

That's it! You can now enjoy your new header without the fuss of having to deal with that old school text in your header area. Hope this little tutorial will help you have more fun with your blogs and enjoy every single bit of it:)

And don't forget, if you missed anything here at Design It Chic, you can check the Blogger tutorial section for more tutorials, the SEO department for more tips to improve your blog's traffic or check out the Unclutter tips column for more tips on making your blog clean and easy to access!
Have a great week everybody!

Disable right click on your blog!

Hi all! Are you ready for a new HTML tutorial here at Design It Chic? All right, then let's get down to business! We know you're going to love this one, so without further ado, the topic for today is: how to disable right click on your blog.



1. First thing you need to sign in your blog Dashboard, go to Design and click on Add a Gadget.



2. Now choose the HTML/JavaScript gadget.



3. For the final step place this piece of code inside:


<script language="JavaScript">

<!--

//Disable right mouse click Script

var message="Function Disabled!";

///////////////////////////////////

function clickIE4(){

if (event.button==2){

alert(message);

return false;

}

}

function clickNS4(e){

if (document.layers||document.getElementById&&!document.all){

if (e.which==2||e.which==3){

alert(message);

return false;

}

}

}

if (document.layers){

document.captureEvents(Event.MOUSEDOWN);

document.onmousedown=clickNS4;

}

else if (document.all&&!document.getElementById){

document.onmousedown=clickIE4;

}

document.oncontextmenu=new Function("alert(message);return false")

// -->

</script>



4. And now click Save.

That's it! Easy as saying "Apple Pie":) Hope this little tutorial will help you guys protect your dear blogs and the time you spend building it up.

And don't forget, if you missed anything last year, you can check the Blogger tutorial section for more tutorials, the SEO department for more tips to improve your blog's traffic or check out the Unclutter tips column for more tips on making your blog clean and easy to access!
Have a great week!

Search Button Tutorial

Hi all! Today we'll be teaching you guys another useful blog tutorial here at Design It Chic! We know how everybody waited for new HTML tutorials, so what do you say about one that will help you search easily through your blog? That's right: a "Search" button tutorial. Are you all in?! All right! With the promise of more to come, lo and behold:
Today's topic: how to create your own "Search" button.



1. First thing, you need to sign in your blog Dashboard, go to Design and click on Add a Gadget.



2. Now choose the HTML/JavaScript gadget.



3. The next step is to place this piece of code inside:

<p align="left"><form id="searchthis" action="YOUR BLOG'S URL/search" style="display:inline;" method="get"><strong>YOUR BLOG'S NAME<br/></strong><input id="query" maxlength="255" name="q" size="20" type="text"/><input id="search button" value="Search" type="submit"/></form></p>

4. Just don't forget to replace "YOUR BLOG'S URL" with yours (e.g: http://designitchic.blogspot.com) and "YOUR BLOG'S NAME" with the name of your blog (e.g: Design It Chic). If your blog's name is too long however, you can replace that value with "Search Here" or something that fits:)

5. And then click Save.

6. This is how it should look like:



Hope you guys will enjoy yourselves playing around with your blogs. It's so much fun to make your blog nice and in the same time easy to access for your readers. Hope this tutorial was helpful to you all and looking forward to more fun ones to come, so stay tuned!

Now, if you missed anything last year, you can check the Blogger tutorial section for more tutorials, the SEO department for more tips to improve your blog's traffic or check out the Unclutter tips column for more tips on making your blog clean and easy to access!
Have a great week!

How to make crossed out text

Hi all! Midweek so today we'll be teaching another one of our easy HTML tutorials! What do you guys say about the crossed out text?? I'll share with you how to do that and even bump it up a bit, cause text with a strike through line is the new Justin Bieber:)



1. First you can cross your text with a line by copying this paragraph:

<s>your text here</s>
Replace "your text here" with your own text. This is how it turns out: your text here


2. Now you can go ahead and make the text oblique, by copying this line:

<s><i>your text here</i></s>
Your text now should turn out something like this: your text here instead of just your text here


3. And to even make the text stand out, you can use this line:

<s><i><b>your text here</b></i></s>
And your text now can turn out like this: your text here instead of just your text here


Now here are the 3 stages your crossed text got through:
your text here
your text here
your text here

Pretty neat right? And easy:) That's it for today. Hope it helped! Oh and before i forget, don't worry i read all your emails with requests on teaching stuff *so keep 'em coming*, but it takes a while until i catch up with all the requests:) For that reason check back to see what comes up next in Blogger tutorial section, take a look at the SEO department for more tips to improve your blog's traffic or join us to learn new HTML tricks and tips every day! Maybe your topic request is being answered tomorrow, who knows?!:)

Make your blog stand out!

Hi all!!! Since here at Design It Chic we're putting our blogs in the check-up spot, today we'll focus our attention over how to make your blog bling through:)
There's a lot of blogs out there that are new to the blogging community, they have great content, yet somehow they don't manage to break through. Well besides a lot of SEO tricks and decluttering tips, blog design and other easy HTML tutorials, there's also this thing called branding your blog.

So today's topic will be just that: how to make your blog stand out!

1. There's many ways you can attract attention, but the best way to do it is "Spiderwebthinking": you need to think in layers strong enough to be able to repeat symmetrically but always be new and sticky. So the first step in being a pro' blogger is to be consistent! If you blog just here and there, that's just fine, but if you really want to step up a notch you need to post at least 3-4 times a week. There are also blogs that post 2-3 times a day, which is good, but if you're just now building up, without the proper SEO customization and good content, there's hardly any point in that. So if you want to have a steady and meaningful growth over the bloggiland, you need to remain consistent!


2. Besides the design elements that make you unique, the next important branding tool for your blog is your voice. There's a lot of good content over the internet, but what draws you to read a certain blog over another? Isn't it the way the content is served back to you? I think so! It doesn't matter whether you're sarcastic and funny, or serious and profound, you gotta find your voice and follow it! Your audience will shortly follow up with you if they feel like you're exposing who you are through your content or the way you flip it back to them.


3. Another great branding stratagem is helping your readers understand abstract concepts! So for instance if working with coupons is what you do since the-bad-haircut-highschool-days, you need to remember there's also Betty-the-geeky-chick who has no clue what CRT or FAR means.(and just for the record i just Googled these terms and seems like they mean..CRT=Cash register tape ; FAR=Free After Rebate... i admit i suck at this:) So next time you're talking about concepts that seem normal to you, make sure you translate those into "regular-language" so everybody can understand:)

4. To push the blog brand even further, create your own new concept and give it a catchy name! For instance if you're a recipe blog, you can come up with the concept of let's say each recipe you try you gotta make it your own by adding at least 3 new ingredients that moves the taste to a whole other level. You can name that "the 3 scoops". Your readership, may get infected with the catchy name and use the term outside your blog, and who knows, you may become contagious:) So next time you're directing a new blogging scene, make sure you stamp that concept with a catchy etiquette.


5. The last but not the least branding secret is to create a unique way of saying old stories new! It's true that there's few things that can be totally new to your readers, so nobody asks you to reinvent the wheel, but can you at least pimp the wheel(i just had a blackout moment with a pimp my bicycle kind of show :P)
I mean, for example, there's many book review blogs out there, but what if one of them would review the book from the main character's point of view? Wouldn't that be interesting?? It would be to me.. and it would more likely make me read that blog over another one:)

Well I guess that's it for today! Hope it helped!
Check back to see what comes up next in Blogger tutorial section, take a look at the SEO department for tips to improve your blog's traffic or join us to learn new HTML tricks and tips every day!

How to backup your blog

Hi all! Mid-week again, so today we'll be teaching another useful blogger tutorial. There's been a lot of people asking how they can make sure they won't lose their posts or pages or widgets if they ever try messing with their blog.
Well this is easy, so naturally we come to the rescue today with this topic: how to backup your posts and blog template.


First let's backup the blog's posts using the feed option. This way we know for sure we get the text, titles, dates and everything else without going into each individual post. This however only works for blogs that have under 1000 posts. The feed option doesn't support more:) So here is the code you need to backup your posts:

http://blogname.blogspot.com/feeds/posts/default?max-results=X
Replace "blogname" with your own blog name and the "X" (at the end of the code) with the number of posts that you have. The number of posts can be determined by logging into your "Dashboard" like so:


So for instance in our "test blog" case the entire code would be:

http://testblog.blogspot.com/feeds/posts/default?max-results=188
Once you type this URL into a new browser, then you can go ahead and save it in XHTML format on your computer by going into your browser "File" then "save page as".
The icon that will be generated will show the logo of the browser you're using and will have an ".xhtml" extension like so:


So now that we have our posts saved, we can go ahead and save the entire blog's HTML together with the widgets, pages and everything else we have on it.
First we need to sign in our "Dashboard", hit "Design", then "Edit HTML". Now you're seeing your blog's HTML script but without your widgets and gadgets, so in order to do that you have to press the "Expand Widget Templates" button.


Then hit the "Download Full Template". And there you go you have your entire blog's HTML script downloaded for backup:)
Easy-peasy right?? Now you can mess with your blog no worries, since we have the backup done. Hope it helped!

Check back to see what comes up next in Blogger tutorial section, SEO tips department or how we teach new HTML tricks and tips every day!

Open link in new tab -HTML tutorial

Hi all! New week starting off great so today we're teaching another one of our easy HTML tutorials! We've received lots of emails asking how you can make your pictures, previous posts or other friend's sites to open in a new tab instead of switching back and forth using the browser buttons.
So naturally, our topic for today is exactly that: how to make a link open in a new tab.


First thing you need to transform the external sites or previous posts into hyperlinks. If you don't know how to do that, you can find how to create hyperlinks right here. The pictures will work just fine as they are, but the other friend's sites or previous posts of yours, you'll need to transform them into links first.

Once you have that done, everything is simple: you just need to add this piece of code into the mix:

target="_blank"
Now i will show you where to add it in each case, for both pictures or other hyperlinks.

To make the pictures open in a different tab, you need to add that code right here:

To make other links open in a different tab, you need to add that code right here:

Here is one example for both, picture and link so you can see what I'm talking about:

And here are our good friends at: Flowerz In Her Hair!

See, they both open in different tabs rather than just having you go back and forth with the browser tools. Easy-peasy, right?! Now just try it out and play with it and you'll see how easy this actually is! That's it for today! Hope it helped!!

Check back to see what comes up next in Blogger tutorial section, SEO tips department or how we teach new HTML tricks and tips every day!



Oh and the winner from the Munchkin Designs trick or treat tote giveaway is:
Karen(SCMOMOF2BOYS) @ The Mommy Times!!!! Congratulations!!!