Cách thiết kế banner online bằng cách bước đơn giản sau

Bạn đang chưa biết cách làm thế nào để tạo banner quảng cáo. hãy thma khảo cách bước đơn giản sau nhé!

CÁCH TẠO BANNER ONLINE ĐƠN GIẢN

Trang web http://www.mybannermaker.com/ cho phép tạo banner trực tiếp trên web.
Hãy làm theo hướng dẫn sau đây:

Bước1: Mở trang web http://www.mybannermaker.com/

Nhìn xuống bên dưới bạn sẽ nhìn thấy:
Một banner mẫu, và một thanh menu, với các menu như sau:

Size, Background, Text, Border, Effects, Save,

Bước 2: Nhấp vào menu Size để chọn kích thước của Banner.

Nhấp vào hình có kích thước theo yêu cầu của bạn.
Hãy chờ một lát cho đến khi hình banner mẫu thay đổi theo kích thước được lựa chọn.

Bước 3: Nhấp vào menu Background để chọn phông nền cho banner

Bạn có thể tạo phông nền theo 2 cách:

1- Chọn màu sắc: Banner sẽ có 2 màu, chuyển dần từ trên xuống dưới.
Ví dụ trên hình mẫu, phần trên là xanh lá cây, phần dưới là vàng nhạt.
Bạn có thể thay đổi 2 màu này bằng cách nhấp vào dấu mũi tên để chọn màu.

Sau khi chọn màu xong nhấp vào dấu chữ X để đóng lại.
Ví dụ bạn chọn màu hồng cho phần trên thì hình banner sẽ thay đổi như sau:

2- Chọn hình của bạn: Bạn có thể đưa hình của chính bạn lên để làm phông nền cho banner.
Chú ý nên chỉnh kích thước cho bằng với kích thước banner mà bạn đã chọn.
Nhấp vào nút Browse để chọn file hình, sau đó nhấp vào nút Upload.

Bước 4: Nhấp vào menu Text để đưa chữ vào banner.

Bạn có thể nhập vào tối đa 4 hàng chữ.
Có thể chọn màu, kích thước, di chuyển vị trí, độ đục, . . .

Ví dụ:
Ở hàng 1, bạn nhập vào dòng chữ "Chao mung cac ban den voi website"
Ở hàng 2, nhập vào dòng chữ "http://love.easyvn.com/tenban"
Dòng chữ thứ nhất, chọn màu vàng, size là 21

Bạn sẽ thấy banner thay đổi như sau:

Bước 5: Nhấp vào menu Border để tạo đường viền cho banner.

Bạn có thể chọn màu và kích thước của đường viền.
Nhấp vào chữ "Click to Choose" để chọn màu.
Đưa con trỏ vào hình chữ nhật ở mục Width vào kéo để chọn kích thước của đường viền
Bước 6: Nhấp vào menu Effects để chọn hiệu ứng cho banner.

Chọn hiệu ứng theo yêu cầu của bạn.
Vi dụ: Chọn hiệu ứng nhấp nháy (Glitter)

Bước 7: Nhấp vào menu Save để lưu kết quả.

Chọn mục số 1: Normal banner
Sau đó nhấp vào mục số 2: Save the Banner.
Bạn sẽ nhận được kết quả:

Bạn sẽ nhìn thấy Banner thực sự của bạn đã được tạo xong.
Bạn cũng nhìn thấy đoạn mã HTML trong đó có chứa đường link của banner.
Bạn không cần copy hết đoạn mã này, chỉ lấy phần link như sau:

Copy từ chữ http đến hết chữ gif

Nếu chưa vừa ý, bạn có thể quay trở lại để chỉnh sửa banner.
Hãy nhấp vào chữ here trong dòng chữ Just click here to go back.

Cách tạo Banner quảng cáo với hiệu ứng trượt dọc 2 bên

Thời gian qua có nhiều học viên Internet marketing Coaching hỏi Adam Thiên về cách tạo banner chạy dọc 2 bên website, chính vì vậy hôm nay Adam Thiên quyết định viết bài viết này hy vọng giúp ích cho mọi người trong quá trình phát triển website. Thưa các bạn, có thể nói Banner quảng cáo trượt dọc 2 bên trang web là hình thức quảng cáo rất phổ biến hiện nay trên các forum và các website lớn. Không những giúp tận dụng “đất”, nó còn dễ dàng gây được sự chú ý của người đọc với hiệu ứng trượt theo khi trang được cuộn lên & xuống.

Cách tạo banner trượt hai bên

Tiện ích này trước đây đã được một số Blogger giới thiệu. Tuy nhiên có một số nhược điểm “chết người” như :

Không hiển thị tốt trên trình duyệt Firefox.
Nếu hiển thị thì khi click vào bất cứ liên kết nào trên Blog cũng không có tác dụng (unclickable).

Sau khi tham khảo code từ một số website tên tuổi, Adam Thiên đã tìm được đoạn code ưng ý, có thể khắc phục được các lỗi nêu trên, đặc biệt là hiển thị tốt ngay cả trên trình duyệt “già nua xấu xí” IE6.

