Pinkie Blue

Disclaimer

Hello I am Tsabbita Dewi you like my blog? follow me! hate my blog don't come again Your IP is:

Secret Boxes

1 2 3 4

1.Contact me
2.my banner
3.my ask fm
4.search boxes

Active bloging now , Free for request

Rules boxes

Bonjour all

Jangan pernah membuka PS blog ini!

Jangan buat blog ini rusuh

Want to copy?! click Ctrl+C

Remember! if you Open my PS your IP is saved

Wanna to Ask me?! ask in my Ask fm

Wanna Ex-Banner/links with me?,tell me in my Cbox

Thank's all (Tsabbita)

BackGround

Chatboard

Credits

(Copy page Starship blog) cara bt skins

Senin, 26 Mei 2014 | 0 People(s)

Assalammualaikum....
hari ni,,,,,saya nak share tutorial daripada cik Mira tentang cara-cara membuat blogskins sendiri yang
jenis 1coloumn+Navi....
nak belajar tak?nak belajar?

Ok,,sebelum kita buat,,,,kita kena sediakan beberapa 'bahan' dulu...yelah,,,macam buat kek,,
mana boleh kalau takda bahan langsung kan kalau nak buat dyerrr??hehehe....

*Blog Tester (ini penting so,,taklah korang menangis terkangkang-kangkang manatahu tak jadi nanti.hahahaahahaa)
*New tab ==>kode warna

Before we start,,,kena pergi design dulu,,dekat blog tester yang baru buat tu then pergi edit html.
lepastu,,scroll kebawah sekali after that click lah revert to classic template.Nanti akan keluar satu pop-out
window then korang ok-kan aje keh.

Haaa...first step,,
kosongkan medan di dalam kotak html tu...alaaa,,yang selalu korang letak code blogskins tu.
then,copy code bawah ni,,,, boleh guna CTRL+C untuk copy :)

<html>
<head>
<center><img src="URL IMAGE HEADER ANDA" /></center>
<title>TITLE BLOG ANDA</title>

paste kan kode di atas di ruangan kosong tadi.

a.di bawah kode atas ni,,korang boleh letaklah berbagai jenis widget yang hendak diletakkan di
header seperti navbar,follow and dashboard button dan lain-lain.
b.selepas itu,copy kode dibawah ni pula degan menggunakan CTRL+C dan kemudian paste
di bawah kode tadi tu.

<style type="text/css">
#navbar-iframe {display: none;}
body {
background: url(URL BACKGROUND);
font-family: Century Gothic, Tahoma, Calibri;
background-attachment:fixed;
cursor: url(http://i.imgur.com/ZOrzC.png), auto;
}
::-webkit-scrollbar {
height:12px;
width: 8px;
background: #FFF;
}
::-webkit-scrollbar-thumb {
background-color: #FF0000;
}
::-moz-selection {
background: #000;
color:#FFF;
}
::selection {
background: #000;
color:#FFF;
}
a:link, a:visited {
color:#DF0101;
text-decoration:none;
}
a:hover {
color: #a4a4a4;
}
.content {
background:#ffffff;
font-size: 11px;
padding:14px;
width:600px;
border-radius:10px;
text-align:justify;
}
.main-title {
text-align: right;
color:#DF0101;
font-size:14px;
padding:3px;
border-bottom:1px solid #A4A4A4;
letter-spacing: 0.1cm;
}
</style>

hijau : kode scrollbar
kuning: kode highlight
fuchsia: Code main title
coklat:lebar body blog

Ni pulak,untuk tulisan bold,italic,strike dan blockquote.
paste kan code ini di atas kode </style>

i {
text-style: italic;
color: #000000;
}
u {
text-underline: underline;
border-bottom: 2px solid #ff0000;
}
b {
font-weight: bold;
color: #FA5858;
}
blockquote {
background-color: #E6E6E6;
border-left: 18px solid #FF0000;
padding: 2px;
}

s }
text-style: line-through;
color: #000;
}

