How to Set Up a Private Gallery on MFC

Ok ladies, I made this video in a bit of a rush. I hope I covered everything and that you found this helpful if you didn't already know how to do it.

Fade and Slide in Effect for Avatars

This effect was inspired from Wild4KittenTK 

Want your avatar to slide in upon your profile page loading like this...?

well here's how you do it...

Set Your Offline Tip Amount

This summary is not available. Please click here to view the post.

Basic HTML Codes for Editing Text (Beginners)

<br>
 
Line Break Element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.

HTML Text Formatting Elements

Tag	Description
<b>	Defines bold text
<em>	Defines emphasized text
<i>	Defines italic text
<small>	Defines smaller text
<strong>	Defines important text
<sub>	Defines subscripted text
<sup>	Defines superscripted text
<ins>	Defines inserted text
<del>	Defines deleted text
<mark>	Defines marked/highlighted text

 Links are defined with the <a> tag:

<a href="url">link text</a>

Example:

<a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a>

Try it Yourself »

The href attribute specifies the destination address (http://www.w3schools.com/html/)

The link text is the visible part (Visit our HTML tutorial).

Clicking on the link text, will send you to the specified address.

The link text does not have to be text. It can be an HTML image or any other HTML element.

NEW Amazon & Twitter Graphics to Choose From

Lots of girls seem to love the Amazon & Twitter graphics that highlight when you hover the cursor over them. 

So I thought I'd make them in a few different colors to choose from.

Edit the bold red text before pasting this HTML code in the about me section on the edit profile page.

<div class="link-amazon">
<a href="Your wishlist url" target="_blank">Amazon Wishlist</a>
</div>
<div class="link-twitter">
<a href="http://twitter.com/Your_Twitter_user_name" target="_blank">Twitter</a>
</div>

CSS Code:

.link-amazon a { display:block; width:258px; height:140px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggruNnTUTEoaY2k2d2ni9MxUhXh_Tof0mxnpMgqWKL9An6u7r-gy0q2WgNn_SX9Aya5LRtjNcZe7RgFe2hbHzU2Gv2DVTCQuZEEEIN3rfu8Rw9JCP0BUfcpnwcuTSPjbapofnjpOP1MDs/s1600/amazon_blue.png) no-repeat; position:relative; margin:215px 0 0 -185px; text-indent:-3000px; } .link-amazon a:hover { background-position:0 -140px; }

CSS Code:

.link-amazon a { display:block; width:258px; height:140px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJBme4Rs7BI5gGH3pNNYbSe6yqDMH50PmXg9hQdxicDwx6rbfExfmuliiq3vJv3faEoWFF_B8Bng6DoSPYTdWKzJdxjoLu0SuYYf4q4_nciCkdeMUBmiBMWNx8M5TgFPxW_whLXs8yzV4/s1600/amazon_gold.png) no-repeat; position:relative; margin:215px 0 0 -185px; text-indent:-3000px; } .link-amazon a:hover { background-position:0 -140px; }

CSS Code:

.link-amazon a { display:block; width:258px; height:140px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj629uZEB_weSmDRUuLBATDnpkbuR2HRSS8uEm_d-CakE3nh45Mq2G6MAwNrYpKBRnM53hQ_fuaL533xWyhOs8Iop54yfu9wQ4LEoAL_rZ1Co8eQVexQPDD7TqjHLVrTLXiwotxp2UsvuI/s1600/amazon_pink.png) no-repeat; position:relative; margin:215px 0 0 -185px; text-indent:-3000px; } .link-amazon a:hover { background-position:0 -140px; }

CSS Code:

.link-amazon a { display:block; width:258px; height:140px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPMDNOG3z9o_UJ0zyDf_lHucZXptieWHYIsUlnS7k6IxrnP19pZ2fbu6KiyCnl51fPgk1qAbcylL9NhXM33tzhPEwSHIZqmF1ICBBCafoXdX1p4-h5B3rcotXf7qvdSbGfjkD_LWxaEK4/s1600/amazon_purple.png) no-repeat; position:relative; margin:215px 0 0 -185px; text-indent:-3000px; } .link-amazon a:hover { background-position:0 -140px; }

