!! ♥ Tinie Iqa ♥ !!

Friday, 30 March 2012

Own Navbar

Cute nye kucing kat atas tu ! Geram nyerrr !! :D

Okey ! Hari ni Tinie buad tutorial Own Navbar. Tahu x own navbar tu ape ? Cube tgk gbr kat bawah .

* Besarkan kalu x nmpk *

1. Dashboard > Template > Edit HTML

2. Tekan CTRL+F dan cari kod ni : <head>

3. And copy code bawah ni :

<center><div style="position: absolute; top:0px; right: 0px; width:100%; border-radius:2px; position:fixed; padding:3px; background:url(URL BACKGROUND); color:#ffffff; font-size:11px;">ISI DISINI</div></center>

4. Paste kan di bawah code <head> tadi

5. Preview dulu, and save !

* Yang warna Biru tu panjang navbar. x perlu tukar

* Yang warna Hijau tu position. Boleh digantikan dgn Absolute, Relative dan Fixed

* Yang warna Pink pulak , warna Font navbar. Kalau nak tukar warna > Di sini <

* Yang warna Unggu , Isi navbar

* Yang warna Merah tu , gantikan dgn URL ok .

- Korang pandai2 lha adjust warna2 tu. Bye2 ! -

Jquery Top Button on Blogskin

Hello all ! Welcome To My Blog

Jquery Top Button on Blogskin

0 Vanilla Coklat

Sunday, 8 January 2012 | 02:27 |

Assalamulikum sahabat2 yang berada dalam keadaan sihat sejahtera. Kalau x sihat , buad ape lha nak bukak komputer kan ? Haha :)

1. Dashboard > Temlate > Edit HTML

2. Tekan CTRL+F and search code ini : <head>

3 Copy code ni :

<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 IMAGE"/>', //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:"Let's 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>

4. Paste kan dia bawah code yg korang search tadi .

5. Preview & save .

* Yg warna Biru tua tu gantikan dgn URL top Button yg korang nak okey !

Add comment on Blogskin

Hye all ! Okay , Tutorial hari ni Tinie nak ajar korang mcm mne nak tambah comment untuk Blogskin.

Kalau Blogskin sesiape yg blom ade tempat comment , jom ikut step2 nye .

1. Dashboard > Template > Edit HTML

2. Tekan CTRL+F dan cari code ni : <BlogItemTitle><$BlogItemTitle$></BlogItemTitle>

3. And , copy code bawah nih

<a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> Comment(s)</a></BlogItemCommentsEnabled>

4. Paste selepas code yg korang cari tadi

5. Preview dulu baru save ok !

* Yang warna Biru tu boleh ubah ke perkataan yang lain kalau nak

Eh ! Tunggu jap . Blom hbes lagi ! Kita sambung ke step yg ke-enem pulakk.

5. Pergi ke setting > Comments

6. Scroll ke bawah sikit , and tick Pop-up window dekap bahagian Comment Form Placement

7. And save !

- Menjadi tak ? Kalau menjadi , bagussss !!! -

Scrollbar For Blogskin

Assalammualaikum! x jawab dosa ye!

Ok! Hari ni Tinie buad tutorial scrollbar for blogskin saje! Sesiape yg bukan bloskin, jgn guna tuto ni okey!

1. Dashboard > Template > Edit Html

2. Tekan CTRL+F dan cari kod : </style>

3. Copy kod kat bawah ni.

::-webkit-scrollbar {
height: 14px;
width: 13px;
background-color: #FFFFFF;
}
::-webkit-scrollbar-thumb {
background-color: #B98EFF;
-moz-border-radius: 10px;
border-radius: 10px;
}

4. Paste kod yg korang cari tadi dekat atas kod </style> tu.

5. Preview dulu. Kalau menjadi save!

* Yang warna hijau tu, boleh tukar dengan width and height yang korang nak.

* Yang warna biru tu, Korang bole tukar dngn kod warna yg lain.

* Kod warna boleh amik di sini > Kod warna <

- Tutorial Tamat -

Yuhuu! Hi guys!
Kali ni Tinie buad Tutorial Favicon plak ye. Tiine harap korang tahu favicon tu ape :D

1. Go to Dashboard > Template > Edit HTML
3. Tekan CTRL+F dan cari code ni </title>
4. Copy code dekat bwh ni.

