Nabiha Zaidi: Tutorial - cara guna blogskin ( full version )

27 November 2011

Tutorial - cara guna blogskin ( full version )

*Sorry, kalau tanya apa-apa pun pasal tutorial ni, tak dapat nak tolong, lama dah tinggalkan blogskin.*

Ramai sangat request tutorial ni . . lame dah . and baru nak buat . .

first kalau korang nak guna blogkin ni . korang kena back-up template lama . sebab takut tak jadi atau korang tak reti nak guna . sebab kalau guna blogskin, semuanye berlandaskan code . takde add a gadget semue k .

header pon gune code . .

okay, first . . korang pergi blogskin.com . . . 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>