Tumblr Tutoriial ♡

Lamp Intro Effect

So this is a cool lamp thingy where you stick on your blog and it tells you to turn on the lights! It’s pretty cool!

Just stick this code before </body>:

<!--koddostu.com lamp effect start-->
<!DOCTYPE HTML><style type="text/css">div.tht-position{position:fixed;z-index:6010;}div.tht-s-e{top:72px;right:0px;}</style><style type="text/css">div.tht-position{_position:absolute;}div.tht-s-e{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}</style><div class="tht-position tht-s-e"><a id="lambakapali" onclick="document.getElementById('lambaacik').style.display='block';document.getElementById('lambakapali').style.display='none';document.getElementById('gölgem').style.display='none';" style="margin:0px !important;padding:0px !important;border:none !important;background-color:transparent !important;cursor:pointer;" title="Lambayı Aç"><img style="margin:0px !important;padding:0px !important;border:none !important;background-color:transparent !important;" src="http://1.bp.blogspot.com/-Ont9cH8VCJg/TvBiv-Ng47I/AAAAAAAADR8/bw36Ge18Wt0/s1600/LampOff.png" border="0"></a><Script Language='Javascript'>
<!--
document.write(unescape('%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%65%6E%2E%6B%6F%64%64%6F%73%74%75%2E%63%6F%6D%2F%32%30%31%32%2F%31%31%2F%6C%61%6D%70%2D%69%6E%74%72%6F%2D%65%66%66%65%63%74%2D%66%6F%72%2D%74%75%6D%62%6C%72%2E%68%74%6D%6C%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%20%69%64%3D%22%6C%61%6D%62%61%61%63%69%6B%22%20%20%73%74%79%6C%65%3D%22%64%69%73%70%6C%61%79%3A%6E%6F%6E%65%3B%6D%61%72%67%69%6E%3A%30%70%78%20%21%69%6D%70%6F%72%74%61%6E%74%3B%70%61%64%64%69%6E%67%3A%30%70%78%20%21%69%6D%70%6F%72%74%61%6E%74%3B%62%6F%72%64%65%72%3A%6E%6F%6E%65%20%21%69%6D%70%6F%72%74%61%6E%74%3B%62%61%63%6B%67%72%6F%75%6E%64%2D%63%6F%6C%6F%72%3A%74%72%61%6E%73%70%61%72%65%6E%74%20%21%69%6D%70%6F%72%74%61%6E%74%3B%74%65%78%74%2D%64%65%63%6F%72%61%74%69%6F%6E%3A%6E%6F%6E%65%3B%22%3E%0A%3C%69%6D%67%20%73%74%79%6C%65%3D%22%6D%61%72%67%69%6E%3A%30%70%78%20%21%69%6D%70%6F%72%74%61%6E%74%3B%70%61%64%64%69%6E%67%3A%30%70%78%20%21%69%6D%70%6F%72%74%61%6E%74%3B%62%6F%72%64%65%72%3A%6E%6F%6E%65%20%21%69%6D%70%6F%72%74%61%6E%74%3B%62%61%63%6B%67%72%6F%75%6E%64%2D%63%6F%6C%6F%72%3A%74%72%61%6E%73%70%61%72%65%6E%74%20%21%69%6D%70%6F%72%74%61%6E%74%3B%22%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%31%2E%62%70%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%2D%4E%51%62%4E%32%63%36%46%71%69%38%2F%54%76%42%69%77%6B%38%73%43%70%49%2F%41%41%41%41%41%41%41%41%44%53%45%2F%68%45%56%66%46%58%47%58%64%46%55%2F%73%31%36%30%30%2F%4C%61%6D%70%4F%6E%2E%70%6E%67%22%20%62%6F%72%64%65%72%3D%22%30%22%2F%3E%3C%2F%61%3E'));
//-->
</Script></div><style type="text/css">div.gtg-position{position:fixed;text-align:center;z-index:6008;background-color:black;opacity:0.98;
filter:alpha(opacity=98);width:100%;height:100%;}div.gtg-s-e{top:0px;right:0px;padding-top:20%;}</style><style type="text/css">div.gtg-position{_position:absolute;}div.gtg-s-e{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}</style><div id="gölgem" class="gtg-position gtg-s-e"><a style="opacity:1;
filter:alpha(opacity=100);color:#777;font-size:26px;margin:0px;padding:0px;background-color:transparent;border:none;text-decoration:none;font-weight:normal;">Can you turn on the light, <br/> please?</a>
</div>
<!--koddostu.com lamp effect stop-->

// Claire

