✿

Make Your Own Cursor Effect Tutorial

1) Go to http://www.cursor-switch.com/

2) Click the button as shown in the picture below to register

3) Fill in your nickname, e-mail, password and password again.

4) Log in to your e-mail account and verify your email.

5) After verifying, click the hammer button as shown in the picture below to create your own cursor effect

6) Click at the orange link to add your own picture as shown in the picture below or you can choose any emoticons in the red box as shown in the picture below.

7) After adding or choosing the image that you want, scroll down and fill the form.

1) Fill your cursor's title
2) Tag it. You can ignore this if you don't want to tag.
3) Choose your cursor's effect interval.
4) Amount of image you want to display
5) Effect of your cursor
6) Status

8) Save it.

9) Click the link as shown in the picture below

10) Copy the code in the box and paste it in your blog.

11) Done.

❤ "Make Your Own Cursor Effect Tutorial" was Posted On: Saturday, November 10, 2012 @5:47 PM | 0 lovely comments ✿

Convert To Classic Template Tutorial

1) Dashboard >> Design >> Edit HTML >> Revert to Classic Template

2) Done.

❤ "Convert To Classic Template Tutorial" was Posted @5:46 PM | 0 lovely comments ✿

How To Use Blogskin Layout Tutorial

Before starting this tutorial, you need to make sure that you've already convert your template to classic template. If you don't know how to convert it, refer the tutorial >here<

1) Go to Blogskins.com and chose the layout that you like.

Example: I choose my layout named Sweet Memories.

2) Scroll down and you'll saw this:

3) Click Blogger Main to download it.

4) After downloading, open the code that you've downloaded, copy all those code.

5) Go to Dashboard >> Template >> Delete all the code in the box and paste the code that you've downloaded in the box.

6) Click Preview and if there's no problem, click Save Template Changes.

❤ "How To Use Blogskin Layout Tutorial" was Posted @5:45 PM | 0 lovely comments ✿

Image Hover For Classic Template Tutorial

1) Dashboard >> Template

2) Press CTRL+F and search for this code:

<style type="text/css">

3) Copy the code below here and paste it below <style type="text/css"> :

/*------ IMAGE ANIMATION------*/
img{filter:alpha(opacity=55);opacity:.55; -webkit-transition-duration: 0.5s;}
img:hover{filter:alpha(opacity=9);opacity:.9;}

4) Preview, Save and Done.

❤ "Image Hover For Classic Template Tutorial" was Posted @5:44 PM | 0 lovely comments ✿

Simple MP3 Player Tutorial

Before starting this tutorial, there are something you need to make this mp3 player.

The song that you want
WEBS account to upload your song

1) Go to webs.com to create a new account if you don't have one.

2) Create a website.

3) After creating a website, go back to dashboard.

4) Under SITES I'VE CREATED, click EDIT THIS SITE.

5) Click File Manager and then upload the song that you want.

6) After uploading, right click the song that you've downloaded and click Copy link address.

7) Go to flash-mp3-player.net

8) Click Player >> Mini >> Generator

9) Paste the link of the MP3 that you want here:

10) If you wanna change the mp3 color, change the general to colors.

11) After, you've done, copy the HTML code and paste it in your blog.

12) Done.

❤ "Simple MP3 Player Tutorial" was Posted @5:44 PM | 0 lovely comments ✿

Simple Navigation Tabs Tutorial

1) Dashboard >> Design >> Add a Gadget >> HTML/JavaScript

2) Copy the code below here and paste it in the content:

