RembauWebSolution
Active Member
- Messages
- 1,929
- Joined
- Sep 30, 2011
- Messages
- 1,929
- Reaction score
- 231
- Points
- 33
As'kum w.b.t.
[+] Ini merupakan sambungan kepada tutorial dari Part 1 (klik sini) jika anda terlepas
[+] Mulanya saya ingat nak buka thread buat Fanpage HTML guna Nvu seperti home.html, about.html, service.html tapi mungkin itu kemudian
[+] Kali ni kita belajar Page yang sama tapi shortcut dengan hanya satu(1) .html dan guna jQuery
[+] Saya bukanlah pandai atau mahir sangat tetapi tujuan Tutorial ini adalah untuk kita belajar bersama
[+] Terdapat pelbagai cara untuk pergi ke KL dari Johor sama ada bas atau kereta serta banyak jalan boleh dilalui dan dipilih
[+] Kaedah yang dikongsi di sini pula adalah mengikut cara saya dan mungkin ada juga cara berbeza tetapi yang penting ia sampai ke destinasi
[+] Mudahan sama-sama kita dapat bertukar ilmu dan pandangan bagi meluaskan pengetahuan masing2
[+] Andai kata ada yang merasakan ini sukar, sekurang-kurangnya ia dapat memberi gambaran kepada anda betapa sukar kerja programmer/designer
[+] Mohon maaf jika ada terkurang atau tersilap dan saya juga mohon tunjuk ajar dari kalian semua
[+] Tutorial kali ini berkisarkan Sliding Tab Menu untuk Fanpage
[+] Sudah pasti anda tahu Menu Tab yang ada di website biasa seperti Home, About dan sebagainya
[+] Bezanya dengan ini ialah cuma ianya bersaiz skala kecil untuk dimuatkan ke dalam Fanpage
[+] Dalam pada masa yang sama ia tidak perlu menggunakan page .html yang banyak kerana semuanya di dalam 1 Page
[+] Semua coding jQuery dan css telah disediakan untuk anda
[+] Live Demo sample boleh dilihat di sini
[+] Kesabaran yang tinggi serta konsentrasi yang jitu
[+] Software percuma Nvu (download sini) atau Notepad++ (download sini)
[+] Facebook Account (register sini)
[+] Facebook Fanpage (create sini)
[+] Facebook Apps Developer Account (create sini)
[+] Hosting acccount, jika tiada boleh daftar free di 1freehosting
[+] Domain account, jika tiada boleh dapatkan di 1freehosting
[+] Pertama sekali buka Notepad++ atau Nvu yang telah anda download
[+] Kemudian pastikan anda mulakan coding HTML anda dengan code di bawah:
Code:
<html>
<head>
<title>Tajuk Website Anda Di Sini</title>
</head>
<body>
</body>
</html>[+] Setiap yang bertanda < > adalah coding HTML contohnya <body> <b> <img src> dan sebagainya
[+] Code di atas seperti <html> <head> <body> adalah asas dan perlu ada dalam setiap HTML
[+] Letakkan tajuk website (website & fanpage sama cuma saiz berbea) anda di dalam <title>
[+] Kemudian letakkan code di bawah sebelum </head>
Code:
<!-- CSS -->
<link rel="stylesheet" href="css/demo.css" type="text/css">
<link rel="stylesheet" type="text/css"
href="css/slidingtabs-horizontal.css">
<!-- JavaScript -->
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4.4");</script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.slidingtabs.pack.js"></script>
<script type="text/javascript"> $(document).ready(function() {
// JS Coding untuk Sliding Tab
$("div#tabs_horizontal").slideTabs({
// Options orientation: 'horizontal',
slideWidth: 500, // Saiz Lebar #tabs_container <div> element contentAnim: 'slideLeft',
contentEasing: 'easeInOutExpo',
tabsAnimTime: 300,
contentAnimTime: 600
}); });
</script>[+] Segala bentuk file link ke .css atau .js harus diletakkan sebelum </head>
[+] Bermakna ia harus diletakkan di dalam kepala HTML <head> supaya otak dia boleh berfikir dan memberi arahan kepada badan atau <body>
[+] Code di atas itu adalah untuk link file .css dan .js yang akan kita create sekejap lagi bagi membuat Sliding Tab Menu
[+] Err ada yang dah pening kepala ke?
[+] Itulah bukan senang untuk buat coding website, ini pun baru HTML sahaja
[+] Jadi bayangkan kalau buat coding lain atau bayangkan buat website dari scratch guna photoshop dan slice .psd ke HTML/CSS
[+] Sebab tu adakalanya harga buat website amat tinggi kerana masa dan tenaga yang diluangkan agak panjang
[+] Jadi marilah kita sama-sama hargai rakan-rakan kita yang membuat website untuk kita
[+] Untuk memudahkan kerja anda maka saya telah siapkan coding .html, .css dan .js untuk anda semua
[+] Jadi sekarang anda tidak perlu pening kepala lagi dan apa yang penting adalah untuk Take Action
Download Di Sini
[+] Tutorial_TabMenu.html
[+] Folder CSS
- demo.css
- slidingtabs-horizontal.css
- jquery.easing.1.3
- jquery.mousewheel.min
- jquery.slidingtabs.pack
*Pastikan semua file ini dalam kedudukan betul dan jangan diubah kerana ia link sesama sendiri
[+] Un-zip file yang anda baru download tadi
[+] Anda boleh klik pada Tutorial_TabMenu.html untuk melihat sama ada berfungsi atau tidak
[+] Buka file Tutorial_TabMenu.html menggunakan Notepad++ atau Nvu (saya cadangkan Notepad++)
[+] Caranya adalah dengan tekan Right Click pada file Tutorial_TabMenu.html dan bukakan dengan Notepad++
[+] Setelah anda membuka Tutorial_TabMenu.html menggunakan Notepad++ anda akan melihat semua coding di sana
[+] Terdapat 4 warna di dalam coding tersebut iaitu Hitam Bold, Ungu, Merah dan Hijau
[+] Anda hanya perlu menukar content/kandungan untuk Hitam Bold yang terdapat di dalam <body> </body>
[+] Jangan ubah ayat atau perkataan yang berwarna lain, hanya tukar yang berwarna Hitam Bold sahaja
[+] Contohnya seperti di bawah:
Code:
<h2>Selamat Datang ke Tutorial RWS</h2>
<div class="text">
<p>Disini anda boleh letakkan intipati kandungan muka hadapan untuk
Fanpage anda. Seperti website biasa, perbezaannya ialah ia berskala
kecil dan user boleh pergi ke next page tanpa perlu keluar dari
Facebook.</p>
<blockquote>Kaedah ini lebih pantas kerana ia tidak perlu menunggu
untuk Page Loading</blockquote>
<p>Perlu juga diingatkan bahawa tutorial ini adalah PERCUMA dan diminta
jangan sesekali dibukukan menjadi ebook kerana ilmu itu harus
dikongsikan bersama. Anda boleh menggunakan sample tutorial ini untuk
membina Fanpage anda sendiri.</p>
<p>Sedikit pengetahuan HTML diperlukan untuk mengedit Tabs Menu ini.
Apa yang penting ialah untuk membaca tutorial dengan jelas dan membuat
eksperimentasi trial and error. Apa yang diperlukan ialah software
Notepad++ dan anda hanya perlu edit content bahagian yang berwarna
hitam sahaja. Pastikan ada mempunyai backup file andaikata ada file
coding didalam ini terdelete. Mudahan ilmu ini bermanfaat buat semua
dan marilah kita sama-sama membina sebuah Fanpage yang unik dan
tersendiri. </p>[+] Setiap kali tukar pastikan anda klik Save dan buka semula Tutorial_TabMenu.html untuk melihat hasil yang telah diubahsuai
[+] Maksud saya buka Tutorial_TabMenu.html adalah buka seperti membuka website dan bukan membukanya melalui Notepad++
[+] Tahniah! Sliding Tab Website anda telahpun siap
[+] Kenapa ia dipanggil Sliding Tab? Kerana bila anda klik pada Tab lain ia akan ada Slide Effect
[+] Ianya sama seperti website lain cuma yang ini tidak memerlukan banyak Page HTML
[+] Bermakna anda boleh buat 4 Tab (atau lebih) contohnya Home, About Us, Our Service dan Contact Us
[+] Yang asal hanya ada 2 Tab dan terpulang pada anda untuk menambahnya
[+] Yang penting perlu ingat bahawa ini adalah untuk Facebook Fanpage yang bersaiz 500px
[+] Maka adalah afdal untuk membuat maksima sehingga 4-5 Tab sahaja
[+] Terdapat 2 coding yang perlu anda tambah iaitu Coding Tab dan Coding Content
[+] Coding Tab bermaksud Tab Home, About, Service dan sebagainya
[+] Coding Content adalah isi kandungan bagi setiap Tab tersebut
[+] Coding Tab yang asal adalah seperti di bawah:
Code:
<ul id="tabs">
<li><a href="#content_1" id="tab_1" class="tab active">Menu Utama</a></li>
<li><a href="#content_2" id="tab_2" class="tab">Tab 2</a></li>
</ul>[+] Tab 1 - Menu
[+] Tab 2 - Tab 2
[+] Anda hanya perlu tambah seperti di bawah:
Code:
<ul id="tabs">
<li><a href="#content_1" id="tab_1" class="tab active">Menu Utama</a></li>
<li><a href="#content_2" id="tab_2" class="tab">About</a></li>
<li><a href="#content_3" id="tab_3" class="tab">Service</a></li>
<li><a href="#content_4" id="tab_4" class="tab">Contact</a></li>
</ul>[+] Perhatikan Tab 2 saya telah ubah kepada About dan saya tambah Service dan Contact
[+] Jangan lupa untuk meletak nombor pada #content dan id seperti contoh di atas
[+] Coding Content pula adalah seperti di bawah:
Code:
<div id="content_1" class="tab_view">
<h2>Selamat Datang ke Tutorial RWS</h2>
<div class="text">
<p>Disini anda boleh letakkan intipati kandungan muka hadapan untuk
Fanpage anda. Seperti website biasa, perbezaannya ialah ia berskala
kecil dan user boleh pergi ke next page tanpa perlu keluar dari
Facebook.</p>
<blockquote>Kaedah ini lebih pantas kerana ia tidak perlu menunggu
untuk Page Loading</blockquote>
<p>Perlu juga diingatkan bahawa tutorial ini adalah PERCUMA dan diminta
jangan sesekali dibukukan menjadi ebook kerana ilmu itu harus
dikongsikan bersama. Anda boleh menggunakan sample tutorial ini untuk
membina Fanpage anda sendiri.</p>
<p>Sedikit pengetahuan HTML diperlukan untuk mengedit Tabs Menu ini.
Apa yang penting ialah untuk membaca tutorial dengan jelas dan membuat
eksperimentasi trial and error. Apa yang diperlukan ialah software
Notepad++ dan anda hanya perlu edit content bahagian yang berwarna
hitam sahaja. Pastikan ada mempunyai backup file andaikata ada file
coding didalam ini terdelete. Mudahan ilmu ini bermanfaat buat semua
dan marilah kita sama-sama membina sebuah Fanpage yang unik dan
tersendiri. </p>
</div>
</div>[+] Perhatikan ia bermula dengan 2 <div> dan berakhir dengan 2 </div> dan ini adalah penting
[+] Anda hanya perlu copy paste dari Content mana-mana Tab dan Paste di penghujung 2 </div> tersebut
[+] Dan jangan lupa untuk menukar div id="content_1" kepada content_3 atau content_4
[+] Hasilnya anda akan dapat seperti yang di bawah:
[+] Tahniah! Kini anda telahpun mempunyai website 4 Tab dengan bersaiz 500px untuk Facebook Fanpage anda
[+] Jika anda mahir dengan HTML anda boleh memasukkan code seperti bold, italic, blink dan sebagainya seperti contoh Tab 2
[+] Kini apa yang perlu anda buat ialah untuk menyimpan semua file ini di dalam 1freehosting.com yang telah anda register
[+] Kemudian hanya perlu create Facebook Apps dan anda sudah boleh masukkan ke dalam Fanpage anda seperti contoh di sini
[+] Terima Kasih atas kesudian anda untuk meluangkan masa untuk membaca tutorial yang tidak seberapa ini
[+] Tutorial untuk menyimpan di hosting dan masukkan ke dalam Fanpage akan menyusul tidak lama lagi (insyaALLAH malam ini)
Last edited:
