FYI: Posts will be sparse around here until I replace my laptop.... Coming back to work after Christmas break apparently was too hard and it quit on me!
Showing posts with label Tuesdays Tips. Show all posts
Showing posts with label Tuesdays Tips. Show all posts

22 January 2013

Tuesday's Tips - Customizing Gadget Heading Format

Gadget Headings are the titles for each item on your sidebar/lowerbar. 
To customize the gadget headings format you're going to look for this code in your template:
h2 {

The CSS inside the brackets {} following that code will control what your gadget headings(ie. on your sidebar/lowerbar/or above your posts) look like.
You can customize the code however you'd like--be creative! You can use my CSS Basics posts on Borders, Backgrounds, Text, and Padding & Margins for specific codes. If you have any questions on how to do something specific, ask in a comment and I'll get back as soon as I can.

For example, my current gadget heading code looks like this:

h2 {
background:transparent;
background-image:url();background-repeat:no repeat; background-position:bottom left;
color: #70543e;
font-family: Perpetua;
line-height:20px;
text-transform:none;
letter-spacing:0px;
text-align:center;
font-size:20px;
font-weight:normal;
font-variant: none;
letter-spacing:2px;
padding: 8px;
}

25 September 2012

Tuesday's Tips - Customizing the Post Date Format

To customize the post date format you're going to look for this code in your template:
h2.date-header {

The CSS inside the brackets {} following that code will control what your post date look like.
You can customize the code however you'd like--be creative! You can use my CSS Basics posts on Borders, Backgrounds, Text, and Padding & Margins for specific codes. If you have any questions on how to do something specific, ask in a comment and I'll get back as soon as I can.

For example, my current post title code looks like this:
h2.date-header {
font-family: Perpetua;
color: #70543e;
font-size: 14px;
font-style: italic;
float: left;
padding-top: 44px;
padding-left: 75px;
padding-bottom: 0px;
margin-bottom: -10px;
}

18 September 2012

Tuesday's Tips - Creating a Design Credit Link

If you take a look at the very bottom of my blog, there is a line of text giving me the credit for my blog design. It is a simple way to give credit where credit is due. ;)

Find this code:
#footer {


and copy/paste this after that section of code:
/* Design Credit
----------------------------------------------- */
#credit-link {
  color:$textcolor;
  text-align: center;
  padding-top:  0px;
  font-size:14px;
letter-spacing: 2px;
font-variant: small-caps;
font-family: arial;
  }

Feel free to tweak it using CSS.


Next, search for this code:
 <!-- end outer-wrapper -->

and copy/paste this code above that section of code:
<div id='credit-link'>YOUR TEXT HERE</div>

Replace YOUR TEXT HERE with what you want in your credit link. You can include links in it. For example, my code is below:
<div id='credit-link'>designed and coded with love by <a href='http://emilygrace-blog.blogspot.com'>emily grace</a>.</div>  



note: if you used my tutorial on how to create a lowerbar, make sure this is below the lowerbar section of code. 

08 May 2012

Tuesday's Tips - Customizing Comment Author Avatar Image

To customize the comment author's avatar image you're going to look for this code in your template:
#comments .avatar-image-container img

If you can't find it in your template, copy and paste it after this code:
#comments h4

The CSS inside the brackets {} following that code will control what your post titles look like.
You can customize the code however you'd like--be creative! You can use my CSS Basics posts on Borders, Backgrounds, Text, and Padding & Margins for specific codes. If you have any questions on how to do something specific, ask in a comment and I'll get back as soon as I can.

For example, my current post title code looks like this:

#comments .avatar-image-container img {
border: 0px solid white;
border-radius: 45px;
-moz-border-radius:45px;
-webkit-border-radius:45px;
margin-left:3px;
}

So if you take a look at my code:
      - the image does not have a border
      - the image has rounded corners with a radius of 45px (this is what make the image look like a circle)
      - the image has a margin of 3px on the left

01 May 2012

Tuesday's Tips - Customizing Post Date Title Format

