Tutorial : Jquery Back To Top for Blogskin

Assalamualaikum :)
Now tuto for Blogskin user pula. I'm going to show you how nak tambah Jquery Back To Top pada Skin korang. Jquery ni dia back to top yang guling guling naik atas macam lif. Tahu kan yang mana ? Let's started

1. Sign In Blogger >> Template >> Edit Html >> Proceed

2. Ctrl+ F and cari code ni :

</head>


3. Copy code bawah 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, 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>
 

NOTA COMEL :
BIRU : Gantikan dnegan URL IMAGE BACK TO TOP BUTTON yang korang ada.
 
4. Paste code ni di BAWAH  </head>

5. Save :) 

Tutorial : Buat Header Guna Photoscape 3.4

Assalamuamualaikum :)
Tuto ini direquest oleh Cik Qiqi. Dia comment dalam tuto Transparentkan Header : Awak.. Dekat mana nak buat header yang belum ditransparent itu?   So saya decide nak buat tuto cara buat header terus in package. Hehe terlebih rajin lol :p Harap awak faham Qiqi. Sorry tuto macam keling. Saya bukan jenis yang pandai dalam bab bab Photoshop ni yek. Buka PS tengok dalam dia pun dah gelabah ayam -_- So kita guna Photoscape je. Kalau satu hari pro Photoshop nanti saya buat Insha Allah :)

First you must have PHOTOSCAPE. Ape jadah Photoscape ni ? Photoscape ialah software untuk mengedit gambar, mendesign gambar and banyaaaaaaak lagi gunanya. Awak kene download lah kalau nak ada. Tuto ni menggunakan PHOTOSCAPE 3.4. Kalau awak guna yang baru punya lain sikit lah.  Tapi kalau nak senang faham gunalah 3.4 punya

Yang takda lagi boleh download dari mana mana link and make sure ni tak virus ye. Kalau tak tau cara download search lah kat Google. YouTube lagi senang sebab dia tunjuk secara live lah. Baru sennang faham. Link bawah ni saya tak sure ada virus tak. Tengoklah dulu :
http://www.filehorse.com/download-photoscape/5002/old-versions/

1. Buka Photoscape >> Klik Editor


2. Dia akan keluar macam dekat bawah ni. Klik Menu yang dilabel merah tu >> New Photo

  


 3. Satu kotak akan keluar, Tukar lah Width and Height ikut kesukaan korang. Pastikan Width sama dengan Width blog. Warna ikut suka awak ( KALAU NAK BUAT HEADER TRANSPARENT KENA PUTIH. MESTI ) >> OK


4. Bentuk header korang akan keluar macam dekat bawah ni.


Now time to design your header. Yeyyyy lol. 

ATTENTION !
Header yang ohsemm ialah header yang tak terlampau serabut and tak terlalu kosong. Kalau serabut sangat nanti readers korang akan tak tentu hala otak tengok serabut. And make sure amik font yang lawa lawa and sesuai. Kalau tak tau nak download font rujuk SINI . Tambahlah juga gambar yang comel. Search google IMAGE FOR HEADER. Nanti melambak keluar. Pilih satu and Save. Kalau pinjam Freebies orang jangan lupa credit diorang. Jom start.


5. Tengok bawah tu kan ada Home Object Crop and Region kan ? Klik Object >> Klik Image. Rujuk bawh kalau blur.


Lepas klik Image nanti keluar something list kan ? Klik Photo yang ATAS sekali
6. Nanti satu kotak keluar, pilih image for header yang korang Save tu. Bila dah klik image tu akan keluar. Draglah ke mana korang nak letak image tu. Contoh :


Kalau nak tambah image lagi, ikut lah step 5 dan 6 okay ?
7. Now time to tambah ayat ayat. Klik Text dekat bawah Image tu.


 8. Satu kotak akan keluar macam dekat bawah . Kotak tu ialah untuk edit edit Text korang. Kotak putih tu korang isi lah ayat yang nak ditulias pada header korang. Pastu bolehlah tukar font kepada font comel yang telah didownload ke, tambah Shadow ke, Outline ke, Tukar Colour ke. Dah siap edit klik OK



