Memaparkan catatan dengan label Tutorial Blog. Papar semua catatan
Memaparkan catatan dengan label Tutorial Blog. Papar semua catatan

Tutorial 4: Full Screen Tabs Dekat Blog

 


Tutorial kali ni atas request daripada Saudari Kyratulamira pemilik blog readwithkai.

Baiklah sebelum kita terus ke tutorial. Lebih elok rasanya Nadia bagi penerangan terlebih dahulu, template blogger mana yang boleh buat full screen tabs. Sebab memandangkan kita menggunakan 100% blogger punya ada beberapa element yang tetap kita tak boleh nak ubah.

*Penafian : Tutorial ini hanyalah berdasarkan kajian Nadia sahaja, Mungkin ada beberapa element Nadia terlepas pandang, Mana yang ada pendapat amat digalakkan berkongsi bersama. Selain itu, boleh terus cuba dulu ke tutorial sekiranya gagal boleh baca (Template apa yang sesuai) [Sebab code kita berbeza so banyak perkara kena geledah].



Mari kita mulakan template apa yang sesuai untuk menggunakan Full Screen Tabs.



1. Watermark Template (Navigator, Birds, and Flower Only)




2. Awesome Inc. Template (All)




3. Simple Blog Template (Simple Wide Only) [Recommended]



Selesai memberi tahu template apa yang sesuai. Maka mari kita ke tutorial.



TUTORIAL FULL SCREEN TABS DEKAT BLOG


1. Pergi ke Blogger  >> Themes >> Edit HTML

Tekan tiga titik dan pilih Edit HTML


2. Tekan dulu bahagian code dan CTRL+F >> Search perkataan Tabs sehingga jumpa seperti di dalam gambar


3. Copy Code Dibawah

.tabs-outer {
  overflowvisible;
  position:fixed;
  width:100%;
  z-index9999
  top:0;
  background-color:#ffe6e6;  
}



4. Paste kan di bawah Tabs (yang kita search tadi tu)


5. Masa untuk edit code

.tabs-outer {
  overflowvisible;
  position:fixed;
  width:100%;
  z-index9999
  top:0;
  background-color:#ffe6e6;  
}



a. Overflow : kekalkan visible (terutama yang ada macam anak anak dekat tabs tu)

b. position:  Ada dua;

1b. fixed : Selalu code ni untuk kita kekalkan dia dekat atas atau di bawah sekali dan akan ikut kita setiap kali kita scroll. Sebagai contoh seperti blog Nadia. Kalau nak fixed dekat top kekalkan top:0; , kalau nak berada di bawah tukar top:0; kepada bottom:0;


2b. relative:
  • Kalau nak position seperti dibawah header dan di situ sahaja. Tukarkan position fixed --> relative dan buang top/bottom.

  • Kalau nak dia sentiasa dekat top tapi tak ikut kita bila scroll perlu tambah bottom:300px; [300px ni kena try sampai dapat betul betul top kat atas tu, sebab kekadang saiz header setiap blog berbeza, so maksudnya try lah 250, 300, 301 ,310 sampai berjaya.

  • Kalau nak sentiasa bottom kena buat top:300px [pun sama try lah sampai berjaya, Kalau tak faham try je buat buat nanti tahu lah apa perbezaan nya okay?] 


c. z-index : Yang ni untuk kita pastikan Tabs berada di bawah element lain atau di atas lain.

  • Contoh : Kalau korang scroll ke bawah page Nadia ni, Tabs sentiasa di atas je kan ? Kalau nak macam ni kekalkan je z-index:9999

  • Kalau nak dia berada di bawah element lain tukarkan z-index:-1;


d. background-color: Yang ni macam biasa cari warna dekat HTML Color Code dan copy code di kotak HEX



6. Tekan Preview, Sudah puas ? Tekan Save.


 Contoh code untuk position yang Nadia cakap supaya faham


1. Position Fixed Top 

.tabs-outer {
  overflowvisible;
  position:fixed;
  width:100%;
  z-index9999
  top:0;
  background-color:#ffe6e6;  
}


2. Position Fixed Bottom

.tabs-outer {
  overflowvisible;
  position:fixed;
  width:100%;
  z-index9999
  bottom:0;
  background-color:#ffe6e6;  
}



3. Position Relative kekal di position asal (Contoh: Bawah header [ikut dekat layout mana awak letak gadget tabs]

.tabs-outer {
  overflowvisible;
  position:relative;
  width:100%;
  z-index9999;
  background-color:#ffe6e6;  
}



4. Postion Relative tapi nak dia dekat top (Tak ikut bila scroll)

.tabs-outer {
  overflowvisible;
  position:fixed;
  width:100%;
  z-index9999
  bottom:300px;
  background-color:#ffe6e6;  
}
[Kena tukar bottom tu ikut kesusaian ]



5. Position Relative tapi nak dia dekat bottom  (tak ikut bila scroll)

.tabs-outer {
  overflowvisible;
  position:fixed;
  width:100%;
  z-index9999
  top:500px;
  background-color:#ffe6e6;  
}
[Tukar Bottom Ikut Kesusaian]


Nadia Harap tutorial ni membantu saudari Kai dan juga rakan-rakan yang lain okay.

Seperti biasa jangan lupa creditkan sekiranya menggunakan tutorial Nadia ini.
Boleh lihat Cara Credit

SELAMAT MENCUBA

Tutorial 3: Cara Letak CBOX di Blog



 Assalamualaikum & Hi semua!

Hari ini Nadia nak tunaikan soalan yang dituju oleh rakan blogger iaitu tutorial letak cbox. Cbox ni bagi Nadia penting juga untuk blog sebab kadang kadang ada cbox ni mudahkan lah kita nak tukar link, boleh lah kunjung mengunjung ke blog lain gitu ! Jadi tanpa melengahkan masa, Mari kita mula!


Tutorial Buat CBOX:

1. Pergi ke CBOX, bagi yang tiada account sila sign up ya!

2. Tekan MyCboxes dan create new cbox.

3. Isi Maklumat di Form (Cbox name, website, theme) dan tekan Create my Cbox!

Tekan MyCboxes dan Create New Cbox


Isi maklumt dan tekan button

4.  Tekan Look  & Feel dan tekan layout untuk korang ubah beberapa perkara seperti bahasa, atau chat baru nak berada diatas atau bawah. 

5. Tekan theme untuk ubah colour ikut kesukaan dan citarasa masing masing

6. Lepas dah siap kesemua design boleh tekan publish (sebelah look & feel). Copy code yang disediakan dan paste di sidebar anda, (Kat sini dia ada bagi cara cara letak di blog)


Copy Code Disediakan. Pilih inline tau supaya mudah faham codenya

P/s: Dekat code tu ada width dengan height. Yang ni kena cuba dekat sidebar korang semua saiz apa yang sesuai. main main je ubah sampai sesuai. Just ubah nombor je. Macam 100% ubah je 350 or anything okay !


Selamat Mencuba! Nadia Harap Nadia membantu okay :)

p/s: any soalan boleh tanya ye dan kalau tutorial ini membantu pun jangan lupa comment!

Pada siapa yang menggunakan tutorial blog dari Nadia, diminta untuk credit ya! Boleh lihat di Cara Untuk Letak Credit 


Tutorial 2: Cara Buat Profile Sendiri di Blog



Assalamualaikum & Hi

Untuk bulan Jun punya tutorial, memandangkan ada kawan request untuk buat profile macam Nadia buat ni. Jadi kita kedapankan terus tutorial bahagian ini.Ceh. Buat profile macam ni Nadia hanya menggunakan HTML dan CSS. Eh apa tu ? Language untuk website . Jangan pening-pening, Nadia akan ajar step by step okay !

CARA DAPATKAN URL GAMBAR

Baiklah sebelum kita mulakan letak profile sendiri dalam blog kita, kita kena ada dulu url gambar, gambar tak boleh upload upload gitu je,

1. Pergi ke imgbb

2. Upload gambar dan pilih Don't Auto delete



3. Pilih HTML full linked dan copy semua code dan paste ke tempat lain dahulu.



4. Bila dah paste ke tempat lain tu, padam yang tak berkenaan. Simpan yang Nadia highlight kan ni.

<a href="https://ibb.co/2jQdccH">
<img src="https://i.ibb.co/BgxBTTF/b6c4ba8033ba50e9bfcc19958becdbdfba8d0172r1-1000-1250v2-hq.jpg"
alt="b6c4ba8033ba50e9bfcc19958becdbdfba8d0172r1-1000-1250v2-hq" border="0"></a>
Copy Code Warna Hijau SAHAJA, yang lain boleh padam

Sekian untuk part ini.


EDIT CODE


1. copy semua code bawah ini terlebih dahulu dan letak dekat mana mana (notepad, words dan apa apa sahaja platform sebab kita nak edit )

<!--Url Image : Bahagian letak gambar -->
    <center> <img  style="border: solid 2px #000000; border-radius:50%;" src="URL IMAGE"
height ="90" width="50" ></center>
    <!--Nama dan ayat ayat yang anda nak letak-->
<center><p><b>Nadia Jamhari</b><br>
Ayat anda<br>
Ayat Anda<br>
Ayat Anda<br></p></center>

<!--Contact ikut apa yang awak nak letak-->
<center><b>Contact me:</b></center><br />
<center><a href="url profile twitter"><img height="30"
            src="url image " width="30"></a> 
        <a href="url profile instagram"><img height="30"
            src="url image" width="30"></a>
        <a href="mailto: email address"><img  height="30"
            src="url image" width="30"></a></center><br>

2. Edit

a.  URL IMAGE : tukar dengan url yang dah belajar dekat atas tadi dan gambar icon social media comel macam Nadia boleh cari di flat icon.

b.  CODE WARNA : yang ni maksudnya warna border . Code warna boleh tengok di : HTML Color Code dan ambil yang kat kotak HEX.

c. URL SOCIAL MEDIA : yang ni tukar kepada link social media awak awak semua ye (ubah warna kuning sahaja).

d.  border-radius:50%;:untuk bahagian ini ialah menghasilkan border bentuk bulat macam Nadia punya. Bagi yang taknak bulat boleh padam je code ni. Bagi yang nak, boleh guna. Tetapi ada dua benda kena tahu.
  • Tak semua gambar sesuai dengan radius 50%. 
  • Kalau tak sesuai sila gantikan 50% dengan 1px dan ke atas (Maknanya korang boleh try sampai nombor mana sesuai okay, Sellalu start dengan 5px ke atas)           
e. okay ayat anda replace yang awak nak, kalau nak tambah pastikan ending dia <br> (maksud dia breakline - new line)

f. Bahagian height and width awak semua boleh tukar ikut kesesuai (Cuba sehingga berjaya)


Extra : sekiranya macam taknak lah letak icon untuk social media boleh padam code

<img height="30" src="url image" width="30">

dan gantikan dengan perkataan "Twitter, Instagram, Facebook dan sebagainya"


CARA LETAK KAN CODE DALAM BLOG




1. Buka blogger dan pergi ke layout.


2. Tekan Add a Gadget dan cari HTML/JavaScript 


3. Tulis tittle dan paste kan code yang telah diedit pada bahagian content


Selamat Mencuba!


Kalau anda cuba sila comment tau !
Kalau ada sebarang masalah pun boleh comment, InsyaAllah Nadia akan cuba tolong.
Sekiranya ada sebarang permintaan boleh bagitahu dekat comment! 


Pada siapa yang menggunakan tutorial blog dari Nadia, diminta untuk credit ya! Boleh lihat di Cara Untuk Letak Credit 

Tutorial 1: Cara Tukar Template




Intro :

Ok baiklah Nadia dah lama nak share dekat mana-mana blogger yang baru sahaja jejak ke dunia blogger dan agak tak berapa mahir dan kurang faham macam mana edit blog dari segi layout, themes, or nak guna beberapa features yang blogger sendiri dah sediakan untuk mudahkan kita. Untuk introduction yang panjang boleh tekan tutorial page ok :)
 
Jom kita start !

Step:
 
1. Pergi dekat blogger dan pergi ke bahagian theme. Sila check dekat bahagian kiri korang dia ada tulis theme.

2. Kemudian korang boleh scroll ada beberapa theme macam Contempo, Soho, Emporio, Notable dan sebagainya. Korang boleh pilih yang mana menawan hati. Tapi kalau nak ikut next tutorial Nadia bagi permulaan ni disarakan untuk pilih template Simple, Picture Window, Awesome Inc, Ethereal, Travel sebab konsep awal ni Nadia fokuskan kepada simple view dan mempunyai tema warna khas gitu.


3. Lepas korang dah pilih, terus tekan Apply. Dan tadaaa! new look akan terjadi

click apply

4. Sementara tunggu next tutorial korang boleh adjust beberapa perkara dekat customize. Customize ada dekat bahagian theme juga.


Click customize


Selamat Mencantikkan Blog !