To customize the post date title format you're going to look for this code in your template:
h2.date-header

The CSS inside the brackets {} following that code will control what your post titles look like.
You can customize the code however you'd like--be creative! You can use my CSS Basics posts on Borders, Backgrounds, Text, and Padding & Margins for specific codes. If you have any questions on how to do something specific, ask in a comment and I'll get back as soon as I can.

For example, my current post title code looks like this:
h2.date-header {
font-family: Georgia;
color: #8f8f8f;
font-size: 14px;
font-style: italic;
float: right;
display: inline;
}

24 April 2012

Tuesday's Tips - Customizing Post Title Format

(I've got a whole list of topics to cover for Tuesday's Tips, thanks for requesting them! It is time for me to get back on track with these...)

To customize the post title format you're going to look for this code in your template:
.post h3

The CSS inside the brackets {} following that code will control what your post titles look like.
You can customize the code however you'd like--be creative! You can use my CSS Basics posts on Borders, Backgrounds, Text, and Padding & Margins for specific codes. If you have any questions on how to do something specific, ask in a comment and I'll get back as soon as I can.

For example, my current post title code looks like this:
.post h3 {
  margin-top: -85px;
  background:none;
  color: #0586a2;
  font-family: Arial;
  font-variant: small-caps;
  font-size: 30px;
  line-height: 25px;
  font-weight: normal;
  letter-spacing: 1.5px;
  padding: 8px;
  text-transform:none;
  text-align:right;
  background-color: #ffffff;
  border-bottom:0px dashed #8f8f8f;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
  color: #0586a2;
  font-family: Arial;
  font-variant: small-caps;
  font-size: 30px;
  font-weight: normal;
  letter-spacing: 1.5px;
  background:none;
  text-transform:none;
}

.post h3 strong, .post h3 a:hover {
  color: #8f8f8f;
  font-family: Georgia;
  font-variant: small-caps;
  font-style: italic;
  font-size: 30px;
  font-weight: normal;
  letter-spacing: 0px;
  text-transform:none;
}

20 December 2011

Tuesday's Tips - Lowerbar

For the longest time I wanted to add gadgets at the bottom of my blog, so that my sidebar wouldn't be so full, but I didn't want to have to switch templates. Here is a simple tutorial for how to add a three columns of gadgets at the bottom of your blog.
Feel free to customize the styling to your needs. (html basics for text, backgrounds, borders, padding & margins)

1) Find:
#sidebar-wrapper {

2) Underneath that section of code paste:
#lower-wrapper {
       margin:auto;
       padding: 0px 0px 0px 0px;
       width: 1100px;
}
#lowerbar-wrapper {
     border:1px solid #e6e6e6;
       background:#fff;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 0px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word;
       overflow: hidden;
}
       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 10px 0px 10px;}

3) Find:
]]></b:skin>

