Chat And Connect: Cara membuat SKIN BLOG

Sahabat Blogger...Karena ini postingan pertama Saya,saya akan mengajarkan Tutorial CARA MEMBUAT BLOG SKIN SENDIRI

Tahap pertama,Buka Blogger

Tahap kedua,klik "View Blog"

Tahap ketiga,klik "Design"

Tahap keempat,klik "Revert Template To Classic"(Kayaknya?Maaf kalau salah.Kalau bingung bisa baca di SINI)

Tahap kelima,HAPUS SEMUA HTML YANG TERTERA DI EDIT HTML

Tahap keenam,Buka Notepad

Tahap ketujuh,Copy kode kode berikut

<head>
<center><img class="header" src="PUT URL HEADER" / ></center>
<link rel="shortcut icon" href=" URL FAVICON" />
<title>BLOG TITLE</title>

Merah:URL Image Banner/Header

Jingga:Url Favicon.Ukuran Max 75x75

Biru:Judul Blog kalian

<style type="text/css">
[CODE PERTAMA]</style>
<body>
[CODE KEDUA]</body></html></head>

Nah,sekarang hapus tulisan [CODE PERTAMA]

Siap?

Kode Navbar,ini masih tetap di kode pertama ya

#navbar-iframe {display: none;
}

body {
background:url(http://i.imgur.com/P3g5T.png);
font:11px trebuchet ms;
letter-spacing:0px;
color:#6e6e6e;
cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur817.cur), auto;
}

Ungu:Kode Background

Ungu Muda/Pink Tua:Jenis Font,bisa download font di Sini

Kuning:Warna Font

Hijau:URL Cursor,bisa cari Cursor di Sini

.content {
background:#ffffff;
color:#666666;
font-size: 11px;
padding:14px;
width:600px;
border-radius:10px;
text-align:justify;
}

Merah:Lebar post body(?)

a:link, a:visited {
color: #000;
text-decoration:none;
-webkit-transition: 1s;
}
a:hover{
color: #aaa;
}

Hijau:Color Font

blockquote {
background: #D0C8C8;
color: #ffffff;
padding: 3px;
-webkit-transition: 1.0s;
}
blockquote:hover {
background: transparent;
padding: 3px;
color: #000000;
-webkit-transition: 1.0s;
}

.sidebar {
background: #ffffff;
color: #666666;
font-size: 11px;
width: 210px;
text-align: trebuchet ms;
}
.tit{
width: 200px;
background-color: #f9f9f9;
padding: 3px;
font: 11px consolas;
text-align:center;
border:1px solid #e9e9e9;
color:#333;
margin-bottom:6px;
letter-spacing:2px;
}

.h1 {
background-color: #f9f9f9;
padding: 3px;
font: 11px consolas;
text-align:center;
border:1px solid #e9e9e9;
color:#333;
margin-bottom:6px;
letter-spacing:2px;
}
.h2{
letter-spacing: 1px;
font:9px consolas;
text-transform: uppercase;
background-color: #fff;
text-align:left;
padding: 2px;
margin-bottom:5px;
margin-top:6px;
color:#666;
}

b {
font-style:bold;
color: #111;
}

u {
text-decoration: none;
border-radius: 4px;
padding: 3px;
-moz-border-radius: 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px;
padding: 7x 7px 7px 7px;
}
u:hover {
background: #EF88B6;
color: #FFFFFF;
-webkit-transition: 1s;
-moz-border-radius: 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px;
padding: 7x 7px 7px 7px;
}

::-moz-selection {
background:#fff;
color:#000;
}
::selection {
background:#fff;
color:#000;
}

a.nav{
background:#b2edff;
width:50px;
display:inline-block;
text-align:center;
color:#fff;
margin-bottom:1px;
font:8px tt;
text-transform:uppercase;
letter-spacing:2px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
padding:1px;
border:1px solid #fff;
}
a.nav:hover {
background:#FFffff;
border:1px solid #b2edff;
color:#A2C898;
}

a.linky {
background: #fff;
letter-spacing:0px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
margin-top:3px;
display:inline-block;
font:8px tinytots;
letter-spacing: 1px;
text-align:center;
width:80px;
color:#999;
padding:7px;
border:1px #e6e6e6 solid;
text-decoration:none;
}

Kode pertama udah selesai.Hapus tulisan [CODE KEDUA]

Error,jika ada yang penasaran,bisa ditunggu sampai besok ==' Maaf,nih Error menganggu orang aja ==' Udah deh,mau post duluan dulu ye ==' Bye bye guys ==' Yang mau tahu selanjutnya,baca disini

Sumber=

http://fatinhalid.blogspot.com/2013/01/tutorial-make-your-own-blogskins.html

Chat And Connect

Monday, 15 April 2013

Cara membuat SKIN BLOG

No comments:

Post a Comment