Showing posts with the label TutorialShow all
Complete List of HTML Meta Tags

Definition and Usage The < meta > tag provides metadata about the HTML document. ... Meta elements are typically used to specify page description , keywords , author of the document, last modified, and other meta…

Google Custom Search Engine di Blog

Google Custom Search Engine di Blog adalah widget kotak carian dalam sesebuah laman contohnya blog. Ianya membantu memudahkan para pengunjung blog atau website untuk mencari apa yang mereka perlukan dalam blog kita. …

TUTORIAL : Typewriter

Typewriter? Apa tu? Mesti korang tertanya-tanya kan? Contoh dia macam kat bawah ni Typewriter Click me <button onclick="typeWriter()">Click me</button> <p id="demo"></p>…

TUTORIAL : Shapes

Kali ni Zati nak bagi tutorial tentang macam mana nak buat bentuk menggunakan coding. Ada beberapa contoh shapes beserta code dia dibawah ni. Harap dapat membantu. 1 - Square <style type="text/css"&g…

TUTORIAL : Hoverable Sidebar Buttons

Untuk tutorial kali ni , korang boleh tengok contoh dia kat > PREVIEW < Code dia dibawah ni <style type="text/css"> #zatiSidenav a {   position: absolute;   left: -80px;   transition: 0.3s;   padding…

TUTORIAL : Flip Card

Panda Cute Hai Semua! SELAMAT MENCUBA YA Cuba korang gerakkan cursor korang kat Panda tu. Code dibawah ni. <style type="text/css"> .zatiflip-card {   background-color: transparent;   …

TUTORIAL : Copy To Clipboard

Tutorial ni senang je hehe. Contoh kat bawah ni. Copy text Cuba korang click copy text tu, dan cuba paste kan dekat mana-mana , kalau jadi tu, kira okey lah haha. Code dia kat bawah ni. <input id="myInpu…

TUTORIAL : Collapsible

Tutorial kali ni adalah Collapsible . Collapsible ni seakan sama je dengan Accordian Tab tu. Cuma dia lebih sikit tab dia. Contoh macam kat bawah ni. A Collapsible: Open Collapsible Dalam ni boleh letak text atau cod…

TUTORIAL : Name Card (Author)

Bahagian Author ni selalu jadi tarikan para viewers blog kita kan? Contoh macam Zati punya sidebar Author . Follow tuto kat bawah ni 1. Layout > HTML/Javascript > Copy Paste code bawah ni <style type="text/c…

TUTORIAL : Animate Buttons

Kali ni Tutorial Animate Buttons . Ada 3 jenis animate buttons ni. Animated Buttons Yang Pertama- "Pressed Effect" Click Me Code untuk button ni: <style type="text/css"> .zatibutton {  …

TUTORIAL : According Tab Menu

Hai korang! Malam ni Zati rajin nak bagi tutorial. Alang-alang tengah free ni kan, lagi pun tak tahu nak update apa, so kita bagi tutorial je eh. Accordian Tab Menu ni fungsi dia bagi nampak kekemasan dalam sesebuah blog. …

TUTORIAL : Cara Tukar Url Blog Dan Kekalkan Statistik Blog

Akhirnya, setelah kian lama dapat juga Zati tukar url blog ni. Url yang dulu nya agak kebudak-budakan gitu! Dulu Zati guna z3tty.blogspot.my , sekarang Zati dah tukarkan kepada izatiesalim.blogspot.com  . Tawakal juga lah har…

TUTORIAL : Cara Buat Blank Template

Korang pernah tengok tak blog template yang kosong? Selalunya kalau template kosong ni orang selalu buat untuk review je. Contohnya review tutorial. Bila dah coding, dan nak tunjuk hasilnya, letak kat template kosong tu. …

TUTORIAL : Recent Comment Style 5

1. Blogger - Layout - Add gadget - Edit HTML 2. Copy / Paste code  <script type="text/javascript"> function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container&…

TUTORIAL : Recent Comment Style 4

Untuk style yang ke-empat ni pon sama ye dengan yang sebelum ni 1. Blogger - Layout - Add gadget - Edit HTML 2. Copy / Paste code dibawah di ruangan HTML <script type="text/javascript"> functio…

TUTORIAL : Recent Comment Style 3

1. Blogger - Layout - Add gadget - Edit HTML 2. Copy dan paste code dibawah di ruangan HTML <script type="text/javascript"> function showlatestpostswiththumbs(t){document.write('<ul class=&q…

TUTORIAL : Recent Comment Style 2

Yang ni Recent Comment Style 2 . Cara nya sama macam yang style 1 tu ye. 1. Blogger - Layout - Add gadget - Edit HTML 2. Copy dan paste code bawah ni di ruangan HTML <div class="recentpoststyle">…

TUTORIAL : Recent Post Style 1

Hai korang! Harini zati nak share Recent Post Style . Nampak tak yang kat atas tu. Tu contoh dia ye. Walaupun ramai yang dah buat and dah tahu, tapi zati share kan juga untuk new bloggers. Okay, korang just ikut je tuto kat b…

TUTORIAL : Image Bergegar

Klik untuk Preview → View 1. Dashboard → Layout / Post → HTML 2. Copy / Paste coding bawah ni <style> img:hover {   animation: shake 0.5s;   animation-iteration-count: infinite; } @keyframes shake {   0% { tr…

TUTORIAL : Cara Buat Responsive Grid Image

Hitam Putih Kehidupan Resize the browser window to see the responsive effect. …