Code chèn quảng cáo ở góc phải hoặc trái màn hình

2:55 AM |
Dưới đây là code chèn quảng cáo ở góc phải hoặc trái hoặc cả trái và phải của trang web, blog, forum… tóm lại là chèn được cho tất cả các mã nguồn. Nội dung quảng cáo có thể chèn được là file flash, hình ảnh hoặc code quảng cáo từ bên thứ 3.
quang cao goc phai
Quảng cáo bên góc phải màn hình
Mình không làm demo vì nó khá đơn giản, bạn xem ảnh trên là có thể hình dung nó như thế nào rồi.

Code chèn quảng cáo góc phải màn hình

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script type="text/javascript">
function hide_float_right() {
var content = document.getElementById('float_content_right');
var hide = document.getElementById('hide_float_right');
if (content.style.display == "none")
{content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_right()">Tắt quảng cáo [X]</a>'; }
else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_right()">Xem quảng cáo...</a>';
}
}
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_right {border: 1px solid #01AEF0;}
#hide_float_right {text-align:right; font-size: 11px;}
#hide_float_right a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class="float-ck" style="right: 0px" >
<div id="hide_float_right">
<a href="javascript:hide_float_right()">Tắt Quảng Cáo [X]</a></div>
<div id="float_content_right">
<!-- Start quang cao-->
<embed src="http://ads.visaonho.com/img/afoo/300x250.swf" width="250" height="200" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" menu="false" wmode="transparent" allowScriptAccess="always"/>
<!-- End quang cao -->
</div>
</div>

Code chèn quảng cáo góc trái màn hình

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script type="text/javascript">
function hide_float_left() {
var content = document.getElementById('float_content_left');
var hide = document.getElementById('hide_float_left');
if (content.style.display == "none")
{content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_left()">Tắt quảng cáo [X]</a>'; }
else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_left()">Xem quảng cáo...</a>';
}
}
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_left {border: 1px solid #01AEF0;}
#hide_float_left {text-align:left; font-size: 11px;}
#hide_float_left a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class="float-ck" style="left: 0px" >
<div id="hide_float_left">
<a href="javascript:hide_float_left()">Tắt Quảng Cáo [X]</a></div>
<div id="float_content_left">
<!-- Start quang cao-->
<embed src="http://ads.visaonho.com/img/afoo/300x250.swf" width="250" height="200" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" menu="false" wmode="transparent" allowScriptAccess="always"/>
<!-- End quang cao -->
</div>
</div>

Hướng dẫn cách chèn code

Bạn có thể chèn code trên vào bất kỳ vị trí nào, tốt nhất là chèn ở dưới footer để site load nhanh hơn.
Thay thế nội dung code quảng cáo của bạn vào giữa dòng <!– Start quang cao –>  <!– End quang cao –>
Read more…

Cách sử dụng mã màu trong Html

9:53 PM |

CÁCH SỬ DỤNG MÃ MÀU TRONG HTML

Với mã màu HTML bạn có thể thiết lập màu nền trang web, màu của văn bản và nhiều hơn nữa... 

HTML, học HTML, mã màu HTML
Color Code HTML


Bạn đã bao giờ  đặt ra  câu hỏi làm thế nào để sử dụng mã màu HTML chưa?

Sau đây chúng ta sẽ cùng tham khảo một số cách sử dụng mã màu HTML 


1. Sử dụng mã màu HTML cho các trang web màu nền trang web:
<body style="background:#80BFFF">

2. Sử dụng mã màu HTML cho thiết lập font chữ / chữ màu:
<span style="color:#80BFFF">

3. Sử dụng mã màu HTML cho màu nền bảng:
<table style="background:#80BFFF">

4. Sử dụng mã màu HTML cho màu sắc liên kết:
<a style="color:#80BFFF">


Biểu tượng và ý nghĩa của biểu tượng trong mã HTML:


Biểu tượng trong HTML


Mỗi mã HTML có chứa biểu tượng "#"  6 chữ hoặc sốNhững con số này trong hệ thống chữ số thập lục phân. Ví dụ như "FF" trong hệ thập lục phân đại diện cho số 255 trong thập phân.

Ý nghĩa của biểu tượng:


Hai biểu tượng đầu tiên trong mã màu HTML hiện cường độ của màu đỏ. 00 là ít nhất  FF cường độ cao nhấtCường độ thứ ba và thứ tư đại diện cho màu xanh lá cây và thứ năm và thứ sáu đại diện cho cường độ của màu xanhVì vậy, kết hợp với cường độ của màu đỏ, xanh lá câyvà xanh da trời, chúng ta có thể kết hợp gần như bất kỳ màu sắc nào mà chúng tôi mong muốn;)

ví dụ:
# FF0000 - Với HTML code này, chúng ta cho trình duyệt để hiển thị tối đa của màu đỏ và màu xanh lá cây không có và không có màu xanhKết quả là chúng ta sẽ có màu đỏ tinh khiết:

# 00FF00 - HTML code này cho thấy chỉ màu xanh lá cây  không có màu đỏ  màu xanh.

# 0000FF - HTML code này cho thấy chỉ màu xanh và không có màu đỏ  màu xanh lá cây.

# FFFF00 - Sự kết hợp của màu đỏ  màu xanh lá cây cho chúng ta màu vàng:

# CCEEFF - Hãy dành một chút màu đỏ hơn một chút màu xanh lá cây  màu xanh tối đa để có được màu sắc của bầu trời:


Các bạn hãy thỏa sức sáng tạo ra những màu sắc mới dựa trên sự kết hợp các màu sắc đã có. 
Chúc các bạn thành công. 
Read more…

16 theme Wordpress tin tức miễn phí

8:06 PM |
Trong số các loại theme WordPress, thì theme dành cho các website tin tức/tạp chí luôn là điểm nóng tìm kiếm của cộng đồng sử dụng WordPress tại Việt Nam vì mức độ phổ biến của ý tưởng làm website tin tức.
Có một điều đáng buồn là các theme dạng này rất hiếm có bản miễn phí nhìn cho được vì nó khá phức tạp so với các theme thường khác. Trong số các nhà cung cấp theme tin tức/tạp chí trả phí thì mình ưng nhất là Magazine3 nhưng lựa chọn bỏ tiền ra không phải ai cũng thích.
Sau một thời gian tổng hợp và chắt lọc, mình đã tìm ra được một số theme tin tức miễn phí khá đẹp so với cái giá $0 của nó. Hãy thử xem danh sách bên dưới và xem có cái nào phù hợp cho bạn không nhé.

Xin Magazine

xinmagazine-theme

MH Magazine Lite

MH_Magazine_lite

BresponZive

bresponzive-theme

iMag Mag

Theme Tạp chí, Công nghệ đáng dùng

ZeeDynamic Lite

zeedynamic-theme

Ridizain

ridizain-theme

Tydskrif

Tydskrif-theme

Portal

Hueman

Hueman theme

ProMax

Promax theme

WereTech


 Meaja

maeja-theme

Mesocolumn

Surfarama

Surfarama Theme
Theme tin tức phong cách dạng lưới

GeneralPress Free

generalpress-free

InkZine

inkzine-theme
Read more…

Tự code trang đăng nhập cho WordPress

7:17 PM |
Tự code trang đăng nhập cho WordPress
Trong WordPress đã có một trang đăng nhập chuẩn có sẵn với đường dẫn /wp-login.php, nghĩa là mỗi lần bạn muốn đăng nhập thì phải truy cập vào trang đó. Nhìn chung nó cũng khá tốt khi hỗ trợ một khung đăng nhập, nhưng hình như nó hơi độc lập với nội dung của trang.
Vì một lý do nào đó, bạn không muốn sử dụng trang này để đăng nhập nữa mà muốn dùng một trang riêng với đường dẫn đẹp và dễ nhớ hơn. Nếu bạn cần như vậy, ở bài này mình sẽ hướng dẫn chi tiết cách tự code một trang đăng nhập riêng cho WordPress mà không sử dụng tới trang wp-login.php mặc định để tạo sự chuyên nghiệp.

Bước 1. Tạo một Page để đăng nhập

Do bài này mình sử dụng tính năng Custom Page Template nên việc đầu tiên là bạn phải có sẵn một page do chính bạn tự tạo ra, bạn có thể tự đặt tên bất kỳ và đặt đường dẫn bất kỳ mà mình thích nhé.
codeloginpage-taopage
Nội dung để trống và ấn nút Publish để đó.

Bước 2. Tạo một page template

Bây giờ hãy vào thư mục theme mà bạn đang dùng, tạo một file tên login-page.php với nội dung chính xác như sau:
1
2
3
4
<?php
/*
 Template Name: Login Page
 */
Tạo xong lưu lại, rồi vào lại page mà bạn đã tạo ở bước 1 và chọn template cho nó là Login Page.
codeloginpage-usetemplate

Bước 3. Code cho trang đăng nhập

Trước tiên bạn cần phải hiểu, để gọi form đăng nhập trong WordPress ra ta có thể sử dụng hàm wp_login_form() có sẵn của nó. Trong hàm này có rất nhiều tham số mà bạn có thể xem tại đây.
Do đó, chúng ta sẽ viết hàm này vào file page-login.php để cho nó hiển thị một cái form đăng nhập. Bạn có thể thử viết đoạn dưới đây vào file đó để xem form đăng nhập có hiển thị không.
1
wp_login_form();
codeloginpage-wploginform
ta tạm có
codeloginpage-wploginform-preview
Bạn có thể viết thêm hàm get_header() và get_footer() vào đó để nó phù hợp với theme mà bạn đang dùng.
codeloginpage-wploginform-headerfooter
Tuy nhiên, ở bài này mình sẽ không hướng dẫn theo hướng sử dụng CSS của theme đâu nên nếu bạn muốn tiếp tục làm theo hướng dẫn ở bài này, hãy xóa đi hàm get_header() và get_footer() nhé.
Tiếp tục, mình sẽ chỉ bạn cách làm việc với các tham số của hàm wp_login_form() luôn để bạn có thể tùy biến một vài thành phần của nó nhé. Viết thêm code sau ngay bên trên hàm wp_login_form() trong file.
1
2
3
4
5
6
7
8
$args = array(
'redirect' => site_url( $_SERVER['REQUEST_URI'] ),
'form_id' => 'dangnhap', //Để dành viết CSS
'label_username' => __( 'Tên tài khoản' ),
'label_password' => __( 'Mật khẩu' ),
'label_remember' => __( 'Ghi nhớ' ),
'label_log_in' => __( 'Đăng nhập' ),
);
Sau đó sửa wp_login_form() thành wp_login_form($args).
Giờ thì ta có
codeloginpage-wploginform-args
Nhìn hơi trống phải không nào, mình biến tấu thêm một khung giới thiệu kế bên nữa cho nó oách. Thay toàn bộ nội dung file page-login.php thành nội dung dưới đây.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php
/*
 Template Name: Login Page
 */
?>
<div class="login-area">
        <div class="note">
                <h3>Đăng nhập</h3>
                <p>Hãy sử dụng tài khoản của bạn để đăng nhập vào website. Nếu chưa có tài khoản, <a href="<?php bloginfo('url'); ?>/wp-login.php?action=register">đăng ký tại đây</a>.</p>
        </div>
        <div class="form">
                <?php
                        $args = array(
                                'redirect'       => site_url( $_SERVER['REQUEST_URI'] ),
                                'form_id'        => 'dangnhap', //Để dành viết CSS
                                'label_username' => __( 'Tên tài khoản' ),
                                'label_password' => __( 'Mật khẩu' ),
                                'label_remember' => __( 'Ghi nhớ' ),
                                'label_log_in'   => __( 'Đăng nhập' ),
                        );
                        wp_login_form($args);
                ?>
        </div>
</div>
Giờ thì viết thêm một tí CSS vào trang này nhé, chèn đoạn dưới đây vào ngay trên <div class=”login-area”>.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<style>
        body {
                background: #2E8D41;
                font-family: Arial, sans-serif;
                font-size: 14px;
                line-height: 1.5em;
        }
        .login-area {
                background: #FFF;
                margin: 100px auto;
                width: 960px;
                padding: 1em;
                overflow: hidden;
        }
        .note {
                float: left;
                margin-right: 20px;
        }
        .form {
                float: right;
                width: 250px;
                text-align: center;
        }
        label {
                display: block;
        }
        input, input, input, input, input, input, input, select, textarea {
                border: 1px solid #DDD;
                -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
                box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
                background-color: #FFF;
                color: #333;
                -webkit-transition: .05s border-color ease-in-out;
                transition: .05s border-color ease-in-out;
                padding: 5px 10px;
        }
        input {
                        background: #51a818;
                        background-image: -webkit-linear-gradient(top, #51a818, #3d8010);
                        background-image: -moz-linear-gradient(top, #51a818, #3d8010);
                        background-image: -ms-linear-gradient(top, #51a818, #3d8010);
                        background-image: -o-linear-gradient(top, #51a818, #3d8010);
                        background-image: linear-gradient(to bottom, #51a818, #3d8010);
                        -webkit-border-radius: 10px;
                        -moz-border-radius: 10px;
                        border-radius: 10px;
                        font-family: Arial;
                        color: #ffffff;
                        padding: 10px 20px 10px 20px;
                        border: solid #32a840 2px;
                        text-decoration: none;
        }
</style>
Do đây chỉ là CSS mình viết tạm cho có nên có thể nó hơi xấu, bạn có thể viết tùy theo ý của bạn.

Bước 4. Xác thực đăng nhập

Bây giờ bạn đã có một form đơn giản theo ý mình và bạn vẫn đăng nhập thành công. Nhưng điều gì sẽ xảy ra khi bạn đăng nhập? Nó sẽ chẳng chuyển đi đâu hết mà vẫn ở lại trang đăng nhập nhưng cookie đăng nhập sẽ vẫn được lưu, bằng chứng là sau khi đăng nhập bạn gõ vào trang /wp-admin thì vẫn vào được. Để khắc phục điều này, hãy đặt code này vào file functions.php.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
/* Tự động chuyển đến một trang khác sau khi login */
function my_login_redirect( $redirect_to, $request, $user ) {
        //is there a user to check?
        global $user;
        if ( isset( $user->roles ) && is_array( $user->roles ) ) {
                //check for admins
                if ( in_array( 'administrator', $user->roles ) ) {
                        // redirect them to the default place
                        return admin_url();
                } else {
                        return home_url();
                }
        } else {
                return $redirect_to;
        }
}
add_filter( 'login_redirect', 'my_login_redirect', 10, 3 );
Đối với code trên, sau khi admin đăng nhập thành công thì nó sẽ trỏ đến trang quản trị (admin_url()), còn thành viên bình thường nó sẽ trỏ tới trang chủ (home_url()).
Mặt khác, file /wp-login.php vẫn được sử dụng nếu bạn gõ địa chỉ đó nên bây giờ ta sẽ cần thêm một vài đoạn code bỏ vào file functions.php trong theme để cấu hình lại nó.
01
02
03
04
05
06
07
08
09
10
function redirect_login_page() {
    $login_page  = home_url( '/dang-nhap/' );
    $page_viewed = basename($_SERVER['REQUEST_URI']); 
    if( $page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
        wp_redirect($login_page);
        exit;
    }
}
add_action('init','redirect_login_page');
Hãy đổi lại /dang-nhap/ thành đường dẫn trang đăng nhập của bạn nhé.

Bước 5. Lỗi đăng nhập

Có một vấn đề sau khi làm xong 4 bước trên là nếu đăng nhập bị sau thì nó vẫn “tiễn” về file wp-login.php kèm thông báo lỗi. Đã sửa thì sửa cho trót, đặt thêm code sau vào file functions.php để nó hiển thị thông báo lỗi ở trang đăng nhập của bạn luôn.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
/* Kiểm tra lỗi đăng nhập */
function login_failed() {
    $login_page  = home_url( '/dang-nhap/' );
    wp_redirect( $login_page . '?login=failed' );
    exit;
}
add_action( 'wp_login_failed', 'login_failed' ); 
function verify_username_password( $user, $username, $password ) {
    $login_page  = home_url( '/dang-nhap/' );
    if( $username == "" || $password == "" ) {
        wp_redirect( $login_page . "?login=empty" );
        exit;
    }
}
add_filter( 'authenticate', 'verify_username_password', 1, 3);
Nhưng nó vẫn chưa có thông báo lỗi để thành viên biết, hãy thêm đoạn code dưới vào file page-login.php ở ngay dưới <div class=”form”>.
01
02
03
04
05
06
07
08
09
10
<?php
        $login  = (isset($_GET['login']) ) ? $_GET['login'] : 0;
        if ( $login === "failed" ) {
                echo '<p><strong>ERROR:</strong> Sai username hoặc mật khẩu.</p>';
        } elseif ( $login === "empty" ) {
                echo '<p><strong>ERROR:</strong> Username và mật khẩu không thể bỏ trống.</p>';
        } elseif ( $login === "false" ) {
                echo '<p><strong>ERROR:</strong> Bạn đã thoát ra.</p>';
        }
?>
codeloginpage-error
Xong rồi đấy, việc tùy biến thêm gì nữa bây giờ là của bạn. :D
  • Toàn bộ nội dung file page-login.php: http://pastebin.com/usUHiKaZ
  • Toàn bộ nội dung file functions.php: http://pastebin.com/Z73rufks
Read more…

QC trai

Bài Ngẫu Nhiên

POPUP