Cik Ziela Suka Panda

Tutorial Buat Blogskin (My Own Style) + Freebies
Sunday 22 January 2012 | Sunday, January 22, 2012 | 11 comments


Ade siapa-siapa yang nak belajar buat blogskin ?? Meh nak ajar korang. Saya baru nak menjinakkan diri dalam buat blogskin nie. Saya ajar yang biasa-biasa orang guna. Let's start :)

Amaran keras : Tutorial Ini Memang Panjang . Korang akan keliru sikit. Jangan risau. Belajar perlahan-perlahan. Baca betul-betul dan fahami baik-baik.


Sebelum tu :
  • Baca bismillah dulu.
  • Buat satu blog tester. Untuk langkah-langkah keselamatan.
Cara tukar template design ke blogskin. Pergi sini. Then, pergi dashboard > template > korang delete semua code yang ade. Copy code di bawah ni dan paste dalam kotak yang sudah dikosongkan tadi.

<head><center><img class="header" src="http://i.imgur.com/0LmOZ.png" width="890" /></center><title>#Panda LOvers Story</title>

- merah : URL header
- biru : Tajuk blog anda

paste code yang ini  di bawah code yang tadi.





<style type="text/css">#navbar-iframe {display: none;}body {background:url(URL background);font-family: verdana ;background-attachment:fixed;cursor: url(URL cursor), auto;}a:link, a:visited {color:#68A4F2;text-decoration:none;}a:hover {cursor: crosshair;text-shadow: 1px 1px 3px #000000;border-bottom:1px solid #CCC8C9;}</style>

- merah : URL background yang comel-comel.
- biru : URL cursor. Cari dekat sini 
- hijau : warna link.
- ungu : warna link selepas cursor menyentuh link.

Click ctrl+F , cari </style> dan paste code ini di atas </style>  .





.content {
background: #ffffff;
color:#ffc6c6;
font-size: 11px;
padding:14px;
width:600px;
border-radius:10px;
text-align:justify;
}
.sidebar {
background: #FFFFFF;
color: #666666;
font-size: 11px;
padding: 8px;
width: 230px;
border-radius: 10px;
text-align: justify;
}
.main-title {
background:url(URL background tajuk);
padding:10px;
margin:10px;
border-top: 0px #A9D0F5 solid;
border-bottom: 2px #D4D4D4 solid;
padding: 5px;
font-size: 17px;
color:#000000;
font-family: Pea Neat Freak ;
text-align: right;
}
.second-title {
background: url( URL background tarikh);
border-bottom-right-radius: 80px;
border-bottom-left-radius: 80px;
font-family: Trebuchet MS;
font-size:12px;
width: 400px;
margin-top: -12px;
border-top: 1px solid #BEBABF;
border-bottom: 1px solid #BEBABF;
border-right: 0px solid #BEBABF;
border-left: 0px solid #BEBABF;
line-height:15px;
color: #000000;
margin-left: 100px;
text-align: center;
}

- biru : URL background. cari je dekat mana-mana tau.
- merah : kalau nak blog korang ade border melengkung. kalau tak nak boleh buang je :)
- hijau : code warna cari SINI . 

Masa untuk buat skin yang ada separuh sempurna . Copy code ni ye. Letak di bawah </style> .
<body oncontextmenu='return false;'><br> <table style="line-height: 19px;" width="900"  border="0" align="center" cellspacing="10">
<tbody><tr>
- merah : disable right click. maksudnya : orang tak boleh nak copy apa yang ade di blog korang.
- hijau : kelebaran blog anda.
- biru :  jarak antara sidebar dan main .

Baca ini : kalau nak sidebar bersambung dengan main, boleh ambil code bawah ni.
<table style="font-size: 11px; color: #848484; line-height: 17px; background:white; border-radius:20px;" width="800" align="center" border="0" cellspacing="8">
<tbody><tr>
Dah siap ?? Try preview dulu. Kalau tak ade cacat, boleh ambil code ni paste kan di bawah code tadi. Faham ?? Pandai2 :))))



<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$> comments</a></BlogItemCommentsEnabled></div>
<$blogitembody$></blogger><br>
<iframe src="http://www.facebook.com/plugins/like.php?href=<$BlogItemPermalinkURL$>&amp;layout=standard&amp;show-faces=true&amp;width=490&amp;height=25&amp;font=arial&amp;";action=like&amp;colorscheme=dark; colorscheme="dark" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:280px; height:30px;"></iframe>
<center><OlderPosts><a href=<$OlderPosts$>>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center></div>
</div>
</td>

- biru :  nama komen. contoh : 00 orang doakan saya kaya
- hijau : FB like button. Kalau tak nak, buang je .

Jom buat sidebar ye kawan-kawan . Paste code ni bawah code dekat atas tadi.