<span class="Apple-style-span" style="font-family: verdana, arial; font-size: medium; "><span id="nav" style="font-size: 13px; font-family: serif; background-color: #B8D3FF;
padding: 2px;
border-radius:5px;
border: #69A2FF 1px solid;
-webkit-transition:1s;"><a href="LINK" style="color:#69A2FF; text-decoration: none; -webkit-transition-duration: 0.5s; ">TITLE</a></span>
<span id="nav" style="font-size: 13px; font-family: serif; background-color: #B8D3FF;
color:#69A2FF;
padding: 2px;
border-radius:5px;
border: #69A2FF 1px solid;
-webkit-transition:1s;"><a href="LINK" style="color:#69A2FF; text-decoration: none; -webkit-transition-duration: 0.5s; ">TITLE</a></span>
<span id="nav" style="font-size: 13px; font-family: serif; background-color: #B8D3FF;
color:#69A2FF;
padding: 2px;
border-radius:5px;
border: #69A2FF 1px solid;
-webkit-transition:1s;"><a href="LINK" style="color:#69A2FF; text-decoration: none; -webkit-transition-duration: 0.5s; ">TITLE</a></span></span>

Notes:-
Red - Link of the page that you want
Blue - Title of your navigation.
Pink - Background colour
Green - Border colour
Yellow - Title colour

3) Colour code here.

4) Save and Done.

❤ "Simple Navigation Tabs Tutorial" was Posted @5:43 PM | 0 lovely comments ✿

Pop-Up Welcome Message Tutorial

1) Dashboard >> Design >> Edit HTML

2) Press CTRL+F and search for this code:

<head>

2) Copy the code below here and paste it below <head>:

<script language='JavaScript'>alert(" YOUR MESSAGE HERE");</script>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

3) Replace YOUR MESSAGE HERE with the message that you want.

4) Preview, Save and Done.

❤ "Pop-Up Welcome Message Tutorial" was Posted @5:42 PM | 0 lovely comments ✿

Shadow Highlight Tutorial

Look at the picture below here and look at the word in the red box.

1) Dashboard >> Design >> Edit HTML

2) Press CTRL+F and search for this code:

a:link {

3) Copy the code below here and paste it above a:link {:

::-moz-selection {
background:#FFFFFF;
color:#000000;
text-shadow: 2px 2px 3px #8080FF;
}
::selection {
background:#FFFFFF;
color:#000000;
text-shadow: 2px 2px 3px #8080FF;
}

3) You can replace the red code with the colour of the shadow that you want.

4) Save & Done.

❤ "Shadow Highlight Tutorial" was Posted @5:42 PM | 0 lovely comments ✿

Disable Highlight Text Tutorial

Highlight means:

1) Dashboard >> Design >> Add a Gadget >> HTML/JavaScripts2) Copy the code below here and paste it in the content:

<script type="text/javascript">
/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}

//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"
</script>
<script type="text/javascript">
disableSelection(document.body) //disable text selection on entire body of page

</script>

3) Save and Done! :)

❤ "Disable Highlight Text Tutorial" was Posted @5:41 PM | 0 lovely comments ✿

Vertical Menu Tab Tutorial

1) Dashboard >> Design >> Add a Gadget >> HTML/JavaScripts

2) Copy the code below here and paste it in the content:

<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.sidebarmenu ul{
width:250;
text align:center;
list-style-type: none;
font: normal 13px Century gothic;
}
.sidebarmenu ul li{
position: relative;
}
/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-align:center;
text-decoration: none;
padding: 0px;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #FFB5E8; /*background of tabs (default state)*/}
.sidebarmenu ul li a:visited{
color: white;}
.sidebarmenu ul li a:hover{
background-color: #000000;}
/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */
</style>
<script type="text/javascript">
//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas
function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}
if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)
</script>
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="LINK">HOME</a></li>
<li><a href="LINK">OWNER</a></li>
<li><a href="LINK">TUTORIAL</a></li>
<li><a href="LINK">SHOUTBOX</a></li>
</ul>
</div></center></center>

Notes:-
Pink : the width of the tab
Red : the tab background color
Blue : color of the background tab when you move your cursor on it
Green : the link for your tab title
Orange : for the tab title

3) Save & Done

❤ "Vertical Menu Tab Tutorial " was Posted @5:40 PM | 0 lovely comments ✿

Image Hover Tutorial

1) Dashboard >> Design >> Edit HTML

2) Press CTRL+F and search for the code below here:

