Tuesday, 30 April 2013

Image Animation Card Flip CSS

Design du Jour
Design du Jour

This is possibly my favourite effect for images!

It's a simple little bit of CSS and HTML which creates the above effect. I decided it looks great flipping a business card, so I designed one for the site... what do you think?

Ok, so lets cut to the chase.

The CSS:

.flip-container {

-webkit-perspective: 1000;
-moz-perspective: 1000;

-o-perspective: 1000;

perspective: 1000;

border: 6px groove #898989;

.flip-container:hover .flipper, 
.flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);

.flip-container, .front, .back {
width: 350px;
height: 200px;

.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;

.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;

.front {
background: none 0 0 no-repeat;
z-index: 2;

.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
background: none;


Tweaking the CSS

The only changes you have to make to the code above is applying the flip dimensions (width and height), and a border if you choose to have one.

This effect works so well if you have two images of the same size (dimensions). In the code above, change width: 350px; height: 200px; to the dimensions of your images.

In the code above, please edit border: 6px groove #898989; to whatever kind of border you would like. For a thicker border, change 6px to 7pc, 8px or 9px. And again, for a thinner border, change 6px, to 5px, 4px or 3px. Options for the shape of your border are solid, dotted, dashed, outset, inset, groove, double or ridge. #898989 is the colour I have chosen in the border above. You can simply replace #898989 with words for basic colours, like "white" or "black" or "pink" (e.g. border: 6px groove white;
), or you can visit my post HERE for a comprehensive list of Hex Colour Codes.

Where to put the CSS:

Before proceeding, please see my post on how to back up your blogger blog HERE. As you are editing the fundamental code of your blog, a backup is vital, especially if you are new to this. So you can restore the previous version of your blog.

Now copy your code with the edits you made, and go to...

Template →
Edit HTML →
Click in the coded section →
Press Ctrl "f" to open up the find box→
Type </head> into the find box and hit enter→
Paste your code above the </head> tag you have found in the coded section→
Click Save Template.


<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front">
      <center><a href="SITE TO LINK TO ON CLICK" title="TEXT TO APPEAR WHEN YOU HOVER OVER THE EFFECT" target="_blank"><img src="TOP IMAGE URL" alt="TOP IMAGE NAME" style="border: none" width="350"/></a></center>
    <div class="back">
                  <center><a href="SITE TO LINK TO ON CLICK (SAME AS ABOVE)" title="TEXT TO APPEAR WHEN YOU HOVER OVER THE EFFECT (SAME AS ABOVE)" target="_blank"><img src="BOTTOM IMAGE URL" alt="BOTTOM 

" style="border: none" width="350"/></a></center>




Tweaking the HTML

SITE TO LINK TO ON CLICK: URL of website you would like your visitor to go to. It must be the same in both instances in the above code.

TEXT TO APPEAR WHEN YOU HOVER OVER THE EFFECT: This will be the words which appear when you hover over the effect, again it must be the same in both instances in the code above.

TOP IMAGE URL: This is the image URL which rests on the upturned card.

TOP IMAGE NAME: This is the name of your top image.

border: none: This is the option to have a border around each seperate image, in each instances of the code above. Please see the section of the post above, which deals with border styling.

350: this is the width of your top image in pixels. For the best effect, both images should be the same dimensions, therefore the width in the two instances above, should be the same.

BOTTOM IMAGE URL: This is the image URL which rests on the turned down side of the card.

BOTTOM IMAGE NAME: This is the name of your bottom image.

Where to put the HTML:

The completed code can be put in either the HTML section of your post editor or as a new Java/ HTML gadget/widget.

That's it folks!

You now have a great flipping image effect on your blog!

If you have any questions, please either comment below or mail me.


Tuesday, 23 April 2013

How to Make a QR Code for your Blogger Blog

Design du Jour QR Code

The absolute BEST website for creating your QR code is azonmobile.com's QR Code Generator, HERE.

The first option is choosing what you would like your QR code for... You can make them so that when they are scanned, it opens an email addressed to you, you can make them as a written (text) message, plus many more options.

In this instance though, we would want your website URL (as below).

Your next option is error correction, this is how much give and take your qr code has in regards to it being read. The higher the error correction, the better it will find your site, but the more "blocks" will be on the image.

The default on this site is "Medium-High". This is a good selection.

The next two options, "Block Size" and "Border Size" are better left as is.

Block style is great to play around with. You can make them Square, Rounded (rounded corners only) or Circular (Bubbles).

Foreground Colour is the colour of the blocks in your code. This is denoted by a Hex Colour Code, visit the link for a colour picker and link to a very comprehensive list of Hex Colour Codes. Alternatively, below this you have the option of using an image which is cut into to create the blocks for your QR code image.

Background colour is the same option, either a hex colour code or background image is usable. For my code above I used part of my blog's background image.

Finally, you can emded an image (like your logo image) into the QR code! Very clever if you ask me! This image is placed in a space in the center of your QR code image (which is what I have done above with a "D", for Design du Jour), unless you select the tick box marked "Overlay the logo". This option will place the logo over the entire QR code image.

Finally, by clicking Generate (as in the image below) it will display your created QR Code image, plus the option to download your creation, for use on your website!

Thanks for stopping by and if you have any questions regarding this or anything else on my site, please comment or contact me via the links to the left.

Monday, 22 April 2013

How to Insert an Image as Your Gadget/Widget Header

I am going to start this post by assuming you have images ready to go. Something that suits your blog with the title you wish to appear above you widget/gadget. I am also going to assume you know how to upload your image to a photo storage/sharing site and can obtain the URL of the image. If you are supa-dupa new to all this, perhaps read through a few of my older posts first...

If you do know a little about HTML and CSS programming, here's what you need to do:

Edit the below code to suit your needs.

<center><img src="IMAGE URL" alt="" style="border: none" width="200px"/></center>

IMAGE URL is of course where you paste the URL of your image.

border: none is adjustable depending on what kind of border you require (if any), please visit my post HERE if you would like to know more about HTML borders and their styling.

200px is where you can adjust the width of your image (height is adjusted automatically to keep the aspect ratio of your original image. There may be a little bit of trial and error here, getting your image just right.


First (as always) when editing your blog's fundamental HTML, please backup your blog's template first. Visit my post HERE to find out how.

Now, go to:

Template →
Edit HTML →
Click your cursor into the code you see →
Press Ctrl F to open the find box →
Type part of your widgets title in the box (such as "Button" for Grab My Button) →
Press Enter.

You may need to press enter a few times to find the correct piece of code, it will look something like this (each blogger template may vary a little):

<b:section-contents id='sidebar-right-1'>

<b:widget id='HTML2' locked='false' title='Grab Our Button' type='HTML'>

<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'><data:title/></h2>


<div class='widget-content'>
<b:include name='quickedit'/>

Note that it says the title of your gadget (visible in RED above). What you need to do now, is insert the code we created above for your image where it is highlighted in yellow i.e. <data:title/>. The rest of the code remains the same, it is just the <data:title/> that needs to be "covered" with the new code.

Preview your template first but when you have your image the width you like, click Save Template and you are done!

Repeat this process for each widget you require an image header for.

One problem you may come up against, is if you have not named a Gadget/Widget. What you need to do in this instance is to find and search for the Widget/gadget ID, instead of the Widget./Gadget title.

To obtain the id, click to "edit" the Gadget but of course don't do anything to change it.

Maximise the window, so you can see the very end of the address bar in the window - at the top of the screen.

Note the word there, ending in a number. This is the Gadget-id.

It may be for example, Text1 or HTML1, Attribution1, Followers1, etc.
Thanks again for tuning in,

How to Shake an Image on Hover

This is a clever little piece of code which allows you to have an image shake on hover, just like the Milk"shake" above.
The first piece of code is to be placed as is, into the HTML code of your blog.
Before proceeding though, please take a quick look at my post regarding backing up your blog, HERE.
Copy the following code and go to:
Template → 
Edit HTML → 
Click in the content box and press Ctrl F → 
Type </head> into the pop-up "find" box → 
Hit Enter → 
Paste the first code below, above the </head> tag → 
Click "Save Template"
function shakeleft()

function shakeright()


function stoptimer()


This next piece of code is your actual image, and is placed in either the HTML edit view of your blog post or as a new HTML/Java Gadget/Widget.

<a href="URL OF WEBSITE YOU WANT YOUR SHAKING IMAGE TO LINK TO HERE" title="TITLE OF LINK" target="_blank"><img id="shake" src="IMAGE URL"
onmouseout="stoptimer()" alt="NAME OF IMAGE" style="border: solid 0px #c7000cwidth="85"/></a>

Please visit my post HERE to learn how to adjust the red text above. Just don't delete/edit the green highlighted "shake", as the effect will not be called to work.
That's it! You now have a shaking image.
Thanks for tuning in and come back soon for more simple tips.

Thursday, 11 April 2013

How to - Use Image Mapping to make part of an image, a clickable link.

Lollies Green Jube Orange Jube Purple Jube

Today I am going to attempt an easy “how to” for image mapping.

Mapping allows us to use part of an image as a clickable link, rather than the whole image. For example, you may have an image with a man’s face and a woman’s face. With mapping, we can link the man’s face to a particular website and the woman’s face to another website altogether. These separate clickable sections are known as a “hotspot”. As in the image above, I have linked the large orange Jube, the purple Jube at the bottom of the image and the green Jube on the far right of the image.

Here is the code:

<img src="Image URL" alt="Name of Image" usemap="#Mapname">

<map name="Mapname">

<area shape="poly" coords="400,67,359,78,348,92,344,107,348,127,362,147,369,147,382,155,400,161" alt="Link Name" href="Link URL" target="_blank">

<area shape="circle" coords="162,148,53" alt="Link Name" href="Link URL" target="_blank">

<area shape="rect" coords="254,227,344,300" alt="Link Name" href="Link URL" target="_blank">


How to tweek it…

Let’s begin with an explanation of what image coordinates are, and how to obtain them. Coordinates are points on an image in pixels. They are made up of a horizontal (x) and a vertical (y) e.g. “x,y”. The following image shows a black dot with the coordinates 167,172. This point is 167 pixels along the top of the image (from left to right) and then 172 pixels down the image (from top to bottom).

"How do I find the co-ordinates of an image?" I hear you ask… well, it depends on what program you are using. Let’s address three of those now:

Microsoft Paint: This is a simple program which comes free with Microsoft Office. The coordinates are displayed in the bottom left hand corner of paint, shown as “167, 172px” as an example. When you move your mouse over the image, these figures will logically change. Hover your mouse cursor point over the spot you would like the coordinate of, and write it down.

GIMP: The coordinates are also displayed in the bottom left hand corner, shown as “167.0, 172.0” as an example.

Photoshop CS6: Now it gets a little more complicated (of course… it is Photoshop after all!). Follow these instructions to view your cursor’s hovering coordinates in Photoshop

You can view the mouse position based on how you have your Preferences for Units and Rulers set up.

Go to Edit > Preferences

Select Units & Rulers and set Units > Rulers to 'Pixels'. Click 'OK'.

Now go to the Window menu and click 'Info'. The mouse position will be displayed in the bottom left quadrant of the Info window, under '+ X Y'.

Now we know how to get each set of coordinates, let’s address each shape that you can make your hotspot. What you first need to do is decide between the three hotspot shapes available, rect (rectangle), poly (polygon) or circle (obvious!). The easiest to use are the rectangle and circle. These use a limited number of coordinates and therefore are less involved. A polygon is of course, any multisided shape, this is both the most detailed and the most useful as you can completely trace part of your image with a very long set of coordinates.

For a rectangle, you map the top left and bottom right corners. All coordinates are listed as x,y (over,up). So, for upper left corner 0,0 and lower right corner 100,150 you would type: 0,0,100,150

For example:

<img src="Image URL" alt="Name of Image" usemap="#Mapname">

<map name="Mapname">

<area shape="rect" coords="0,0,100,150" alt="Link Name" href="Link URL" target="_blank">


 The purple Jube at the bottom of the image at the top of the post is a rectangular hotspot, click for an example.

For a circle, only two sets of coordinates are required, like the rectangle, but for the second coordinate you specify the radius, or the distance from the centre of the circle. So, for a circle with the centre at 30,20 and a radius of 10 you would write 30,20,10.

For example:

<img src="Image URL" alt="Name of Image" usemap="#Mapname">

<map name="Mapname">

<area shape="circle" coords="30,20,10" alt="Link Name" href="Link URL" target="_blank">


The large orange Jube in the image at the top of the post is a circular hotspot, click for an example.

For a polygon, you map each coordinate separately. The Web browser automatically connects the last set of coordinates with the first. As stated above, you can completely trace the outline of part of an image with a long list of sets of coordinates such as this, "400,67,359,78,348,92,344,107,348,127,362,147,369,147,382,155,400,161".

For example:

<img src="Image URL" alt="Name of Image" usemap="#Mapname">

<map name="Mapname">

<area shape="poly" coords="400,67,359,78,348,92,344,107,348,127,362,147,369,147,382,155,400,161" alt="Link Name" href="Link URL" target="_blank">


The green Jube on the far right of the image at the top is a polygon hotspot, with coordinates tracing the Jube, click for an example.

Finally, an explanation of the red sections of the code.

I am going to assume at this point that you are not a novice at coding, and know what a URL is and how to get one. If in fact you are a beginner, please email me for any explanations if this post is not basic enough.

Insert Image URL here Image URL.

Name your image here Name of Image.

Name of your map, can be anything you choose, here #Mapname (this one must begin with the hash (#), and here Mapname.

Name of the webpage you are linking to here Link Name.

And finally the webpage URL you are linking to here Link URL.

You can of course have many hotspots in the one image (as per the code in the box at the top of this post) and once your code is complete, you can paste it in the html view of a post or as a new HTML/Java Gadget (or in the <body> section of your website if you are not a blogger).

Hopefully I have explained Mapping in a logical, basic fashion but if you have any questions, please email me or comment below.

Thanks for tuning in!

How to - Give your text a shadow 3D effect!

This is text with a dark grey shadow!

This one involves adding a little CSS to your blogs fundamental code so before going any further, please view my post on backing up your blogs template here, just in case you change anything you shouldn't, you can restore your blog to its previous perfection! It's a really quick post and an even quicker process.

Now... down to business.

This is the magic piece of CSS which makes it all happen.

p.shadow {text-shadow:-2px 2px 1px red;}

You can change some of the look of your shadow, by editing the following:
Where the code above reads "-2px", remove the - symbol to change the direction of your shadow, from the left side of your text to the right.

Where to code reads "2px", change this to "-2px" for the shadow to move from below the text to above.

Where the code reads "red", change this to any of the basic colours like black, white yellow green blur grey purple orange, or enter a hex colour code instead. See my post here regarding Hex colour codes. An example hex code is #ffffff (white). This will now be the colour of your shadow.

Once you have styled the shadow the way you want it, go to your blogs home page. From here, drop down to TEMPLATE then EDIT HTML (after backing up your blog as above). Now use ctrl F to find </head>. paste your styled code directly above this closing head tag.

It is now ready to be called on to give a shadow to your chosen text.

Now on to the simpler styling of what you want to write.

Here is the HTML code for entering some text with your shadow:

<p class="shadow"><font size="6" color="black">
Write anything here, this is your text with a red shadow!

The class="shadow" portion of the above code is what "calls" your shadow into play.

font size="6" specifies the size of your font. you can enter a number from 1-7 here, the default browser size is 3.

color="black" specifies the colour of your text, if you would like it to be your blogs default colour, simply remove this piece of code. Alternatively, you can edit it as I have mentioned above in relation to the shadow colour.

Change the text to whatever you want it to read, and you are ready to upload it!

Adding it to a post...

You need to place the code into the HTML view of your blog post and update it/publish it from there, or it will not work.

Adding it as a new gadget/widget:


Then paste your text code into the content field, click save and you have it!

That's it folks, if you have any questions at all please comment.


How to - Remove/Decrease or Add/Increase space between your Widgets/Gadgets

This code is easy but very very useful for specific design purposes. Its great to be able to change bloggers default distance between your sidebar gadgets. Some designs will look better with a greater distance, some with a very small gap.

Go to

Template → Customise → Advanced → Add CSS

Then paste the following code:

.sidebar .widget{ 
margin:0 0 6em

The above code places "6" lines between your widgets, either increase the number 6 for a greater distance or decrease the number for less space/lines.

That's all folks, any questions though, just comment.

How to - Create a Border Around Text With Many Customisations

This is a border around text.

This is going to be a fairly comprehensive post, covering all customisations available for text within a border.

Firstly... the code


<div style="width: 500px; border: 3px solid #353535; border-radius: 15px; box-shadow: 5px 5px 2.5px #000000; background-image: url(http://us.cdn2.123rf.com/168nwm/ihor_seamless/ihor_seamless0910/ihor_seamless091000020/5630012-seamless-grey-3d-piped-tile-pattern.jpg); background-color: #353535; padding: 10px;">

<font color="#ffffff"; face="arial"; size="6";>

<b><i>This is a <sup> border </sup> <sub> around </sub> text.</i></b>




Ok, so lets start at the beginning. The RED piece of code listed above is the background, border and drop shadow.
Reading left to right, we will address each part and the customisation possibilities.

The code can be ignored until the section "width: 500px;" This specifies the width of the area itself, this can be increased and decreased as desired. For example width: 423px or 600px, px meaning pixels.

The next part of the code reads "border: 3px solid #353535;" This is the actual border around the area. The thickness of the border can be adjusted by either increasing or decreasing the "3px" by one or two pixels either way.

The word solid can be changed to either "dotted" "dashed" "outset" "inset" "grooved" "double" and "ridged", to change the style of border.

#353535 is the Hexadecimal Colour Code for the image border. You can either visit my post here regarding Hex Colour Codes or grab the code from your template designer, for a shade you have already incorporated into your blog design.

"border-radius: 15px;" is in direct reference to the curved edges of the area. be aware that this feature only works in some browsers. You can either increase or decrease the size of the curve by editing the "15px" to a slightly lower or slightly higher number.

"box-shadow: 5px 5px 2.5px #000000;" is in direct relation to the box shadow. If no box shadow is required, simply delete the line. Same goes with the border radius and border codes already covered. If these things are not required, simply delete the relevant section of code... where was I??? "The 5px 5px" figures are the thickness of the box shadow. Increase or decrease as desired. The 2.5px is the amount of blur. It can also be adjusted and even deleted if no blur is required (for a sharp edged shadow). The #000000code is another Hex code reference (black).

"background-image: url(http://us.cdn2.123rf.com/168nwm/ihor_seamless/ihor_seamless0910/ihor_seamless091000020/5630012-seamless-grey-3d-piped-tile-pattern.jpg);" is the piece of code which gives you a repeating background image. The best kind of image to use is of course smallish and seamless. Edit it here: "background-image: url(URL OF YOUR IMAGE HERE);". This part of the code can be removed if you want a background colour instead (covered next).

"background-color: #353535;" is in direct reference to a plain background colour of your choice. Please see the above comments and link regarding Hexadecimal colours. As also stated above, simply remove the background image piece of code and you will be left with this plain colour background.

"padding: 10px;", this is how far away from the border, your text is to stay. The more you write, the longer (or higher) your area will automatically become.

The green piece of code listed above is how you change the appearance of the text/font.

"font color="#ffffff";" is how, through a hexadecimal colour, you can choose the colour of your text. See above comments again, in relation to hexadecimal colours.

"face="arial";" is where you can choose your font. You can choose any of the blogger fonts (check what is available to you in your template designer) or standard web based fonts like Arial and Verdana. You simply change "arial" to "font name here"

"size="6";" this piece of code specifies the size of your text. A number from 1 to 7 that defines the size of the text. Browser default is 3.

The blue piece of code listed above is your actual text.

<b>....</b> makes the text bold, remove the <b> and </b> if you do not require bold text.

<i>....</i> makes the text italics, remove <i> and </i> if you do not require your text in italics.

This is a <sup> border </sup> <sub> around </sub> text. This is your text! Write as much as you want and your area height will increase as you go. The <sup>...</sup> code, makes anything written within these raise slightly above the other text (superscript). The <sub>....</sub> lowers any text slightly below the other text (subscript). If neither are required, simple remove these codes. Your text would then simply look like this, This is a border around text.

To use this within a post, paste the code in the HTML area where required in your post or as a JAVA/HTML gadget in your blog.

Hope this all makes sense, but if you have any questions at all, leave me a comment.

Thanks for tuning in!

How to - Play Sound on Image Hover

Design Tips
I have tried this method in both Google Chrome and Internet Explorer, and any crazy person still using Internet explorer can tune out now, this only worked in Chrome, but perhapse works in safari/Opera/Firefox?...
The code...

<audio id="mysound" src="URL OF SOUND (MP3)"></audio><center><a href="WEBSITE YOU WOULD LIKE THE IMAGE LINKED TO (IF ANY)" title="LINKED WEBSITE NAME (IF ANY)" target="_blank"><img src="IMAGE URL" onmouseover="document.getElementById('mysound').play()" onmouseout="document.getElementById('mysound').pause()"alt="LINKED WEBSITE NAME (IF ANY)" style="border: 2px solid #ffffff (OR "none" IF NO BORDER REQUIRED)" width="100" height="100"/></a></center> 

Now to explain the editable red sections of text above...
URL OF SOUND (MP3),  is the location of your sound to be played. You can get a free (limited) account from somewhere like FILEDEN  then upload any MP3 you want to use. once upload is complete, fileden supply you with the url of your sound.

WEBSITE YOU WOULD LIKE THE IMAGE LINKED TO (IF ANY), This is pretty self explanitory. If no link is required, you can delete the red text leaving only, <a href="".

title="LINKED WEBSITE NAME (IF ANY)" and alt="LINKED WEBSITE NAME (IF ANY)", are simply hover areas where text appears when you hover over the image in different browsers. If no names are required simply delete the red text leaving, title="" and/or alt="".

IMAGE URL, is again the loction of your image. You can get a free (limited) account from somewhere like FILEDEN  or use your google + photo's section, then upload any image you want to use.

border: 2px solid #ffffff, is the ability to add a border around the image. 2px makes the border 2px wide, solid makes the border "solid". #ffffff is the Hex Code for the colour white. For all the main colours you can also write the word, for example "white". This does not work for specific tints and tones of colours. Click HERE for my post on Hex Color Codes and a link to a great chart chart, it's one of the most comprehensive around. You can also simply copy a colour code from your blogger template designer.

width="100" and height ="100", control the dimensions of the image as seen on your blog.  To keep an aspect ratio on your images but make them smaller/larger, Scriptygoddess has a very useful size converter/calculator.

Now the all important GREEN sections. These must have a different word used every-time you use this code, or it will only work in the first instance!

That's about it as far as the code goes folks. Now just paste your completed code in either a HTML post or add a new Java/HTML Gadget.

If you have any questions at all, please contact me or comment below.

How to - remove CAPTCHA from the New Blogger Interface

This is an easy but important "how to", especially if you get a large number of comments on your blog.

1. Go to your Dashboard

2. Click "Settings" by the left lower side

3. Click "Posts and Comments" in the options that drop down

4. Scroll down until you see "Show word verification"

5. Click on the arrow by the side and Select "No"

6. That's it.


Thanks for stopping by!

How to - Make clickable buttons (color change on hover)

The following tutorial guides you through creating a clickable button, beginning at easy, and progressing to a more advanced application for this tool.

<input type="button" value="Click Here!"/>

The above button, has a default color when static and when hovering. As yet nothing happens when you click it. but lets change that now...

<input type="button" value="Click here!" onClick="window.open( 'WEBSITE URL YOU WOULD LIKE THE BUTTON TO OPEN', '_blank' )"/>

Again the above button has two default colors, but now it links to my blog (and will open in a new tab due to the _blank text). All you need to do is insert the website of your choice instead of the RED text above, and you could just stop here... but lets go a few steps further.

<input type="button"
button style="font-size: 24px; font-weight: bold; color: #f4f1e3; background-color:#2B2917";
value="Click here!"
onClick="window.open( 'http://easydesigntipsandtricks.blogspot.com.au/', '_blank' )"/>

In the above code, we have edited the "font-size" in pixels, just increase or decrease this number for larger or smaller text. This will of course change the size of your button. We have also made the text BOLD by entering the text font-weight: bold;. If you do not require bold text, simply delete that part of the code. We have chosen the text color, by specifying a hex color code for white which is #ffffff. For more color codes, go HERE. We have also specified our background button color of #008B00.

Are you ready for more?

<input type="button"
button style="font-size: 24px; font-weight: bold; color: #f4f1e3; background-color:#2B2917";
value="Click here!"
onclick="window.open('http://easydesigntipsandtricks.blogspot.com.au/', '_blank' )"/>

Now when you hover over the button, the background color changes to back (onmouseover="this.style.background='#93877e'"). The hex code for the lighter brown used is  #93877e, and when you move the cursor away it reverts to the dark brown (onmouseout="this.style.backgroundColor='#2B2917'"). The hex code for this particular shade of brown is #2B2917.

These are just some of the things you can achieve with the "Button" attribute. Have fun!

How to - Click one image to reveal another

This code is great when something is being revealed for an event 
(a book cover reveal for example).

The code:

<script type="text/javascript">
function changeImg(img, newimg) {
img.src = newimg;
<img onclick="changeImg(this, ' URL OF HIDDEN IMAGE ')" src=" URL OF SURFACE IMAGE " />

The effect works best with images of the same size. 
That's it folks, nice and simple. If you do have any questions though, please leave a comment or mail me.


Wednesday, 10 April 2013

How to - Make an image fade when you hover over it. (Image Fade Hover Effect).

Design Du Jour

This code contains a little CSS and some Java/HTML, but all in all very versatile and easy to use. I have applied it to the image above as an example.

The CSS code:

.Fade:hover img { 

At the moment the RED part of the code is set to 0.5, meaning the image will fade by 50%. You can change the figure to lower or higher depending on your desired fade effect (for more fade, e.g. 0.1, 0.2, 0.3, 0.4. Or less fade e.g. 0.6, 0.7, 0.8, 0.9). Mostly though 0.5 is a great base.

This code needs to be added to your blog first by going to:

Template → Customise → Advanced → Add CSS

And pasting the code in the field provided. Then click the "Apply to Blog" button.

The HTML Code:

<center><a class="Fade" href="URL OF WEBSITE YOU WANT THE LINK TO GO TO" title="TITLE YOU WANT TO APPEAR WHEN THE CURSOR GOES OVER THE IMAGE" target="_blank"><img src="IMAGE URL" alt="IMAGE TITLE" style="border: solid 2px #FFFFFF" width="300"/></a><center>

Please see my post HERE on using a code to add an image to your blog, it is the same code but with class="Fade" added (to make the effect work). The post also tells you how to add this code to your blog.

That's it! Once you have both codes added to your site your hover effect will work!

See, easy wasn't it!

How to make an EASY rollover image with a link (HTML)

This is an easy but good looking way to create an external link. If it's for a Blog Button or a button link, this code works so well, and it's EASY! I used this exact code to create my pages links underneath my header above.

The Code:

<a href="WEBSITE TO LINK TO" target="_blank" onMouseOver="document.Link.src='HOVER IMAGE URL'" onMouseOut="document.Link.src='IMAGE BEFORE HOVER URL'"><img src="STATIC IMAGE URL" width="256" border="0" name="Link" title="WORDING TO APPEAR ON HOVER" alt="IMAGE NAME"></img></a>


Addressing the RED section of the code:

"WEBSITE TO LINK TOthis is the site you want your rollover to link to when clicked on.

'HOVER IMAGE URL' this is the image URL for the image that will "magically" appear when you hover over the static image.

"STATIC IMAGE URLthis is the image that is displayed on your website prior to hovering, and the image that returns after your cursor leaves the image hovered.
"256" this is the width of the images. You don't have to have two images that are the same size but the effect works best when the images are an identical size.
"WORDING TO APPEAR ON HOVERthis one says it all, these words will appear when you hover over the image.
"IMAGE NAME" this is again obvious, the name of your image, for example "Me at Christmas".
Addressing the GREEN section of the code:
Every time you use this code on your blog or webpage, you will need to change Link to another word. Otherwise the code will work only in the first instance.
Then simply paste the completed code in the HTML section of a blog post or add a new Java/HTML Gadget and past the code in the content section.
That's it!
Have fun and thanks for stopping by!

Facebook Twitter Google + RSS Feed Email Me