Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts

Saturday, 29 October 2011

making-sweetness Tuto : Cara letak background di tumblr

Hello. Korang mesti pelik kan ? Tetiba je tumblr kan ? kan ? kan ? This tuto khas untuk my friend, Risa. :)
Dya ni baru first time in Tumblr. Dya xtahu ape2.. So, saya buat lah tuto ni untuk dya :) Bg org laen tuh, yg xtahu nk edit tumblr jgak, boleh join ^^

Okay, jum mula !

1) Dashboard >> Tekan tajuk tumblr korang di sebelah Dashboard 

2) If dah tekan, cuba cari "Customize appearance" yg terletak di atas "Setting" okay ?

3) Bila dah jumpa, tgk belah atas.. bahagian "Info" , "Theme" , "Appearance" , "Page" and "Advanced" tuh..

4) Tekan "Theme"

5) Tekan "Use Custom HTML" seperti gmbar dibawah

#Klik gmbar untuk lebih jelas ^^

6) Yg code bebanyak tuh, korang ganti dgn code HTML korang sendiri, okey ?

7) Untuk kawanku Risa, this is your code ^^

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>{title}</title>
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
<meta name="description" content="{MetaDescription}" />


<meta name="if:Endless Scrolling" content="0"/>
<meta name="text:Link 1 Name" content=""/>
<meta name="text:Link 1 URL" content=""/>

<meta name="text:Link 2 Name" content=""/>
<meta name="text:Link 2 URL" content=""/>

<meta name="text:Link 3 Name" content=""/>
<meta name="text:Link 3 URL" content=""/>

<meta name="text:Link 4 Name" content=""/>
<meta name="text:Link 4 URL" content=""/>

<meta name="text:Link 5 Name" content=""/>
<meta name="text:Link 5 URL" content=""/>

<meta name="image:Your" content=""/>
<meta name="if:show tumblr picture" content="1"/>
<meta name="text:page section title" content="More links..."/>

<meta name="color:Background" content="#f5f5f5"/>
<meta name="text:background image position" content="none"/>
<meta name="if:background image not repeat" content="0"/>
<meta name="if:background image fixed" content="1"/>

<meta name="color:text" content="#555"/>
<meta name="text:font size" content="11"/>
<meta name="font:body" content="arial"/>

<meta name="color:link" content="#555" />
<meta name="color:link hover" content="#000" />

<meta name="color:title" content="#000" />
<meta name="color:title hover" content="#444" />
<meta name="color:sidetitle border bottom" content="#888888" />

<meta name="if:Sidebar Fixed" content="1"/>
<meta name="color:navigation div background" content="#000000"/>
<meta name="color:posts background" content="#ffffff" />

<meta name="color:navigation" content="#ffffff" />
<meta name="color:navigation hover" content="#000000" />
<meta name="color:navigation background hover" content="#ffffff" />

<meta name="color:pagination" content="#000" />
<meta name="color:pagination background" content="#ffffff" />
<meta name="color:pagination hover" content="#ffffff" />
<meta name="color:pagination background hover" content="#000000" />

<style type="text/css">

body {
background-color:{color:Background};
background-image:url(http://www.dolliehost.com/dolliecrave/myspace-layouts/dark/41.gif);
background-position:{text:background image position};
{block:IfBackgroundImageNotRepeat}background-repeat:no-repeat;{/block:IfBackgroundImageNotRepeat}
{block:IfBackgroundImageFixed}background-attachment: fixed;{/block:IfBackgroundImageFixed}
color:{color:Text};
font-size:{text:font size}px;
font-family:{font:body};
      
}

a, a:visited, a:active {
    color:{color:Link};
}

a:hover {
        color:{color:link hover};
}

.nav,
a.nav:link,
a.nav:active,
a.nav:visited
{
color:{color:navigation};
}

a.nav:hover {
color:{color:navigation hover};
background-color:{color:navigation background hover};
}

#posts{
text-align:justify;
text-transform:normal;
word-wrap:break-word;
{block:IndexPage}width: 230px;height:170px;margin:5px;overflow:hidden;float:left;background-color:

{color:posts background};{/block:IndexPage}
{block:PermalinkPage}width: 690px;margin-left:5px;padding:10px;background-color:{color:posts 

background};{/block:PermalinkPage}
}

#navdiv {
background-color:{color:navigation div background};
}

#side {
{block:IfSidebarFixed}position:fixed;{/block:IfSidebarFixed}
}

