Tạo module trượt 2 bên trong Joomla

Hướng dẫn cách tạo module trượt 2 bên trong Joomla 1.5. Áp dụng thích hợp nhất cho
mod_banners làm quảng cáo tự động trượt 2 bên website. Tùy chỉnh code cho phù hợp với
website của bạn.
Chèn đoạn mã sau vào cuối file index.php trong thư mục Joomla template của bạn.
Ví dụ: /joomla/templates/sieuhostvn/index.php.
Chèn vào cuối trang trước khi đóng thẻ </body>
Mã HTML:
<div id="AdsRight">
<jdoc:include type="modules" name="floatright" />
</div>
<div id="AdsLeft">
<jdoc:include type="modules" name="floatleft" />
</div>
Mã Javascript:
<script type="text/javascript">

function f_clientWidth() {
return f_filterResults (
window.innerWidth ? window.innerWidth : 0,
document.documentElement ? document.documentElement.clientWidth : 0,
document.body ? document.body.clientWidth : 0
);
}
function f_clientHeight() {
return f_filterResults (
window.innerHeight ? window.innerHeight : 0,
document.documentElement ? document.documentElement.clientHeight : 0,
document.body ? document.body.clientHeight : 0
);
}
function f_scrollLeft() {
return f_filterResults (
window.pageXOffset ? window.pageXOffset : 0,
document.documentElement ? document.documentElement.scrollLeft : 0,
document.body ? document.body.scrollLeft : 0
);
}
function f_scrollTop() {
return f_filterResults (
window.pageYOffset ? window.pageYOffset : 0,
document.documentElement ? document.documentElement.scrollTop : 0,
document.body ? document.body.scrollTop : 0
);
}
function f_filterResults(n_win, n_docel, n_body) {
var n_result = n_win ? n_win : 0;
if (n_docel && (!n_result || (n_result > n_docel)))
n_result = n_docel;
return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}
</script>
Hiển thị quảng cáo trượt phải

<script type="text/javascript">
var positionFooter;
var positionRight = 0;
var widthAds = 110;
var heightAds = 200;
var div = document.getElementById('divPositionRightBannerFloat');
if(div!=null)
positionRight = div.offsetTop;

