Tutorial macam mana cara basic design blog.

Bismillahirrahmanirrahim.
Assalamualaikum and hi beloved readers.

Ada adik syera ni mintak tolong ajarkan cara nak design blog.

So, entri kali ni miza nak share tips and tutorial macam mana nak design blog menggunakan simple template macam miza guna sekarang ni. I pengguna setia simple template tau. Cia cia cia~ :XD:

Hopefully dapat bantu blogger newbie atau sesiapa yang tercari-cari macam mana nak mulakan design blog. Boleh la uolls design sendiri ikut cita rasa tersendiri en. Yeayy!

Sebelum tu, ini adalah 4 benda wajib korang perlu ada dalam blog korang. Sebabnya apa? InsyaAllah miza akan terangkan kat entry lain.

1. Serba ringkas pasal diri korang.
2. Kotak followers.
3. Shout box.
4. Blog archieve.

Now let's we start the tutorial from begining with basmallah.

1. Pilih jenis template.
Blogger dashboard emoticon08 Template

Bagi siapa yang nak design blog dia macam blog miza ni, miza sarankan pilih simple template yang miza bulatkan tu.

2. Pilih layout & upload background blog.
Blogger dashboard emoticon08 Template emoticon08 Customise emoticon08 Layout

Layout ni fungsinya untuk menunjukkan kedudukan post, sidebar, serta footer. Macam miza, miza lebih suka satu ruang sidebar dan satu ruang footer untuk kelihatan kemas. Tapi ikut cita rasa masing-masing nak bagai mana. hee.

Untuk bahagian customise ni, sekiranya korang dah puas hati dengan pilihan korang. Click button 'Apply to Blog'. Untuk exit dari sini click 'Back to Blogger'. Preview untuk customise ni akan dipaparkan kat dalam ni juga.

Then, cara nak upload background untuk blog seperti di bawah ni. Korang boleh dapatkan background yang korang nak dengan search di google 'Freebies background...'
Template emoticon08 Background

Tadaaaa!!! ini lah rupa blog selepas dah buat step 1 & 2.

3. Cara buang navbar.
Kalau korang perasan kat atas sekali ada navbar transparent tu kan? Ala kalau nak pergi dashboard, korang type je kat bahagian https:// tu 'blogger.com/home'. Automatic akan ke blog dashboard korang. So, macam mana nak buang navbar tu?
Dashboard emoticon08 Layout emoticon08 Navbar emoticon08 Click button 'off' and save it.

Tadaaa!! berbezakan dengan yang tadi?

4. Cara nak upload & setting header.
Ok sebelum tu, masa nak design header untuk blog.. korang disarankan agar design ikut size entire blog korang dengan cara di bawah ni. Macam miza punya blog, miza gunakan entire blog 1110px. Manakala untuk sidebar miza gunakan 300px.
Dashboard emoticon08 Template emoticon08 Customise emoticon08 Adjust widths

Adjust widths ni fungsi dia untuk melebarkan post dan sidebar blog korang. Jadinya semasa design header miza pilih Width 1110 pixels dan untuk Height ikut kesesuian.

Cara nak upload header,
Dashboard emoticon08 Layout emoticon08 Header

Makesure bahagian placement korang tick 'Instead of title and description' supaya blog title and kalau korang ada buat blog description, dua benda ni akan ter-hide.

Sekiranya ni kali pertama korang upload header, mesti header korang ketepi macm ni kan? Macam mana nak centerkan header? Ok ikut step seterusnya.


4.1 Centerkan header
Dashboard emoticon08 Template emoticon08 Edit HTML