#bar {
background-color:{color:posts background};
}

.post_title, a.post_title {   
color:{color:title};
}

.post_title:hover, a.post_title:hover {  
        color:{color:title hover};
}

.title{  
color:{color:title};
border-bottom:1px {color:sidetitle border bottom} dotted;
}

.title:hover {  
        color:{color:title hover};
}

.jump_page{
  color:{color:pagination}!important;
  background-color:{color:pagination background};
}

a.jump_page:hover {
  color:{color:pagination hover}!important;
    background-color:{color:pagination background hover};
}

.current_page{
  color:{color:pagination hover}!important;
    background-color:{color:pagination background hover};
}



a, a:visited, a:active {
font-weight:bold;
text-decoration:none;

}

img {
border:0px;
margin: 0px;
max-width: 500px;
background-color:none;
}

img:hover {
border:0px;
margin: 0px;
max-width: 500px;
background-color:none;
}

a:hover {text-decoration:underline;}

.left {float:left;}
.right {float:right;}

#tumblr_dot_com {
text-align:justify;
height:auto;
}

#content{
margin: 0 auto;
width: 720px;
margin:10px;
position:absolute;
left:250px;
top:45px;
}

#side {
position:absolute;
left:10px;
top:50px;
text-align:justify;
width:240px;
margin-bottom:30px;
margin-top:5px;
overflow:show; 
}

#navdiv {
  position:absolute; 
  width:100%;
z-index: 1;
top:-5px;
left:0px;
text-align:justify;
overflow:show;
height:50px;
}

.nav,
a.nav:link,
a.nav:active,
a.nav:visited
{
font-size:33px;
line-height:34px;
        font-family:arial;
letter-spacing:-2px;
text-transform:lowercase;
text-decoration:none!important;
cursor:pointer;
font-weight:normal;
padding-left:5px;
padding-right:5px;
padding-top:15px

}

a.nav:hover {
text-align:center;
cursor:pointer;
padding-top:15px
text-decoration:none!important;
} 

#bar {
padding:10px;
margin-bottom:10px;
}

.post_title, a.post_title {   
font-weight:normal;
text-decoration:none;
        font-family:arial;
text-transform:lowercase;
font-size:28px;
display:block;
line-height:25px;
        letter-spacing:-2px;
margin-bottom:5px;
            
}

.post_title:hover, a.post_title:hover {  
text-decoration:none;
font-weight:normal;
           
}



.title{  
font-weight:normal;
text-decoration:none;
        font-family:arial;
text-transform:lowercase;
font-size:25px;
display:block;
line-height:18px;
        letter-spacing:-2px;
margin-bottom:5px;
}

.title:hover {text-decoration:none;}


.quote {
font-size:25px;
font-weight:normal;
display:block;
line-height:auto;
            letter-spacing:-2px;
                color:#000000;
                text-transform:lowercase;
}

.readmore{
font-size:20px;
line-height:25px;
letter-spacing:-1px;
text-transform:lowercase;
text-decoration:none;}

#question{
overflow:show;
LINE-HEIGHT:130%;
MARGIN-top:-3px;
padding:3px;
padding-top:0px;
padding-bottom:0px;
border-bottom:1px dotted #E9DAFF;
}


#askr{
display:block; 
float:left; 
width:25px; 
overflow:hidden;
margin-right:3px;
}

.details {
display:none;

}

#_{
padding:10px;
}

#posts:hover .details {
background-color:#000;
position:absolute;
padding:5px;
display:block;
font-size:10px;
text-transform:uppercase;
text-align:justify;
opacity:0.7;
filter:alpha(opacity=99);
width:220px;
color:#fff!important;
    
}

.details a{
color:#fff!important;
text-decoration:none;
}

.jump_page{
  font-size:18px;
  padding-right:10px;
  padding-left:10px;
  padding-top:3px;
  padding-bottom:3px;
  margin-left:3px;
  margin-right:3px;
}

a.jump_page:hover {
  text-decoration:none;
}

.current_page{
  font-size:18px;
  font-weight:bold;
  padding-right:10px;
  padding-left:10px;
  padding-top:3px;
  padding-bottom:3px;
  margin-left:3px;
  margin-right:3px;
}


li.dsq-widget-item { 
padding-bottom: 1em;
margin-bottom: 1em;
       
}
    
a.dsq-widget-user {
display: block; 
    
}

p, ul, ol {
margin: 1em 0 1em;

}

