BTC USD 81,277.7 Gold USD 4,378.12
Time now: Jun 1, 12:00 AM

[PART 2] Fanpage Tutorial - Sliding Menu Tabs

jibril said:
tok setting link download balik leh?
Click to expand...

Multiupload dah tak boleh pakai ya?
Sejak buat servis website, saya dah banyak buang file tak pakai..
Tak apa nanti saya cuba cari balik atau buat baru..
Tapi kalau sesiapa yang dah download dulu ada mungkin boleh re-upload.

:)cgrock
 
RembauWebSolution said:
Multiupload dah tak boleh pakai ya?
Sejak buat servis website, saya dah banyak buang file tak pakai..
Tak apa nanti saya cuba cari balik atau buat baru..
Tapi kalau sesiapa yang dah download dulu ada mungkin boleh re-upload.

:)cgrock
Click to expand...


sapa dah d/load tu boleh bagi kat saya....:D
 
RembauWebSolution said:
Lfwt1.png

SFmJu.png


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

pZtbf.png

[+] 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

9M1fN.png


0wwWM.png

[+] 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

1jzs0.png

[+] 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

2ZNqw.png

[+] 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

ysC3D.png

[+] Tutorial_TabMenu.html
[+] Folder CSS
  • demo.css
  • slidingtabs-horizontal.css
[+] Folder JS
  • 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

xGc4o.png

[+] 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++

NqIK5.png


[+] 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>
[+] Anda hanya perlu menukar ayat kandungan mengikut citarasa anda
[+] 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++
CLiDc.png


[+] 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

iT3Q8.png

[+] 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:

or9Yy.png


eSikL.png

[+] 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)

:)cgrock :)cgrock :)cgrock
Click to expand...

Salam tok,cucu klik nak download..tapi file hostingnye (deposit) sudah dead link tok..minta bantu tok,cara lain takde ker?:(
 
TT, aku berminat kat cara nko main CSS tu untuk text ni :

<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>
Click to expand...

tapi aku x dapat tengok class Text (<div class="text">) sebab source dah x dapat download.

lagi satu camna ngan tag Blockquote tu? aku wat x jadi pun...

<blockquote>Kaedah ini lebih pantas kerana ia tidak perlu menunggu
untuk Page Loading</blockquote>
 

Similar threads

Xploit Machine
Floating Menu Pro - One Page Navigator & Sticky Menu WordPress
Replies
1
Views
1K
Hulas
Hulas
afiqarbae
Tutorial Asas Bina Website
2
Replies
11
Views
7K
lau_kau
lau_kau
A
Amazon Japan Scampage 2020 New | Undetected | True login + Letter
Replies
0
Views
2K
aquacode447
A
MuslimProgrammer
TUTORIAL PROGRAMMING - PERCUMA - Pengenalan dan Asas Programming
2
Replies
18
Views
12K
SmileAlways
SmileAlways
gentlecode
[Video Tutorial] Sistem PHP & MySQL Intermediate Level (Sistem Ahli Perpustakaan)
2 3
Replies
20
Views
8K
Rexscar
Rexscar

Welcome to the one of the largest online investment & business portal in South-East Asia. You currently view about 1/3 of our forum sections. In order to enter all sections without restrictions, you may have to register to get full view and more functions available.

Forum statistics

Threads
792,401
Messages
26,708,435
Members
175,536
Latest member
soso5896

What's new

Copyright ©2005 - 2026, CariGold.com

Disclaimer: All posts published herein are merely based on individual views, and they do not expressly or by implications represent those of CariGold.com or its owner. It is hereby made clear that CariGold.com does not endorse, support, adopt or vouch any views, programs and/or business opportunities posted herein. CariGold.com also does not give and/or offer any investment advice to any members and/or readers. All members and readers are advised to independently consult their own consultants, lawyers and/or families before making any investment and/or business decisions. This forum is merely a place for general discussions. It is hereby agreed by all members and/or readers that CariGold. com is in no way responsible and/or liable for any damages and/or losses suffered by anyone of you.

Back
Top
Log in Register