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~ 

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  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  Template  Customise  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  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  Layout  Navbar  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  Template  Customise  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  Layout  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  Template  Edit HTML

Firstly korang akan jumpa coading macam ni. Don't worry. Let's make it simple. Relax ikut je step by step ok. 

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  Template  Customise  Advanced  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. 

Hopefully you're enjoy it!.

Moga Allah redha dan kita semua memperoleh manfaat.

Ma'salamah.

Illaliqa'

p/s: 1 week left. 

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

                                                                 Allahhumma Solli `Ala Muhammad .