ul, ol, blockquote {
padding-left: 0.50em;
margin-left: 2.5em;

}

blockquote {
display: block;
background-color:#f5f5f5;
border-left:4px #000 solid;
}


ul {
list-style: square;

}

ol {
list-style: decimal;

}

            ol.notes {
padding-right:20px;
                list-style-type:none;
                border-bottom: solid 1px #ccc;
            }

            ol.notes li.note {
                border-top: solid 1px #ccc;
                padding: 10px;
            }

            ol.notes li.note img.avatar {
                vertical-align: -4px;
                margin-right: 10px;
                width: 16px;
                height: 16px;
            }

            ol.notes li.note span.action {
                font-weight: bold;
            }


{CustomCSS}



</style>
</head><body>

<div id="navdiv">
<table width="100%"><p>
<td><a href="/" class="nav">home</a></td>
{block:AskEnabled}<td><a href="/ask" class="nav">ask me</a></td>{/block:AskEnabled}
{block:SubmissionsEnabled}<td><a href="/submit" class="nav">submit</a></td>{/block:SubmissionsEnabled}
<td><a href="/archive" class="nav">archive</a></td>
<td><a href="http://www.dolliecrave.com" class="nav" target=_blank title="Tumblr Themes">Themes</a></td>
{block:IfLink1Name}<td><a href="{text:link 1 url}" class="nav">{text:link 1 name}</A></td>{/block:IfLink1Name}
{block:IfLink2Name}<td><a href="{text:link 2 url}" class="nav">{text:link 2 name}</A></td>{/block:IfLink2Name}
{block:IfLink3Name}<td><a href="{text:link 3 url}" class="nav">{text:link 3 name}</A></td>{/block:IfLink3Name}
{block:IfLink4Name}<td><a href="{text:link 4 url}" class="nav">{text:link 4 name}</A></td>{/block:IfLink4Name}
{block:IfLink5Name}<td><a href="{text:link 5 url}" class="nav">{text:link 5 name}</A></td>{/block:IfLink5Name}
</table></div>


<div id="side">
<div id="bar">
<span class="title">{title}</span>
{block:IfShowTumblrPicture}<a href="/"><img src="{PortraitURL-64}" align="left"  style="margin-right:10px;" /></a>

{/block:IfShowTumblrPicture}
{block:IfYourImage}<center><a href="/"><img src="{image:Your}" width="200px" /></a><BR></center>{/block:IfYourImage}
{description}
Here is where you enter text, info, about me, whatever, your page graphics, etc, etc, etc, etc, etc, etc, etc, etc, etc, etc, etc, etc, etc, etc, etc, etc, etc, etc.
</div>

{block:HasPages}<div id="bar">
<span class="title">{text:page section title}</span>
<ul>{block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}</ul>
</div>{/block:HasPages}

</div>


{block:IfEndlessScrolling}<div class="autopagerize_page_element">{/block:IfEndlessScrolling}
<div id="content">
<div class="tumblr_dot_com">
{block:Posts}<div id="posts">


{block:IndexPage}
<div class="details" style="margin-top:147px;">
<span class="left"><a href="{Permalink}" title="permalink">{NoteCountWithLabel}</a></span>
<span class="right"><a href="{ReblogURL}" title="click this to reblog this post!">← 

reblog</a></span>
</div>


{block:ContentSource}<div class="details"><center><a href="{SourceURL}" target="_blank">© {SourceTitle}

</a></center></div>{/block:ContentSource}
{/block:IndexPage}

{block:Regular}<div id="_">                
{block:Title}<span class="post_title">{Title}</span>{/block:Title}
{Body}
{block:More}<br><a href="{permalink}" class="readmore" title="click here to read more">» read more</a>

{/block:More}
</div>{/block:Regular}


{block:Photo}

{block:IndexPage}{LinkOpenTag}<img src="{PhotoURL-400}" width="300px" />{LinkCloseTag}{block:Caption}<div id="_">

{caption}</div>{/block:Caption}{/block:IndexPage}

{block:PermalinkPage}{LinkOpenTag}<img src="{PhotoURL-500}" width="500px" />{LinkCloseTag}{block:Caption}{caption}

{/block:Caption}{/block:PermalinkPage}

{/block:Photo}


{block:Photoset}

{block:IndexPage}{PhotoSet-250}{/block:IndexPage}

{block:PermalinkPage}{PhotoSet-500}{block:Caption}{caption}{/block:Caption}{/block:PermalinkPage}

{/block:Photoset}

              
{block:Quote}<div id="_"><span class="quote"><b>“</B>{Quote}<b>”</b></span>
{block:Source}<span style="float:right;">– {Source}</span>{/block:Source}</div>{/block:Quote}


{block:Link}<div id="_"><a href="{URL}" class="post_title" target="_blank">→ {Name}</a>{Description}</div>

{/block:Link}


{block:Conversation}<div id="_">{block:Title}<span class="post_title">{Title}</span>{/block:Title}
{block:Lines}{block:Label}<b><span class="label">{Label}</b></span>{/block:Label}
{Line}<BR>{/block:Lines}</div>{/block:Conversation}

             
{block:Audio}

{block:IndexPage}<div id="_"><center>{block:AlbumArt}<img src="{AlbumArtURL}" width="100px" height="85px" />

{/block:AlbumArt}<br>
{AudioPlayerBlack}{block:Caption} {Caption} {/block:Caption}</center></div>{/block:IndexPage}

{block:PermalinkPage}<center>
{block:TrackName}<b>{TrackName}</b>{/block:TrackName}{block:Artist} - <b>{Artist}</b>{/block:Artist}<p>
{block:AlbumArt}<img src="{AlbumArtURL}" width="300px" height="250px" />{/block:AlbumArt}<br>
{AudioPlayerBlack}{PlayCountWithLabel} {block:ExternalAudio}- <a href="{ExternalAudioURL}">Download</a>

{/block:ExternalAudio}
{block:Caption} {Caption} {/block:Caption}</center>{/block:PermalinkPage}

{/block:Audio}


{block:Video}

{block:IndexPage}{Video-250}<BR>{Caption}{/block:IndexPage}

{block:PermalinkPage}{Video-500}<BR>{Caption}{/block:PermalinkPage}

{/block:Video}


{block:Answer}<div id="_"><div id="askr"><img src="{AskerPortraitURL-30}" width="23" align="left" style="margin-

right:5px;" /></div><div id="question"><div id="asked">{Asker} said:<BR>{Question}</div></div>{answer}</div>

{/block:answer}



{block:PermalinkPage}
<BR><br clear="all" /><span style="text-transform:uppercase;">
{block:ContentSource}<a href="{SourceURL}" target="_blank">{block:SourceLogo}<img src="{BlackLogoURL}" 

width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}© 

{SourceTitle}{/block:NoSourceLogo}</a> <BR>{/block:ContentSource}
{block:Date}Posted <a href="{Permalink}">{TimeAgo}</a> {/block:Date} {block:NoteCount}with {NoteCountWithLabel}

{/block:NoteCount} {block:RebloggedFrom}via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}
{block:HasTags}<BR>{block:Tags}<a href="{TagURL}">#{Tag}</a>  {/block:Tags}{/block:HasTags}</span>
{/block:PermalinkPage}




{block:PostNotes}<BR><BR>{PostNotes} {/block:PostNotes}

</div>{/block:Posts}
{block:IfEndlessScrolling}</div>{/block:IfEndlessScrolling}

<br clear="all" /><BR>
{block:Pagination}<center>
{block:PreviousPage}<a href="{PreviousPage}" title="newer posts" class="jump_page">« newer</a>

{/block:PreviousPage}
{block:JumpPagination length="10"}<span class="jump_pagination">
{block:CurrentPage}
<span class="current_page">{PageNumber}</span>
{/block:CurrentPage}
{block:JumpPage}
<a class="jump_page" href="{URL}">{PageNumber}</a>
{/block:JumpPage}
</span>{/block:JumpPagination}
{block:NextPage}<a href="{NextPage}" title="older posts" class="jump_page">older »</a>{/block:NextPage}
{/block:Pagination}<BR><BR>

</div></div></div></center></div>


</body></html>    

#Panjang kan ? Sorry korang :(

8) Then korang tekan "Update Preview" untuk pastikan tiada kesilapan or menjadi atau tak, okey ? ;)

9) If dah menjadi, tekan "Save + Close" okey ? 

10) Dah selesai ! Jika nak background HTML , dptkannya di SINI ! 

p/s : This tuto originally by me. ^^

Suka ? 'LIKE' jerr.. Xsuka ? Duduk diam ^^
Penat type SarahBlackQueen tepat jam 12:31 pm 0 peminat
tags:
Subscribe to: Posts (Atom)