Belog Capital NFN : Tutorial : Buat layout sendiri (Part I)

Assalamualaikum :) Firstly Miss F nak ucapkan Salam Maulidur Rasul kepada umat islam didunia ini. Perbanyak kan lah selawat :) Okay. So ya! Today Miss F nak ajar korang buat layout sendiri. Step by step okay :) Sebelum tu korang harus pastikan korang ada software seperti berikut :

Photoshop (tak kesah Cs3 ke Cs5 ke. Tapi Miss F guna Cs3)
Photoscape

Dan juga korang harus ada account :

Photobucket

Kalau ada account lain untuk image hosting pun boleh guna. Untuk pengetahuan you all tutorial ni untuk Template Minima tau! Kenapa template minima? Sebab tempalte ni paling senang nak edit. Serious! Boleh campur2 code dari template yang lain. Sebab tu Miss F guna template ni sekarang :))Tapi kotak komen tak boleh edit. Tengah menggodam untuk cantikkan kotak komen. Insyaallah kalau jadi Miss F akan update :))

First step: Apa-apa hal pun back up dulu current layout korang. Takut nanti tak berkenan dengan layout baru, ada yang frust menonggeng pulak.

Second step: Pergi ke --> Template-->edit HTML--> Click expand widget and paste kan code ni.

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>

<b:include data='blog' name='all-head-content'/>

<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[/*

-----------------------------------------------

Blogger Template Style

Name: Minima

Designer: Douglas Bowman

URL: www.stopdesign.com

Date: 26 Feb 2004

Updated by:

*CapitalNFN @ are-tienlikepink.blogspot.com - Jan 2013

----------------------------------------------- */

/* Variable definitions

====================

<Variable name="textcolor" description="Text Color"

type="color" default="#333" value="#000000">

<Variable name="linkcolor" description="Link Color"

type="color" default="#58a" value="#000000">

<Variable name="pagetitlecolor" description="Blog Title Color"

type="color" default="#666" value="#000000">

<Variable name="descriptioncolor" description="Blog Description Color"

type="color" default="#999" value="#000000">

<Variable name="titlecolor" description="Post Title Color"

type="color" default="#c60" value="#000000">

<Variable name="bordercolor" description="Border Color"

type="color" default="#ccc" value="#6f3c1b">

<Variable name="sidebarcolor" description="Sidebar Title Color"

type="color" default="#999" value="#6f3c1b">

<Variable name="sidebartextcolor" description="Sidebar Text Color"

type="color" default="#666" value="#000000">

<Variable name="visitedlinkcolor" description="Visited Link Color"

type="color" default="#999" value="#72179D">

<Variable name="bodyfont" description="Text Font"

type="font" default="normal normal 100% Georgia, Serif" value="normal normal 108% Trebuchet, Trebuchet MS, Arial, sans-serif">

<Variable name="headerfont" description="Sidebar Title Font"

type="font"

default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 103% Trebuchet, Trebuchet MS, Arial, sans-serif">

<Variable name="pagetitlefont" description="Blog Title Font"

type="font"

default="normal normal 200% Georgia, Serif" value="normal normal 346% Georgia, Times, serif">

<Variable name="descriptionfont" description="Blog Description Font"

type="font"

default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 103% Trebuchet, Trebuchet MS, Arial, sans-serif">

<Variable name="postfooterfont" description="Post Footer Font"

type="font"

default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 91% Trebuchet, Trebuchet MS, Arial, sans-serif">

<Variable name="startSide" description="Side where text starts in blog language"

type="automatic" default="left" value="left">

<Variable name="endSide" description="Side where text ends in blog language"

type="automatic" default="right" value="right">

*/

/* Use this with templates/template-twocol.html */

body {

background:url('LINK BACKGROUND');

background-repeat:no-repeat;

background-attachment:fixed;

margin:0;

color:$textcolor;

font:x-small Verdana Serif;

font-size/* */:/**/small;

font-size: /**/small;

text-align: center;

}

a:link {

color:$linkcolor;

text-decoration:none;

}

a:visited {

color:$visitedlinkcolor;

text-decoration:none;

}

a:hover {

color:$titlecolor;

text-decoration:none;

}

a img {

border-width:0;

}

/* Header

-----------------------------------------------

*/

#header-wrapper {

background-color:$headerbgcolor;

border:0px solid $bordercolor;

padding-bottom: 0px;

margin-bottom: 0px;

margin-left: 0px;

}