/* Header

3) Copy the code below here and paste it above /* Header:

/*------ IMAGE ANIMATION------*/
img{filter:alpha(opacity=55);opacity:.55; -webkit-transition-duration: 0.5s;}
img:hover{filter:alpha(opacity=9);opacity:.9;}

4) Preview, Save & Done! :)

❤ "Image Hover Tutorial" was Posted @5:39 PM | 0 lovely comments ✿

Welcome Note "Click To Enter" Tutorial

1) Dashboard >> Design >> Edit HTML

2) Press CTRL+F and search for the code below here:

]]></b:skin>

3) Copy the code below here and paste it above ]]></b:skin>

</style>
<script language="javascript" type="text/javascript">
/* toggle() checks to see if the images has already been faded
or not and sends the appropriate variables to opacity(); */
function toggle(el,milli) {
// Get the opacity style parameter from the image
var currOpacity = document.getElementById(el).style.opacity;
if(currOpacity != 0) { // if not faded
fade(el, milli, 100, 0);
} else { // else the images is already faded
fade(el, milli, 0, 100);
}
}
/* changeOpacity() uses three different opacity settings to
achieve a cross-browser opacity changing function. This
function can also be used to directly change the opacity
of an element. */
function changeOpacity(el,opacity) {
var image = document.getElementById(el);
// For Mozilla
image.style.MozOpacity = (opacity / 100);
// For IE
image.style.filter = "alpha(opacity=" + opacity + ")";
// For others
image.style.opacity = (opacity / 100);
}
/* fade() will fade the image in or out based on the starting
and ending opacity settings. The speed of the fade is
determined by the variable milli (total time of the fade
in milliseconds)*/
function fade(el,milli,start,end) {
var fadeTime = Math.round(milli/100);
var i = 0; // Fade Timer
// Fade in
if(start < end) {
for(j = start; j <= end; j++) {
// define the expression to be called in setTimeout()
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
// setTimeout will call 'expr' after 'timeout' milliseconds
setTimeout(expr,timeout);
i++;
}
}
// Fade out
else if(start > end) {
for(j = start; j >= end; j--) {
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
setTimeout(expr,timeout);
i++;
}
}
}
</script>
<div class="input" onClick="javascript:toggle('wise', 3000); this.style.display='none';
document.getElementById('june').style.display=''">
<img src="PICTURE URL"
style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/>
</div>
<div id="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
<div id="june" style="display : none;">
<body>

4) Replace PICTURE URL with the URL of the picture that you want.

Here are some freebies for you guys:

http://i1112.photobucket.com/albums/k492/sunshinetan96/blue.png

http://i1112.photobucket.com/albums/k492/sunshinetan96/pink.png

http://i1112.photobucket.com/albums/k492/sunshinetan96/purple.png

5) Search for body {

6) Copy the code below here and paste it above body {

.input {
text-align: center;
margin-top: 200px;
}

7) You can change the red code. The bigger the number, the further your picture from the top.

8) Click save.

9) After clicking save, this thing will appear.

9) Click Delete Widgets & Done! :)

❤ "Welcome Note "Click To Enter" Tutorial" was Posted @5:38 PM | 0 lovely comments ✿

Float Welcome Note Tutorial

1) Dashboard >> Design >> Add a Gadget >> HTML/JavaScript

2) Copy the code below here and paste it in the content:

<div style=" position:absolute; top:0px; right:400px;"><img src="IMAGE URL"/></div><div style=" position:absolute; top:30px; right:450px;"><center>Your Note </center></div>