CSS Code:

.link-twitter a { display:block; width:249px; height:160px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjxsm3Po5FUhfDZNve-4dNnxPVn7rnmhCb6UUgdeiFWYotB46shRpshFBL4bWoLafbu9OQ3vnlLgabvGIUEB3ewIyID8CB2TuXxlVQtHUDT1R6BREp2B4FjAKQ4PJH_-ZSjOcNBDlJ4ok/s1600/twitter_blue.png) no-repeat; position:relative; margin:215px 0 0 -5px; text-indent:-3000px; } .link-twitter a:hover { background-position:0 -160px; }

CSS Code:

.link-twitter a { display:block; width:249px; height:160px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyyuxaa41tccY0eoB1TSC67ipAi9jv-TxYOJmkuloR5Zv6Ghv3J1QrKzaHmVTyCqB5vwebfdCne2DxPaWtTcon5m_-sMISLLQ6vHK6BLPxKbhBIFJyDCBnwt0_Dc82BGiYCvytc6rD8Lc/s1600/twitter_gold.png) no-repeat; position:relative; margin:215px 0 0 -5px; text-indent:-3000px; } .link-twitter a:hover { background-position:0 -160px; }

CSS Code:

.link-twitter a { display:block; width:249px; height:160px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFLDNL1LFZ0Q56hm6CE8hueQn5xKRjcLnaGRi5brUEcq0WBYYKDJEdUfnLshOEBko2Yy7BJkUsYg9uAj399OPCwPPaCcIlVFuvupm3MJtETC0Xpehnp0ogkU2mWL6-FLt-368MhVHBBB0/s1600/twitter_pink.png) no-repeat; position:relative; margin:215px 0 0 -5px; text-indent:-3000px; } .link-twitter a:hover { background-position:0 -160px; }

CSS Code:

.link-twitter a { display:block; width:249px; height:160px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxruIAYzYGg03cMDEGjkEKzj7p_14S7raMuL5J32mEXf515v8yJY2ZZ3_JKDeUl-gBpyjaxaiPmgYdEYgjYV4NrqNZf3bE2id4jEjG3_4ChpDSovRKwJOx7Kjx5OT9GEq9m1nz6ZRZKSM/s1600/twitter_purple.png) no-repeat; position:relative; margin:215px 0 0 -5px; text-indent:-3000px; } .link-twitter a:hover { background-position:0 -160px; }

You can Post Twitter Feeds on MFC Profiles Now!

Thanks for the tip Waterbird, good looking out!     

2nd Video Tutorial on Editing MFC Profiles

Editing Halloween Profile (part 2)

Floating Ghosts:

For those of you who don't want to use the entire FREE Halloween profile layout I made, but would still like to use the floating ghosts, just ad the code below to your custom css section. (Click on any of the URLs to see what image they represent. Feel free to delete one or two of them from the code if the original is a bit too flashy for you.)

 .profile_section_content {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjurlfBkEkEzP82eJdWp5viZA30xwgcaw3Y5V-anzwY-lLFmQRuGsm-xW54dSBr41_L1lazEO9hpQU7cBLT39WtCU7MN2KgjNCCYylDb_K4p8MJxl3dgClYq5fz1hZbdsrtmMOiy6MUXvI/s1600/ghost1.png),url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFaHSXg7cXTnauEWJgcu_v65aAA8yWVyuNj4PwMu9osGWGZD4jhuo9d6CpPpCr5DFNhSpt6uVMausLtDdTq4P_FDgAJ6WtrokUBKXGJt0vi2Be5-kfKNwDK1oWw7ZcDfbGNeRwpz7WFxE/s1600/ghost2.png),url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiacwef3GHbEKjkFSVeV61Q3cNUAjKKHU3mPVUgkdrS4VWlCrTZ6KdF7p61Mp2PIAy4qeTSmVCkO4Oni_WGItPql9rPVO01prrrxTxSWco3atbLXqqydsinaxIuAC840Y4CmeVjip300A4/s1600/ghost3.png);
  -webkit-animation:ghosts 20s linear infinite;
  -moz-animation:ghosts 20s linear infinite;
  -ms-animation:ghosts 20s linear infinite;
  animation:ghosts 20s linear infinite;
 }

