portfolio - December

Hannah's blog. 

My blog. 

Anna's site. 

open

Kendra Lynne Studios is now once again *finally* open. I will still be doing orders, but it will cost five US dollars per design. Which really isn't that much for what you're getting. And I might be raising the price soon, so if you're going to order -- do it now!

Also I'm not sure if the PayPal thing is working, so if you want to order, just email me and we'll work things out. Sound good?

I've done a couple designs over the past month, even if I have been busy.

quick personal porfolio

Here are a couple of my past personal designs. Sorry the posts have been so short here. And yes, I am still closed. Right now I'm working on Tiffany's design, but I've got National Novel Writing Month coming up tomorrow so I'll be writing, not designing. I will be open next month though, and my designs are now $5. All the money goes to missions. You can read more about that on the sidebar.

 --Kendra

closed

for one month, until Dec. I am currently doing NaNoWriMo. Sorry. 

portfolio + news

Dianna wanted a pretty design with light colors, so I worked on that one. It was a bit of a challenge to get the fonts on the post title to work, but other than that things went really well. Dianna was really sweet and not picky at all, I'd say go over and give her blog a peek.




Right now I'm working on Tiffany's and Danielle's designs, so I'll show you those soon. Here's Danielle's, but I'm not sure if this will be the final result as she hasn't contacted me back yet. 

I started this blog in the summer when I didn't have much to do, and now I'm busy busy busy. I'm not going to quit the designs, but I think I'm going to move the prices up. Perhaps, $5 for a design? All the money will go to missions of some sort. I'm still trying to figure out paypal and all. When I have more news I'll let you all know.

currently . . .

I'm taking a break from orders. My dad isn't around & I have to help out with the kids. No orders will be accepted until I say so. I might also change the site & make the designs not free (yeah, I know --- it's horrible -- I don't want to do this but it's just too much) but then make it cheap, like $5 -- and the money will go to missions. Still pondering.

Check out my main blog for other updates. 

portfolio - early September

Maddie asked for a blue & green design with a sidebar header (lots of those going around these days!). She was really happy with her design and I'm glad she liked it. Here's her button if you want to see it live.

I also helped Mrs. Ours with her blog design. She wanted something more modern and that matched more, so that's what I tried to give her. I really liked how hers turned out and it wasn't that much work! 

Go visit her blog --- I really like it!

Lastly I helped Lucia with her blog design. She actually did the header & colors by herself. Don't you like the header? All I did was change the code around a bit so her header would go on the sidebar and her sidebar wouldn't go to the bottom of the page. 

Dianna, I have not forgotten you. ;) I just had these lovely ladies in front of you so I finished their designs first. But I've got some good ideas up my sleeves for yours, and be prepared for a new makeover!  

Well friends, which design was your favorite from this post? 

how to download & install fonts (in windows)

Arianna requested this tutorial, and to be honest, before I really started blog designing I had a ton of trouble with downloading fonts. Mostly because our internet was terrible, and I just didn't have a good tutorial to use.

First, find a font that you want to download & download it. Dafont.com and fonsty.com have some good fonts.

Once you have that downloaded, go to your documents and click on downloads. Find the font that you downloaded.

Now, double click on the file & open it. On the top left hand side you should see a link that says "extract all files".

Click on that. A small window should pop up. Click on next, then it should bring you to the another screen on the page. Click browse>my computer> (the name/brand of your computer, mine is acer) acer> windows> fonts. Click on fonts and click OK. You might have to do a bit of scrolling and searching, but make sure the file does end up in the fonts file. The fonts file was at the bottom of mine.

There are some easier ways to do this, like just click on the download on you internet browser instead of going to documents, and you can just copy and paste the url to the fonts if you want to download more than one. I figured I'd leave it how it is though, I figured out how to do those little easy tricks by myself, so it shouldn't be that hard to figure out.

Once you're done with that, finish, and you should have a new font! Wasn't too hard, right? It might take a bit to install your font, like you may have to re-start your computer before it shows up, but it should be there.

Let me know if you have any questions by leaving a comment. 

portfolio august + new design

First, I finally re-designed KLS, like I've wanted to do for a long time, but was too busy doing other orders. How do you like the new design? Do you like the other one more? 

Don't forget to grab the new button. {sidebar, share the love}

I also designed Eden's blog. She wanted at first a silver and grey design, but in the end it ended up like this. Funny, eh? ;) Here is her button if you want to see the blog live. 

(Finally) I designed my awesome friend Hannah's blog, she wanted the header on the sidebar. I tried to surprise her, but I'm not sure it worked. Long story. 

Here's her button in case you want to check out her blog too. 

Arianna wanted me to make her a header and button to match her blog, so I did so. Doesn't she have a cool name? ;) 
So -- do you like the new design or what? 

how to make a header on your sidebar & have it flip on rollover

I've had lots of people ask me how to do this, and it seems to be really popular right now. Here are a few blogs that I've seen which have the header on the sidebar:

imagine
along a road less traveled
pastor girl's ponderings
follow God - every day
captivating moments
of horsefeathers
aspire
paper heart
borderless
click and capture photography

Let me know if you have a header on your sidebar, or know of someone who does -- I'll be glad to add them to the 'list'. ;)

So, you wanna follow the trends and stick your header on your sidebar? But you don't know how to do it, right? You've come to the right place.

Your header is probably on the top, just like regular, and you want something different.

1. get rid of that header; go to your dashboard, hit design, and then edit html. hit ctrl + F at the same time, search box should pop up, search for 'header'.
2. keep searching header until you find the header code. now, all you have to do is add: "display:none" beneath the "border color" part. easy enough, eh? 

3.  now, your header should be gone, make sure to save your template as always before hand, or just copy it and save it in a document in case something goes wrong. 

4. so -- now you're going to open gimp, if you don't have it already, google it and download it. it's totally free. If you don't want to download gimp, just create one (if you just want the picture for the header) or two images somewhere online that are 220 by 220 pixels, or just make sure they're the same size. I used gimp for mine.  Skip to the bottom if you're just using a picture for the header.

5. Now you're just going to do the same thing, make another image the same size. Make sure you spell everything right and have it just how you want. I just used a plain white 220 by 220 box with text in it for this tutorial, normally you won't do that of course, but I'm not trying to make everything perfect just for the tutorial, so it's fine with me. 

6. save the second image in the same file you saved the first so you can get to it easier. upload both images to a site where you can get the link. I usually use photobucket, but you can also just upload them to a new blogger post and copy the image link. that's what I did since I was in a hurry.

7. here's where the html code work comes in. 

<a href="BLOG LINK">
<img src="IMAGE 1"
onmouseover="this.src=&#39;IMAGE2&#39;"
onmouseout="this.src=&#39;IMAGE1&#39;"
alt="TEXT" /></a>

go ahead and copy//paste that into a Javascript or HTML box in your design page elements part. see where the BLOG LINK text is? copy your blog url into that. Make sure not to erase any of the text anywhere unless it says "BLOG LINK", "IMAGE2", "IMAGE1", or "TEXT". If you delete any other part of the code it will not work.
In the image two part put the image url you want to have appear on hover, in the image one part put the first image url. In the TEXT part, write whatever you want to appear in case something goes wrong with the image. when you're done it should look something like this.

<a href="http://kendralynnestudios.blogspot.com/">
<img src="http://4.bp.blogspot.com/-AhjAid9fBBM/TlZMh7CEbXI/AAAAAAAACdw/Hhttvr92K4Q/s1600/save.jpg"
onmouseover="this.src=&#39; http://2.bp.blogspot.com/-dk94zFcdOO8/TlZMgys_RCI/AAAAAAAACds/ENAKS0036oU/s1600/extra.jpg&#39;"
onmouseout="this.src=&#39;http://4.bp.blogspot.com/-AhjAid9fBBM/TlZMh7CEbXI/AAAAAAAACdw/Hhttvr92K4Q/s1600/save.jpg&#39;"
alt="Sorry...something went wrong, try again later!" /></a>

8. save your html//javascript box and move the header to the top where you want it. 

Ta-da! you're done! If you just want an image for the header upload it to photobucket.com and copy the html code, then add it in an html box & save. To see the results live view here. that's just a test blog, so don't mind me. 

If you have any questions, leave a comment. Also, I'd l-o-v-e to see your results, so leave a little note with your blog link when you're done. If you use this tutorial, make sure to leave proper credit, since I did make the tutorial, I really don't want people copying it and saying they made it, or acting like they did. 

Enjoy your new design! 

portfolio - August & July

I haven't done many designs this month, but I'm starting up again. In the past couple of weeks I've done three designs; and I'd love to do more, so order away. In early July I did my sister Anna's blog design for her. She wanted a picture header that looked like it was 'painted', with dark greens and grey, so that's what I did. You can view the design live here.

I also did my own design, and switched the header to the sidebar. I really like this new blog trend, so I went with it. =) The header changes on hover. View live here.

Lastly I finished Anna Katherine's blog design, she wanted something cute with the header on the sidebar, so that's what I tried to do for her. You can see her design live here.

That's all for now, make sure to order something if you'd like a new design. I think I'm going to change the design here once I get around to it, it's sort of plain. 

I'm open.

I'm open and waiting for orders. Portfolio coming soon. I'm thinking of changing this design, since it's not my best work at all, but I want to keep things simple for now. 

