Blog Designer Spotlight: The Pixelista

December 1, 2011 4 Comments

Blog Designer Spotlight

I am so excited to share with you what I am starting here at Makin’ Cute Blogs! I have really tried hard to make this a great place where you can find out EVERYTHING you need know about making a cute blog. Since we don’t all have the time to do it ourselves… I really wanted share with you all of the great designers that are out there. Believe me, there are lots of great blog designers out there, so if you are on the hunt, Makin’ Cute Blogs will help you find the designer that matches your needs. I will be spotlighting a Blog Designer every Thursday (or at least ALMOST every Thursday). Each Designer will be asked a series of questions, which will hopefully give you the information that you need to find the perfect designer! You can also find an extensive list of Blog Designers HERE.

This week’s Blog Designer Spotlight is Jessica from The Pixelista! Not only is she our Featured Sponsor, but I know her personally and let me tell you, she is a sweetheart. Always professional and kind, I would recommend her to ANYONE looking for a WordPress blog design. Without further ado….

Q: What platforms do you design for?

A: I do custom blog designs exclusively for the WordPress Genesis Theme Framework. My Custom WordPress designs start at $250! I also have a bunch of free Blogger templates available. :)

Q: What is your design Style?

A: Four words I would use to describe my style are vibrant, playful, clean, and professional.

Q: How long have you been designing blogs?

A: I have been designing blogs since November 2008, so just over 3 years!

Q: Tell us a little background about your business…

A: I started designing blogs as a way to put myself through college, and I never expected that it would morph into a full-fledged, lucrative career for me! I absolutely love what I do and I feel so privileged to work with great clients on a daily basis. :)

Q: What sets you apart from other designers?

A: Clients most often tell me that they chose me as their designer because of my attention to detail. I am a perfectionist, and I take pride in putting a little extra TLC into each of my designs!

Q: Do you have a special offer for Makin’ Cute Blogs Readers?

A: Now through December 25th, 2011 you get 20% bonus cash towards your blog design when you purchase a holiday gift card!

Pixelista Client Testimonials:

Tracy LeCompte - “Jessica has once again been fantastic to work with. The switch was painless, and well worth it!! … If you are considering making the switch, or just looking for a fantastic design for your blog, I encourage you to check out Jessica @ the Pixelista!” [read more]
Tiffany Cruz - “I am head over heels in love with Jessica, she is amazing…Jessica has helped me brand myself and I couldn’t be happier with the results…I’m so elated she is my blog designer go to gal. Jessica’s work is fabulous…her work is well worth the wait.” [read more]
Stacie Vaughn - “If you are looking for a designer who listens, is creative and passionate about her work, is attentive to detail…and is just all round AMAZING, then I fully recommend you contact The Pixelista.” [read more]

Check out some of Jessica’s (The Pixelista’s) Work!

Filed Under: Blog Tips, Custom Blog Design, Custom Blog Designers, Featured Tagged With: Blog Designer, Clients, Custom Blog Design, Testimonials, The Pixelista

Inspiration

November 30, 2011 6 Comments

My inspiration section is SERIOUSLY lacking! So I spent a little bit of time adding some new designs today. I hope to be able to add a lot more, if there are blog designs that inspire you, please comment and let us know about them.

One Charming Party

Let Birds Fly designed by Redbud Designs

Erin’s Reel Life designed by Redbud Designs

Drew B Photography design by June Lily Studio

Astrid Muller Exclusive design by Astrid Mueller, web coding by HDcoding.com.

Forever Frazier designed by The Pixelista

Disterlic Embroidery designed by The Pixelista

Blu Door designed by Penny Lane Designs

Filed Under: 2 Column Template, 3 Column Template, Background, Blog Design Ideas, Blog Tips, Creative, Custom Blog Design, Custom Blog Designers, Custom Illustration, Fun, Illustrations, Inspiration, Layout, Links, Linky Love, Pixelista Tagged With: blog design ideas, inspriation