Mời mọi người xem tại đây:

Demo-banner-trượt-hai-bên

Và cũng theo yêu cầu của một số anh/chị trước đây, hôm nay Adam Thiên sẽ hướng dẫn các bạn cách chèn tiện ích “Banner quảng cáo trượt dọc 2 bên” vào Blog, qua 4 bước rất đơn giản sau.

Bước 1: Đăng nhập vào Blog

Bước 2: Vào bố cục

Bước 3: Tạo một widget HTML\JavaScript và chèn vào đoạn code bên dưới :

<div id="divAdRight" style="DISPLAY: none; POSITION: absolute; TOP: 0px">
<a target="_blank" href="http://khoahocinternet3hmienphi.internetmarketing.vn/"><img src="http://2.bp.blogspot.com/-mbEwmoPLbSs/UINgm146eUI/AAAAAAAAA94/js4dxbKAPtM/s1600/banner-160x600.jpg" width="125" /></a>
</div>
<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px">
<a target="_blank" href="http://khoahocinternet3hmienphi.internetmarketing.vn/"><img src="http://2.bp.blogspot.com/-mbEwmoPLbSs/UINgm146eUI/AAAAAAAAA94/js4dxbKAPtM/s1600/banner-160x600.jpg" width="125" /></a>
</div>
<script>
    function FloatTopDiv()
    {
        startLX = ((document.body.clientWidth -MainContentW)/2)-LeftBannerW-LeftAdjust , startLY = TopAdjust+80;
        startRX = ((document.body.clientWidth -MainContentW)/2)+MainContentW+RightAdjust , startRY = TopAdjust+80;
        var d = document;
        function ml(id)
        {
            var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
            el.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};
            el.x = startRX;
            el.y = startRY;
            return el;
        }
        function m2(id)
        {
            var e2=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
            e2.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};
            e2.x = startLX;
            e2.y = startLY;
            return e2;
        }
        window.stayTopLeft=function()
        {
            if (document.documentElement && document.documentElement.scrollTop)
                var pY = document.documentElement.scrollTop;
            else if (document.body)
                var pY = document.body.scrollTop;
             if (document.body.scrollTop > 30){startLY = 3;startRY = 3;} else {startLY = TopAdjust;startRY = TopAdjust;};
            ftlObj.y += (pY+startRY-ftlObj.y)/16;
            ftlObj.sP(ftlObj.x, ftlObj.y);
            ftlObj2.y += (pY+startLY-ftlObj2.y)/16;
            ftlObj2.sP(ftlObj2.x, ftlObj2.y);
            setTimeout("stayTopLeft()", 1);
        }
        ftlObj = ml("divAdRight");
        //stayTopLeft();
        ftlObj2 = m2("divAdLeft");
        stayTopLeft();
    }
    function ShowAdDiv()
    {
        var objAdDivRight = document.getElementById("divAdRight");
        var objAdDivLeft = document.getElementById("divAdLeft");
        if (document.body.clientWidth < 1000)
        {
            objAdDivRight.style.display = "none";
            objAdDivLeft.style.display = "none";
        }
        else
        {
            objAdDivRight.style.display = "block";
            objAdDivLeft.style.display = "block";
            FloatTopDiv();
        }
    }
</script>
<script>

<a href='http://www.hocinternetmarketing.net/'>.</a>

document.write("<script type='text/javascript' language='javascript'>MainContentW = 1000;LeftBannerW = 125;RightBannerW = 125;LeftAdjust = 5;RightAdjust = 5;TopAdjust = 10;ShowAdDiv();window.onresize=ShowAdDiv;;<\/script>");
</script>

Trong đoạn code trên :

    <a href="http://www.hocinternetmarketing.net/"> : liên kết đến khi người đọc click vào. Thay http://www.hocinternetmarketing.net/ bằng liên kết trang bạn cho phù hợp
    <img src=”…”/> : banner bạn muốn hiển thị
    width="125" : chiều rộng của banner. Có 2 giá trị được đánh dấu cùng màu cam
    MainContentW = 1000 : chiều rộng trang web. Có 2 giá trị được đánh dấu cùng màu tím,
    LeftAdjust = 5 : khoảng cách từ bìa trái trang web đến banner
    RightAdjust = 5 : khoảng cách từ bìa phải trang web đến banner
    TopAdjust = 10 : khoảng cách từ rìa trên trang web đến banner

Bước 4: Lưu tiện ích lại là OK.

Lưu ý : Do tiện ích sử dụng những giá trị xác định để điều chỉnh vị trí của banner so với trang web, do đó, tính thẩm mỹ của tiện ích sẽ phụ thuộc vào độ phân giải của màn hình máy tính.

Chúc các bạn và anh/chị sớm thành công trên môi trường internet. Nếu có thắc mắc gì mọi người có thể để lại comments bên dưới để cùng thảo luận nhé.

MỜI BẠN THAM KHẢO THÊM":

Cách hiệu quả để tăng CTR cho quảng cáo banner

