customization tutorial!

hii ok so im just going to give you the code for my whole date line thingy since its easier and the directions would be if you were using the theme #21, so if you want me to help you on a diff theme message me with that theme and ill see what i can do! :)

step 1) put this code above <head>

<script>
window.onload = function () {
document.body.insertAdjacentHTML( 'beforeEnd', '<iframe id="my-like-frame" style="display:none;"></iframe>' );
document.addEventListener( 'click', function ( event ) {
    var myLike = event.target;
    if( myLike.className.indexOf( 'my-like' ) > -1 ) {
        var frame = document.getElementById( 'my-like-frame' ),
            liked = ( myLike.className == 'my-liked' ),
            command = liked ? 'unlike' : 'like',
            reblog = myLike.getAttribute( 'data-reblog' ),
            id = myLike.getAttribute( 'data-id' ),
            oauth = reblog.slice( -8 );
        frame.src = 'http://www.tumblr.com/' + command + '/' + oauth + '?id=' + id;
        liked ? myLike.className = 'my-like' : myLike.className = 'my-liked';
    };
}, false );
};
</script>

<!------------------------------------------------------------------------------------------->

step 2) take the code below and put it under <style type="text/css">


.notes {padding-top:10px;font-family:calibri;font-size:10px;width:480px;font-weight:bold;}
#permalink {margin-top:-7px;text-transform:uppercase;font-size:8px;text-align:left;letter-spacing:1px;font-family:calibri;padding-top:10px;}
.tags {font-size:9px;font-family:cambria;margin-top:0px;color:{color:links}; margin-left:4px;}
.tags a {text-decoration:underline;}
.tags a:hover {color:{color:linkhover};}
.my-like {
    cursor: url('http://cur.cursors-4u.net/others/oth-6/oth589.cur'), auto;
    display:inline-block;
    vertical-align:top;
    }
.my-liked, .my-like:hover {
    color:{color:linkhover};
    text-shadow: 0 0 5px {color:linkhover};
    cursor: url('http://cur.cursors-4u.net/others/oth-6/oth589.cur'), auto;
    -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
    display:inline-block;
    vertical-align:top;
}

.my-like {
    cursor: url('http://cur.cursors-4u.net/others/oth-6/oth589.cur'), auto;
    display:inline-block;
    vertical-align:top;
}
.my-liked, .my-like:hover {
    color:{color:linkhover};
    text-shadow: 0 0 5px {color:linkhover};
    cursor: url('http://cur.cursors-4u.net/others/oth-6/oth589.cur'), auto;
    -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
    display:inline-block;
    vertical-align:top;
}


<!------------------------------------------------------------------------------------------->


step 3) press ctrl or cmnd and f and find:

{block:Date}<div id="postinfo"><a href="{Permalink}">{Month} {DayOfMonth}{DayOfMonthSuffix}</a> {block:NoteCount} <a href="{Permalink}"> ∙ {NoteCount}</a>{/block:NoteCount}{block:RebloggedFrom}<a href="{ReblogParentURL}"> ∙ {ReblogParentName}</a>{/block:RebloggedFrom}
{block:ContentSource}<a href="{SourceURL}">/ {SourceLink}</a>{/block:ContentSource}<br></div>{/block:Date}
{block:HasTags}
<div class="tags">
{block:Tags}<a href="{TagURL}">{Tag}&nbsp;</a>{/block:Tags}</div>
{/block:HasTags}
<div class="note">
{block:PostNotes}{PostNotes}{/block:PostNotes}
</div>
</div>
{/block:Posts}

<!------------------------------------------------------------------------------------------->

step 4) delete that and you'll put this in its place:

<center><div id="permalink">
{block:Date}<span style="background-color:{color:background};padding:3px;"><a href="{Permalink}" style="font-family:cambria;letter-spacing:1px;font-weight:normal;background-color:{color:linkhover};padding:2px;padding-left:3px;color:{color:background};" title="@ {12hour}:{minutes}:{seconds} {capitalampm} ({timeago})">{DayOfMonthWithZero} {Month}</a>{/block:Date}{block:NoteCount}&nbsp;&nbsp;<span style="color:{color:linkhover};opacity:.8;font-family:arial;">♥ </span><a href="{Permalink}">{NoteCountWithLabel}</a> <span style="color:{color:linkhover};opacity:.8;font-family:arial;">♥</span> <a href="{ReblogURL}" target="_blank" class="details">reblog</a> <span style="color:{color:linkhover};opacity:.8;font-family:arial;">♥ </span><div class="my-like" data-reblog="{ReblogURL}" data-id="{PostID}" >like</div>{/block:NoteCount}{block:RebloggedFrom}<div id="imgz"><span style="float:right;"><a href="{ReblogParentURL}" title="via"><img src="{ReblogParentPortraitURL-16}"></a>&nbsp;<a href="{ReblogRootURL}" title="source"><img src="{ReblogRootPortraitURL-16}"></a></span></div>{/block:RebloggedFrom}
<br> </span>
</div></center>
<div class="tags">{block:HasTags}{block:Tags}+<a href="{TagURL}">{Tag}</a>;&nbsp;&nbsp;{/block:Tags}{/block:HasTags}</div>
<div class="note">
</div>
</div>
{block:PostNotes}<div class="notes">{PostNotes}</div>{/block:PostNotes}
{/block:Posts}

<!------------------------------------------------------------------------------------------->

and youre done! let me know if you need more help :)