How to Install a Makin’ Cute Blogs Free Blog Background

November 14, 2011 Leave a Comment

Makin’ Cute Blogs has decided to ramp up the Free Blog Backgrounds! The Best Part: My backgrounds don’t have a button displaying in the top corner of your blog! You get to choose where you want to display the button in your sidebar or footer. Or, you will now have the option to purchase a background and have no button or credit required at all!

All of the Backgrounds are located here in my shop. It is really simple and easy to install any of my blog backgrounds. Just follow these steps:

<center><a href="http://makincuteblogs.com/"><img title="Makin Cute Blogs: Free Blog Backgrounds" src="http://makincuteblogs.com/wp-content/uploads/2011/11/MCB-BackgroundButton-1.png" alt="My Free Blog Background was provided by Makin Cute Blogs" width="150" height="200" /></a></center>

<center><a href="http://makincuteblogs.com/"><img title="Makin Cute Blogs: Free Blog Backgrounds" src="http://makincuteblogs.com/wp-content/uploads/2011/11/MCB-BackgroundButton-2.png" alt="My Free Blog Background was provided by Makin Cute Blogs" width="500" height="50" /></a></center>

<center><a href="http://makincuteblogs.com/"><img title="Makin Cute Blogs: Free Blog Backgrounds" src="http://makincuteblogs.com/wp-content/uploads/2011/11/MCB-BackgroundButton-3.png" alt="My Free Blog Background was provided by Makin Cute Blogs" width="125" height="175" /></a></center>

Filed Under: 2 Column Template, 3 Column Template, 30 Minute Makeover, Blog Tips, Commercial Use, Creative, Custom Blog Design, Custom Blog Design Tutorial, Design Tips, DIY, DIY Blog Design, Easy, Easy Tutorials, Free Blog Background, Free for Personal Use, Freebie Alert, Freebies, Templates, Tutorials

How to Put Randomly Rotating Ads on your Sidebar in Blogger

October 28, 2011 4 Comments

Have you ever wanted to randomly rotate your sponsor’s advertisements on every page refresh? I have finally figured this one out for you!! It is pretty simple too. What is even better, is that it works with any size advertisement! To see it live, click on the image below.

Step #1: Plan for how you want your ads to display… This code will fall one ad after the other, so if you want to display 2 columns of ads, make your sidebar wide enough for 2 ads + a little extra room for the small space in between the ads. If you want them to display 1 after the other, then your sidebar just needs to be a little wider than one ad.

Step #2: Paste the Code below into an HTML/JavaScript Gadget on your Sidebar:

<script language="Javascript" type="text/JavaScript">
var ad = new Array()
ad[0]='<a href="YOUR WEBSITE URL HERE" target="_blank"><img src="YOUR IMAGE URL HERE" border="0"></a>'
ad[1]='<a href="YOUR WEBSITE URL HERE" target="_blank"><img src="YOUR IMAGE URL HERE" border="0"></a>'
ad[2]='<a href="YOUR WEBSITE URL HERE" target="_blank"><img src="YOUR IMAGE URL HERE" border="0"></a>'
ad[3]='<a href="YOUR WEBSITE URL HERE" target="_blank"><img src="YOUR IMAGE URL HERE" border="0"></a>'
ad[4]='<a href="YOUR WEBSITE URL HERE" target="_blank"><img src="YOUR IMAGE URL HERE" border="0"></a>'
ad[5]='<a href="YOUR WEBSITE URL HERE" target="_blank"><img src="YOUR IMAGE URL HERE" border="0"></a>'

function randomorder(targetarray, spacing){

var randomorder=new Array()
var the_one
var z=0
for (i=0;i<targetarray.length;i++)
randomorder[i]=i

while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
document.write(targetarray[the_one]+spacing)
targetarray[the_one]="_selected!"
z++
}
}
}

</script>

<script language="Javascript" type="text/javascript" ></script>
<script>
randomorder(ad, ' ')
</script>

