Monday, March 9, 2015

Tutorial : Buat Header Gambar Sendiri via Photoshop Cs6



Hello guys , hai. hai. sihat ? waaaaa. busy ?  bosan ?sini fyra nak bgitahu. fyra dah berjaya create header fyra sendri . tahu macam mana ? fyra huna photoshop. yeah , kalau dah masuk Course Graphic Design nampak sngat tipu kalau tak pandai guna Photoshop . so jom Fyra nak share dengan korang mcm mana fyra boleh berjaya buat header fyra sendiri >.<  


*first of all
Sebelum tu , korang kena dapatkan Software Adobe Photoshop cs6 dulu . baru dpat follow tuto fyra ni :)

1 - Open Adobe Psd korang . - Click File - Open - Pilih Gambar Korang untuk Header .
2 - Dah pilih tu , click Quick Selection tool . tool di seblah kiri tu . macam gambar bawah ni . :) 


3- pastikan korang select yang bahgian luar dri gmbar korang.jangan select muka :)
4 - Now , click Select dkat bhgian atas menu bar - Click Inverse. mcam gmbar bawah ni .


5 - gambar tu mesti jadi macam bawah ni . 
\

6 - Dah sudah tu. kita go step  II  pulak . 
7- Click File - New dan ikut macam gambar bawah ni . 


*Width dan height atas ni untuk Templte blog biasa tau !

8 - go back dkat gambar korang yang line putus putus tu.  then choose Move Tool and drag gambar uolls dkat New file yang korang new tadi . :) 

9 - dah dpat drag tu.korang click Horizontal Type Tool macam gambar bwah ni.then korang taip la apa korang nak . :D  

10 -Click Add a layer style macam gmbar bawah ni untuk words tu lebih nampak jelas


** Gambar untuk step 9 dan 10 

11 - Ok . Kalau korang nak tambah apa-2 lagi , korang tambahlah ye . tekan tekan korang punya photoshop tu kasi lawa lagi header tu. :D

12 - Sekarang masa nak SAVE pulak . Korang tekan FILE > SAVE AS ..

**Save as PNG . macam gambar bwah ni tau .


13 - yeaaa. Dah siap . now boleh laa go dkat layout korang balik. pastu Upload. SIAP >.< 











Saturday, March 7, 2015

Tutorial : Add Comment/ Pop Up Window BLOGSKIN


hello guys. emm. fyra nak tanya ni. kalau korang dah move ke blogskin user mesti tempat komen takde kan. hmm,korang kena buat coding baru. so , sini fyra tunjuk cara cara nak letak balik tempat komen dalam blogskin. jom follow step fyra ni. simple :D

1. Dashboard > Template
2. Press Ctrl+F dan cari code </blogger>
3. Then,Copy code kat bawah ni

<BlogItemCommentsEnabled><a class="comments" href="https://www.blogger.com/comment.g?blogID=BLOG ID&postID=<$BlogItemNumber$>&isPopup=true" onclick="window.open('https://www.blogger.com/comment.g?blogID=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>
4. Paste di atas code yang korang cari tadi
5. Preview dan save
6. okay,wait.If korang nak buat comment Pop Up Window
7.  click Dashboard > Setting > Post & Comments
8. Scroll bawah sikit dan korang akan jumpa macam ni


9. korang click "Pop Up Window"
10. finally , baru boleh Save Setting . 

merah : gantikan dengan blog ID korang .
gambar tu boleh click kalau tak nampak ;)

Tutorial :Note di Bawah Post template biasa & BLOGSKIN user




hello guys. uolls nak tak tgok bawah post korang ada ayat , contoh mcm gmbar bwah ni. nampak macam ohsemm tau acctly. hihi . fyra share . kalau nak . amek je . :) btw , tuto ni boleh guna dkat template biasa atau pengguna blogskin jugak :) sama je coding dia.

1. Dashboard > Template
2. Press  Ctrl+F dan cari code </blogger>
3. Copy code di bawah ni 