4) Above that paste:
 /* -----   LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:none;
}

.lowerbar h2 {
      margin: 0px 0px 0px 0px;
      padding: 3px 0px 3px 0px;
      text-align: center;
      color:#000000;
      text-transform:none;
      font: 14px Century Gothic, Arial, Tahoma, Verdana;
      border-bottom:1px solid #e6e6e6;
}
.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}
.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px solid #e6e6e6;
}

5) Find:
<!-- end outer-wrapper -->

6) Above that paste:

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

Now when you go to add gadgets to your blog there will be three columns at the bottom for you to place them. =)

In Him,

13 December 2011

Tuesday's Tip - For starters... (a guide to help you start designing)

I've had a couple questions recently about suggestions for starting designers. So I came up with a short list of what one would need to start designing their own blog. =)

1}
a test blog

This is vital. Create a test blog that only you have access to. Try out your creative ideas without wrecking your current design. Blogger doesn't have a limit on how many blogs you can make so use it.

2}
an image manipulation program

This is important. Create beautiful images with programs such as photoshop or gimp. (plus, gimp is free!)

3}
a file host

Extremely important. Upload images and script files for your designs. I suggest imgur for photos and bravehost for files. They both offer free services.

4}
fonts

Fonts are one way to make your text unique and stand out. I suggest free font sites such as dafontfontsykevin&amanda, or you can always google for a specific font. A suggestion: keep the main font something simple and easy to read. ;)

5}
digital scrapbook kits

Now these aren't absolutely necessary, but do help in creating an attractive design. Some sites I recommend for free kits:
.summertime designs
.shabby princess
.computer scrapbooking

(go here to enter in a giveaway for a digital scrapbooking kit! open from now until the 26th of December)

6}
multiple browsers/computers

Websites look different depending on the browser and computer one uses. Check your design in several different major browsers to make sure there are no problems! I use:
.chrome
.firefox
.internet explorer

7}
creativity

You can have all the resources at hand but without creativity, your designs will never be beautiful. So let your imaginations soar!

Any questions or suggestions? --let me know!

29 November 2011

Tuesday's Tip - customizing the comment link

Ever wanted to make your comment link more visible to readers? Here's a simple how-to! =)

1) Search for

.comment-link {

2) Customize away!
Customize that section of code to whatever you'd like. For some ideas of how to customize it, use my HTML basics explanations: (Borders / Text / Backgrounds / Padding & Margins)

For an example, my link looks like this:
(hover over image for link reaction to mouse hover)

and my code looks like this:
.comment-link {
margin-$startSide:.6em;
display: inline;
font-family:'Times New Roman', arial, sans-serif;
font-size:16px;
margin: 0px;
float:left;
padding:0px;
width: 150px;
}
.comment-link:hover {
margin-$startSide:.6em;
display: inline;
font-family:'Times New Roman', arial, sans-serif;
font-style:italic;
font-size:17px;
margin: 0px;
float:left;
padding:0px;
width: 150px;
}

3) Save 
and enjoy! ;)

Have a question? Let me know in a comment, and I'll get back asap. =)

22 November 2011

Tuesday's Tips -Rotating Header

I first learned how to do this by Beauty Design Studios tutorial [here].
Thank you Hannah, for allowing me to post it here!

For an example of what this looks like, go to my photography blog [here].

1} Create your series of images--up to ten. You want them to all be the same size.
For example these are a few mine for my photography blog:













2} Upload your images to an image host. I suggest imgur. =)

3} Paste your image links into the form at this site [here]. NOTE: this site is full of pop-ups and ads. be careful.

4} Paste the code you are given at that site into a HTML/Javascript widget on your blog. Ta-da! Enjoy your new and amazing header. =)
(you could also use this tutorial for something other than your header if you want--let your imagination soar!)


If you have any questions, feel free to let me know. ;)

In Christ,

01 November 2011

Tuesday's Tips -Customizing Link Appearance

(requested by Rebecca)

how to find the code
1) Go to your dashboard > template > edit HTML
2) Search for the code similar to this:


a:link {
  color:$linkcolor;
  text-decoration:none;
  }
a:visited {
  color:$visitedlinkcolor;
  text-decoration:none;
  }
a:hover {
  color:#f5dc4c;
  text-decoration:none;
  text-transform:none;
}


3) edit however you'd like and save your template!

how to edit the code
a:link controls what a link looks like when you first load the page and/or don't do anything to it
a:visited controls what a link looks like after you've visited it
a:hover controls what a link looks like when you hover your mouse over it

For ideas on how to customize links, go to my post [here]

Have a question? Ask away!

In Christ,

25 October 2011

Tuesday's Tips -Numbering Comments

(Last week Mary Ann asked for this tutorial so here it is!)

Numbered comments are great if you're hosting a giveaway or blog party because it is that much easier to pick a winner by number. =)

First things first, numbering comments only work if they are embedded below your post

1.) Go to your dashboard > template > edit HTML > and click 'Expand Widget Templates'

2.) Search for this code:
<b:loop values='data:post.comments' var='comment'>
(I suggest using find option on your browser: Ctrl + F)

3.) Above that code paste this code:
<script type='text/javascript'>var commentscounter=0;</script>
This is the script that makes the numbers work.

4.) Search for this code:
<data:commentpostedbymsg/>

5.)  Below that code paste this code:
<span class="numberingcomments" style="float: right; font-size: 40px;"><a expr:href="data:comment.url" href="" title="comment link"><script type="text/javascript">
commentscounter=commentscounter+1;document.write(commentscounter)
</script></a></span>
This is the code that makes the numbers appear. You can change the appearance by editing the style="" section.

As always, if you have any questions--ask away!

In Christ,

18 October 2011

Tuesday's Tips -CSS Basics backgrounds

I've posted many tutorials on how to create different things for your blog. In each of those tutorials I've mentioned ways that you can customize the object. I've gotten several questions asking for more ways to customize the CSS. So I'm going to start a little series on CSS Basics. Some of the topics will include backgrounds, borders, text styles, links, and more. That way you'll have a better understanding of what CSS codes you can add to customize the tutorials. =)

Backgrounds
There are two different types of backgrounds, ones with color and ones with an image.

Color-Backgrounds
background: #ffffff;
background-color:#ffffff;
Either of these codes will control the background color. Use the html code for the color you want your background to be. Do not delete the '#' symbol. ([here] is an online color picker, use the number at the top)

 For example:
background-color:#f5f5f5;


Image-Backgrounds
background-image:url('IMAGE DIRECT LINK');
This is where you will put the direct link to your image that you want to be the background. You will have to upload it to an image host first, before you can get the direct link. (I suggest using imgur or photobucket as your photo host) Do not delete the quotation marks around the url.

background-position: 0% 0%;
This controls the position of your background image. Only change the numbers and do not delete the percentage marks. 


background-attachment:fixed;
This controls if your image scrolls or is fixed when scrolling. (see examples below)

background-image:url(http://i.imgur.com/DUj7n.jpg);
background-position: 0% 0%;
background-attachment:fixed;

background-image:url(http://i.imgur.com/DUj7n.jpg);
background-position: 0% 0%;
background-attachment:scroll;


If you have any questions--don't hesitate to ask! Also, if you have anything that you want me to cover on Tuesday's Tips let me know. (I'm kind of running out of ideas...suggestions are very welcome!)

In Christ,

04 October 2011

Tuesday's Tips -CSS Basics Padding & Margins

I've posted many tutorials on how to create different things for your blog. In each of those tutorials I've mentioned ways that you can customize the object. I've gotten several questions asking for more ways to customize the CSS. So I'm going to start a little series on CSS Basics. Some of the topics will include backgrounds, borders, text styles, links, and more. That way you'll have a better understanding of what CSS codes you can add to customize the tutorials. =)

Padding & Margins Defined
Margin is the space between the item and other items.
Padding is the space between the content of the item and the edge of the item.
Padding & Margins and their placement
They can be placed on any side of the object or all around.
padding:
padding-right:
padding-left:
padding-top:
padding-bottom:


margin:
margin-right:
margin-left:
margin-top:
margin-bottom:


Padding & Margins and their size
They are measured in pixels(px) and can be positive or negative numbers.
20px;
-100px;
7px;

The Big Picture
Finished padding and margin code would look something like this:
padding:15px;
margin-left:30px;
margin-right:3px;

padding:5px;
margin-left:30px;
margin-right:3px;


13 September 2011

Tuesday's Tips -CSS Basics Text

I've posted many tutorials on how to create different things for your blog. In each of those tutorials I've mentioned ways that you can customize the object. I've gotten several questions asking for more ways to customize the CSS. So I'm going to start a little series on CSS Basics. Some of the topics will include backgrounds, borders, text styles, links, and more. That way you'll have a better understanding of what CSS codes you can add to customize the tutorials. =)
Last week I covered borders, and this week's topic is on text.

Font-Family
font-family:Century Gothic, Verdana, "Arial", Sans-Serif;
this section picks which font the text is in, simply put the quotation marks around the font you wish to be used

Font-Size
font-size:110%;
font-size: 20px;
this section determines the size of the text, you can choose a specific size in pixels or by percentage 

Font-Style
font-style: italic;
this section determines whether your text is italic, bold, underlined, or none

Font-Color
font-color:#BAB9B3;
this section determines the color your text is, use the html color code ([here] is an online color picker, use the number at the top)

Spacing
letter-spacing:2px;
this determines how far apart the letters are, they can be positive or negative numbers

Alignment
text-align:left;
this determines where the text is aligned; left, right, or center

Transformation
text-transform:none;
this determines if the text is transformed to uppercase, lowercase, or none


The Big Picture
This is an example of what a finished section of html for text would be:
font-family: "Courier", Century Gothic, Verdana, Arial, System;
font-size: 100%;
font-color:#000000;
font-style:none;
letter-spacing:0px;
text-align:left;
text-transform:none;

This is another example:
font-family: "Century Gothic", Arial, Times New Roman;
font-size:120%;
font-color:#f5dc4c;
font-style: none;
letter-spacing: -1px;
test-align:left;
text-transform: none;

If you have any questions, let me know.
Also if you have any suggestions for a topic for me to cover for Tuesday's Tips--I'd love to hear it!
Have a wonderful day!

Love in Christ,

06 September 2011

Tuesday's Tips -CSS Basics Borders

I've posted many tutorials on how to create different things for your blog. In each of those tutorials I've mentioned ways that you can customize the object. I've gotten several questions asking for more ways to customize the CSS. So I'm going to start a little series on CSS Basics. Some of the topics will include backgrounds, borders, text styles, links, and more. That way you'll have a better understanding of what CSS codes you can add to customize the tutorials. =)
I'm starting off with borders. Next week I'll cover fonts.

Where can you place borders?
You can place borders on the left, right, top, bottom, or all around.
border-left:
border-right:
border-top:
border-bottom:
border:

What types of borders are there?
Borders can be solid, dashed, or dotted.

What size can borders be?
Borders can be any size. Simply specify the px(pixel) size you want. (ie. 1px, 2px, 14px, etc)

What color can borders be?
Borders can be any html color.  Here is an online color picker, use the number at the top. (ie. #F73666, #CEF736, #9649A3, etc)

The Big Picture
So for example, a border code would look like this:
border:1px dashed #f5dc4c;

(first listed is where the border is, the width, the type, and then the color)

Another example would be:
border-bottom: 3px dotted #f4f4f4;


You can also list more than one border for the same section like in this example:
border-bottom: 3px solid #f4f4f4; border-left: 3px solid #f4f4f4;





If you have any questions, let me know.  Have a wonderful evening! =)

In Christ,

30 August 2011

Tuesday's Tips -Adding Scroll to Top Floating Button

Ever wanted to put that nifty little 'Scroll to Top' button on your blog? Here's a simple how to!
(Wondering what I'm talking about? Try scrolling down my blog and look in the bottom right hand corner. Nifty, right?)

Go to your dashboard > design tab > edit HTML section.

First search for this piece of code in your HTML:
]]></b:skin>

Directly after that copy and paste this code:

<style type='text/css'>
#w2b-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:50px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#99EEEEEE&#39;,EndColorStr=&#39;#99EEEEEE&#39;);text-align:center;padding:5px;position:fixed;bottom:5px;right:5px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
    $(function() {
        $.fn.scrollToTop = function() {
            $(this).hide().removeAttr(&quot;href&quot;);
            if ($(window).scrollTop() != &quot;0&quot;) {
                $(this).fadeIn(&quot;slow&quot;)
            }
            var scrollDiv = $(this);
            $(window).scroll(function() {
                if ($(window).scrollTop() == &quot;0&quot;) {
                    $(scrollDiv).fadeOut(&quot;slow&quot;)
                } else {
                    $(scrollDiv).fadeIn(&quot;slow&quot;)
                }
            });
            $(this).click(function() {
                $(&quot;html, body&quot;).animate({
                    scrollTop: 0
                }, &quot;slow&quot;)
            })
        }
    });
    $(function() {
        $(&quot;#w2b-StoTop&quot;).scrollToTop();
    });
</script>
<a href='#' id='w2b-StoTop' style='display:none;'>Scroll to <br>Top</br></a>

Save your changes and enjoy your new scroll to top button!

You can always customize how it looks by editing the style section of the code you just copied and pasted. If you have any questions, don't hesitate to ask!

School officially starts today. It is going to be one busy year! This semester I'm taking H. Modern World Studies, German III, Drawing and Design I, Trig and Pre-Calc, PSSA Math Prep, and Career Path 3. Plus I'm doing a photography course and a Bible study on my own. =D
Have you started school yet?

Love in Christ,

12 July 2011

Tuesday's Tips -Menu Bar

This is for a simple but very professional looking menu/navigation bar. (For an example of one, go to my photography blog [here]. )

Adding the Code

1) Go to your Dashboard > Design > Edit HTML

2) Search for this code:
/* Header

3)At the end of all the header codes paste this code:
(ie. right before the next '/*' section)
/* Navigation Bar
-----------------------------------------------
*/
#nav {
width:1100px;
background-color:#fffff;
border-top:0px solid #000000;
border-bottom:0px solid #000000;
padding-top: 3px;
padding-bottom: 9px;
margin-top: 4px;
margin-right:0px;
margin-left: 75px;
text-align:left;
font-color:#000000;
font-family:century gothic;
font-size:14px;
font-weight:normal;
letter-spacing:2px;
}
#nav a {
background-color:#ffffff;
padding: 8px;
margin: 10px;
text-align:center;
font-family:century gothic;
font-size:14px;
font-color:#000000;
letter-spacing:2px;
}
#nav a:visited {
background-color:#ffffff;
padding: 8px;
margin: 10px;
text-align:center;
font-style: bold;
font-family:century gothic;
font-size:14px;
font-color:#000000;
letter-spacing:2px;
}
#nav a:hover {
background-color:#e6e6e6;
padding: 8px;
margin: 10px;
text-align:center;
font-family:century gothic;
font-size:14px;
font-color:#000000;
letter-spacing:2px;
}