merah: boleh ubah mengikut citarasa masing-masing.

c.oke,,selepas itu,copy kode ini lagi.pastekan di bawah kode </style>

<body oncontextmenu='return false;'><br>
<table style="line-height: 17px;" width="600" border="0" align="center" cellspacing="5">
<tbody><tr>
<td valign="top" style="width:600px; padding:10px; border-radius:10px; background:#ffffff; font-size:11px;">
<div id="content">
<blogger><div class="main-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="sec-title"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> Atashinci</a></BlogItemCommentsEnabled></div>
<$blogitembody$></blogger><br>
<center><OlderPosts><a href=<$OlderPosts$>>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center></div>
</div>
</td>

ungu: nama ganti bagi 'comment' xD

Oke,,sekarang time untuk buat navigation dan page :)

korang tekan CTRL+F atau F3 then cari kode </style>
then,korang paste kode bawah ni, di ATAS/SEBELUM kode </style> tu oke

.navigator {
position:fixed;
top:205px;
left:321px;
font-size:10px;
text-align:center;
}
.navi {
padding-left:5px;
padding-right:5px;
color:#FF0000;
background:#FF0000;
line-height: 13px;
display: block;
text-transform: lowercase;
-webkit-transition:0.5s;
transition:0.5s;
margin-bottom:5px;
cursor: crosshair;
padding:5px 0px 0px 30px;
border-top-left-radius: 15px;
border-bottom-left-radius: 20px;
}
.navi:hover, .navi_active {
background:#FF0000;
color:#FFF;
-webkit-transition:0.5s;
transition:0.5s;
}

Yang warna merah tu, boleh edit ikut suka hati korang lah k.. :)
oke,,,sekarang,copy lagi kode bawah ni,dan paste selepas kode </style>

<center><div class="navigator">
<a class="navi" onClick="document.getElementById('content').innerHTML=document.getElementById('me').innerHTML">About</a>
<a class="navi" onClick="document.getElementById('content').innerHTML=document.getElementById('love').innerHTML">Links?</a>
<a class="navi" onClick="document.getElementById('content').innerHTML=document.getElementById('you').innerHTML">Entries</a>
<span class="navi" onclick="window.open('http://www.blogger.com/follow-blog.g?blogID=BLOG ID'); return false;">Follow</span>
</div>
<br>

fuchsia: blog id blog awak.ni supaya senang difollow

<div id="me" style="display:none;">
<div class="main-title">Meet the Owner!</div><br>
<center><img src="URL GAMBAR"/></center><br>
Letak biodata korang. ..

<br>
<div class="main-title">My wishlist</div><br>
<form name=myform>
<input type="checkbox" name="mybox" value="satu" checked />wishlist <br />
<input type="checkbox" name="mybox" value="satu" checked />wishlist <br />
<input type="checkbox" name="mybox" value="satu" disabaled />wishlist <br />
<input type="checkbox" name="mybox" value="satu" checked />wishlist <br />
</form>
</div>
<div id="love" style="display:none;">
<div class="main-title">Tagboard</div><br>
put your cbox/shoutbox here. Tagboard width must below: 550.<br>
<div class="main-title">Affies&Links</div><br>
<a href="blogger.com"/>Friends</a> | <a href="blogger.com"/>Friends</a> | <a href="blogger.com"/>Friends</a> | <a href="blogger.com"/>Friends</a> | <a href="blogger.com"/>Friends</a> | <a href="blogger.com"/>Friends</a><br>
<div class="main-title">Credits</div><br
---credits section korang---
</div>
<div id="you" style="display:none;">
<blogger><div class="main-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="sec-title"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></div>
<$blogitembody$></blogger><br>
<center><OlderPosts><a href=<$OlderPosts$>>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center></div>

OLDER • NEWER

Posting Komentar

<$CommentPagergt; <$CommentPagergt;

<$BlogItemCreategt;