<hr/><center><b>Thanks for reading</b></center><hr/>

4. Paste di atas code </blogger> tadi
5. okay. now cuab korang Preview .kalau puas hati save . 

merah : gantikan dengan ayat korang

Letak Icon Tepi Post Title BLOGSKIN




hai, okay. malam ni fyra nak share tuto yang kedua pulak. sangat simple dan mudah . fyra nak share tuto macam mna fyra letak icon burung comel kat seblah title post fyra . macam kat atas tu . haha. okay . jom tgok step step ni ;) senang je nak follow . 

1.Dashboard > Template > Edit HTML
2.Press Ctrl+F dan cari code <$BlogItemTitle$>
3.okay, then korang copy code bawah ni pulak

<img src='URL IMG'/>

.Kemudian paste di atas code <$BlogItemTitle$> tadi
5.okay, now korang cuba Preview dlu. kalau jadi,click save :D 
mudh kan :D

merah : gantikan dgn url icon
url image boleh search icon dkat google :D 

Tutorial twitter follow button untuk BLOGSKIN


hai, malam ni fyraa nak share satu tuto dengan korang. senang je. fyra nak bagi step macam mna fyra buat button follow untuk twitter fyra mcm dkat sidebar belah kanan fyra tu . contoh mcm gambar bwah ni :)


okay. jom start, sape ada acc twitter boleh laah ikut tuto ni :)

1 . Dashboard > Template
2. Copy code kat bawah ni

<a href="URLTwitter" class="twitter-follow-button">Follow @Shafirrahshafie</a><script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>

 Paste dekat mana mana bahagian yang korang nak 
4. Preview & save  

Merah : URL Twitter
biru : username


okay. cuba save . mesti jadi . >.< Good luck guys .

Monday, March 2, 2015

Tutorial Download Lagu Dari Youtube




petang petang bila dduk kat rumah tu, dengar lagu best best kat radio. apa kata terus download . mudah je cara fyra nak share ni. jom follow step step ni :)

1- korang open YOU TUBE

2-pilih lagu apa yang nak download tu . 


3- korang copy URL kat you tube tu

4- okay, then go to this web : MP3

5- korang follow gambar bawah ni . orait >.<


-Paste URL you tube tadi dalam tu . Then,tekan Convert Video .


- click download tu . lepas tu bukak filw download korang dalam lappy. tengok meti dah ada :)

Banyak lagi sebenarnya website yang menyediakan converter ,tapi fyraa selalu guna website ni sebab senang sangat. haha >.< 




Sunday, March 1, 2015

tutorial back to-top button di blogskin

guys, hello. emm, hari ni fyraa tengah rajin nak share satu tutorial. jom. fyra pon baru try, jadi. so nak share dengan korang ni. btw, icon yang akan fyra share ni, icon fyra buat sendri. kalau suka boleh guna. kalau tak suka, nvm, boleh search sndri dkat google maybe :) . Okay/. lets start babe
1- Firstly , macam biasa lah, korang kena go dkat template blog .
2- korang kena searh word ni : </head> , nak cari tu.korang guna short tekan Ctrl+F then search word      no 1 tadi.
3- bila dah jumpa tu, korang copy and paste coding bawah ni kay . 
<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, 500]},
controlHTML: '<img onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false" 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:'Fly To The Sky'})
.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- dah sudah copy and paste tu, korang boleh search word URL IMAGE guna Ctrl+F tadi then pastekan Url imge fyra bagi kat bawah ni :)

file:///C|/Users/FyraaShafie/Desktop/icon blue.png

file:///C|/Users/FyraaShafie/Desktop/icon purple.png

file:///C|/Users/FyraaShafie/Desktop/icon red.png


5- okay done. Tahniah. berjaya dah tu. cuba go dkat Blog korang. mesti nampak comel ><
Copyright ®Tutorial World By Shafirrah Shafie™