Posted with 18 notes · Reblog?

Floating Images on your blog

Hey guys! You guys have been asking about how’d you get the floating images just bouncing in your blog randomly with the images you want, so here it is!

PREVIEW

We haven’t been active yet so stick this code under <head>

<script type="text/javascript">
 /************************************************ Floating image script- By Virtual_Max (http://www.geocities.com/siliconvalley/lakes/8620)* Modified by Dynamic Drive for various improvements* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code* Using CSB or Trellix: use an INSERT HTML box to hold your script and put your js and images into web components (webgem in Trellix). Then you MUST change each gEMDIR to GEMDIR before using code!***********************************************/ //

Step 1: Define unique variable names depending on number of flying images (ie:3):var flyimage1, flyimage2, flyimage3, flyimage4, flyimage5, flyimage6, flyimage7, flyimage8, flyimage9, flyimage10 function pagestart(){//Step 2: Using the same variable names as 1), add or delete more of the below lines (47=width, height=68 of image): flyimage1=new Chip("flyimage1",40,62); flyimage2=new Chip("flyimage2",40,62); flyimage3=new Chip("flyimage3",40,62); flyimage4=new Chip("flyimage4",40,62); flyimage5=new Chip("flyimage5",40,62); flyimage6=new Chip("flyimage6",40,62); flyimage7=new Chip("flyimage7",40,62); flyimage8=new Chip("flyimage8",40,62); flyimage9=new Chip("flyimage9",40,62); flyimage10=new Chip("flyimage10",40,62); //Step 3: Using the same variable names as 1), add or delete more of the below lines:movechip("flyimage1");movechip("flyimage2");movechip("flyimage3");movechip("flyimage4");movechip("flyimage5");movechip("flyimage6");movechip("flyimage7");movechip("flyimage8");movechip("flyimage9");movechip("flyimage10"); } if (window.addEventListener)window.addEventListener("load", pagestart, false)else if (window.attachEvent)window.attachEvent("onload", pagestart)else if (document.getElementById)window.onload=pagestart </script> 

<!-- Step 4: Define your flying images. For each image's ID tag, use the same variable names as 1) above --> 

<div id="flyimage1" style="position:absolute; left: -500px; width:40; height:62; font-size:10px;">
<img src="IMAGE 1"></div> 

<div id="flyimage2" style="position:absolute; left: -500px; width:40; height:62; font-size:10px;">
<img src="IMAGE 2"></div>

 <div id="flyimage3" style="position:absolute; left: -500px; width:40; height:62; font-size:10px;"><img src="IMAGE 3"></div>

 <div id="flyimage4" style="position:absolute; left: -500px; width:40; height:62; font-size:10px;"><img src="IMAGE 4"></div>

<div id="flyimage5" style="position:absolute; left: -500px; width:40; height:62; font-size:10px;"><img src="IMAGE 5"></div>

<div id="flyimage6" style="position:absolute; left: -500px; width:40; height:62; font-size:10px;"><img src="IMAGE 6"></div>

<div id="flyimage7" style="position:absolute; left: -500px; width:40; height:62; font-size:10px;"><img src="IMAGE 7"></div>

<div id="flyimage8" style="position:absolute; left: -500px; width:40; height:62; font-size:10px;"><img src="IMAGE 8"></div>

<div id="flyimage9" style="position:absolute; left: -500px; width:40; height:62; font-size:10px;"><img src="IMAGE 9"></div>

<div id="flyimage10" style="position:absolute; left: -500px; width:40; height:62; font-size:10px;"><img src="IMAGE 10"></div> 

</div>

Just change the image 1,2,3,4,5,6,7,8,9,10 into your image url, it could be the same or different.

Credit baracknobama for the inspiration on making the tutorial, message us requests on how we should make more tutorials!

Posted with 19 notes · Reblog?

white border in photos

Okay guys, there’s a lot of pictures with inner borders and I’m going to teach you how to do that! It looks like this:

You will need:

- A picture you wanna apply the border to

- Photoshop

Step 1, First load up your picture in Photoshop and select the marquee rectangle tool (M)

Step 2, Make a new layer, and drag the marquee and make a box inside the photo on how you plot the border to be like

Step 3, To apply, go to Edit > Stroke and apply these settings:

And double-click the border layer and apply these settings:

and you should have a really nice white border on your pictures!

you can also change it into any color if you want!

// claire

Posted with 7 notes · Reblog?

Stats hover menu

Preview here

Code 1 stick it up in your css:

#stats1{
height:13px;
text-align:center;
overflow:hidden;
margin-top:-1px;
border-bottom:1px solid #efefef;
text-transform:uppercase;
letter-spacing:1px;
font-size:5px;
line-height:10px;
z-index:999999999999999999999;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
#stats1:hover{
height:95px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

#stats2{
height:13px;
text-align:center;
overflow:hidden;
border-bottom:1px solid #efefef;
text-transform:uppercase;
background-color:#fff;
letter-spacing:1px;
font-size;8px;
line-height:13px;
z-index:999999999999999999999;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

#stats2:hover{
height:75px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

#stats3{
height:12px;
text-align:center;
overflow:hidden;
border-bottom:1px solid #efefef;
text-transform:uppercase;
background-color:#fff;
letter-spacing:1px;
font-size;8px;
line-height:13px;
z-index:999999999999999999999;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

#stats3:hover{
height:40px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

#stats4{
height:13px;
text-align:center;
overflow:hidden;
border-bottom:0px solid #efefef;
text-transform:uppercase;
background-color:#fff;
letter-spacing:1px;
font-size;8px;
line-height:13px;
z-index:999999999999999999999;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

#stats4:hover{
height:0px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

#stats{
text-align:left;
font-size:8px;
text-transform:uppercase;
opacity: .8;
border:1px solid #eee;
position:fixed;
font-family:calibri;
left:14px;
background-color:#fff;
letter-spacing:1px;
width:100px;
z-index:9999;
padding:4px;
top:14px;

}