Hasilnya :


 How I edit the Text :

Font : Jellyka Delicious Cake
Colour : Grey yang Ketiga dari atas.
Style : Bold 
Position Font : Left
Shadow : Colour Light Grey

9. Klik lah Save kalau dah siap edit :)

Kalau nak transparentkan header ni boleh rujuk SINI . If you don't know how to put it on your blog klik SINI. But only for Blog Template jela. Kalau yang Blogskin nanti ada soon.

\Bye/

Tutorial : Blockquote Hover With Cute Icon

Assalamualaikum :)
Blockquote ni macam bila awak hover nanti ada keluar gambar comel di hujung. Sangat omey yeee haha :p Credit : KAK AMYLIA Dalam tuto INI saya ada janji nak buat tuto blockquote jenis ni. Hope you understand.

1. Sign In Blogger >> Layout >> Edit HTML >> Proceed

2. Ctrl+F code ni :

.post blockquote{

3. Kalau awak ada guna blockquote yang lain sebelum ni, delete semua code blockqute lama tu and ganti dengan code bawah ni. Copy code bawah and pastekan di BAWAH .post blockquote{


background-color: #FFFFFF;
border-left: 2px dashed #FFFFFF;border-right: 2px dashed #FFFFFF;
border-bottom: 2px dashed #FFFFFF;
border-top: 2px dashed #FFFFFF;
padding: 9px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.post blockquote:hover {
background-image:url(URL ICON COMEL COMEL );
background-position:bottom right;
background-repeat:no-repeat;
}
margin: 0em 10px;
}
.post blockquote p {
margin: .75em 0;
}


BIRU : Warna background blockquote. Cari SINI
OREN : Ketebalan border. Boleh tukar ikut suka hati
PINK : Jenis border. Boleh tukar kepada dashed / dotted / solid
MERAH : Warna border. Cari SINI
HIJAU : Tukar kepada mana mana url icon comel yang uolls jumpa. Dulu dekat Drikoti.net melambak tapi dia dah tukar url blog so dah takdak dah T__T

4. Preview and Save :)



Tutorial : Delete Suscribe to : Post (Atom)

Assalamualaikum:)
Every blog dekat bawah sekali mesti ada perkataan Suscribe to : Post (Atom). Apa function pun cek tak tahu tapi benda tu agak menyibuklah. Contohnya macam dekat bawah ni ;


Jom start :

1. Sign In Blogger >> Template >> Edit HTML >> Proceed >> Tick Expand Widget

2. Ctrl+F and cari code ni : 

<!-- Blog feed links -->


3. Nanti akan nampak code code macam ni kan ? 

<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links --><b:if cond='data:feedLinks'><div class='blog-feeds'><b:include data='feedLinks' name='feedLinksBody'/></div></b:if>


4. Delete semua yang BIRU tu



5. Preview and Save :)


Tutorial : Change Cursor

Assalamualaikum :)
Tau kan cursor tu mende. Sekarang kita nak tukar ursor yang ada dekat blog kita. Nak kaler pink ke ape ke pun bolehh. Let' start.

1. Sign In Blogger >> Layout >>  Add  Gadget >> HTML Java/Script

2. Copy code bawah :

<style type="text/css">body, a, a:hover {cursor: url(URL CURSOR), progress;}</style><a href="URL CURSOR" target="_blank" title="Cool Cursor!"><br /></a>

BIRU : Ganti dnegan mana mana URL cursor yang awak jumpa. Freebies orang boleh.

3. Paste di HMTL Java/Script

4. Save :)

Tutorial : Hover Sliding Shoutbox Fatin Style

Assalamualaikum :)
Kalau tak tau amende Hover Sliding Shoutbox tu boleh cek SINI secra live. Nampakkan yang warna pink MESSAGE dekat tepi tu?  Maknanya bila korang hover je nanti shoutbox dia keluar. Shoutbox saya panjang sangat nampak buruk tapi saya malas nak generate code cbox baru. Kalau awak guna tuto ni, kena ada cbx yang saiz dia comel lote and bukan gedabak like mine. CREDIT THIS TUTO : KAK FATIN

1. Sign In Blogger >> Layout >> Add A Gadget >> HTML JavaScript

2. Copy code bawah ni :


<style>.maintitle {border-radius: 0px 15px 15px 0px;width:10px;padding:10px;color:white;font-size:12px;height:120px;margin-top:35px;margin-left:255px;background: pink;-webkit-transition: 1.0s;-moz-transition: 1.0s;}  #isikotak {position:fixed;border:4px solid pink;width:250px;left:-265px;top:170px;height:210px;padding:4px;text-align:left;background-color:white;background-image:url(URL IMAGE);background-position: right;background-repeat:no-repeat;color:#333333;-webkit-transition: 1.0s;font-size:8pt;font-family:trebuchet ms;-moz-transition: 1.0s; } #isikotak:hover {left:1px;  }</style> <center><div id="isikotak"><div class="maintitle">m<br />e<br />s<br />s<br />a<br />g<br />e</div><div style="margin-top: -180px;"><center>CODE CBOX ANDA</div></div></center>



BIRU : Ganti dengan code cbox awak
MERAH : Ganti dengan url image yang sesuai

3. Paste di HTML Java/Script

4. Preview and Save :)



Tutorial : Status Box Hover

Assalamualaikum :)
Cek BLOG PERSONAL ni. Korang nampak kan status pink box yang Y dekat tepi tu ? Yang tu ialah Hover Status Box. Alaa yang bila korang hover je popped the status keluar. Rupa dia macam dekat bawah ni. Pinjam gambar Kak Pah yee hehe :p Tengah on guna laptop mk tu yang susah sikit ni.


This tuto credit to Kak Fatin . Tak faham just comment k :)

1. Sign In Blogger >> Layout >> Add A Gadget >> HTML Java/Script

2. Copy code bawah ni :


<style>
.y {
border-radius: 0px 15px 15px 0px;
width:10px;
padding:10px;
height:25px;
margin-top:30px;
margin-left:255px;
background: #faafbe;
color:white;
font-size:12px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
#kotakstatus {
position:fixed;
border:4px double #000000;
width:250px;
left:-265px;
top:50px;
height:100px;
padding:4px;
text-align:left;
font-size:8pt;
font-family:trebuchet ms;
background-color:white;
background-image:url(URL IMAGE);
background-repeat:no-repeat;
background-position:right;
color:#333333;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
#kotakstatus:hover {
left:1px;
}
</style>
<center><div id="kotakstatus"><div class="y">
Y</div>
<div style="margin-top: -80px;">
ISI STATUS AWAK SENDIRI</div></div></center>

MERAH : Ganti dnegan mana mana url image yang sesuai
BIRU : Tukar lah dengan status awak sendiri

3. Paste di HTML Java/Script

4. Preview and Save :)



Tutorial : Disable Right Click

Assalamualaikum :)
Untuk mengelakkan coppycatter, korang boleh guna tuto ni. So orang tak boleh lah cilok gambar ke, page source etc. Tekanlah diorang rigt click sampai lebam tangan pun tak boleh. Tapi kalau blog awak ni memang penuh tuto and freebies, kalau boleh tak payah letak lah untuk mudahkan pengguna tutobies tu nanti.

CREDIT : KAK LYSSA

1. Sign In Blogger >> Layout >> Add A Gadget >> HTML Java/Script

2. Copy code berikut :

<script language=JavaScript>
<!--

//Disable right click script III- By Renigade (renigade@mediaone.net)
//For full source code, visit http://www.dauspozi.com

var message="";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}

document.oncontextmenu=new Function("return false")
// -->
</script>

3. Paste di HTML Java/Sript

4. Save :)

Tutorial : Pasang Header di Blog

Assalamualaikum :)
Setiap blog perlulah ada Header. Taklah wajib tapi yelakan dia mcm keperluan penting lah juga. Banyak faedah boleh dapat kalau kita pasang Header ni. First kita dapat tahu tajuk blog ni, Second melambangkan tuan blog seseorang tu etc. Tau tak Header tu apa ? Header tu ialah gambar yang kita letak at top blog. Kira macam papan tanda lah untuk blog kita. Fahamkann ? Nampak tak Tutolicious besar gedabak kat atas tu dnegan burung burung tu ? Tu lah namanya Header. Sekarang ni nak ajar macam mana nak pasang di blog.  First korang sediakan sebijik Header dulu. Tak kisahlah buatan sendiri ke or pinjam Freebies. Kalau takdak meh pilih di header di SINI

1. Sign In Blogger >> Layout

  

 2. Klik Edit di Add A Gadget (Header) 



3. Satu kotak popped out, korang Tick From Your Computer >> Klik Browse >> Pilih file Header yang telah disave .




4. Preview and Save :)


Freebies : Header Part 2

Assalamualaikum :)
Dah hamik tu memandai lah CREDIT and COMMENT yeee :p

Width : 960
Height : 400



 

Tukar Background Profile Ask.fm

Assalamualaikum :)
Sesuatu tanpa background akan jadi tampak kurang menarik. SO nak tarik kannya tu kita kena lah ada backgrnd. Ni nak ajar camna nak pasang background dekat akaun ask.fm uolls semua yee. Tau kan ask.fm tu apa. First korang kena sediakan sebijik background yang ohsyemmm dulu.

1. Sign In Ask.fm >> Setting dekat atas tu.


2. Klik Design

3. Scroll ke bawah sampai nampak Upload Your Background



4. Klik Browse >> Klik file background yang telah diDownload tadi >> Open

5. Save :)

Tutorial : Tukar URL blog

Assalamualaikum :)
Satu hari nanti mesti korang bosan dengan URL korang kan ? Mesti ada rasa nak tukar. Kalau ada siapa tak tahu meh saya tolong. Tuto ni untuk Newbies ye.

1. Sign In Blogger >> Setting >> Basics

2. Korang akan nampak Publishing >> Blog Adress >> Klik Edit


3. Tukar dengan URL yang diingini

4. Save :)

Tutorial : Snow Halus dalam Blog

Assalamualaiakum :)
Cuba cek blog PERSONAL saya ni ni, dia ada snow snow kecik kecik tu kann ? Bagi saya nampak comel snow tu sebab halus je pastu dia gelek gelek ewahhh dalam blog kita kann xD Okeh tuto ni saya FULL CREDIT TO KAK IZYAN :) Blog dia sungguh ohsyem yaaa. Mohon lawat lah. Sekarang saya nak ajar macam mana nak buat.

1. Blogger >> Layout >> Add A Gadget >>HTMLJava/Script

2. Copy code bawah :

 <script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/snowstorm.js" />
<!-- now, we'll customize the snowStorm object -->
<script type="text/javascript">
snowStorm.snowColor = '#000000'; // blue-ish snow!?
snowStorm.flakesMaxActive = 999; // show more snow on screen at once
snowStorm.useTwinkleEffect = true; // let the snow flicker in and out of view
</script>

3. Paste di HTMLJava/Script

4. Preview dan Save :)

Tutorial : Buang Shadow Keliling Blog (Simple Template)

Assalamualaikum :)
Dalam tuto INI saya dah ajar cara nak transparent kan header untuk Simple Template kan ? Lepas korang transparentkan, nanti dia akan ada shadow keliling blog korang and ia nampak agak pelik. So kita nak ajar cara nak membuangnya selamanya MUAHAHAHAHHA lol sewel -..-

1. Blogger >> Template >> Edit HTML 

2. Ctrl + F search kode ni :

.content-outer {

3.  Kalau dah jumpa, korang perasan tak bawah code  .content-outer { ada banyak banyak code ? Code yang dilabel biru ni DELETE semuanya.

.content-outer {
  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);


 4. Preview and Save :) 

CREDIT TO : KAK MEERA

Tutorial : Jquery Back To Top

Assalamualaikum :)
Dalam tuto INI saya ajar cara nak tambah Button Back To Top dalam blog kan ? Yang tu back to top biasa. Maksudnya, korang klik je button tu dekat blog uolls terus popped dekat top balik secara automatik. Tapi yang Back To Top ni lain sikit, you klik dia bergolek goolek macam lif. Nak tengok demo, cek BLOG PERSONAL saya. Jum start,

1. Blogger >> Layout >> Add A Gadget >> HTML Java/Script

2.  Copy code bawah ni :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" >/***********************************************
* Scroll To Top Control script- &#169; Dynamic Drive DHTML code library(www.dynamicdrive.com)* Modified byLyssaFaizureen***********************************************/var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="URL IMAGE BACK TOP" />',
controlattrs: {offsetx:5, offsety:5},
anchorkeyword: '#top',
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport)
this.$control.css({opacity:0})
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1)
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
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()!='')
mainobj.$control.css({width:mainobj.$control.width()})
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>

NOTA KECIL : URL IMAGE BACK TO TOP tu ganti dengan url back to top korang lah yek.

3. Paste dekat kotak kosong HTML Java/Script

4. Preview and Save :)

CREDIT TO : KAK LYSSA AND AISYAH

Tutorial : Transparent kan Header (Simple Template)

Assalamualaikum :)
Mostly bloggers menggunakan Simple Template instead other template sebab Simple template lagi senang nak edit and sangat comel dan kemas to me. My BLOG PERSONAL  tu I guna Awesome Template which is macam ngek sikit, Yang blog tuto ni I use simple template. In tutorial INI, saya ajar cara nak transparentkan header. Ada sesetengah pengguna Simple Template yang nak guna transparent header. Tapi Simple Template kena tambah sedikit coding untuk transparentkan bahagian header. Kalau korang main letak header transparent dekat Simple Template trus memang tak kan jadi. Okay intro macam buduh. Jom start.

Before


After :



1. Blogger >> Template >> Edit HTML



2. Ctrl+F cari code ni :
/* Mobile
 3. Copy code di bawah ni

.header-outer, .content-inner { background-color: transparent; }
.main-outer, .tabs-outer { background-color: $(content.background.color);}
4. Paste DI ATAS code /*Mobile tadi.

5.Preview dan Save :)
 





Tutorial : Tukar Perkataan Comment to Other Words

Assalamualaikum:)
Malas nak membebel. SO I just wanna say, Kan kalau blog post korang nanti bawah tu ada tulis '0 comment' kan ? Nak tukar tak perkataan comment tu ? Sebagai contoh, tengok bawah. Dua dua gambar ni dari blog lain lain tapi sama je cara pasangnya. okus yang dilabel merah tu

Sebelum :
Selepas : 


So meh start.

1. Sign In Blogger >> Layout 


2. Klik Edit dekat Blog Post tu. Tak faham ? Rujuk bawah.


3. Satu kotak akan popped out. You edit dekat bahagian comment (yang dilabel merah tu) . Tukar perkataan 'Comment' t with anything you want.

 
4. Preview and Save ! :)

Tutorial : Buat Header Transparent

Assalamualaikum :)
Setelah beberapa jam, akhirnya siap juga proses design header Kak Pah kesayangan ku ini :) Kali ni, saya nak ajar bagaimana nak buat header transparent guna Pixlr. Saya takdak Photoshop, so saya guna Pixlr. Ni senang, takyah install install macam Photoshop. Dia ada online dah. Nak tengok contoh header transparent macam mana awak tengok blog SAYA and IRIS aka KAK PAH xD Let's get started.

Klik setiap gambar untuk tumbesaran Enfagrow lol :p

1. Klik link ni >>  http://pixlr.com/

2. Klik Open Pixlr Editor (Advanced)

3. Klik Open Image from Computer >> Pilih header  yang nak ditransparentkan



4. Kalau header dah keluar, biarkan dulu. Now, klik File >> New Image.


5. Satu kotak akan popped out.    Width and Height mesti sama dengan header yang korang dah create tadi. WAJIB Tick TRANSPARENT.


Satu image yang sama saiz dengan header korang akan keluar. Cuma background dia kotak kotak kecik kelabu putih macam chessboard. Maknanya transparent.

6. Toolbox >> Wand Tool


7. Halakan Wand Tool tu ke background putih header korang and KLIK ! Garis putus-putus akan keluar di keliling header tu >> Right-Click >> Invert Selection (Rujuk gambar kalau tak paham apa aku meraban ni) 


8. File >> Copy / Ctrl+C



9. Klik Image transparent tadi >> File >> Paste / Ctrl+V


10. Klik Ctrl +D untuk hilangkan garis putus-putus tu.

11. File >> Save As >> Akan popped out satu kotak ( MESTI SAVE AS PNG ) >> OK

12. Siap ! Bolehlah pasnag kat blog hangpas semua nanti k lol :3







Tutorial : Donwload font comel for Window XP (Mozilla Firefox)

Assalamualaikum :)
Penggunaan font yang sesuai dan comel juga merupakan faktor yang penting untuk mencomelkan blog. I admit, fonr yang Photoscap, Photoshop, Microsoft Word bagi automatically tu semua tak comel, tak kiut and tak sesuai untuk penampilan blog korang yang kawai tu. Sebelum korang install font ni, korang kena ada WINRAR. Nanti ada masa saya buat tuto tu. So meh sini saya nak ajar macam mana nak download font yang comel dan kawaii. Tetapi saya guna MOZILLA FIREFOX. Sorrylah, takleh kalau korang guna GOOGLE CHROME. Sebab format dia lain. Nanti konpius. Korang boleh gunakan font tersebut untuk HEADER, IMAGE SIDEBAR TITLE, FOOTER etc. Jom start !

1. Klik link ni >> http://www.dafont.com/

2. Pilih font mana yang korang suka and klik Download dekat tepi dia.



 3. Nanti dia akan keluar kotak window Download kan ? Macam ni rupa dia :


4. Right Click folder font yang dah didownload tu >> Open Containing Folder


5. Satu folder Download akan popped out >> Klik Folder Font korang 


6.  Folder Font korang akan keluar. Rupa dia macam dekat bawah ni.


7. Next, drag Folder yang dilabel merah ke Desktop. Faham kan ?


8. Start >> Control Panel 


9. Klik Fonts



 10. Nanti akan keluar file banyak banyak kan ? Tulah jenis font yang ada kat komputer korang. Now just drag folder font pilihan korang yang dekat Desktop tadi ke folder Fonts.

11. Siap ! Now bolehlah korang test dekat Photoscape tuu.

Tutorial : Centerkan Header

Assalamualaikum :)
Kebiasaanya kalau kita baru buat blog, headernya akan senget ke tepi. Kalau boleh centerkan supaya nampak lagi seimbang, kemas and mantop. Baru ada orang terdampar di blog awak berjam lamanya tanpa jemu kehkeh :'p Tuto credit to Faqihah

1. Dashboard >> Template >> Edit HTML

 

2. Ctrl+F, cari code ni :

 /* Content  

3. Kalau dha jumpa, copy code yang ni pula :

.Header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
4.  Paste kan code tu DI ATAS code  /* Content tadi.

5. Preview and Save :) !

Tutorial : Centerkan Post Title

Assalamualaikum :)
Tuto ini direquest oleh Kak Pah Jual Pau yang pemess tu lagi xD Jemputlah tengok blog dia~ Btw, biasanya kan kalau korang first buat blog, korang akan perasan Post Tile korang ke tepi macam saya punya blog ni. Bagi saya kalau post title dekat tengah lagi kemas and comel :) Tuto dicredit kepada Kak hafizah Kalau tak faham just cmmnt.


1. Dashboard >> Template >> Edit HTML >> Tick Expand Widget (Kalau tak tahu macam mana nak Tick Expand Widget boleh rujuk SINI )

 


2. Ctrl+F, cari code ni :

h3.post-title {  

ATAU

.post-title {

2. Copy code ni :

text-align:center;

3. Paste DI BAWAH code  h3.post-title {  ATAU .post-title {   tadi

4. Save !

Tutorial : Back To Top

Assalamualaikum :)
This tuto credit to Ainaa Mania yang ohsem lagi comel. Back to top tu macam, awak dah scroll blog awak sampai bawah sekali. Tapi awak dah malas mengalahkan tenuk *JK JK* nak scroll ke atas balik. So nak selesaikan masalah ini ialah tambah button back to top. Banyak faedahnya. Orang tekan je button tu zupp awak dah sampai atas balik secara automatik. Tuto ni sesuai untuk blog yang ada banyak post dalam satu page.

1.  Copy code ni

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

2. Dashboard >> Layout >> Add A Gadget >> HTML Java/Script

3. Paste kan code tu.

4. Gantikan URL GAMBAR dengan mana mana gambar back to top yang awak jumpa. Maaf saya takdak freebies. Maybe as soon to be ada. Awak boleh guna freebies dari blog Ainaa, Qihah, Lyssa and etc.

5. Save :) !

Tutorial : Button Follow and Dashboard Ala-ala Tumblr

Assalamualaikum :)
This tuto credit to peminat tegar syaa, Kak Pah Jual Pau XD K perasan kah kah. Back to the topic. Button Fllow and Dashboard ala Tumblr tu macam ni :

Gambar Original k. Dari blog personal aku sendiri.

1. Copy code bawah ni.

<div style="display:scroll; position:fixed; top:5px; right:90px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID= ID BLOG AWAK" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://assets.tumblr.com/images/iframe_follow_alpha.png?6" /></a> <div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="Dashboard !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?6" /></a></div></div>

Gantikan  BIRU tu dengan Blog ID awak. Tak tau mana nak cari BLOG ID ? Rujuk tuto INI               

2. Dashboard >> Dropdown Menu, Layout >> Add A Gadget >> HTML Java/Script

3. Paste kan code tu.

4. Save ! 

 

Tutorial : Cari Blog ID

Assalamualaikum :)
Sesetengah tuto akan memerlukan BLOG ID. Kalau anda semua tak tahu mana nak cari BLOG ID korang sendiri, meh syaa ajar. Lain blog, lain BLOG ID nya. Kira macam nombor IC lahh.

1. Dashboard >> Klik Nama Blog >> Tengok dekat URL. Dalam URL tu ada nombor BLOG ID korang.


2. Nombor yang dilabel BIRU tu lah blog ID nyaa. Yang ni BLOG ID syaa. Awak punya lain nombornya.

http://www.blogger.com/blogger.g?blogID=6702227527690625229#allposts


\Bye/

Tutorial : Cara Guna Blockquote

Assalamualaikum :)
Dalam tuto yang INI, saya dah ajar acana nak buat blockquote kan ? Kalau ada yang tak tahu macam mana, just rujuk jeee tuto ni. Moga awak faham.

1. Dashboard >> Posts >> New Post


2. Tulis apa apa perkataan yang nak diblockquotekan. Then HIGHLIGHT them


3. Nampar tak toolbar banyak banyak tu ? Klik button yang dilebal merah tu :



4. And wallah ! Tekan Update. And taraaaaaaa hasilnya