#header-inner {

background-position: center;

margin-left: auto;

margin-right: auto;

}

#header {

height: auto;

width: 1000px;

color: $pagetitlecolor;

text-align: center;

margin-top:10px;

background:;

border: 0px solid #000000;

}

#header h1 {

margin:5px 0px 0;

padding:10px 20px .15em;

line-height:1.3em;

text-align: center;

text-transform:normal;

letter-spacing:.1em;

font: $pagetitlefont;

}

#header a {

color:$pagetitlecolor;

text-decoration:none;

}

#header a:hover {

color:$pagetitlecolor;

}

#header .description {

padding:5px 20px;

margin:0 5px 5px;

text-align: center;

text-transform:normal;

letter-spacing:.2em;

line-height: 1.4em;

font: $descriptionfont;

color: $descriptioncolor;

}

/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {

width: 1000px;

margin:0 auto;

padding:0px;

text-align:left;

font: $bodyfont;

}

#content-wrapper {

background: url(LINK BODY) repeat-y;

}

#main-wrapper {

width: 600px;

margin-left: 70px;

float: left;

background:;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

#sidebar-wrapper {

width: 225px;

float: right;

margin-right: 70px;

background:;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

/* Headings

----------------------------------------------- */

h2 {

margin:1.5em 0 .75em;

font:$headerfont;

font-weight:normal;

line-height: 1.2em;

text-transform:normal;

letter-spacing:.01em;

font-size: 125%;

color:$sidebarcolor;

}

/* Posts

-----------------------------------------------

*/

h2.date-header {

text-transform:lowercase;

margin:1.5em 0 .5em;

color: $textcolor;

font: $headerfont;

}

.post {

margin:.5em 0 1.5em;

font-size: 95%;

padding: 15px;

}

.post h3 {

margin:.25em 0 0;

padding:0 0 4px 5px;

font-size:140%;

text-transform:uppercase;

font-weight:normal;

line-height:1.4em;

color:$titlecolor;

}

.post h3 a, .post h3 a:visited, .post h3 strong {

display:block;

text-decoration:none;

color:$titlecolor;

font-weight:normal;

}

.post h3 strong, .post h3 a:hover {

color:$textcolor;

}

.post p {

margin:0 0 .75em;

line-height:1.2em;

}

.post-footer {

margin: .75em 0;

color:$textcolor;

text-transform:lowercase;

font: $postfooterfont;

line-height: 1.2em;

padding: 15px 0px 15px 15px;

}

.comment-link {

margin-$startSide:.6em;

font-size: 95%;

}

.post img {

padding:4px;

border:0px solid $bordercolor;

}

.post blockquote {

margin:1em 20px;

}

.post blockquote p {

margin:.75em 0;

}

/* Comments

----------------------------------------------- */

#comments h4 {

margin:1em 0;

font-weight: bold;

line-height: 1.3em;

text-transform:uppercase;

letter-spacing:.2em;

color: $sidebarcolor;

}

#comments-block {

margin:1em 0 1.5em;

line-height:1.4em;

}

#comments-block .comment-author {

margin:.5em 0;

font-size: 95%;

}

#comments-block .comment-body {

margin:.25em 0 0;

font-size: 95%;

}

#comments-block .comment-footer {

margin:-.25em 0 2em;

line-height: 1.3em;

font-size: 90%;

text-transform:lowercase;

letter-spacing:.1em;

}

#comments-block .comment-body p {

margin:0 0 .75em;

font-size: 95%;

}

