Template ini digunakan pada coding Classic template...
agak rumit sedikit berbanding template design kerana hanya
bergantung pada coding yang korunk gunakan semata-mata...
Tak ada langsung gadget ,
Sekarang ramai orang guna Classic template sebabnya ianya ringan
dan banyak pereka design .. kalau korunk nak juga
1. korunk kena cari design yang korunk suka di laman Blogskins ,
then pilih yang korunk suka , dan tekan - Blogger Main -
2. Bila korunk tekan , akan autosave ke notepad korunk , dan pergi ke download file untuk copy coding tersebut...
3. Open your blog , dan klik design --> Edit Html --> Click Revert to Classic Template
Mari kita mulakan tuto untuk re-coding and re-editing old template korunk !
Gunakan CRTL+F bagi memudahkan pencarian code :)
CURSOR
Cari code : body {
Next , copy code dan paste dibawah code yang dicari tadi ..
cursor:url("http://www.drikoti.net/Goodies/Cursor/News/Gifs/06.gif"),text;
FAVICON
Copy code :
<link href='URL IMAGE' type='image/x-icon'/>
<link href='URL IMAGE' rel='icon' type='image/x-icon'/>
Paste di bawah code </style>
ENABLE LINK
Kebanyakkan blogskinnya tak ada link post title , so caranya ialah :
CRTL+F untuk cari kod
Gantikan dengan kod ini :
<span class="PostTitle">BACKGROUND
<a href="<$BlogItemPermalinkURL$>">
<$BlogItemTitle$></a></span>
Cari code ni : body {
dekat 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 dan paste di atas code </blogger> :
<a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> YOUR OWN WORD </a></BlogItemCommentsEnabled>Kalau korunk guna coding comment di atas , comment yang biasa punya..tapi kalau korunk nak guna comment pop up window gunakan coding di bawah :
<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$> YOUR OWN WORD</a></BlogItemCommentsEnabled>Make sure kalau nak guna pop up window korunk dah pergi ke :
Setting --> Comments --> Comment Form Placement --> tick pop up widow !
ICON SEBELAH KOMEN
Ctrl F dan search ayat comment korunk. For example macam Chocolate .
Copy dan paste code di bawah disebelah ayat korang tuh.
<img src="URL ICON ANDA"/>NEWER AND OLDER POST
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>Preview dan save template.
FACEBOOK LIKE BUTTON
Search </blogger> .
Copy dan paste code ini diatas </blogger> atau dimana-mana sahaja yang dirasakan sesuai dengan template korang
<iframe src="http://www.facebook.com/plugins/like.php?href=<$BlogItemPermalinkURL$>&layout=standard&show-faces=true&width=490&height=25&font=arial&";action=like&colorscheme=dark; colorscheme="dark" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:280px; height:30px;"></iframe>SCROLL BAR
Search a:hover { .Takda code a:hover { ?
Sila add code tu sendiri berpandukan template lama korang yang ada code tu okey.
Copy dan paste code dibawah ini diatas code a:hover {
::-webkit-scrollbar {Preview dan save template
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;
}
BLOCKQUOTE
Search code a:hover {
Jumpa tak?Copy dan paste code dibawah diatas code a:hover {
blockquote {Preview dan save template.
background:#D8D8D8;
-webkit-transition-duration: 2s;
padding: 13px;
margin: 3px 3px;
color: #ffffff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
blockquote:hover {
background: #ffffff;
color: #000000;
-webkit-transition: 2s;
}
WARNA HIGLIGHTS
Search code a:link { atau apa-apa code yang macam a:link
#Sesetengah template takda code tu so korang kena add code tu sendiri berpandukan template lama korang
Copy dan paste code ini diatas a:link {
::selection {Preview dan save template ;D
background: #D462FF; /* Safari */
color: #000000;
}
::-moz-selection {
background: #D462FF; /* Firefox */
color: #000000;
}
TOP BUTTON
Search <head>
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">URL IMG tukar dengan url top button korang.
</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>
GARISAN , BOLD WARNA
Cari code </style>
Paste kod di bawah diatas kod </style>
u{DISABLE RIGHT CLICK !
text-decoration:none; background:#F6CEE3;margin:0.5em; padding:3px;color:#000; border-radius:2px; padding:1px}
u:hover{
background:#D8D8D8; color:#0000; -webkit-transition:1s}
b{
text-decoration:none; color:#000; text-shadow:0 0 0.4em #FA5882,0 0 0.1em #000; padding:0px}
i { color: #; }
em {font-family: georgia}
s { color: #ccc; }
Cari kod : <body>
Gantikan dengan kod :
<body oncontextmenu='return false;'>Preview dan save.
Good luck ! semoga korunk berjaya recoding blogskin korunk !kalau ada masalah , tanya jangan tak tanya ... nanti penasaran tauk ! :)
nurul , yang "ADD COMMENT" tuhh .
ReplyDeletecode dye nak paste dekat bawah ke atas " tuh ?
@lemon_ieyfa hehe , maaf sebab tak letak tadi.. tak perasan bila dah buat banyak sgt.. letak diatas coding
ReplyDelete@Nurrul HAHA ! oke , takpe :DD btw , thanx yeahh tutor nieyh :)
ReplyDelete@lemon_ieyfa most welcome :)
ReplyDelete@Nurrul NURUL , NURUL , NURUL . tak jadi punnnn xDD dye kate "error" haigooo xDD
ReplyDelete#baru try buat tadiiiii ~
@lemon_ieyfa dah fix coding , kamu try balik okeyh ! :)
ReplyDelete@Nurrul owh . hi bloggers !
ReplyDeletehmm , cantik blog yea ! jelez >,<
tolong bleyh tak ? my blog crazy thing ! and im new to this world . hmm , masalahnya , sye tak bleyh nak revert to classic blik . sama ada sye yg tataw , atw mmg blog tu cam tuwh .
help me pleazw :'(
@An-Nur Eradicator Awk dah guna classic blog.. So , awk nak template designer or classic sebenarnya nie ? :)
ReplyDelete*Link kan blog awk.. sy susah nak jejak awk..
@Nurrul assalamualaikum. blog yg sekarang punya x boleh nak tuka jadi template designer ek?
ReplyDelete@Anonymous Rasanya boleh saja.. dekat setting template.. template yg banyak2 jenis tuh lah yg digelar template designer :)
ReplyDelete