document.getElementById('AdsRight').style.display = "block";
var yy = 0;
var toptop=0;
var beforeTop = 0;
// Hien thi quang cao truot phai
function ShowAds()
{
yy = f_clientWidth() - widthAds - 24;//padding left
toptop = (f_scrollTop() - beforeTop)/8;
beforeTop = toptop + beforeTop + 3;

if(beforeTop < 5)
document.getElementById('AdsRight').style.top = f_scrollTop() + 'px';
else
document.getElementById('AdsRight').style.top = beforeTop + 'px';

beforeTop =
parseInt(document.getElementById('AdsRight').style.top.substring(0,document.getElementById('AdsRig
ht').style.top.length - 2));

document.getElementById('AdsRight').style.left = yy + 'px';

document.getElementById('AdsRight').style.display = "block";

if(beforeTop < positionRight + heightAds)

document.getElementById('AdsRight').style.display = "none";

var divFooter = document.getElementById('divPositionFloatBannerFooter');

if(divFooter!=null)
positionFooter = divFooter.offsetTop;

if(beforeTop > positionFooter + heightAds)

document.getElementById('AdsRight').style.display = "none";

setTimeout('ShowAds()', 50);
}
ShowAds();
</script>

Hiển thị quảng cáo trượt trái

<script type="text/javascript">

// Hien thi quang cao truot trai

function ShowAds2()
{
yy = f_clientWidth() - widthAds - 24;//padding left
toptop = (f_scrollTop() - beforeTop)/8;
beforeTop = toptop + beforeTop + 3;
 if(beforeTop < 5)
document.getElementById('AdsLeft').style.top = f_scrollTop() + 'px';
else
document.getElementById('AdsLeft').style.top = beforeTop + 'px';

beforeTop =
parseInt(document.getElementById('AdsLeft').style.top.substring(0,document.getElementById('AdsLeft')
.style.top.length - 2));

document.getElementById('AdsLeft').style.right = yy + 'px';

document.getElementById('AdsLeft').style.display = "block";

if(beforeTop < positionRight + heightAds)

document.getElementById('AdsLeft').style.display = "none";

setTimeout('ShowAds2()', 50);
}
// Hien thi quang cao truot trai + phai

ShowAds2();

</script>
Mã CSS chèn vào file template CSS hoặc chèn vào head:
#AdsRight{
z-index: 9999;
position: absolute;
width: 110px;
height: 200px;
display: none;
}
#AdsLeft{
z-index: 9999;
position: absolute;
width: 110px;
height: 200px;
display: none;
}
Truy cập Back End >> Quản lý mô đun.
Chọn module cần trượt gán vào vị trí floatleft hoặc floatright.
Tối ưu hóa Từ Khóa Keyword để SEO tốt hơn
Cả 3 gã khổng lồ trong lĩnh vực tìm kiếm: Google, Yahoo và MSN đều tuyên bố hỗ trợ thẻ
rel="canonical" tương tự thẻ rel="nofollow" theo sau các đường link nhằm khắc phục lỗi trùng
lặp nội dung của các website trong việc tối ưu hóa website. Bài viết sẽ giới thiệu về chức năng
chính, hướng dẫn sử dụng và đồng thời cung cấp cho các bạn plugin canonical cho cả Joomla,
Wordpress, PrestaShop.
1. Chức năng thẻ rel="canonical": bản chất của trùng lặp nội dung (duplicate content):
- Khi tags được sử dụng và chuyển đến bản gốc của mã nguồn trong một hệ thống CMS.
- Khi website của bạn chưa được tối ưu hóa cấu hình đúng trên server cấp cơ sở (tức là sự không
đống bộ giưa http:// và http://www. hoặc tồn tại nhiều trang chủ dạng domain/ và
domain/index.php...) xem thêm .htaccess và redirect 301
- Khi các url chưa các mã số theo dõi, track code, id...
- Khi có nhiều biến thể của 1 trang, có thể là thiếu nội dung (vì vậy mặc định chuyển hướng và
khía cạnh nội dung được xem như tương tự) hoặc chứa 1 khả năng chính xác cao với một số từ
và cụm từ.
Và chức năng chính của thẻ rel="canonical" ở đây chính là phân biệt url chủ, như vậy các trang
không phải đấu tranh với các bản sao của mình, nhờ đó search engine có thể dễ dàng loại bỏ việc
đánh chỉ mục các trang trùng lặp.
2. Cách sử dụng thẻ rel="canonical":
Như ở trên mình đã nói thẻ rel="canonical" hoàn toàn tương tự như rel="nofollow", việc sử dụng
cũng khá đơn giản.
Một ví dụ cho dễ hiểu: ở đây bạn có 2 url cùng 1 nội dung là
{xtypo_info}http://www.website.com/product.php?item=landing-page1{xtypo_info}
và
http://www.website.com/product.php?item=landing-page1&trackingid=2742&sessionid=9361
(Lỗi như 2 url trên thường rất hay xuất hiện trong nhưng website thương mại điện tử, có chứa
các chức năng cung cấp giỏ hàng)
như vậy việc sử dụng chỉ cần phần biệt url chủ và thêm vào thẻ canonical vào trước hoặc sau url
như thế này :
<link rel=”canonical” href=”http://www.website.com/product.php?item=landing-page1″>

Như vậy các seach engine sẻ nhận http://www.website.com/product.php?item=landing-page1

làm url chủ, và sẻ không đánh chỉ mục đối với http://www.website.com/product.php?
item=landing-page1&trackingid=2742&sessionid=9361.
3. Download Plugin Canonical
Lưu ý: Plugin cho joomla chỉ sử dụng được với joomla 1.5x, và yêu cầu sử dụng kèm với Joomla
Componnent sh404sef
Điều khiển vùng {mainbody} trên trang chủ
Như các bạn đã biết, trên mỗi template của Joomla luôn có rất nhiều vùng chứa các module, các
vùng này đều được gán vị trí (VD: left, right, top, bottom, banner, user1...) nhưng chỉ có một
vùng đặc biệt quan trọng và duy nhất - đó là vùng chính giữa mainbody. Vùng này làm nhiệm vụ
hiển thị bài viết hoặc một component.
Trên mỗi template, ngoài các vị trí module (Module Positon) chúng ta có vùng chính giữa
(mainbody)

Khi ở trang chủ, Joomla! sẽ sử dụng component có tên là com_frontpage và hiện đúng vào chỗ
mainbody. Tuy nhiên không phải lúc này bạn cũng muốn như vậy, bạn có thể tùy biến theo giải
pháp dưới đây:
Đối với Joomla! 1.0

Mở file "/templates/your-template/index.php" và thay đoạn mã hiển thị mainbody

<?php mosMainBody(); ?>

bằng đoạn mã dưới đây

<?php if($option='com_frontpage') : ?>
// bạn đang ở trang chủ
// thực hiện bất cứ công việc gì mà bạn muốn
<?php else: ?>
// bạn không còn ở trang chủ
// hiển thị mainbody như bình thường
<?php mosMainBody(); ?>
<?php endif; ?>
Đối với Joomla! 1.5

Mở file "/templates/your-template/index.php" và thay đoạn mã hiển thị mainbody

<jdoc:include type="component" />

bằng đoạn mã dưới đây

<?php if( JRequest::getVar( 'view' ) == 'frontpage' ) { ?>
// bạn đang ở trang chủ
// thực hiện bất cứ công việc gì mà bạn muốn
<?php } else { ?>
// bạn không còn ở trang chủ
// hiển thị mainbody như bình thường
<jdoc:include type="component" />
<?php } ?>
Cách chèn JavaScript hoặc các đoạn mã HTML đặc biệt
Joomla cung cấp một trình soạn thảo WYSIWYG mặc định TinyMCE. Đây là trình soạn thảo
chuẩn và phổ biến. Cũng theo mặc định để đảm bảo an toàn cho Website, tất cả các đoạn mã
Javascript và các đoạn mã HTML nhạy cảm đều bị TinyMCE lọc bỏ. Do vậy để chèn các đoạn
mã JavaScript vào bài viết hoặc vào module... bạn cần tắt bỏ tính năng này.
Đối với Joomla 1.5
Vào menu Extensions >> Plugin Manager >> Editor - TinyMCE 2.0. Quan sát các tham số
(Parameters) bên tay phải. Có 2 tham số liên quan:
Code Cleanup on Startup: Chọn "Off" để tắt mỗi khi trình soạn thảo được nạp
Code Cleanup on Save: Chọn "Front Only" để chỉ tắt phía Front-End, chọn "Never" để tắt hẳn.
Thao tác này chỉ có tác dụng khi lưu bài viết hoặc module.
Đối với Joomla 1.0
Vào menu Mambots >> Site Mambots >> TinyMCE WYSIWYG Editor. Quan sát các tham số
(Parameters) bên tay phải. Chú ý tham số
Code Cleanup: Chọn "Off" để tắt
Chèn Javascript vào bài viết hoặc module.
Mở bài viết hoặc module
Nhấn vào nút HTML để soạn thảo mã HTML
Dán đoạn mã HTML hoặc Javascript vào chỗ mà bạn muốn.
Tìm hiểu về đường dẫn URL và Itemid
Một ví dụ về URL và Itemid

Bạn hãy truy cập vào trang chủ của Joomla và tìm bài viết "What is Joomla!", hãy chú ý quan sát
đường dẫn (url hay link) của nó là

http://www.joomla.org/content/view/12/26/ hoặc

http://joomla.org/component/option,com_content/task,view/id,12/Itemid,26/

Bạn đã trông thấy đường link ngắn gọn như vậy là do admin của trang Joomla.org đã bật chức
năng "Search Engine Friendly URLs" (Site => Global Configuration => SEO => Search Engine
Friendly URLs = Yes). Còn thực tế thì link gốc ban đầu sẽ là

http://joomla.org/index.php?option=com_content&task=view&id=12&Itemid=26

Hãy chú ý con số 26 ở cuối cùng của mỗi URL ở trên. Đó chính là Itemid = 26
Mổ xẻ 2 URL trên

URL mặc định URL khi bật SEO Các thí dụ khác
Tên Component option=com_content content option=com_contact
 là component liên hệ
Tác vụ thực hiện task=view view task=emailform cho
phép gửi thư qua
email

do_pdf tạo bản in

PDF
mã (id) của bài viết id=12 12 Bắt đầu từ 1.

Bài viết "Joomla

1.0.15 released" có
id=4609
mã (id) của mục menu Itemid=26 26 Bắt đầu từ 1.
dẫn đến bài viết
Các bài viết trên trang
chủ gắn với menu
Home/Main có id=1

Mục đích của Itemid

Itemid được dùng để quyết định sự xuất hiện của các module và template. Mỗi module có thể
được gắn với tất cả các menu (nghĩa là xuất hiện với mọi Itemid) hay chỉ được gắn với một số
menu nào đó.

VD: Module "Who is Online" xuất hiện ở mọi trang (tức là được gắn với mọi menu hay mọi
ItemID)

Tương tự như vậy, mỗi template cũng được gắn với tất cả các menu (với mọi Itemid) hay chỉ
được gắn với một số menu nhất định (một số Itemid).
Tạo menu thả xuống trong Joomla! 1.5
Một số template của Joomla! có hỗ trợ việc tạo các menu thả xuống kiểu Suckerfish hay
Dropline mà không phải sử dụng bất cứ thành phần mở rộng nào. Để tạo được menu loại này đầu
tiên bạn phải thiết lập các mục trong menu theo quan hệ cha / con (Parent / Child). Mục con sẽ là
mục thả xuống khi bạn rê chuột qua mục cha.
Bài viết sau sẽ hướng dẫn cách các bạn thực hiện trên template có tên là Optimus (miễn phí)
Bước 1. Mở mục Quản lý Menu (Menu Manager)
Chọn menu mà bạn muốn thiết lập quan hệ cha / con. Trong thí dụ này chúng ta sử dụng menu
có tên là "Main Menu"
Quan hệ bình đẳng giữa các menu
Trong hình trên các mục của Main Menu hiện đang có quan hệ bình đẳng với nhau (không phải
quan hệ cha / con)
Bước 1.1: Mở phần Các tham số của Menu (Menu Parameters)
Bước 1.2: Chọn mục cha (Parent Item)

Trong phần "Parent Item", chọn mục mà bạn muốn làm mục cha của mục hiện hành. Trong thí
dụ này chúng ta sẽ gán mục "What's New in 1.5?" làm mục cha của mục hiện hành (bài "Joomla
Overview").
Bước 1.3: Lưu các thay đổi.

Nhấn vào nút [Save] phía trên bên tay phải.

Kết quả sau khi thiết lập mối quan hệ cha / con
Bạn có thể làm tương tự với các link khác mà bạn muốn, và cũng có thể phân làm nhiều mức.
Tuy nhiên trong hầu hết các tình huống chỉ nên phân tối đa làm 3 mức.
Bước 2: Thiết lập mô-đun Menu (Menu Module)
Bước 2.1: Mở phần quản lý mô-đun (Module Menager)

Mở menu Extensions -> Module Manager, chọn mô-đun menu mà bạn muốn thiết lập. Trong thí
dụ này, chúng ta sẽ sử dụng mô-đun 'Main Menu'.
Sau khi mở mô-đun menu, bạn sẽ trông thấy các tham số của nó bên tay phải.
Bước 2.2: Thiết lập phần "Chi tiết" (Details)

Phần phần Details thiết lập các tham số như sau:

Show Title = No
Enabled = Yes
Position = Chọn vị trí mô-đun sẽ xuất hiện.
Bước 2.3: Thiết lập "Tham số" (Parameters)

Trong vùng Tham số, thiết lập các tham số như sau:
Menu Name = mainmenu (lấy tên của menu mà bạn muốn tạo menu thả xuống)
Menu Style = List
Always show sub-menu items = Yes

Ngoài ra bạn không cần phải thay đổi bất cứ tham số nào khác (trừ phi có yêu cầu trong tài liệu
kèm theo)
Bước 2.4: Lưu các thay đổi

Nhấn vào nút [Save] ở phía trên bên tay phải để lưu lại các thiết lập
Bước 3: Mở Website và kiểm tra kết quả
Tùy biến các trang thông báo lỗi
Joomla! sử dụng file [Joomla]/templates/system/error.php để hiển thị thông báo về các lỗi
HTTP chẳng hạn như "lỗi cấm truy cập" (403 Forbidden), "lỗi không tìm thấy" (404 Not Found),
"lỗi máy chủ" (500 Internal Servers). Tuy nhiên file này hoàn toàn độc lập với Joomla!. Do vậy
bạn không thể chạy các plugin hay gắn các module trên file này. Vì vậy để tùy biến mà không
phải hack vào file này chúng ta làm như sau:
Thay đổi các thông báo lỗi

Để thay đổi các thông báo lỗi, copy file [Joomla]/templates/system/error.php vào thư mục
template của bạn (VD: [Joomla]/templates/vinaora_template). Khi đó Joomla sẽ sử dụng file
"error.php" trong template của bạn thay vì file "error.php" trong thư mục /system ở trên. Bạn có
thể định dạng hoặc tùy biến file này sao cho nó phù hợp với yêu cầu của bạn.
Copy file "error.php" trong thư mục "system"
[Joomla]
|-------/templates
|-----------------/system
|------------------------/error.php
Chuyển tới thư mục chứa template của bạn
[Joomla]
|-------/templates
|-----------------/vinaora_template
|---------------------------------/error.php

Trang báo lỗi 404 mặc định của Joomla!

Thay đổi định dạng, kiểu dáng của thông báo lỗi
Nếu bạn muốn thay đổi định dạng, kiểu dáng của các thông báo lỗi thì copy file
[Joomla]/templates/system/error.css vào thư mục template của bạn (VD:
[Joomla]/templates/vinaora_template).
Copy file "error.css" trong thư mục "system"
[Joomla]
|-------/templates
|-----------------/system
|------------------------/error.css
Chuyển tới thư mục chứa template của bạn
[Joomla]
|-------/templates
|-----------------/vinaora_template
|---------------------------------/error.css

Tiếp theo, cập nhật lại file "error.php" ở trên sao cho nó nhận file css mới bằng cách chèn đoạn
mã sau:
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>
/templates/vinaora_template/css/error.css" type="text/css" />

Rồi thì thay đổi file "error.css" theo yêu cầu của bạn.

Nhớ thay "vinaora_template" bằng tên template mà bạn đang sử dụng

Thuật ngữ:
CSS (Cascading Style Sheet): File lưu các định dạng về kiểu chữ, cỡ chữ, màu sắc, căn chỉnh...
HTTP 404 Not Found: Lỗi không tìm thấy thư mục hoặc tập tin, đường dẫn không tồn tại
HTTP 403 Forbidden: Lỗi cấm truy cập (đường dẫn tồn tại nhưng bị cấm truy cập)
HTTP 500 Internal Server: Lỗi phía máy chủ
Cấu hình Joomla để gửi/nhận mail với Gmail
Việc cấu hình Joomla để cho phép gửi/nhận mail (email) thông qua tài khoản GMail hay một tài
khoản mail của một hãng bất kỳ có sử dụng giao thức bảo mật SSL/TLS đã được cộng đồng
Joomla đề cập và bàn tán nhiều, nhưng phải cho đến phiên bản Joomla 1.5.12 được phát hành
ngày hôm qua (01/7/2009), tính năng này mới chính thức có mặt trong mục cấu hình Global
Configuration. Và đây thực sự là tin vui đối với các webmaster, vì hiện có khá nhiều người đang
phải sử dụng host free hay những host không hỗ trợ gửi/nhận mail.

Thao tác cấu hình khá đơn giản.

Đầu tiên các bạn mở trang quản trị, mở mục "Global Configuration" và chọn tab "Server", sau đó
tìm phần "Mail Settings" và cấu hình như sau:
Mailer: SMTP Server
Mail From: Địa chỉ thư của bạn
From Name: Tiêu đề thư
SMTP Authentication: Yes
SMTP Security: SSL
SMTP Port: 465
SMTP Username: Your Gmail username
SMTP Password: Your Gmail password
SMTP Host: smtp.gmail.com

Chúc các bạn thành công.

Trong trường hợp bạn vừa nâng cấp lên Joomla 1.5.12, có thể phần "Mail Settings" không xuất
hiện đúng như trên thì bạn chỉ cần chỉnh sửa một thông số bất kỳ nào đó, sau đó nhấn nút [Save]
để Joomla! nhận các thông số mới.