Langkau ke kandungan utama

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

Ulasan

Catat Ulasan

Segala komen-komen yang telah disiarkan adalah tanggungjawab sepenuhnya ke atas penulis itu sendiri. Pemilik blog tidak akan bertanggungjawab jika berlaku sebarang permasalahan berkaitan dengan komen yang disiarkan. Mana-mana komen yang berbentuk iklan, mengandungi link/url, mengandungi kata-kata yang tidak menyenangkan tidak akan disiarkan. Harap Maklum.

Sekian Terima kasih.