TUTORIAL: MAKE YOUR OWN CURSOR EFFECT

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.

TUTORIAL: CONVERT TO CLASSIC TEMPLATE

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

2) Done.

TUTORIAL: HOW TO USE BLOGSKINS LAYOUT

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.

TUTORIAL: IMAGE HOVER FOR CLASSIC TEMPLATE

Requested by: Farah

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.

TUTORIAL: SIMPLE MP3 PLAYER

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.

TUTORIAL: SIMPLE NAVIGATION TABS

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.

TUTORIAL: POP-UP WELCOME MESSAGE

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(&quot; YOUR MESSAGE HERE&quot;);</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.

TUTORIAL: SHADOW HIGHLIGHT

Look at the picture below here and look at the word in the pink 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.

TUTORIAL: DISABLE HIGHLIGHT TEXT

Highlight means:

Get it? Good. This tutorial can prevent copycat from copying things from your blog.

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

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

<script type="text/javascript">
/***********************************************
* Disable Text Selection script- &#169; 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! :)

TUTORIAL: VERTICAL MENU TAB

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

TUTORIAL: IMAGE HOVER

Try to move your cursor to this picture:

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! :)

TUTORIAL: WELCOME NOTE "CLICK TO ENTER"

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! :)

TUTORIAL: FLOAT WELCOME NOTE

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/AVvXsEhsxIGF8BvUZHRox0Wpexxgx3qeBxHbMjFyoGk_DWz9KzwTRwIAmvF96NFZQS68X1RDIUUuckdt3p7KFg9c_90WgslybjfpiQb8SDml-8s7j03M6pB23A60CFzs7FxuK5_wb8ZcwaGz_owO/s320/blue+box.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRXCe73gwrLfdMrYHe0RRDgrANaWbTnh9uWqK2aVtsD6lqwWHhG8F6EKvo0xTrFGsPAjSuUYpHaWxHAgVFEXC4bx4IeIxCVGnLKS7Udn65qjCBdEv_qz-1tQXeImttEuUOHdcZxaIrkq3v/s320/orange+box.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRrCFTjINPeOL31y7SP6a4O6B1tM2yh7yrYlvkRACzBNnyh-cFMvPKZHcTP0duO7-BAIH2hNMO77UDmwFaqVm-Rp1DiP19-EOwT_b4TaqSqLP7lRIYvOWElxFqc_WiXQzIu6oBDGV-68_G/s320/pink+box.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdZRVztYi2tMLMHVJUsdj7PeEaoAJuKSl3JneF78qV6-HESlhMYGFitKL5ayeris4DW9eVP_KHGqpPyGqgq1t009u-WKiOz_dSxS2b4s7LEjXz63vlpfGHLU9NKHPFRcqOuoHscvtq0m0s/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!

TUTORIAL: FLOAT MUSIC BOX

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!

TUTORIAL: SCROLL TO TOP

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

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//** jQuery Scroll to Top Control script- (c) I made this script myself (Kyle Monk) and it is hosted on my personal site so would appreciate if you followed my blog at kylemonk.tumblr.com if you use it or for details on how to change the location.
//** Graphic originally from tumbler dashboard, for details on how to change graphic colour, contact me at kylemonk.tumblr.com
//** v1.1 (April 7th, 10'):
//** 1) Adds ability to scroll to an absolute position (from top of page) or specific element on the page instead.
//** 2) Fixes scroll animation not working in Opera.
var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="URL PICTURE" style="filter:alpha(opacity=70); -moz-opacity:0.1; width:100px; height:70px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },
    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },
    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()
</script>

3) Replace the pink code with the URL of the picture that you want.

4) Replace the red code with the width and height that's suitable with your picture.

5) Save and Done! :)

TUTORIAL: CUTE ICON/EMOTICON BESIDE POST TITLE

Who want a cute Icon/Emoticon Beside their post title? Raise your hand! ><

Let's start:

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!