3) Here's some freebies for you:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0JZl_nAFBqWqDlgwRr-w61lE36sY-skwCrEMyTwP5NOxhTTJu2vUvQ9ZLb23Tj8HQjTmD94JWVsQDplx8QbB-Y5R-JajAijuddvvrfbptoYqvUDpYu6joOXEgCdy7iLSWO3_Vv6IKa8rb/s320/blue+box.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGzySzOIezSgKzG-H22hT9xfnvPDcknyxeBqqwlipkYL0F4sVL6_34jNwsdpobTGo9DSa-j-XVDCMvSaRUQ8x6SM9inutjGCeQTJ3YBJMKNxrcjEorX80APpFoGVYjJxJiJ87NPiLQWkwF/s320/orange+box.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFkRNIJ5Loxec5ZTa9d-pr8jGihhsM7wEDLgSKUhx8Y5hIETFVERXIwABzSlY_I93INBcD2of-ZHONZUW8nSRkGICtRqlvrhI98zlw7FjjK_hByPCYdVQt6GFlHv0nZPcvt3x1xJTzSM6x/s320/pink+box.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidvS5MDfIc_etGImUbbrLLFbvYE3L47ub4p4l3Ua9WGiAv5QZhvUn3us0O4gSqp1-AQuLWxyvMuwTqBAJEPI_wPntL8KJJtPNzG94kqileDaclo3kohOk1mOucndnH_XDAfB3OesJglYbM/s320/purple+box.png

4) Replace Your Note with the note that you want.

5) You can also change the red code.

6) Save and Done!

❤ "Float Welcome Note Tutorial" was Posted @5:37 PM | 0 lovely comments ✿

Float Music Box Tutorial

1) Dashboard >> Design >> Add a Gadget >> HTML/JavaScript

2) Copy the code below here and paste it in the content:

<div style=" position:absolute; top:0px; right:200px;"><img src="PICTURE URL"/></div><div style=" position:absolute; top:26px; right:218px;">YOUTUBE PLAYER CODE</div>

3) Change the youtube player width to 138px and height to 73px

4) You can use some of the pictures below here:

http://i1112.photobucket.com/albums/k492/sunshinetan96/boxoren.png

http://i1112.photobucket.com/albums/k492/sunshinetan96/boxpink-1.png

http://i1112.photobucket.com/albums/k492/sunshinetan96/boxpurple.png

5) Save & Done!

❤ "Float Music Box Tutorial" was Posted @5:37 PM | 0 lovely comments ✿

Cute Icon/Emotion Beside Post Title Tutorial

1) Dashboard >> Design >> Edit HTML >> Tick Expand Widget Templates

2) Press Ctrl+F and search for this code:

<a expr:href='data:post.url'><data:post.title/></a>

3) Copy the code below here and paste it at the center of <a expr:href='data:post.url'><data:post.title/></a>:

<img src='ICON URL'/>

4) It will be like this:

<a expr:href='data:post.url'><img src='ICON URL'/><data:post.title/></a>

5) Replace ICON URL with the URL of the icon that you want.

6) Preview, Save & Done!

❤ "Cute Icon/Emotion Beside Post Title Tutorial" was Posted @5:36 PM | 0 lovely comments ✿

Disable Right Click Without Message Tutorial

1) Dashboard >> Design >> Edit HTML

2) Press Ctrl+F and search for this code:

<body expr:class='"loading" + data:blog.mobileClass'>

3) Replace <body expr:class='"loading" + data:blog.mobileClass'> with the code below here:

<body oncontextmenu='return false;'>

4) Save and Done! :)

❤ "Disable Right Click Without Message Tutorial " was Posted @5:35 PM | 0 lovely comments ✿

Center Header Tutorial

1) Dashboard >> Design >> Edit HTML

2) Press Ctrl+F and search for the code below here:

/* Content

3) Copy the code below here and paste it above /*Content:

.Header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

4) Preview, Save & Done :)

❤ "Center Header Tutorial " was Posted @5:34 PM | 0 lovely comments ✿

Heart Cursor Tutorial

This is a heart cursor looks like:

Let's start:

1) Dashboard >> Design >> Add a Gadget >> HTML/JavaScript

2) Copy the code below here and paste it in the content:

<script type='text/javascript'>
// <![CDATA[
var colour="#000000";
var sparkles=40;

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(5, 5);
var rdow=createDiv(5, 5);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*5;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"49px";
div.style.width=width+"50px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

3) Replace the red code with the code of the colour that you want. You can find the code >here<

4) Save and Done!

❤ "Heart Cursor Tutorial" was Posted @5:34 PM | 0 lovely comments ✿

« Older posts | Newer posts »