<link rel="shortcut icon" href="URL FAVICON" />

5. Paste kan Code tadi dekat bawah code yg korang cari tadi.
6. Preview dulu and save.

* Yg warna merah tu, korang cari la link dia tau. Cari yg cantik2 okey!

- Sape yg x jadi tu, ade lha tu dia buad silap -

Back To Top Button on Blogskin

Hye korang.

Hehe :D

Dah tahu nak buad tutorial ape ni? Ok, jom kita buad skarang!

Mcm biasa :

1. Go to Dashboard > Template > Edit HTML

2. Tekan Ctrl+F and cari code : </html>

3. Copy code bwh ni..

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Top"><img src="URL IMAGE"

/></a>

5. Paste kan Code tadi dekat bawah code yg korang cari tadi.

4. Paste kan kod yg atas tu dekat atas code yg korang cari tadi. Paham?!
5. Preview dulu. Baru Save!

* Yg warn kelabu tu, sila tukar dengan button back to top korang sendiri ye. Pas2, paste kan URL dia tau!

Thursday, 29 March 2012

Follow and Dashboard Button on Blogskin

Assalamualaikum ! Hai dude !

Hari ni Tinie sambung terus buad tuto ni. Sbelum kita mula kan, kita mulakan dgn bismillah supaya ape yg korang buat tu menjadi. Kalau x menjadi, Tinie pon x tahu laa. Okey, mcm biasa, ikut step yg Tinie dah buad ok!

1. Dashboard > Template > Edit HTML

2. Tekan CTRL+F and search code ni : </html>

3. Copy code yg bwh ni.

<a style="display:scroll;position:fixed;top:45px;left:15px;" href="http://www.blogger.com/follow-blog.g?blogID=1888996378057713035" title="Follow"><img src="http://assets.tumblr.com/images/iframe_follow_alpha.png?468" /></a><a style="display:scroll;position:fixed;top:15px;left:15px;" href="http://www.blogger.com/home" title="Dashboard"><img src="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?468" /></a>

4. Paste code tu dekat atas code yg korang search tadi okey !
5. Preview dulu, and then save !

* Yang warna Pink tu, korang gantikan dgn blog ID korang okey!

- Simple kan ? Kalau korang rasa x paham ataupun susah, pegi lha kat tutorial yg lain. Belambak lagi yg ade. Kat Link aku pon ade -

Button Like di setiap post

Assalamualaikum ! Hye and annaseyong . Hehe :D

Tinie x reti lha mcm mne nak eja annaseyong tu. Tapi, whatever aje la kalau salah pon :)

Korang nak letak button like yea ? Okey2 ! Let's do it now .

1. Dashboard > Template > Edit HTML

2. Tekan CTRL+F and search code ni : </blogger>

3. Copy code bawah tuu .

<iframe src="http://www.facebook.com/plugins/like.php?href=<$BlogItemPermalinkURL$>" scrolling="no" frameborder="0" style="height: 62px; width: 100%" allowTransparency="true"></iframe></br>

4. Paste kan dia atas code yg korang search tadi

5. Preview and save.

- Selamat mencuba ! sape yg jadi tu, mmg betul2 dia ikut step ni. Sape yg x jadi tu, ade lha tu yg step dia x ikut -

Background Post Body for Blogskin

Assalamualaikum .

Hari ni Tinie buad tuto Background post body just for blogskin sahaja.

1. Dashboard > Template > Edit HTML

2. CTRL+F and search code ni :

background:white;

3. Kemudian , korang tukarkan perkataan white; kepada code ni

url(URL IMAGE);

4. Pas2 , URL image tu korang tukarkan kepada background yg korang nak.

5. Preview and save !

- Finish ! -

Tukar perkataan comment ke perkataan yang lain

Hye . Today , Tinie nak ajarkan korang mcm mne nak tukar perkataan comment ke perkataan yang lain. Bagi sesiape yg nak tukar , jom ikut step2 tutorial ni .

1. Dashboard > Template > Edit HTML

2. Tekan CTRL+F dan cari code ini :

<a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$>

3. Kalau dah jumpe , korang nmpk x perkataan comment sebelah kanan code tu ? Okay , korang tukar kan perkataan comment tu kepada perkataan yg korang nak .

4. Preview dulu menjadi ke x . Kalau jadi , save !