July 24, 2013

How to Download and Install
Loving Lifes Blogger Templates
{Blogger Tutorial}

I've had several questions, lately, on how to download and install Loving Life Designs Blogger Templates. I hope this clears up any confusion there might be on how to do this.

First you'll need to decide on which template you would like to use on your blog. For this tutorial I have chosen to download and install my Simple Two Tone Template Sunshine and Clouds. Click on the download here button or text that has been provided as a link.

After you have clicked on the link you SHOULD be linked to this or a similar box.com webpage. If you are not sent to this page please let me know, and let me know which template is not working. If you are seeing this page then you are in the correct place. 


Next, in the top left there is a download button - Click it. 
    

It should then download the XML file. Take note as to where it was downloaded on your machine. 

Now you'll want to open your blogs dashboard and click on Template. 

On the top left of the browser window is a back up and restore button - Click it. 


A window looking like the one below should pop up. 


If you have made changes to your blog and would like to keep those for any reason or to make a backup of how your blog looks now, incase there is a problem with the upload, click on download full template and save it. 

If you don't care click choose file below the phrase "upload a template from a file on your hard drive". Find the new template file on your hard drive and click choose or okay. 

The pop up window will then look like this. 
With a little spinny wheel telling you it's uploading. 

Once the template has uploaded the window should close automatically. You can see that the new template has taken affect when you see the new template in the live on blog screen. 


To see the blog full screen click on view blog.

 

Viola you are done. 


Clear as mud? 

Creative Commons License

May 10, 2013

A Heart Willing to Follow Blog Redesign

I was asked by Sasha of A Heart Willing to Follow to design a blog for her, she said "I want something simple, but cute." Then she sent me a few blog designs as inspiration.

After going through the designs this is what we came up with.


I also created some blog elements for her:
  • a header
  • and an "about me"  widget with a stylized image and text. 

It was a quick build and Sasha was amazing to work with. Thank you Sasha for allowing me to design something for you and your family. Go and take a look. She and her husband are adopting a baby from Ethiopia.

If you would like a custom design feel free to email me at lovinglifedesigns@gmail.com

Creative Commons License

April 19, 2013

Free Font Friday - {Jenna Sue}

It's been a while since we've presented a free font. Last one we presented was celtic garamond in february. Sorry about that.

 Today's free font was one I used in revision fitnesses redesign.


I really love this font. It was created by Jenna Sue of Jenna Sue Designs (jennasuedesign.blogspot.com). She says in her blog post about the font - "I'm slightly obsessed with typography (it's my favorite part of design!), so making my own font has always been on my radar of things to do." You can read more about it on her design blog.

It's 100% free to use for commercial and personal use. "That's right, FREE. 100% Free, for any project. No need to ask permission... just use it! Enjoy :)"  You can download it at Dafont.com.

Thank you Jenna, we really love the font.

Creative Commons License

April 17, 2013

Revision Fitness Blog Redesign

After I finished Lindsey's blog a few weeks ago, Mindy, one of Lindsey's beachbody friends asked about a design for her site Revision Fitness. I was happy to design one for her.

Mindy wanted something similar to Vegas Fitness, Nutrition and Fashion - "Simple and to the point!" 

Mindy already had a header created all I needed to do was create the sites design and some blogger elements.

This was the final design we came up with.


I created several elements for her: 
  • A Meet Revision Fitness banner 
  • Stylized about me photos
  • Social Media Banners
  • A Join my Team beachbody image
  • CSS Stylizing of the search and submit buttons for the search and follow by email widgets.


Using my handy dandy HTML and CSS skills I also created a center aligned navigation bar. With a border on top and bottom to distinguish it from the rest of the page. 


And last but not least using the magic of Snap Widget I made two Instagram widgets. A gallery style banner at the top of the post section and a slideshow in the sidebar. 


Go and take a look. Mindy and Chris have an amazing story and are awesome at motivating their readers and were amazing clients to work with. Thank you Mindy and Chris.  

If you would like a blog design email me at lovinglifedesigns@gmail.com.

Creative Commons License

March 22, 2013

I Am The Way {Free Printable}


My favorite Holiday is just upon us. I love Easter and always will. It celebrates so much to be thankful and happy for.  It's an amazing holiday and to celebrate I created this poster for download. There are three different kinds, cause I could not decided which one I like the most, with three different colors. All ar 8 x 10's. If you have a specific color you would want to see, please leave a comment and we will see what we can do. 

To download click the Poster you want. 

{Downloads are for followers only. Thanks for following us}

Comment and let me know what you think, or if you want a different color.

Michelle


Creative Commons License
                                                                 

March 6, 2013

Vegas Fitness & Nutrition Blog Redesign

A few weeks ago my sister in law, Lindsey, posted on facebook that she was wanting a new design for her fitness blog, Vegas Fitness and Nutrition and she didn't know what to do. Naturally, I offered to help.