fonts

Fonts. It's one of the things blog designers use the most. It makes signatures personal, makes things fancy, simple, or modern. Fonts add extra spice & a cherry on top. You can find many free font downloads here & here.

What is your favorite font?

how to make a favicon

Marieanne  requested this tutorial, so here it is. Sorry it took me so long to put it up! I went to my grandparents, and things have been a bit busy. ;)

Anyways -- first you will need to download Gimp or create a 16 x 16 image in a photo editing program. You can also google free favicons, whatever you wish. I'll be using this image to create mine.

Now, upload your image when you're done to photobucket, or another place where you can get the direct link & copy it.

Now go to your blogger dashboard, then design & edit html.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>

    <b:skin><![CDATA[/*

See that code at the very beginning? Delete all of it.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
<link href='LINK HERE' rel='shortcut icon' type='image/x-icon'/>
    <b:skin><![CDATA[/*

Replace it with that code. Copy your image url into the 'LINK HERE' area. Do not erase the quotes. Save, and you're done! =) Let me know if you have any questions.

Help please?

I did something to the Gimp Toolbox...anybody know what went wrong & how to fix it? I can't change fonts, sizes, or colors on anything without it. I redownloaded Gimp, but it doesn't help. :-/

ps]] new design portfolio & navbar tutorial coming up. 

how to change the width of your blog

Note: I did this using the Minima '06 template. 

Grace asked for this tutorial, but I thought I'd post it on here so others can see it too. *winks*

Good things about having a wider blog:

• It looks cleaner. [At least I think so!]
• You can add bigger pictures, for photographers this is great! Besides, who wants little bitty photos?! 

Here's the tutorial! 

1. Log on to your blogspot dashboard and click on "design". [*cough* Of course!]

2. Now click on "Edit HTML" 

3. [ALWAYS back up your template. You don't want to make a mistake and loose your blog! I usually highlight the entire code, copy it, and save it in a document.] Click on "ctrl" + "F" at the same time and hold them down. This should bring up a little search box in the right-hand corner. Copy this code into that box:

#header-wrapper {

And press "Enter".  That should bring you to the Header Wrapper part, under the Header section. It should look something like this"

4. See this code under the "#header-wrapper{"? 

 width:660px;

  margin:0 auto 10px;

  border:0px solid $bordercolor;

  }

I highlighted in blue the part you need to change. Your code should look something like this. Anyways, change the "660" to whatever you want your blog width to be . . . I usually go with 960 or 950 pixels. Note: Don't make it too high! Your sidebar will go disappear to the bottom of your blog.

5. Now that you've changed the header width, type copy this code into the search box:

#outer-wrapper {

Under it you should see something like this: 

#outer-wrapper {

  width: 660px;

  margin:0 auto;

  padding:10px;

  text-align:$startSide;

  font: $bodyfont;

  }

Do the same thing you did in step #4. 

6. Right under the "#outer-wrapper {" part, you should see a code like this:

#main-wrapper {

  width: 400px;

  float: left;

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */

  }

I have mine set to 700 pixels, play around with it! I'd do about 260 more pixels though.

7. Now copy this code into the search box: 

/* Footer

Under that, you should see something like this:

#footer {

  width:700px;

  clear:both;

  margin:0 auto;

  padding-top:15px;

  line-height: 1.6em;

  text-transform:uppercase;

  letter-spacing:.1em;

  text-align: center;

}

I'm not sure what most people's blog footer width is, but I have mine at 1000 pixels. 

8. Preview your changes. If you like them, save it! If something is wrong, leave me a comment or check out the questions at the bottom of this post.

Troubleshooting: 


1) My sidebar went to the bottom of my blog! What do I need to do? 


If this happens to me, I usually make the Main Wrapper, Footer, and Outer Wrapper smaller. [change the pixel width to "940" instead of "960" or something. Play around with it and keep previewing. This has happened to me once or twice only, so if anybody else knows a better solution drop me a comment!

2) My background doesn't fit, what happened?


What you need to do is get a 3 column blog background, or make your own here. The white part on the background is probably 660 px, so you need more space.
****
I haven't had any other problems, but if any of you all do please tell me! Also, now that you have a "bigger" blog, you can add bigger photos! You'll need to have the new version of blogger, I think, and you click on the picture after you've uploaded it to your post. A little bitty window thing should come up, and when it does click on "Extra large".

I hope this tutorial was helpful, I tried to make it very clear. Also, no copying this tutorial. You may think I'm trying to act like Olivia from Robin Blogs, but no, I hate when people copy other's work. I spent a good amount of time, and no stealing it to claim as your work!

Good luck designing and let me know if you have any trouble!