Customizing the Code

#nav { }
This part controls what the menu as a whole looks like.

#nav a { }
This controls what each of the links look like when you first load the page.

#nav a:visited { }
This controls what each of the links look like after you have visited them.

#nav a:hover { }
This controls what each of the links look like when you hover your mouse over them.

For example, mine looks like this:
/* Navigation Bar
-----------------------------------------------
*/
#nav {
font-family:century gothic;
font-size:14px;
font-weight:normal;
letter-spacing:2px;
background-color:#fffff;
border-top:4px solid #000000;
border-bottom:4px solid #000000;
width:1100px;
padding-top: 3px;
padding-bottom: 9px;
margin-top: 4px;
margin-right:0px;
margin-left: 75px;
text-align:left;
font-color:#BAB9B3;
}
#nav a {
font-size:14px;
font-weight:normal;
letter-spacing:2px;
color:#000000;
background-color:#fff;
text-align:center;
padding: 8px;
margin:0px;
margin-left: 40px;
font-family:century gothic;
font-color:#BAB9B3;
}
#nav a:visited {
font-size:14px;
font-weight:normal;
letter-spacing:2px;
color:#000000;
background-color:#fff;
text-align:center;
padding: 8px;
margin-left: 40px;
margin-top:0px;
font-family:century gothic;
font-color:#BAB9B3;
}
#nav a:hover {
font-weight:normal;
font-size:14px;
letter-spacing:2px;
color:#fffff;
background-color:#e6e6e6;
text-align:center;
padding: 8px;
margin:0px;
margin-left: 40px;
font-family:century gothic;
font-size:14px;
font-color:#BAB9B3;
}