@keyframes ghosts {
  0% {
    background-position:0 0px,0 0px,0 0;
  }
 
  100% {
    background-position:500px 1000px,400px 400px,300px 300px;
  }
}

@-moz-keyframes ghosts {
  0% {
    background-position:0 0px,0 0px,0 0;
  }
 
  100% {
    background-position:500px 1000px,400px 400px,300px 300px;
  }
}

@-webkit-keyframes ghosts {
  0% {
    background-position:0 0px,0 0px,0 0;
  }
 
  50% {
    background-color:rgba(0,0,0,0.7);
  }
 
  100% {
    background-position:500px 1000px,400px 400px,300px 300px;
    background-color:rgba(0,0,0,0.8);
  }
}

@-ms-keyframes ghosts {
  0% {
    background-position:0 0px,0 0px,0 0;
  }
 
  100% {
    background-position:500px 1000px,400px 400px,300px 300px;
  }
}

Editing Halloween Profile (part 1)

Editing the Skype Raffle Ad:

All you have to do to add details to the image provided in the FREE Halloween profile is go to this link, then click on the "From URL" tab, paste https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGDhevFe9OvFXCITrtYsHWny3in4JoWdufypBMDxAz0bj31tO-ek3JTWpy9l6fFGiGiog948vFSFzSDNOOnWyheAlJbtM46ZnGUD-NCOxuR2Ky54gPt1V0Y0iwRMGQOfFSqEdhdiWDp80/s1600/skyperaffel.png and hit "Upload".

From there you can add whatever text you like, save it to your computer, upload it to whatever image hosting site you use, and replace the old image url with your new one in the html code.

Click here if you would rather use a completely blank image to work with.

And for those of you who don't want to use the whole Halloween profile, but would still like to use the Skype raffle ad, here's the codes:

CSS:

div.skype-ad,div.hof-ad {
  width:400px;
  margin:50px 0;
  position:absolute;
  top:5px;
  left:350px;
  z-index:10;
}

div.skype-ad img,div.hof-ad img {
  width:50%;
  max-width:2000px;
}

div.skype-ad img:hover,div.hof-ad img:hover {
  width:110%;
}

img {
  -webkit-transition:all 1s ease;
  -moz-transition:all 1s ease;
  -o-transition:all 1s ease;
  transition:all 1s ease;
  -moz-transform:rotate(-0deg);
  -webkit-transform:rotate(-0deg);
}

.container img:hover {
  -moz-transform:rotate(2deg);
  -webkit-transform:rotate(2deg);
}

.container a.desc-img img {
  -moz-transform:rotate(-1deg);
  -webkit-transform:rotate(-1deg);
}


HTML (About Me section):

<div class="skype-ad nohide"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifDl630jgLm05KuH-zgqtxGw3R-6bAvE9qXjcGDcyMTPRPOYKUrqMt6hqxjXjBd5QQYHOvjzmgcZQTXJ8coAyDmEFJj7ZF5GdzyEZq4h7qvCb6O-ElTLRCrPaJiz5TlNqEN9LwXftyavg/s1600/skype+raffel.png" alt=""></div>

Awesome Inkscape Tutorial by @jodeum for your Profile

Make a Sparkling Movie Poster Marque for Your Video Ads

To make a graphic like this for your video ads, first make sure the image you have made is 366 x 508px or smaller.

You can create really cool text for your images on the sites listed in the right side bar.

Save this image to your computer by right clicking on it, and choosing "Save image as":

Then upload the image you want in the frame to Online Image Editor

Select the "wizards" tab and click on ""Overlay image" and upload the marque frame.

Then select the "Basics" tab and crop your picture.

Go back to "Overlay image" to add your custom text or any thing else you may want to add, or you can just use the "Add Text" tool.

