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.
<img src="URL ICON ANDA"/>
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$>&amp;layout=standard&amp;show-faces=true&amp;width=490&amp;height=25&amp;font=arial&amp;";action=lik
e&amp;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 


okay , semue tutorial ni dihimpun-2 . . ade yang aku buat, ade jugak yang copy . .
so, BIG credit to Anis Diyana  . and yang lain-2 . Qay , sis Qyla , sis Pija . sis yana yang aku dah copy-2 .
btw, kalau ade yang tak  dicredit . bagitau . . takot terlepas pandang .

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

You may leave your comment :)

58 comments:

  1. hee~~ thanks btw cmne nk buat bila klik link kuar new tabb ?

    ReplyDelete
  2. Iera : code dia sama mcm code template biasa .

    ReplyDelete
  3. helloo , boleh tak nak minta tuto amek gmbr yg dkt screen gitu. ?

    ReplyDelete
  4. kak, kenape post sye x di tunjukkan di blogskin sye?

    ReplyDelete
  5. @Heart To Heart Zhan Sayang Dia Tu, tak berani nak cakap. Tapi dulu pernah gune ade yg jadi mcm tu. Maybe sebab skin tu sndri .

    ReplyDelete
  6. awak..boleh mintak tlg x ?? tlg wat blogskin utk saye..nk yg cmnie..
    http://www.blogskins.com/screenshot/375734..nnty saye bayar..saye janji..jgn risauu..

    ReplyDelete
  7. @Hafizah Zainal AbidinMish Apple , atau awak boleh tengak kt sidebar sye, ade link.

    ReplyDelete
  8. nnty saye add fb awak pki fb cousin saye..Farhana Sofea..approve tau..

    ReplyDelete
  9. kalo nak letak follower cm ner n post a comment law pkai blogskin ni?

    ReplyDelete
  10. Ah kakak, makasi banget tutorial nya >< *hug bermanfaat bener

    ReplyDelete
  11. thanks for the best tuto :) banyak membantu kite .. haha .. anyway thanks :)

    ReplyDelete
  12. Hye, boleh tak tolong buat tutorial mcm mna nk tag nma orang di entry gna blogskin ? klau boleh, tlg buatkan n then komen dkt cbox sy n bgi link nya, nie blog sy :

    http://dayananaj-wa.blogspot.com/

    ReplyDelete
  13. AnonymousJuly 19, 2012

    Yg nak letak comment tu , lepas copy buat ape ? Paste kat mane ?
    Terima kasih sbb tolong :D

    ReplyDelete
  14. macam mana nak buat replt to komen ?

    ReplyDelete
  15. akak knp blog sy x leh komen?
    tlong tengok blh?

    http://diarie-s.blogspot.com/

    ReplyDelete
  16. Mish Apple , macam mana nak buat ? tak jadi punn. boleh tlg buat kan ? please ?

    ReplyDelete
  17. knape x jadi ...follow blog faiz balik please http://muhamadfaizfaizfaiz.blogspot.com

    ReplyDelete
  18. blogger main pun xjumpa :(

    ReplyDelete
  19. KENAPA TAK JADI ? SUSAH NYEW . PLEZZZ TOLONNG ? :(

    ReplyDelete
  20. @umi humairaMaybe template tu tak sesuai kot dengan kemampuan awak.

    ReplyDelete
  21. tengs sangat !! dah jadi dah.. tuto ni memang detail habis.. :)

    ReplyDelete
  22. boleh tolong kitee tak ? kitee tak pandai nak edit-2 blog neh :(

    ReplyDelete
  23. eeiii..napa takleh tukar???

    please tolong....buatkan? :)
    wait wait..approve saya dulu kat fb tau, elly dania :)

    ReplyDelete
  24. akak , kenapa tk jumpepon blogger main ..

    ReplyDelete
  25. akak , kalau nak tutorial blogskins untuk blog baru boleh ? Saya dah pening dah nii -.-

    ReplyDelete
  26. Akak,cmne nak letak kod shotubox ehh ? And cmne nak re-edit bio yang kat shoutbox tuh?

    ReplyDelete
  27. Akak ! Mcam mane nak buat kotak untuk toturial , about and mcam2 lah ? tolong kak

    ReplyDelete
  28. @FyqaAfyq Sorry, tak dapat nak tolong pasal blogskin, sebab dah tak guna.

    ReplyDelete
  29. kak,kat mane..dashboard..x dpat cri..

    ReplyDelete
  30. macam mana nak back-up template lama

    ReplyDelete
  31. kak,,sya dapat buat tapi,,biodata org tu tak berubah
    camner?

    ReplyDelete
  32. akak mcm mane nak tukar gambar???

    ReplyDelete
  33. hai !! thanks..jadi la..hehe this smile for u! =)

    ReplyDelete
  34. salam,awak edit blog awak guna ape yek sbb cantik sangat boleh tolong ajar

    ReplyDelete
  35. @hani filzah Waalaikumsalam, saya guna photosho[ dan photoscape. Ape-2 boleh tanya kat shoutbox.

    ReplyDelete
  36. Salam..mksd copy kod tu.. copy suma dlm notepad tu ke atau kena cari kod satu2?..

    ReplyDelete
  37. @Satu Cahaya Copy semua, then preview dulu. Kalau jadi, save.

    ReplyDelete
  38. Sy tak faham laa yg <$BlogItemTitle$> tu. tak reti LANGSUNG nak tukaa :'( try dah buat mcm awk, tp xjd pape. Haha.Ce bg yg mcm details lg??? BlogItem??pekebende uh.. Tiap kali dload blogskin n gune, tu lah satu2nye yg tak ter'transform'.. warghhhh...cmane eh?? Tolong??please...huu, Thanks! :D

    ReplyDelete
  39. @| Asma' Mahadzir | Blogskins ni rumit, kalau nak guna. belajar dulu edit template biasa. Lagipun saya dah bgitau kt atas tu, *Sorry, kalau tanya apa-apa pun pasal tutorial ni, tak dapat nak tolong, lama dah tinggalkan blogskin.* .

    ReplyDelete
  40. SALAM,KAK SYA DAH BUAT CAM KAKAK SURUH DAH JADI TPI SAYA BUAT FONT DIA X JADI2X JUGA..KAK TOLONG LAH SYA..PLEASE

    ReplyDelete
  41. Waak, nak jugak :( tolongg laahhh. Boleh nak Im kat facebook?

    ReplyDelete
  42. Hei , kenape tak boleh pun :( banyak kali try yang blogskin tu .

    ReplyDelete
  43. @Aien Sempoi Sorry, tak dapat nak tolong. Dah lama tinggalkan blogskin. So, memang tak ingat dah cara nak guna.

    ReplyDelete
  44. Assalamualaikum. nak tanya. macam mana kita nak besarkan saiz blogskin eh? macam nak kasi lebar lagi. harap akak dapat reply. :)

    ReplyDelete
  45. @Alya Izz.Waalaikumsalam, sorry ye. Dah tulis dah kat atas tu. Dah lama dah tinggalkan blogskins. Ni pun tutorial lama. Just boleh bantu dengan tutorial yg kat atas ni je. Memang dah lupa sangat2 cara nak guna blogskins. Sorry k ^^

    ReplyDelete

Maaf kalau tak dapat nak balas komen.