She didn't want anything too fancy. Just simple and to the point. She showed me a few fitness blogs to use as inspiration and then we were off.

I first designed a new header for her. It went through a couple revisions and this is where we landed.


Next I created some custom blog elements for her. I built her a new about me graphic, a join my beach body team graphic, a what am I doing widget graphic and a buy Shakeology now graphic link. Michelle built the social media icons and the go icons for the blogger search widget and the follow by email widget. *Tutorials on how to implement that on your blog later.



I also coded custom HTML for her recipes. All she needs to do is post the HTML to the blog post, input the new recipe information and publish the post.  I think it makes the recipe stand out from the post and makes it easier to find and read.


This is the final look we came up with. I think my favorite part is the blue striped background. I think it creates just enough class and elegance and is not over bearing like some backgrounds can be.



Well Lindsey, I hope you love your new look. I certainly had fun creating it and working with you.

What do you think?

February 27, 2013

How to add s3slider to Blogger - (Blog Tutorial)

A while back I wrote a post on how to create an automatic fading slideshow in Blogger. It was a two part post. Part one was about making images big enough for the slideshow and part two was about creating the slideshow in blogger.

After several complaints about the slideshow not working correctly I have decided to make a new tutorial with a new slideshow method. It's the same method Loving Life Designs uses on our home/landing page.

This new method uses the s3slider created by Boban KariÅ¡ik. You can see a demonstration and read the workshop on his website.  My method doesn't implement the text overlay. I wanted my slideshow, for the home page, to be plain and simple. But I'll be showing you how to add the text over lay if you would want it.

First thing you are going to want to do, just like I explained in part one, is determine how large you want the slideshow to be. In my slideshow example site, my images are 850px wide and 423px heigh. It's important that all the images are the same size and you know the size of your images. Write it down somewhere you'll need to remember.

These are some of the images I used for the slideshow on our home page and on my example site. Michelle created them. I love them.



The next thing you need to do is add the following javascript code to your blog. *before you make any changes to your blog HTML you'll want to save a backup of your blog. If you don't know how to do that post a comment and I'll tell you. 

<script src='http://elizabethspencer.webs.com/jquery.js' type='text/javascript'/>
<script src='http://elizabethspencer.webs.com/s3Slider.js' type='text/javascript'/>

<script type='text/javascript'> 
$(document).ready(function() { 
 $(&#39;#s3slider&#39;).s3Slider({ 
 timeOut: 4000 
 }); 
}); 
</script>

To start, you'll want to go your template tab.

Then you'll click on Edit HTML. 


A new window will pop up and you'll want to paste the code, provided above, directly below. </title> and above <b:skin>. Just like pictured below. It's at the top - don't scroll down. 


Save your template - But don't close the box just yet.  *you should've, before you started, saved a backup of your blog. 

Now, we are going to add the following CSS to the template.  (This CSS is for a slideshow without the overlay text - keep reading to find out how to add that back in.)


#s3slider {
border:0px solid #ffffff;
margin: 0 auto 30px;
margin-left:10px;
width:850px; /* important to be same as image width */
height:423px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#s3sliderContent {
margin: 0px;
padding: 0px;
width:850px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}

.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}

.s3sliderImage span {
font-size:13pt;
}

.clear {
clear: both;
}

Scroll down til you see. ]]></b:skin>. Directly above that you'll want to paste the code, provided in the box above. Just like I have pictured below. 

This is why remembering what your images size is important. You'll want to replace my width of 850px to that of your images width both in the #s3slider and in the #s3sliderContent. Then you'll want to replace my height of 423px with that of your images height. You only need to change it in the #s3slider


Save your template and now close this window. 

If you would like to add the overlay text - replace the following code ---

