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

February 20, 2013

Custom Design - {Baby Shower Invitation}

One of my office co-workers is having a sweet baby boy at the end of this month and I was asked by the person hosting the shower to create an invitation for her. I was excited cause it meant I had some pretty free rein over what the invitation would ultimately look like.


You like? I love!

They don't even know that I have this side hobby of mine. When they hired me they noticed that I had a degree in art. After I was hired they asked me to update a flyer for an event that they were hosting. It was pretty awful and I asked them if I could make a few tweaks to it. I didn't even have my Illustrator or Photoshop on the computer yet, cause they didn't know my background and after I made the few tweaks/ totally revamped it, with publisher! (Publisher can do lots, but not what I want and needed it to do. Super great for someone who does not have a art background) Now, I've been asked to do several different things for our office and other publicity events. It's been fun to use my abilities in a setting that I most likely would not have. So note to everyone, let people know what you can do. It will open up many doors for many opportunities.

Sorry for my soapbox. Now, if you ever would like a custom design by us, please feel free to shoot us an email at lovinglifedesigns@gmail.com to get some more information.

Michelle 



Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.


February 15, 2013

Free Font Fridays - {Celtic Garamond}

Today is the third installment of our Free Font Fridays. Today, I present to you the font that I used in my Disney Pixar Brave valentines and my daughters sixth birthday party invitation.


I chose this font for both the invitation and the valentine because it feels very celtic and it's super easy to read. I had found some other fonts that were a little more stylized but were not as easy to read. After all my target audience is 5 and 6 year olds. Plus, you can't go wrong with anything in the Garamond family.

You can download Celtic Garamond from dafont, fontzone, fontspace, or fonts4free. If there is a site you prefer to use over another than download it from there, otherwise here is a link to download it from dafont. *This is free for personal use only. If you plan to sell something using this font you'll have to pay. 

Here is a reminder of one of the cute valentine cards I used it in.


and here is the invitation I made using the font.

What do you think?

Enjoy.
Creative Commons License

February 11, 2013

Disney Pixar Brave Valentine Cards - {Free Printable}

My daughter is obsessed with Merida. Disney Pixar's new princess. She wanted to be her for halloween. Her 6th birthday party was themed around brave. I even designed a brave invitation for her party - which I am totally proud of. I'll show it off later.

Naturally she wants brave valentine cards. So this year I decided to make and print them for her. They're not fancy or flashy.  Just simple and to the point. After all they'll be going in the trash a few hours later.





I've put all 4 on one page for you to download and print. I've left a little white space so you can trim the card with or without a white border.

I have a PDF or a JPG version. I'll be sending mine to kinkos and I need it to be a PDF not a JPG for that. (you would think that I had a working color printer in the house - ha ha, nope!)

*Remember - Loving Life Downloads are for followers only. We ask that if you download our work that you become a follower. It only takes a second - thanks. 




What do you think?

Enjoy.



Creative Commons License

February 7, 2013

Valentines Day Poster - {Free Printable}

I meant to post this yesterday but illness has kept me in bed and since I am still in bed this is going to be real short. 

Happy Valentines Day Everyone I hope it's a good one. 

I made this 8 x 10 poster a about a week ago for Valentines Day. It's from 1 Corinthians chapter 13. I was inspired by, you would not believe, How I Met Your Mother. I've been re-watching the seasons and Marshal quoted this verse during one of the episodes centered around Lily and Marshals wedding.


This version of 1 Corinthians chapter 13 is from the King James Bible.  


I also made 4 x 5.25 cards. I've left a little white space around the blue to made a nice border. Just print and cut. 



Let me know if you need a different size. I'll be happy to make it. 

Enjoy. 

*Remember - Loving Life Designs downloads are for followers only. We ask that if you download our creations you become a follower. It only takes a second. Thanks. 


Creative Commons License

February 1, 2013

Free Font Fridays - {Antrokas Font}


It's our second installment of Free Font Fridays!
Today we are presenting a font that basically is the new face of Loving Life Designs
The font is Antrokas.


It's an elegant script font created by Rokas Cicenas. It's available for free download here at dafont. I have loved this font since I first saw it a few years back. I instantly downloaded it, but never could figure out the perfect design to use this font with. This font is defiantly meant to be used lightly, meaning designs that don't require a lot of text. Perfect for logos or headlines. Hence the reason we used it for our new logo and throughout the new blog.

Michelle 
Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Free Facebook Covers

It's February! I'm so happy that it's February. I hate January. I know hate is a strong word, but I honestly HATE January. It's so cold and I'm usually done with the winter weather by January 1st. So hooray for February. Yes, I know this month can be cold, but it's the beginning of the end of this awful cold weather and that is why I LOVE February! Not to mention it has two great holidays... Ground Hogs Day, my husband and I watch the hilarious movie with Bill Murray, every Feb 2nd, and Valentines Day..created by Hallmark :) But I love it. It's a day I get to express to my family I love them, then just telling "I love you."

To help bring in this happy month I've created two fun Facebook timeline covers for you to download.


Numero uno.  is easy. No editing of any kind. Just download the file here and upload to Facebook. 



No. 2 a little more difficult, but no worries I will walk you through it.

Instructions:

1. Download the file here. I always suggest you download files to your desktop. Easier to find and then you can always move it to a different destination.

2. Open it up in Photoshop. The file name will be "LLDfacebookcoverValentinesPhoto.psd"

3. Select the photo you would like to use and drag it into Photoshop. Once it is in the file press "enter"

4. Now you are going to put your image layer between the layers titled "Clipping Mask" and "Kisses"

5. You are then going to right click your image layer and scroll down to "Create Clipping Mask"


Now, resize and move your image to where you want it.

7. Vola! Your image is set!

8. Save the psd file, and do a "Save As" as a jpeg.

9. Last but not least, upload as your Facebook cover!

Enjoy!

We would love to see the covers in action! Please leave a comment with a link to your Facebook page to see  it. Thank you!

Michelle

Creative Commons License

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.