Firstly korang akan jumpa coading macam ni. Don't worry. Let's make it simple. Relax ikut je step by step ok. blogger-emoticon.blogspot.com
Korang nampakkan <b:skin><![CDATA[/*. Click no '13' tu. Nanti kalau nak edit blog yang perlu menggunakan coading, just adjust bahagian ni je.

cara nak centerkan header, cari code bawah ni dengan click dulu pada kawasan coading. Then tekan button ctrl + f pada keyboard laptop korang.
/* Content 
Lepas tu copy code bawah ni. Kemudian paste kan kat atas code korang cari tadi tu. Contoh macam gambar bawah ni..
.Header img {margin-$startSide: auto;margin-$endSide: auto;}
Tadaaaa!!! Now header korang dah center. Yeayy alhamdulillah.

4.2 Cara nak buang background putih belakang header.
Cara yang sama dalam step 4.1 tu. Cuma kali ni cari code bawah ni pula,
/* Header
Kemudian, copy code bawah ni dan paste kan kat atas code yang dicari tadi. Contoh macam gambar bawah ni.
.header-outer, .content-inner { background-color: transparent;}.main-outer, .tabs-outer { background-color: $(content.background.color);}.tabs-inner .widget ul { margin: 0px -15px;}.content-inner{padding: 0px;}
Tadaaa!!! See dah tak ada background putih belakang header kita. Terus nampak background blog kita. Alhamdulillah.

5. Cara nak buang shadow keliling blog.
Maaf sebab step 4.2 dah buang shadow dulu. Sebab masa edit blog tu terbuat step ke-5 ni dulu. Hahaha. But never mind. I'll rearrange balik susunan step cara nak design blog ni supaya mudah bagi korang faham.

So, siapa yang tak nak buang shadow.. boleh biarkan atau boleh edit color shadow korang. Godek-godek la sikit coding tu. Hee. Kepada yang nak buang shadow kat keliling blog boleh ikut step ni.

Step yang sama korang kena buat macam kat step 4.1 tu. Kali ni cari code
.content-outer {
Lepas dah jumpa code tu, select code bawah .content-outer { macam dalam gambar bawah ni and delete.

Hasilnya nanti sama dengan step 4.2. Mean keliling body blog korang dah tak ada shadow.

6. Cara nak buang separation line pada body blog.
Dashboard emoticon08 Template emoticon08 Customise emoticon08 Advanced emoticon08 Accents 


Tukarkan 'Separator Line Colour' & 'Tabs Border Colour' kepada transparent.

Yeayyy!! Alhamdulillah siap pun. Bawah ni adalah contoh blog yang dah siap di edit. Hihihi.


Miza harap sangat perkongsian kali dapat bantu korang yang memerlukan. Entri ni miza hanya ajarkan basic untuk edit blog. Korang boleh je search kat google any tutorial untuk makin cantikkan blog korang.

Kalau nak mintak miza buatkan tutorial boleh je. Sekiranya ada sebarang persoalan atau step yang tak jelas boleh diajukan kat comment bawah ni. InsyaAllah miza sedia membantu. blogger-emoticon.blogspot.com

Hopefully you're enjoy it!.
Moga Allah redha dan kita semua memperoleh manfaat.

Ma'salamah.
Illaliqa'
p/s: 1 week left. :sadder:

Maafkan miza. Doakan miza. InsyaAllah ada rezeki kita jumpe lagi. Wassalam.

                                                                 Allahhumma Solli `Ala Muhammad .

8 comments:

  1. nice one miza!
    memang bagus entry nie bagi sesiapa yg baru nak design blog sendiri. :)

    ReplyDelete
    Replies
    1. Jazakillahu khairan jaza BV.
      Tu la memandangkan dulu susah payah nak design macam ni satu per satu. So why not kita combine-kan and then share je ilmu yang kita ada dengan orang lain. Hee ^_^

      Delete
  2. lama dh x edit blog pasni nk edit blog kena tgok tuto awak la ya =)

    ReplyDelete
  3. padatnyer awak. thumbs up for the tutorial. (y)

    ReplyDelete
  4. pergh~ hebatnya miza~ bagus2 ajar adik2 blogger yg lain

    ReplyDelete
  5. Nak tanye bila kita share blog ke fb kenapa gambar blog header yg keluar.
    Macam mana tak nak bagi gambar blog header keluar tapai nak bagi gambar dalam post yg keluar

    ReplyDelete
    Replies
    1. Maaf sangat baru balas comment awak. Masa nak post tu dia ada keluar gambar tu kan. Kat gambar tu ada symbol pangkah 'x' kat sebelah kanan atas. Nanti bila awak tekan pangkah tu hanya akan keluar link je bila awak post :)

      Delete

Just leave your comment, suggestion, or anythings.
InsyaAllah i will reply it.


Jazakumullahu khairan kathira.
Moga memperoleh manfaat. Moga Allah redha :)) ♥