Step #3: Now, you just need to add your Image URLs and Website URLs. (If you need to know where to get your image URL, I have a post here that explains Hosting Images)

If you need to display more or less advertisements, then copy the the Ad[#]…….</a>’ Section and repeat the pattern, or delete the same section(s) leaving as many ads as you need. Make sure that if you add additional ads, that you change the # in the [ ]s to be the next number.

IMPORTANT: The code needs to be exact, if it is not working correctly, check and recheck the code and make sure that no quote marks are missing, etc.

Pin It

Filed Under: Blog Tips, Custom Blog Design, Easy, Easy Tutorials, HTML, Intermediate Tutorials, Sidebar, Tutorials Tagged With: 2011, ad, ads, advertisement, Blogger, blogspot, Easy, page, random, randomly, refresh, rotate, simple, sponsors, Tutorial

How to Create a Seamless Border around your Blogger Blog Layout & have a transparent background behind your Header

October 17, 2011 38 Comments

This tutorial was requested. If you would like to request a tutorial, visit our “Make a Request” page.

In this tutorial, I am going to show you how to take a standard blog layout (with the white section all the way down the middle, and replace it with a Header that has a transparent background, a post section and a footer section. This way, you have a border all the way around your posting area, from the header to the footer (Like seen below). Click here to learn how to make these elements using Pixlr.com OR Purchase a Set in my Shop for less than $5!

Step #1

The first thing that you need to do, is to change your template to the White Simple Theme.

Step #2

Next, you need to add your chosen background. I am adding this Chevron Background from my shop. If you need detailed instructions on how to add a seamless pattern background to your blog, check out my tutorial here.

Step #3

Upload your Header.

Upload your Header in Blogger. Click on Layout and Edit.

(Don’t worry if your header is cut off, or not centered like my example above… we will fix that later)

Step#4

We are going to move our header above our “content-inner” and we will also move our Footer below our “content-inner”. This is how we do that. Go to your Template and Edit HTML.

Then you are going to scroll way down until you see <header> and you are going to select from <header> all the way down to </header>. Then you are going to Cut (right click > CUT) all of that text…

…and Paste it directly under <div class=’content-outer’>.

Next, we also need to move the Footer Code. I you scroll down some more, you will see <footer>. You need to select from <footer> all the way down until </footer> and Cut it (right-click Cut).

Then you need to Paste it (right-click Paste) right below the first </div> after <!– content –> (like seen below).

Now your blog should look something like this:

Step #5

Now we need fix the sizing and add your images. So head over to your Template Designer, under Template and Customize.

Click on Advanced and Add CSS.

There you will add this Code:

.header {
width: 1000px;
}
.content-inner {
background: url('POSTING BACKGROUND IMAGE URL HERE');
background-color:transparent;
padding-bottom:10px;
padding-left:40px;
padding-right:40px;
padding-top:10px;
width: 920px;
}
.footer-inner {
background: url('POSTING BACKGROUND IMAGE URL HERE');
background-position: bottom;
width: 1000px;
}
.footer-outer {
background: url('FOOTER IMAGE URL HERE');
background-repeat: no-repeat;
background-position: 2px bottom;
border: 0px;
padding-bottom:59px;
width: 1000px;
}

Then you will need to customize the code to suit your blog. If your header is 1000px wide, then all the number values are correct, if not, then use the info below to set yours up right. **If you need to know how to host your images, or find your “Direct Link – Image URL”, I have a tutorial here.

Phew! Did you get through that :) That is it, now you should have a lovely seamless blog design!

Filed Under: Advanced Tutorials, Blog Design Ideas, Blog Tips, Creative, Custom Blog Design, Custom Blog Design Tutorial, Design Tips, DIY, Headers, Layout, New Blogger Questions, New Blogger Template Tutorials, Tutorials Tagged With: 2010 Template Designer, Blog, Blogger, Border, Footer, Header, Post Section, seamless, Simple Template, Template Designer, Transparent Background, Tutorial