Adding the Menu

1) Go to 'Page Elements'
2) Add a new HTML/Javascript widget underneath your header
3) Copy/paste this code:
<div id="nav"><a href="YOUR LINK HERE">YOUR TEXT HERE</a></div>

For example, mine looks like this:
<div id="nav"><a href="http://photographybyemilygrace.blogspot.com">Home</a> <a href="http://photographybyemilygrace.blogspot.com/p/about.html">About</a>
<a href="http://photographybyemilygrace.blogspot.com/p/contact.html">Contact</a> <a href="http://www.flickr.com/photos/photographybyemilygrace/" target="_blank">Flickr</a>

Ta-da! You now have a stylish new menu bar. If you used this tutorial, I'd love to see what you came up with--let me know by leaving a link in a comment. =D

14 June 2011

Tuesday's Tips -Signature the harder way

I've had many questions on how to make a signature appear for each post. So here ya go! I've found two different ways of inserting a signature in each post. The first way is without messing with any of your blog's HTML code--the easy way. This way only inserts the image in future posts and the image is in the actual post itself.(can accidentally be deleted!) If you do it this way the image for your signature will appear just as any other image in your post. (not such a great idea if your images have borders or drop-shadows)
The second way is to use HTML to automatically put a signature image at the bottom of every post, past and future--the harder way.