Thuật ngữ CTR (Click- Through- Rate) là tỷ lệ click/ số lượt hiển thị của quảng cáo được sử dụng nhiều trong các chiến dịch quảng cáo PPC( Pay- Per- Click). CTR thể hiện sự quan tâm của người dùng đến sản phẩm, dịch vụ được quảng cáo. Vì vậy có thể nói đây là một thông số quan trọng quyết định tính hiệu quả của một chiến dịch quảng cáo.

Có rất nhiều yếu tố ảnh hưởng đến CTR của banner như hình ảnh hiển thị, kích thước, vị trí banner, thông điệp quảng cáo, khách hàng mục tiêu… và dưới đây là một số cách hiệu quả để tặng CTR cho các quảng cáo banner.

1. Quan tâm đến yếu tố chữ (text) trên banner

Khi nhắc đến banner, hầu hết mọi người đều nghĩ đến việc sử dụng những hình ảnh, màu sắc bắt mắt. Tuy nhiên marketer cũng nên quan tâm yếu tố chữ để giúp truyền đạt thông điệp đến với khách hàng một cách hoàn thiện nhất.

Những thông điệp chữ trên banner nên gợi lên một giá trị hấp dẫn cho người xem quảng cáo. Thậm chí nhiều quảng cáo chỉ sử dụng các kiểu chữ và màu sắc để làm nổi bật nội dung của mình giữa những quảng cáo chỉ tập trung vào hình ảnh.

Mẫu quảng cáo tập trung vào nội dung và kiểu chữ

Hơn nữa, những quảng cáo sử dụng ngôn ngữ phù hợp cũng mang lại những click giá trị vì chỉ những khách hàng quan tâm thật sự đến nội dung quảng cáo mới nhấp chuột để tìm hiểu thêm.

2. Sử dụng nút bấm và lời mời gọi

Việc tạo ra một nội dung hấp dẫn cần kết hợp với việc sử dụng những từ ngữ gợi lên mong muốn tìm hiểu của khách hàng. Bằng cách này, những từ ngữ như “Dùng thử miễn phí”, “tìm hiểu thêm”, “ Đặt chỗ ngay”, “Số lượng có hạn” có thể giúp bạn tăng lượng CTR.

Lý giải cho điều này là việc lướt web đã tạo ra một thói quen bị động cho người sử dụng, những lời mời gọi sẽ giúp kích thích người xem quảng cáo tương tác với mẩu quảng cáo.

Mẫu banner đơn giản nhưng vẫn hấp dẫn với lời mời gọi sử dụng

3. Banner được thiết kế độc đáo và sáng tạo

Đây là một câu hỏi về tính sáng tạo và cập nhật của các marketer. Dám thử những ý tưởng mới lạ và thoát khỏi suy nghĩ truyền thống có thể mang lại CTR cao bất ngờ. Banner dưới đây được đặt trong một diễn đàn về thiết kế là một ví dụ về việc tận dụng khuôn mặt “me gusta” hiện đang rất được ưu chuộng trong giới trẻ nói chung và giới thiết kế nói riêng.

Gây chú ý bằng banner với những ý tưởng độc đáo

Những ý tưởng đang thịnh hành khác như chụp ảnh nghiêng cũng có thể trở thành cảm hứng cho các marketer để trình bày một banner độc đáo.

4. Hiểu rõ khách hàng của mình

Ngoài việc thiết kế banner hài hòa giữa hình ảnh và câu chữ, sản phẩm và dịch vụ được quảng cáo phải phù hợp với đối tượng được quảng cáo. Ví dụ bạn quảng cáo sản phẩm thời trang công sở nữ thì mẫu quảng cáo của bạn nên được xuất hiện trên các website hoặc diễn đàn làm đẹp, gia đình như phunutoday.vn, yeutretho.vn.. Rất may, hiện nay có rất nhiều mạng quảng cáo trực tuyến đã có chức năng phân loại quảng cáo theo địa lý, giới tính, nhóm khách hàng quan tâm. Chức năng này tiết kiệm thời gian và công sức cho Advertiser; không phải chọn từng site cụ thể mà vẫn có thể nhắm “chuẩn” khách hàng tiềm năng của mình.

Ngoài những cách trên, để một chiến dịch banner được hiệu quả, marketer cần nhớ phải luôn cập nhật và làm mới mình bằng những ý tưởng khác nhau, nên tạo ra nhiều phiên bản banner cho một chiến dịch. Luôn theo dõi CTR để đánh giá banner nào đang hoạt động tốt và banner nào cần được thay thế là một trong những nhiệm vụ quan trọng của marketer khi chạy chiến dịch banner.

Ngoài ra, marketer cũng có thể tiết kiệm chi phí lớn khi quảng cáo banner nếu chịu khó săn lùng các chương trình khuyến mại của nhà phân phối quảng cáo.

Kế hoạch quảng bá website để thành công như mong đợi
Cách khắc phục lỗi adobe flash player trên cách trình duyệt
Hướng dẫn làm tuyết rơi trong flash
Cách làm marketing online hiệu quả nhất
Hướng dẫn làm flash tặng người yêu

(ST)