If it’s too short you could always adjust the height when it hovers ^^

Code 2, stick it under <body>

Code credit: ocehans

// Claire

Posted with 20 notes · Reblog?

Simple Menu

Hey guys! So I made a menu, it’s pretty simple, you can preview it here.

See? pretty simple right? Just hovering on the box and the opacity increases, so let’s start!

Step 1, Paste this in under <style type=“text/css”> or before </style>:

.simplemenu{
width: 110px;
align: center;
height: 25px;
display: inline-block;
background: #bababa;
font-family: 'Ubuntu Mono', sans-serif;
color: #474747;
text-transform: uppercase;
text-align: center;
padding: 3px;
text-shadow: 1px 1px #eee;
opacity: 0.5;
transition: .6s ease-out;
-moz-transition: .6s ease-out;
-webkit-transition: .6s ease-out;
-o-transition: .6s ease-out;
}

.simplemenu a{
text-decoration: none;
color: #474747;
}

.simplemenu:hover{
opacity: 1;
transition: .6s ease-out;
-moz-transition: .6s ease-out;
-webkit-transition: .6s ease-out;
-o-transition: .6s ease-out;
}

You can change the colors too! I bolded them out to make it easier for you :)

The other stuff you can modify in the code is in italic okay?

Step 2, Now paste this under <body> or anywhere you want the menu to be:

<div class="simplemenu"><a href="/">title</a></div>

<div class="simplemenu"><a href="/">title</a></div>

<div class="simplemenu"><a href="/">title</a></div>

<div class="simplemenu"><a href="/">title</a></div>

Step 3, Paste this under <head>, it’s for the font source, but if you don’t want this font, you can find other fonts in here!

<link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css'>

This was originally made by me, so please credit me if you are reblogging or reposting, or liking this post. Please message me if there is anything wrong. Ok bye.

// Claire @purformance | ig

Posted with 9 notes · Reblog?

False i-Frame Menu (UPDATED)

UPDATE: (Guys I’m working on another theme for our tutoriial blawg :))

Okay, so basically false i-frame is the type of menu were using now, if you click the link it just redirects you to another page without loading or refreshing the page. So which is kinda cool. Read the instructions and don’t skip or else you’ll not get it. It’s kind of hard. JK.

Step 1 This is how you link the menu okay?

<span onClick="document.getElementById('frame').innerHTML=
document.getElementById('framename').innerHTML;"> LINK TITLE </span>

ignore ‘frame’, but 'framename’ is very important, you need to change it like how you do the popup menus, you need a specific id so for example, I need a page for my tutorials, I’ll change framename into like.. tutorials or anything random like fart idk… Let’s continue, shall we?

Step 2 Put this before {block:Posts}, I'mma explain it real simple, just copy and stick it before {block:Posts}

<div id="frame">

This “frame” thing is the one on top I told you to ignore (sorry for my crappy english), You can change 'frame’ but you must change it for both of them and it needs to be the same name otherwise it won’t work.

Step 3 And Put </div> after {/block:Posts} to close the div you pasted earlier

Step 4 To make the contents of the frame, paste this under </body>