<td valign="top" width="230px">
<div class="sidebar">
<div class="main-title">Title Sidebar</div>
Isi Sidebar</div><br>
<div class="sidebar">
<div class="main-title">Title Sidebar</div>
Isi Sidebar</div><br>
<div class="sidebar">
<div class="main-title">Title Sidebar</div>
Isi Sidebar</div><br>
</td>

- hijau : tajuk sidebar
- ungu : kelebaran sidebar.
- biru : boleh letak welcome note, shoutbox @ kotak follower korang.
- merah : tutup sidebar dengan code tu. Kalau nak buat sidebar lagi jangan tutup dulu nanti hancur skin     korang. Okay ?

Okay ! Okay ! Paste code ini di bawah sekali. Baca baik-baik ye, di bawah sekali ~! :)
</table></body></head></html>
Jom Buat Page 


Buat page plak :)))). Adoiii !! Pening korang ye ? Pergi minum air dulu. hihi~


First : Click ctrl+F dan search </style>. Copy code bawah ini dan paste atas </style> .










a.panda {
text-align: center;
font-family: georgia;
font-size: 10px;
background: #FFFFFF;
color:#000;
padding: 4px;
border:3px;
-webkit-transition:0.5s;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-top-left-radius: 0px;
margin:0px;
}
a.panda:hover {
cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), progress;
color: #ffffff;
background: #599AF0;
-webkit-transition:0.5s;
padding-top: 8px;
}

Second : Paste code dekat bawah ni ye. Paste di mana ? Paste di code sidebar. Paste di bawah code ini <td valign="top" width="230px"> . 









<div class="sidebar"><div class="main-title">Disclaimer</div>
<img src="URL GAMBAR YG COMEL-COMEL" style="border: 2px dotted #6CA5F0; margin-left: 10px;" width="60px" height="60px" align="right">
<center>WELCOME NOTE KORANG !!!
<center><img src="URL DIVIDER" width="120" height="23">
<center><a class="panda" onClick="document.getElementById('content').innerHTML=document.getElementById('i').innerHTML" title="About">About</a> ?
<a class="panda" onClick="document.getElementById('content').innerHTML=document.getElementById('love').innerHTML" title="Linkies">Links</a> ?
<a class="panda" onClick="document.getElementById('content').innerHTML=document.getElementById('panda').innerHTML" title="Posts">Entries</a> ?
<a class="panda" onClick="document.getElementById('content').innerHTML=document.getElementById('so much').innerHTML" title="Big Thanks">Credit</a>
CODE LAGU KORANG
</div><br>

Baca ni !! Yg saya warnakan warna biru tu, korang tukar ape yang patut. Terima Kasih ;) Code yang ini pula, paste di bawah code ini </td> .









<div id="i" style="display:none;">
<div class="main-title">The Owner</div><br>
<img src="URL gambar ( gmbar korang pon boleh )" style="width="90px" height="90px" align="left">
Write Anything About You<br>(◑‿◐)<br>
</div>


<div id="love" style="display:none;">
<div class="main-title">Affies&Linkies</div><br>
<a href="http://nurbazilah97.blogspot.com"/>Misz Panda</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> | Next ??
</div>
<div id="so much" style="display:none;">
<div class="main-title">Big Thanks</div><br>
<img src="URL Gambar yg CUTE" style="border: 2px dotted #6CA5F0; margin-left: 18px;" width="110px" height="110px" align="left">
</div>
<div id="panda" 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>
<iframe src="http://www.facebook.com/plugins/like.php?href=<$BlogItemPermalinkURL$>&amp;layout=standard&amp;show-faces=true&amp;width=490&amp;height=25&amp;font=arial&amp;";action=like&amp;colorscheme=dark; colorscheme="dark" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:280px; height:30px;"></iframe>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type='text/javascript' language='Javascript'>
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (1=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="URL TOP BUTTON"/>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ center of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Fly High'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>

SIAP!!!!! Kalau dah jadi bagus la. Maknanya korang faham :)  Tanya kalau tak faham. Memang susah sikit. Saya belajar 1 minggu. Tapi nak betul-betul pandai 2 minggu. Credit tau kalau dah siap. :))))  Tanya kalau tak faham :)))) ..

Nota kaki : Nak tengok skin yang saya pernah buat ??? Pergi sini -> Freebies . Oke ~ BYE !! | Happy Blogging~
Disclaimer
Welcome here!Best viewed in Google Chrome.Aww~ You look great today.Click the tabs below to explore my blog.Before leave, don't forget to leave a message. Thanks for visiting.

Lets Talk Here
- NO harsh word
- No copycat.
- NO spamming
- Don't rip.
- Need your respect here.
- Leave a tag with correct URL

My Awesome Followers


Blog Archive