.s3sliderImage span {
font-size:13pt; 

---with this code.

.s3sliderImage span { 
 position: absolute; /* important */ 
 left: 0; 
 font: 10px/15px Arial, Helvetica, sans-serif; 
 padding: 10px 13px; 
 width: 850px; 
 background-color: #000; 
 filter: alpha(opacity=70); /* here you can set the opacity of box with text */ 
 -moz-opacity: 0.7; /* here you can set the opacity of box with text */ -
khtml-opacity: 0.7; /* here you can set the opacity of box with text */ 
opacity: 0.7; /* here you can set the opacity of box with text */ 
color: #fff;  
display: none; /* important */ 
 top: 0; 
/* 
 if you put top: 0; -> the box with text will be shown at the top of the image 
 if you put bottom: 0; -> the box with text will be shown at the bottom of the image */ 
}

Play around with the code and make it what you want. You can change the text. You can change the background color. right now it's set to black and the opacity makes it kind of grey. Play around and make it what you want it to be.  - If you need help leave a comment and I'll post another tutorial about it.

FINALLY, we add the HTML to a widget box.

To do this first, you'll want to click on layout.


Then click - where you want to add the slideshow - add a gadget.


Select HTML/Javascript


In the configure box paste the following HTML

<div id="s3slider">
    <ul id="s3sliderContent">
        <li class="s3sliderImage">
            <img src="#">
            <span>Your text comes here</span>
        </li>
        <li class="s3sliderImage">
            <img src="#">
            <span>Your text comes here</span>
        </li>
        <div class="clear s3sliderImage"></div>
    </ul>
</div>

You'll want to replace the # with your images url and change the span to text that matches your image (you don't really have to if you don't use the overlay. )

if you want to add additional images add the following

<li class="s3sliderImage">
            <img src="#">
            <span>Your text comes here</span>
        </li>

above <div class="clear s3sliderImage"></div>.

This is what my code looks like.

<div id="s3slider">
<ul id="s3sliderContent">

<li class="s3sliderImage">
<img border="0" alt="Free Prints" width="850" src="http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/Loving%20Life%20Slideshow/slideshow1.png" height="423" alt="free Prints"/>
<span>Free Prints</span>
</li>

<li class="s3sliderImage">
<img border="0" alt="Free Announcements" width="850" src="http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/Loving%20Life%20Slideshow/slideshow5-1.png" height="423" alt="free Announcements"/>
<span>Free Announcements</span>
</li>

<li class="s3sliderImage">
<img border="0" alt="Free Poster Designs" width="850" src="http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/Loving%20Life%20Slideshow/slideshow4-1.png" height="425" alt="Poster Designs"/>
<span>Poster Design</span>
</li>

<li class="s3sliderImage">
<img border="0" alt="Free Blogger Templates" width="850" src="http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/Loving%20Life%20Slideshow/slideshow2-1.png" height="425" alt="Free Blogger Templates"/>
<span>Free Blogger Templates</span>
</li>

<li class="s3sliderImage">
<img border="0" alt="Custom Blog Designs" width="850" src="http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/Loving%20Life%20Slideshow/slideshow3-1.png" height="425" alt="Custom Blog Design"/>
<span>Custom Blog Design</span>
</li>

<div class="clear s3sliderImage"></div>
</ul>
</div>

Save and cross your fingers - you're done.

What do you think? How did it turn out? Leave a comment linking to your blog.

UPDATE - March 6, 2013 

Lee asked if there was a way to slow down the transitions between the images and if you could add a link to the images.  Both are a pretty simple fix, however, I'll only be getting to fixing the slideshow transition length today. 

The jquery function script has two options. In the current tutorial the only option change we have implemented is the timeOut function which controls the length of time the image is on the screen. The default is 6000. In the current tutorial I have it set to 4000, making it a little faster than the default. It's in milliseconds, by the way, so add or subtract 1000 if you want it on for a longer period of time or a shorter period of time. 

The second option is the length of the transition. In the current tutorial I am using the default length of 1000 (about a second of time). It's using the default because I haven't told it other wise. If you want about one second to remain the current transition speed no need to add the following. If you would like to have it be a slower transiton add fadeTime (make sure the T is capitalized) just behind timeOut:4000 but before }); 

In the example below. I've added a transition speed of about 2 seconds. Make sure there is a comma separating the two function controls. 

<script src='http://elizabethspencer.webs.com/jquery.js' type='text/javascript'/>
<script src='http://elizabethspencer.webs.com/s3Slider.js' type='text/javascript'/>

<script type='text/javascript'> 
$(document).ready(function() { 
 $(&#39;#s3slider&#39;).s3Slider({ 
 timeOut: 4000, fadeTime: 2000
 }); 
}); 
</script>

Creative Commons License

February 26, 2013

Free Design Giveaway - {we've reached 100}

To celebrate we want to host a small giveaway. We want to offer one of our lucky followers a free.. whatever... blog header, poster, invitation, announcement... etc (excluding blog design) We are so happy that we have so many wonderful followers who tell others about our designs.

Do you have something in your head you want for your house, party, blog or even a favorite quote that you would like hanging in your house, but don't know how exactly to get it/what exactly it is? Enter our giveaway and we would love to help you out!

To enter you must do a few thing.

1. Become a follower of our blog.
2. Like us on facebook.
and
3. Leave us a comment telling us what you would like us to design with a email address.

You have until Thursday March 7th to enter. We will be announcing the winner the following morning!

Good Luck!

To get inspiration and check out some of our designs, head on over to our "Free Printables" page to see what we have created. Here are a few blog headers that I have created in the past, that I can re-call. Is that terrible? I don't remember the other ones that I have created.. hear me out... I got a new computer last year and I didn't transfer a lot of my old designs to it and I am just to lazy to go and dig them out.







Check back soon we have some exciting things coming to Loving Life Designs! 


Creative Commons License