Save your picture to your computer, then go to Glitterboo to add sparkle effects.

Remember to select "Resize" before downloading.

Cell Phone Number Advertisement

Have you ever wanted to make a cool graphic like these for advertising your cell phone number, but don't know how to use programs like photoshop or gimp???

Well I made a couple of simple tools last night that anyone can use, to easily make a graphics like these, without having download and use any graphic design software. Now let me show you want to do.

Simple Hack

Free graphic design to use on your MFC profile

Just-a-User made an excellent thread with lots of helpful templates to use on your MFC profile with youtube tutorials on ACF. Check it out:

Free graphic design to use on your MFC profile

FREE Night Sky Layout Theme

This summary is not available. Please click here to view the post.

Personalized 3D Black Navigation Bar

This summary is not available. Please click here to view the post.

Jazz up your Twitter or Facebook with Symbols

You can add hearts, music notes and other cool symbols to your Twitter, Facebook, and other social networks or chats.

There are two ways!

1) Copy symbols from here!

♥ – love heart ♫ – big musical note
♪ – small musical note
☺ – smilie face
☻ – smilie face #2
☼ – sunshine
♚ – Crown
★ – Star

2) Do the symbols yourself!

This works for some people and not for others, but each of these characters can be typed on your keyboard using the ‘alt’ button.
First, if you’re on a laptop make sure you ‘Num Lock’ is on! The ‘Num Lock’ button is on the top right of your keyboard.
Next, hold down ‘alt’ (the one in the bottom left of your keyboard) and press type the following:

Hold ‘alt’ then type 1 – ☺ Hold ‘alt’ then type 2 – ☻
Hold ‘alt’ then type 3 – ♥
Hold ‘alt’ then type 4 – ♦
Hold ‘alt’ then type 5 – ♣
Hold ‘alt’ then type 6 – ♠
Hold ‘alt’ then type 7 – •
Hold ‘alt’ then type 8 – ◘
Hold ‘alt’ then type 9 – ○
Hold ‘alt’ then type 10 – ◙
Hold ‘alt’ then type 11 – ♂
Hold ‘alt’ then type 12 – ♀
Hold ‘alt’ then type 13 – ♪
Hold ‘alt’ then type 14 – ♫
Hold ‘alt’ then type 15 – ☼
Hold ‘alt’ then type 16 – ►
Hold ‘alt’ then type 17 – ◄
Hold ‘alt’ then type 18 – ↕
Hold ‘alt’ then type 19 – ‼ (it’s one character!)
Hold ‘alt’ then type 20 – ¶

Simple way to make Animated GIF from videos

This tutorial is to show you how to make an animated gif clip from your videos, so you can use it to make ads to put on your MFC profile.

This is the gif I made, (I went with something "G rated" since I'm uploading the video tutorial to youtube as well LOL):

Here's the links to the websites I went to in the video:

Online-Convert.com

LunaPic

Using Gimp to Make Graphics/Edit Images

Seriously Helpful Links:

Emil Stenström has written a Beginners guide to CSS and standards.

Eric Costello's CSS Layout Techniques: for Fun and Profit concentrates on complex layouts and also explains how to work around browser bugs. 

An Introduction to Cascading Style Sheets by Norman Walsh, originally published in the World Wide Web Journal.

An article by Christopher Schmitt at Web Reference titled “Making Headlines with Cascading Style Sheets” shows you how to spice up Web page headers with a dash of CSS.  Style sheets can take the language of a document into account (with the ':lang' pseudo-class)… but only if the document is correctly labeled. W3C's I18N WG published the latest guidelines on Choosing a language tag.

Jens Meiert maintains a list of CSS properties, including those in working drafts, with links to the relevant specifications.

SitePoint offers a CSS reference (CSS level 2)

xhtml.com publishes an alphabetical CSS 2.1 reference with screenshots for most properties. 

HTML.net offers a CSS tutorial (also in several other languages). 

Stu Nicholls offers CSSplay, a site with CSS examples, including many uses of ':hover'.