.deleted-comment {

font-style:italic;

font-size: 95%;

color:gray;

}

#blog-pager-newer-link {

float: $startSide;

font-size: 95%;

}

#blog-pager-older-link {

float: $endSide;

font-size: 95%;

}

#blog-pager {

font-size: 95%;

text-align: center;

}

.feed-links {

clear: both;

font-size: 95%;

line-height: 2.3em;

}

/* Sidebar Content

----------------------------------------------- */

.sidebar {

color: $sidebartextcolor;

font-size: 95%;

}

.sidebar h2 {

border-bottom: 1px solid #000000;

text-align: center;

font-size: 125%;

}

.sidebar ul {

list-style:none;

margin:0 0 0;

padding:0 0 0;

}

.sidebar li {

margin:0;

padding-top:0;

padding-$endSide:0;

padding-bottom:.25em;

padding-$startSide:15px;

text-indent:-15px;

line-height:1.3em;

}

.sidebar .widget{

background:;

line-height: 1.3em;

padding:0 0 45px 0px;

}

.main .Blog {

border-bottom-width: 0;

}

/* Profile

----------------------------------------------- */

.profile-img {

padding: 3px;

border: 1px solid $bordercolor;

}

.profile-data {

margin:0;

text-transform:lowercase;

letter-spacing:.1em;

font: $postfooterfont;

color: $sidebarcolor;

font-weight: bold;

line-height: 1.2em;

font-size: 95%;

}

.profile-datablock {

margin:.5em 0 .5em;

font-size: 100%;

}

.profile-textblock {

margin: 0.5em 0;

line-height: 1.2em;

font-size: 100%;

}

/* Footer

----------------------------------------------- */

#footer {

clear:both;

margin:0 0 0px 0px;

padding-bottom:0px;

padding-top: 100px;

line-height: 1.6em;

text-transform:lowercase;

letter-spacing:.1em;

text-align: center;

background: url(LINK FOOTER) no-repeat bottom center;

height:autopx;

}

/** Page structure tweaks for layout editor wireframe */

body#layout #header { javascript:void(0)

margin-$startSide: 0px;

margin-$endSide: 0px;

}

]]></b:skin>

</head>

<body>

<div id='outer-wrapper'><div id='wrap2'>



<span id='skiplinks' style='display:none;'>

<a href='#main'>skip to main </a> |

<a href='#sidebar'>skip to sidebar</a>

</span>

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Mr Doctor's Testing Blog (Header)' type='Header'/>

</b:section>

</div>

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>

<b:section class='crosscol' id='crosscol' showaddelement='no'/>

</div>

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>

</div>

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'/>

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>

</b:section>

</div>



<div class='clear'> </div>

</div> 

<b:section class='footer' id='footer'/>

</div>

</div>

<br/>

</body>

</html>

Atas ni basic code for Template minima. Sebab sekarang kan tak ada template minima lagi kan. Now new interface yang sangat menyebelkan (!) Hate it much!

Third step: Bukak photoshop and your photoscape :)

Firstly kita buat dia punya body dulu ya!
New--> masukkan width and height seperti berikut :

So design lah body korang :)) Macam ni

save (!)

Fourth step: Pergi photoscape bukak file ni and crop dia jadi macam ni

Setakat ni paham? Okay then :))

Mari kita teruskan.

Next step: Upload gambar tu dekat photobucket or apa2 je lah. And take direct link okay?

Then pergi edit HTML cari code ni

#outer-wrapper {

and you akan nampak code ni

#outer-wrapper {
width: 1000px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
}

Highlight and Copy and paste ni

#outer-wrapper {
width: 1000px;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 108% Trebuchet, Trebuchet MS, Arial, sans-serif;
}
#content-wrapper {
background: url(LINK Boader) repeat-y;
}

you will get like this

Done PART 1. See in the next post for part TWO!

Sudah baca Harap balas ye. Love you more.

Tutorial : Buat layout sendiri (Part I)

No comments:

Post a Comment