so guys i’ve been getting a lot of asks saying why isn’t my cursor working when i hover out of my posts? is there some special code?
well there is, this works on all blogs! but also some blogs got lucky there cursor works, but here’s the secret:
*,body,a:hover,a:link,a:visited,a:active{
cursor: url(CURSORURLHERE), auto !important;
}
paste that under <style>
// claire
If you want to add a line break put <br>
like
hey<br>im claire
‘im claire’ will appear on the next line :)
// Claire
Tutorial 05 - Hide Stuff Tutorial
In this tutorial there are FIVE ways I will show you how to hide stuff. This is mostly just for like Terms of Usage pages or whatever you wish. Most of the examples are simply copying and pasting different bits. But this will require you to know where the HEAD, CSS, and HTML sections are. The last ways to hide stuff are really the only “advanced” part of the tutorial as they require some coding understanding. Hope it’s useful!
Note: All of the ways I show you are found on different sites aka not made by me (but I have used a couple of them) and I have just compiled them (with sources) in one place.
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
That’s called a favicon, look for <link rel=“shortcut icon” href=“{Favicon}”> in the head section, probably there is like a url there, if you want it to be your avatar picture, you change it to {Favicon} in the href=“” thing, be careful not to erase to quotation marks! If you do, just replace them with new ones (:
// Claire
Come off anonymous! Did you put it in <head>? Or did you retype quotation marks?
Here bae:
// Claire
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!
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!
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
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
go to borderradius.com and type the pixels on how scalloped
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
okay so we know like none of you guys read these things, but were just assuring you keep the credit and don't steal anything from the theme. i mean like just preview the code and rip things off there. the themes here are
theme: claire
cute transitions: justin aguilar animations
creative link effects: tympanus
sidebar icon: @notesmokeciggys