ZULAIKHA DIARY'S: Tutorial Cara Buat Full Blogskins

Assalammuailaikum....

Hari first time ikha wat tutorial untuk blog nie...

sebelum ini x pernah nk cbe wat bru skunk t'fikir nk

kongsi ckit dgn blogger2 s'kalian.

okay, first . . korang pergi---> SINI . . . korang pilih skin yang korang suka . .

and . click [ Blogger Main ]

nanti dia akan masuk kat notepad korang, try tengak kat tempat file download ok . nanti ade la code tu . .

now, korang pergi dashboard , and click design-edit HTML- revert to Classic Template.

okay. lepas dah tukar ke classic template . . korang delete semua code dekat kotak tu.

and tukar dengan code dekat note pad tadi .

then, preview - save . .

CURSOR

search code body {

and paste code dibawah selepas code body {

cursor:url("http://www.drikoti.net/Goodies/Cursor/News/Gifs/06.gif"),text;

favicon

paste code

<link href='URL IMAGE' type='image/x-icon'/>

<link href='URL IMAGE' rel='icon' type='image/x-icon'/>

bawah </style>

Enable Link

okay, blogskin kebanyakkannye tak de link dekat post title . . so , carenye .

ctrl+f search code <$BlogItemTitle$>

and gantikan dengan

<span class="PostTitle">

<a href="<$BlogItemPermalinkURL$>">

<$BlogItemTitle$></a></span>

BACKGROUND

cari code ni : body {

dkat situ akan ada url background yang asal , kalau nak tukar buang code tu gantikan url background yang korang cari . kalau background yang jenis warna , tukar saja code warna pilihan korang .

TITLE

cari code ni : <title>

sebelah code tu akan ada perktaan yang asal , tukar title yang korang nak .

HEADER

cari code ni : <head>

copy code ni : <center><img src="URL HEADER"></center>

paste atas <head>

p/s : ade sesetengah blogskin tak sesuai letak header .

ADD COMMENT

cari code ni : </Blogger>

copy code ni :

<BlogItemCommentsEnabled><a class="comments" href="https://www.blogger.com/comment.g?blogID=YOUR BLOG ID&postID=<$BlogItemNumber$>&isPopup=true" onclick="window.open('https://www.blogger.com/comment.g?blogID=YOUR BLOG ID&postID=<$BlogItemNumber$>&isPopup=true', 'bloggerPopup', 'toolbar=0,scrollbars=1,location=0,statusbar=1,menubar=0,resizable=1,width=400,height=450');return false;">

<$BlogItemCommentCount$> comment(s)</a></BlogItemCommentsEnabled

Letak icon sebelah comment

1.Dashbord>Template

2.Ctrl F dan search ayat comment korang.For example macam saya punye drop comment .

3.Copy dan paste code neh disebelah ayat korang tuh.

Merah : Boleh digantikan dengan icon yang korang mahu :)

4.Save template

Tutorial letak older post

1.Dashbord>Template

2.Ctrl f dan search <blogger>

Copy dan paste code ini dibawah code <blogger>

<OlderPosts><a href="<$OlderPosts<OlderPosts><a href="<$OlderPosts<OlderPosts><a href="<$OlderPosts<OlderPosts><a href="<$OlderPosts$>">gt;">amp;gt;">Older Post</a></OlderPosts> | <NewerPosts><a href="<$NewerPosts$>">Newer Posts</a></NewerPosts>

3.Preview dan save template.

Add facebook like button

1.Dashbord>Template

2.Ctrl f dan search </blogger> .

3.Copy dan paste code ini diatas </blogger> atau dimana-mana sahaja yang dirasakan sesuai dengan template korang.

<iframesrc="http://www.facebook.com/plugins/like.php?href=<$BlogItemPermalinkURL$>&layout=standard&show-faces=true&width=490&height=25&font=arial&";action=lik
e&colorscheme=dark; colorscheme="dark" scrolling="no" frameborder="0"
allowTransparency="true" style="border:none; overflow:hidden; width:280px; height:30px;"></iframe>

Tutorial letak scrollbar

1.Dashbord>Template

2.Ctrlf dan search a:hover { .Takda code a:hover { ? Sila add code tu sendiri berpandukan template lama korang yang ada code tu okey.

3.Copy dan paste code dibawah ini diatas code a:hover {

::-webkit-scrollbar {

height:13px;

width: 8px;

background: #f9f9f9;

}

::-webkit-scrollbar-thumb {

background-color: #98AFC7;

-moz-border-radius: 2px;

border-radius: 2px;

}

::-webkit-scrollbar-thumb:hover {

-moz-border-radius: 2px;

border-radius: 2px;

background:#659EC7;

}

4.Preview dan save template

p/s:Scroll hover codes credits to muazzadli.blogspot.com

Tutorial letak blockquote

1.Dashbord>Template

2.Ctrl f dan search code a:hover {

3.Jumpa tak?Copy dan paste code dibawah diatas code a:hover {

blockquote {

background-colour:#FFFFFF;

border-top: 1px dashed #dadada;

border-bottom: 1px dashed #dadada;

border-left: 3px solid #000000;

border-right: 3px solid #000000;

padding: 5px;

}

4.Preview dan save template

Tukar font dan saiz font dekat blog

1.Dashbord>Template

2.Search nama font kat entri korang

3.Gantikan nama font tu,contoh:Arial.Lepastu tukar nama font Arial tu dengan nama font yg korang nak.I give two examples calibri and verdana.

4.Kalau nak tukar saiz font just search font-size then ubah number tu okey.

5.Preview dan save template ;p

Tukar warna highlight

1.Dashbord>Template

2.Search code a:link { atau apa-apa code yang macam a:link

Nota:Sesetengah template takda code tu so korang kena add code tu sendiri berpandukan template lama korang tau

3.Copy dan paste code ini diatas a:link {

::selection {

background: #D462FF; /* Safari */

color: #000000;

}

::-moz-selection {

background: #D462FF; /* Firefox */

color: #000000;

}

4.Preview dan save template ;D

top button

1.Dashbord>Template

2.Ctrl f dan search <head>

3.Copy code bawah ini dan paste selepas/bawah code <head>

<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 IMG"/>', //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:'Scroll Back to Top'})

.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>

URL IMG tukar dengan url top button korang

0key,semua tutorial sudah dihimpunkan,adew yg Ikha buat tpi adew jugak yg copy paste.Ikha harap sangat yang anda semua bley faham ae mcm mne nk wat blogskin.

ZULAIKHA DIARY'S

Music On !!

Friday, 19 October 2012

Tutorial Cara Buat Full Blogskins

1 comment: