fitri1986

Follo Molo (Become My Stalker And Ask Me To Stalk Back....I prefer a Yandere...)

Bored?You can play around with these line of colours for a while.....it is 100times better than PS4...because I dont have one....

23 September 2010

Blog Tutorial:Pelbagai Pilihan Latar Belakang dan Header

Hai,tutorial yang ni rasanya agak susah sikit,tapi hasil dia sangat menarik.Ok apa-apa hal pun sebelum korang mencuba,adalah dinasihatkan backup dulu template korang.Okla,tutorial ni akan membolehkan korang mengubah latar belakang blog dan juga header blog korang.Ok seperti yang korang perasan pada blog ni,korang boleh ubah latar belakang,jadi nila cara camna aku buat,dngan tambahan,ubah sekali header korang juga.

Pada mana-mana blogger template,korang akan jumpa kod seperti ini,untuk mengubah imej background dan headers

Untuk Imej Background

body {
color: #fff;
background: url('http://ANY_WEBSITE.com/DzSPJQXgCBw/BackGround_Image.png') repeat;
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
...
...
...
...
}

Dan Untuk Imej Header

#header h1 {
background-image:url(http://i38.tinypic.com/HEADER_IMAGE.jpg);
color: #fff;
font: Trebuchet MS;
text-align: left;
}

Secara keseluruhannya elemen ni ("body dan "header h1")digunakan sekali saja.Jadi korang takde pilihan untuk menukarkan antara bakckground yang berbeza dan imej header.

Tapi melalui tutorial ni,kita akan letak lebih dari satu background atau elemen header pada template,walaupun pada apa masa,hanya satu background imej dan/atau imej header yang dipaparkan

Untuk meletakkan elemen yang berbeza,fail .css berasingan akan digunakan.

Sekarang,ikut arahan ni untuk meletakkan pelbagai background dan header untuk blog korang:

LANGKAH #1:
Download semua file CSS ni:
style_1.css (for background 1)
style_2.css (for background 2)
style_3.css (for background 3)

style_4.css (for header 1)
style_5.css (for header 2)

Sebagai fail zipped (dari ziddu)

Dan download StylesheetToggle.js (Klik kanan dan "save target as"/"save link as")


LANGKAH #2:
Edit fail css,untuk meletakkan imej korang.Korang boleh guna sebanyak mana fail CSS yang korang nak.Utk buat lebih bnyk fail css,cuma perlu buat new text files dan save sebagai .css bukannya .txt

Dalam stylesheets 1-3,ubahkan url imej,camni:

body {
background: url(http://DIRECT_LINK_TO_ANY_IMAGE.jpg) repeat;
color: #333;
}

Dalam stylesheets 4-5,ubah url imej serta tinggi dan lebar camni:

#header-wrapper {
width:800px;
height: 200px;
background: url(http://i38.tinypic.com/ivyhdc.jpg) no-repeat;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Ubah kod yang dikalerkan merah.Save fail

NOTA:Tak perlu nak guna fail yang berbeza untuk header dan imej background.Korang boleh guna gabungan fail tersebut.Jadi pada stylesheets 1-3 bersama dengan imej background,korang boleh silih berganti guna 3 imej header yang berbeza .Sama juga dengan stylesheet 4-5 bersama dengan imej header,korang boleh masukkan kod untuk imej background.

LANGKAH #3:
Upload kesemua fail korang ke akaun MyDataNest/(perlu register).
Copy DIRECT LINKS fail tersebut.

NOTA:Dekat MyDataNest, pastikan folder yang korang letak fail tersebut disetkan sebagai "hidden dan bukan sebagai "private".

LANGKAH #4:
Log in ke Blogger, pergi ke Layout -> Edit HTML
dan cari (CTRL+F) kod ni: </head>  

Dan kat atas/sebelum kod tu,pastekan kod ni:

<link href='http://mydatanest.com/files/............../Style_1.css' media='screen' rel='alternate stylesheet' title='styles1' type='text/css'/>
<link href='http://mydatanest.com/files/............../Style_2.css' media='screen' rel='alternate stylesheet' title='styles2' type='text/css'/>
<link href='http://mydatanest.com/files/............../Style_3.css' media='screen' rel='alternate stylesheet' title='styles3' type='text/css'/>
<link href='http://mydatanest.com/files/............../Style_4.css' media='screen' rel='alternate stylesheet' title='styles4' type='text/css'/>
<link href='http://mydatanest.com/files/............../Style_5.css' media='screen' rel='alternate stylesheet' title='styles5' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://mydatanest.com/files/............../stylesheetToggle.js' type='text/javascript'/>
<script type='text/javascript'>
$(function()
{
// Call stylesheet init so that all stylesheet changing functions
// will work.
$.stylesheetInit();

// This code loops through the stylesheets when you click the link with
// an ID of &quot;toggler&quot; below.
$(&#39;#toggler&#39;).bind(
&#39;click&#39;,
function(e)
{
$.stylesheetToggle();
return false;
}
);

// When one of the styleswitch links is clicked then switch the stylesheet to
// the one matching the value of that links rel attribute.
$(&#39;.styleswitch&#39;).bind(
&#39;click&#39;,
function(e)
{
$.stylesheetSwitch(this.getAttribute(&#39;rel&#39;));
return false;
}
);
}
);
</script>

Gantikan links berwarna merah diatas,dengan DIRECT LINKS semasa di LANGKAH#3.

Korang tak perlu guna 5 fail css,buang atau tambah kod di LANGKAH#4 bergantung pada fail css korang.

Save template.

LANGKAH#5:
Pergi ke Layout -> Page Elements dan klik "Add A Gadget" dan pilih "HTML/JavaScript".

Dan pastekan kod ni kedalamnya

<h3>Try Changing HEADER of this blog!</h3>
<center>
<a href="http://mydatanest.com/files/................/serversideSwitch.html?style=style_4" class="styleswitch" rel="styles4"><img width="200" src="http://i34.tinypic.com/24vmrv8.jpg"/></a>
<br/>
<a href="http://mydatanest.com/files/................/serversideSwitch.html?style=style_5" class="styleswitch" rel="styles5"><img width="200" src="http://i38.tinypic.com/ivyhdc.jpg"/></a>
</center>
<h3>Choose a different Background:</h3>
<center>
<a href="http://mydatanest.com/files/................/serversideSwitch.html?style=style_1" class="styleswitch" rel="styles1"><img width="100" src="http://i34.tinypic.com/28vsgef.jpg"/></a>
<br/>
<a href="http://mydatanest.com/files/................/serversideSwitch.html?style=style_2" class="styleswitch" rel="styles2"><img width="100" src="http://i33.tinypic.com/282j7ts.jpg"/></a>
<br/>
<a href="http://mydatanest.com/files/................/serversideSwitch.html?style=style_3" class="styleswitch" rel="styles3"><img width="100" src="http://i35.tinypic.com/2d12u08.jpg"/></a>
</center>

Ubah link dalam kaler merah dengan DIRECT LINK ke fail(serversideSwitch.html).
Dan gunakan tag "rel" yang sama dalam kod diatas sebagai tag "title" yang digunakan dalam LANGKAH#4.



-
Label:
RELATED POSTS

2 ulasan

avatar
shininghepiness=)
Khamis, September 23, 2010 5:32:00 PG delete

aideal....fafau nak wat tapi takut plok lembab sbb pki dual core je...satu lagi fafau nk msk kan nuffnang pon still xlepas2 lagi...huhu

Reply
avatar
Aideal Fitri Admin
Khamis, September 23, 2010 9:11:00 PG delete

@shininghepiness=)
err,rasanya x lembab.Back up dulu template sekiranya ingin mencuba.Yang nuffnang tu,dia ada bagi arahan camna nak masukkan.Good luck^^

Reply

Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.

Langgan: Catat Ulasan (Atom)

At the post page,this banner can be spin around ;)

Blog: Aideal Fitri | 1986