<div id="framename" style="display:none;"> 

frame contents

</div>

Notice 'framename’? It’s like an id. So if I want to put tutorials, I could just name it tutorials in the link title, and rename framename in step 1 into for example tutorials, and the code above, change framename into tutorials. So if you click tutorials in the links it will direct you into the id called tutorials! Simple right? ;)

// Claire (IG : @purformance)

Posted with 2 notes · Reblog?

Christmas Lights!

So it’s almost christmas, and I wanna look for some christmas things to decorate for your blog, and I found these christmas light curtains or headers for your blog! It’s super simple and super cute! It looks like this:

The steps are easy! Put this below your style!

body{
background: #YOURBGCOLOR url('http://img90.imageshack.us/img90/3152/lightsn.gif') repeat-x top center;
}

So I will be opening the ask box okay?

// Claire

Posted with 6 notes · Reblog?

How to use textures??

Step 1, Download the textures

here’s a texture masterpost by whenigrowupiwannabeadonut:

Step 2, So after your download the texture, open up Photoshop, load your image

Step 3, Make a new layer and paste your texture there

Step 4, Make the blending mode to Screen, make sure you are selecting the texture layer, it’s located above the Layers, Dude :)

So I hope this is a big help so bye now! :~)

// Claire

Posted with 15 notes · Reblog?

Using a .co.vu domain :)

So hey guys! It’s Claire and today I’ll be showing you how to get a .co.vu domain and it’s free, like my blog url http://starbucksx.co.vu so it pretty much ends with a .co.vu rather than .tumblr.com :) Come on!

Step 1, GO HERE

Step 2, Register or sign in the account.

Don’t worry you can also sign in with Facebook! :)

Step 3, Type in a username and if it’s available, click register domain!

Step 4, Click configure after that

So you can put it on tumblr :3

Step 5, Click configure to tumblr :3

Step 6, Now go to your dashboard, and click on the gear icon, And scroll down on the left side click the blog you want to apply the domain name, Like I wanna put it in tumblrtutoriial, so you click the blog of tumblrtutoriial and click on Use custom domain name, and enter the username you put with the .co.vu, if you don’t type that it won’t work

Step 7, Now click test your domain, and if it says your domain is pointing to tumblr in a green box, smile:

And click save and your domain should work, and now go back to the page of the .co.vu thingy with the configurations, and click test your domain in the bottom :3

If it says it works, it does work:

Ok bye now!

// Claire

Posted with 9 notes · Reblog?

How To Change Hair Color In Photoshop

so basically it’s like changing the hair color so yah

Keep reading

Posted with 18 notes · Reblog?

How to make a gif in photoshop

Requirements:

- Adobe Photoshop Software

- The Movie you want to turn into a gif

Step 1, Click file in photoshop (I’m using Mac and editing Rise Of The Guardians GIF because Jack is awesome)

It can be either an .avi file or .mp4 file :) I don’t know if .mov works, never tried it before moving on

Step 2, A box should popup, and click Selected Range Only it’s a bullet

Step 3, Move the Triangular Scrubber to view the movie, Click play to see which scene, if you found it, Use the 2 triangles to crop the scene and click OK (YAY MERIDA!)

Then it will make the layers,

And you have the gif! Just click save for web and devices, And click GIF, leave the rest untouched:

// Claire

Posted with 30 notes · Reblog?

Black And White Images On Hover! UPDATED!

put the following code after <style type=“text/css”>

color then black and white on hover

img{-webkit-filter: grayscale(0%); -webkit-transition: .5s ease-in-out;-moz-filter: grayscale(0%); -moz-transition: .5s ease-in-out;-o-filter: grayscale(0%); -o-transition: .5s ease-in-out;} img:hover{-webkit-filter: grayscale(100%); -webkit-transition: .5s ease-in-out;-moz-filter: grayscale(100%); -moz-transition: .5s ease-in-out-o-filter: grayscale(100%); -o-transition: .5s ease-in-out;}

black and white then color on hover

img:hover{-webkit-filter: grayscale(0%); -webkit-transition: .5s ease-in-out;-moz-filter: grayscale(0%); -moz-transition: .5s ease-in-out;-o-filter: grayscale(0%); -o-transition: .5s ease-in-out;} img{-webkit-filter: grayscale(100%); -webkit-transition: .5s ease-in-out;-moz-filter: grayscale(100%); -moz-transition: .5s ease-in-out-o-filter: grayscale(100%); -o-transition: .5s ease-in-out;}

// Claire

Posted with 2 notes · Reblog?

Terms of Use

Credits

FAQ