[Here] is the tutorial for the easy way.

The following is the 'harder way.'

1}
create your signature


Create your signature in whatever image editing software that you use.  (I personally use GIMP because it is free and works well for what I need)
I would include your name and make the design represent your blog's feel and design. Make it represent you!

2}
upload your signature


Upload your image using whatever image hosting site that you use. (I would suggest Imgur because it is free, doesn't downsize images, privacy settings, is easy to navigate, and loads quickly)

3}
create the code

.post-footer-line-1{
background-image:url(IMAGE LINK);background-repeat:no-repeat; background-position:left left;
height:150px;
line-height:150px;

color:$textcolor;
text-transform:none;
letter-spacing:0px;
font-size:14px;
padding:0px;
border-bottom:0px solid #000000;
}
Replace IMAGE LINK with the direct link for your signature. Then change the height and line-height to the same number that is slightly bigger than the height of your image. The reason you have to make it bigger is so that the footer text doesn't overlap part of your image.
You can also customize other things like the border, text-transformation and such as you'd like.

4}
add the code

Go to your dashboard > design > edit HTML.
Search for this code:
h2.date-header{
Then right below that paste your code.

You now have a signature that will appear on every post--past, present, and future--on your blog until you remove/change the code.
Let me know if you have any questions, and I'll get back to you ASAP.

In Christ,

07 June 2011

Tuesday's Tips -Hiding the Video Part of Embedded YouTube Videos

EDIT: With the newest YouTube videos this tutorial will not work well. You can no longer see the menu/slider at the bottom, instead it is all squashed together.


Super long title, I know. =P But how else was I to describe it?! Anyways, this is a really simple little trick that does hide the video part of an embedded You Tube video. Basically it makes it just a music player instead of a video. So if you wanted to share a song but didn't want your readers to be distracted by the video part or if you didn't like the video part, this simple trick is what you'll need to know.



This is what it will look like when you're done.




So you take the code for the YouTube video that you want to share and copy/paste it into the 'Edit HTML' section of your post. This is what it will look like:

<iframe width="400" height="330" src="http://www.youtube.com/embed/-FribXzqHVE?rel=0" frameborder="0" allowfullscreen></iframe>


All you need to do is change the height to 27 like this:

<iframe width="400" height="27" src="http://www.youtube.com/embed/-FribXzqHVE?rel=0" frameborder="0" allowfullscreen></iframe>
It doesn't matter what size the video originally was, the bar part that you want seen is always 27. Except for every once in a while I've come across ones that are 25 instead--so be aware of these strange occurrences.



Ta-da! You did it--told ya it was simple. =)



Have a lovely Tuesday!



In Christ,