MMO - kiếm tiền online và thủ thuật máy tính


Cộng đồng vui bựa status Tham gia đê

Share và sử dụng code sticky sidebar cho website

21:06 |

Với mỗi website, sticky sidebar luôn là một công cụ cần thiết để quảng bá những nội dung quan trọng. Bạn chưa có code sticky sidebar ? Bài viết này sẽ giúp bạn !


Share code và sử dụng sticky sidebar cho website
Thêm chú thích

Giới thiệu về tính năng sticky sidebar


Hiện nay cùng một "đối tượng dính " nhưng có khá nhiều thuật ngữ được sử dụng để gọi tên như sticky banner, sticky widget hay sticky sidebar ... Để tránh mâu thuẫn trong quá trình thao tác, mình sẽ gọi chung tất cả là sticky sidebar anh em nhé :)

Khi bạn kéo thanh cuộn của trình duyệt lên trên hoặc xuống dưới, sticky sidebar sẽ được cố định ở bên phải/trái màn hình theo những thông số của jquery (code sticky sidebar).

Mô hình sticky sidebar



Sticky sidebar nên được đặt ở vị trí cuối cùng trong các cột như hình dưới thì code mới hoạt động tốt và ổn đinh.
Một sidebar có thể chứa bên trong nhiều thành phần con như quảng cáo, video, bài viết mới nhất, ... nhưng chúng ta chỉ nên sử dụng tối đa 2 thành phần là ổn, vừa mang tính thẩm mỹ vừa dễ dàng trong việc quản lý code.

Vị trí sidebar trong website

Lưu ý chung


- Cùng một đoạn code nhưng không phải cứ paste vào là chạy bởi mỗi website được xây dựng trên một nền tảng và ngôn ngữ lập trình khác nhau. Do đó, hãy đảm bảo là bạn nắm vững về code để chỉnh sửa khi cần thiết.
- Mình sẽ tổng hợp và đưa ra nhiều cách cho anh em lựa chọn, nhớ sao lưu template trước khi thao tác nhé.
- Để tất cả javascript (jquery) trên website hoạt động ổn định trên, hãy paste đoạn mã sau vào trong cặp thẻ <body></body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

Cách 1 : Sử dụng code sticky sidebar - phiên bản Q2W3


Bước 1 : Truy cập trang chỉnh sửa HTML.
Bước 2 : Tìm thẻ đóng </body> và chèn vào trước đó đoạn mã sau

<script type='text/javascript'>
//<![CDATA[
function q2w3_sidebar(e){function t(){}function f(t){var n=t.offset_top-t.fixed_margin_top;var s=i-e.margin_bottom;var o;if(e.width_inherit)o="inherit";else o=t.obj.css("width");var u=false;var a=false;var f=false;jQuery(window).on("scroll."+e.sidebar,function(e){var i=jQuery(this).scrollTop();if(i+t.fixed_margin_bottom>=s){if(!a){t.obj.css("position","fixed");t.obj.css("top","");t.obj.css("width",o);if(jQuery("#"+t.clone_id).length<=0)t.obj.before(t.clone);a=true;u=false;f=false}t.obj.css("bottom",i+r+t.next_widgets_height-s)}else if(i>=n){if(!u){t.obj.css("position","fixed");t.obj.css("top",t.fixed_margin_top);t.obj.css("bottom","");t.obj.css("width",o);if(jQuery("#"+t.clone_id).length<=0)t.obj.before(t.clone);u=true;a=false;f=false}}else{if(!f){t.obj.css("position","");t.obj.css("top","");t.obj.css("width","");if(jQuery("#"+t.clone_id).length>0)jQuery("#"+t.clone_id).remove();f=true;u=false;a=false}}}).trigger("scroll."+e.sidebar);jQuery(window).on("resize",function(){if(jQuery(window).width()<=e.screen_max_width){jQuery(window).off("load scroll."+e.sidebar);t.obj.css("position","");t.obj.css("top","");t.obj.css("width","");t.obj.css("margin","");t.obj.css("padding","");if(jQuery("#"+t.clone_id).length>0)jQuery("#"+t.clone_id).remove();f=true;u=false;a=false}}).trigger("resize")}if(!e.widgets)return false;if(e.widgets.length<1)return false;if(!e.sidebar)e.sidebar="q2w3-default-sidebar";var n=new Array;var r=jQuery(window).height();var i=jQuery(document).height();var s=e.margin_top;jQuery(".q2w3-widget-clone-"+e.sidebar).remove();for(var o=0;o<e.widgets.length;o++){widget_obj=jQuery("#"+e.widgets[o]);widget_obj.css("position","");if(widget_obj.attr("id")){n[o]=new t;n[o].obj=widget_obj;n[o].clone=widget_obj.clone();n[o].clone.children().remove();n[o].clone_id=widget_obj.attr("id")+"_clone";n[o].clone.addClass("q2w3-widget-clone-"+e.sidebar);n[o].clone.attr("id",n[o].clone_id);n[o].clone.css("height",widget_obj.height());n[o].clone.css("visibility","hidden");n[o].offset_top=widget_obj.offset().top;n[o].fixed_margin_top=s;n[o].height=widget_obj.outerHeight(true);n[o].fixed_margin_bottom=s+n[o].height;s+=n[o].height}else{n[o]=false}}var u=0;var a;for(var o=n.length-1;o>=0;o--){if(n[o]){n[o].next_widgets_height=u;n[o].fixed_margin_bottom+=u;u+=n[o].height;if(!a){a=widget_obj.parent();a.css("height","");a.height(a.height())}}}jQuery(window).off("load scroll."+e.sidebar);for(var o=0;o<n.length;o++){if(n[o])f(n[o])}}
jQuery(document).ready(function(){
            var q2w3_sidebar_1_options = {
                "sidebar" : "",
                "margin_top" : 50,
                "margin_bottom" : 300,
                "screen_max_width" : 0,
                "width_inherit" : false,
                "widgets" : ['id_sidebar']
            };
            q2w3_sidebar(q2w3_sidebar_1_options);
            setInterval(function () { q2w3_sidebar(q2w3_sidebar_1_options); }, 1500);
        });
//]]>
</script>

Bước 3 : Lưu template và test.

Các tham số


1. margin_top : khoảng cách từ sticky sidebar tới cạnh trên màn hình (đơn vị : pixel).
2. margin_bottom : khoảng cách từ sticky sidebar tới cạnh dưới màn hình (đơn vị : pixel). Margin_bottom thường được tính bằng chiều cao của footer cộng thêm một khoảng cố định.

- Trường hợp 1 : footer có chiều cao luôn cố định, vậy thì đơn giản rồi, bạn chỉ cần ghi một giá trị cụ thể như ở đoạn code bên trên là xong.

"margin_bottom" : 300.

- Trường hợp 2 : footer có chiều cao thay đổi - thường là với giao diện responsive, lúc này chúng ta phải sử dụng biến cho margin-bottom

"margin_bottom" : $('.lớp_của_footer').height() + khoảng cách,
ví dụ : margin_bottom" : $('.footer').height() + 50,
Để lấy được lớp (class) của footer, bạn phải nắm được HTML hoặc nhấn F12 để xem mã nguồn nhé.

- sidebarwidgets : id của sticky sidebar.
Để an toàn, các bạn nên đặt sticky sidebar vào trong cặp thẻ <div></div> và thêm id cho cặp thẻ đó.

Ví dụ
<div id="stickya">
Code ...
</div>
Code tương ứng
"sidebar" : "stickya","widgets" : ['stickya']


Lưu ý


 Một đoạn code chỉ áp dung duy nhất cho một sidebar, nếu bạn muốn sử dụng nhiều hơn, hãy copy - paste và thay đổi các tham số cần thiết.

jQuery(document).ready(function(){
            var q2w3_sidebar_1_options = {
                "sidebar" : "stickya",
                "margin_top" : 5,
                "margin_bottom" : 300,
                "screen_max_width" : 0,
                "width_inherit" : false,
              "widgets" : ['stickya']
            };
            q2w3_sidebar(q2w3_sidebar_1_options);
            setInterval(function () { q2w3_sidebar(q2w3_sidebar_1_options); }, 1500);
        });

Tham khảo : freetuts.net, Q2W3 WordPress Plugin 

Cách 2 : Sử dụng code sticky sidebar - phiên bản 123itvn


Đánh giá sơ lược
- Đoạn code này do chính team 123itvn thực hiện và đã đưa vào sử dụng. Nếu code không hoạt động, xin vui lòng sử dụng cách khác.
- Code chỉ hiệu quả cho website sử dụng 1 hoặc 2 sticky sidebar.
- Nếu có thể, bên mình sẽ tiếp tục cập nhật để code hoạt động tốt hơn trên nhiều thiết bị với nhiều kích cỡ màn hình khác nhau. Cám ơn đã ghé thăm :)

Bước 1 : Truy cập trang chỉnh sửa HTML.
Bước 2 : Tìm thẻ đóng </body> và chèn vào trước đó đoạn mã sau

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
console.log( "document ready!" );
//KHAI BÁO BIẾN
  var $stickyb = $('.stickyb');
  var $f = $('.footer');
  var b1 = $stickyb.offset().top;
  var kc = 5;
//KHI SCROLL
$(function(){
  $(window).scroll(function(){
var thanhcuon = $(window).scrollTop();
var mq = window.matchMedia("screen and (min-width: 768px)")
if (mq.matches)
    {
  // TH1 : khi thanh cuộn chưa đi qua vị trí top thằng B
  if (thanhcuon < b1 - kc )
{ $stickyb.css({ position: 'absolute', top:$stickyb.offset().top}); }      
// TH2 : khi đã đi qua thì cho dính luôn
else
{
$stickyb.css({ position: 'fixed', top:kc});
//Gặp footer, lúc này bỏ dính
  var h = $f.offset().top;
  if (thanhcuon > h - $stickyb.height() - kc)
{ $stickyb.css({ position: 'absolute', top: h - $stickyb.height() - kc - 7 }); }
}
    }
});
});
//KHI RESIZE CỬA SỔ TRÌNH DUYỆT
$(function(){
$(window).resize(function() {
var mq1 = window.matchMedia("screen and (min-width: 768px)")
// Nếu kích cỡ màn hình > 768px thì thiết lập vị trí đối tượng về trạng thái sticky
if (mq1.matches)
{$('.stickyb').css({ position: 'absolute', top:$('.stickyb').offset().top});}
// Nếu kích cỡ màn hình < 768px thì thiết lập vị trí đối tượng về mặc định
else {$('.stickyb').css({ position: 'inherit',top:''});}
});
});
});
//]]>
</script>

Bước 3 :  Lưu template và test.

Các tham số


- $stickyb, $f : lần lượt là tên lớp của 2 đối tượng sticky sidebar và footer.
- kc : khoảng cách từ đối tượng sticky sidebar tới cạnh trên màn hình (đơn vị : pixel).
- min-width: 768px : kích cỡ màn hình không muốn áp dụng sticky sidebar (với giao diện responsive). Ở đây, mình chỉ áp dụng sticky cho màn hình có bề ngang tối thiểu là 768px, còn từ 768 trở xuống thì tính năng sticky sẽ không còn hoạt động.

Lời kết


Nhìn chung, code sticky sidebar hoạt động tương đối ổn định ở điều kiện thường. Tuy nhiên, khi có sự điều chỉnh về kích cỡ trình duyệt (từ to sang bé, từ bé sang to) thì vị trí của sticky sidebar bắt đầu hơi "lệch lạc". Có nhiều nguyên nhân để dẫn tới điều này nhưng cơ bản nhất vẫn là do nền tảng và cách mà coder lập trình cho website. Nếu bạn không nắm vững về code, việc sử dụng sticky sidebar cũng không đơn giản đâu nhé.

Trong thời gian tới, mình sẽ tiếp tục tổng hợp và chia sẻ thêm các đoạn code sticky sidebar để anh em có nhiều lựa chọn hơn khi khai thác.


Từ khóa tìm kiếm :

  • xin code sticky sidebar jquery
  • tạo sticky sidebar trượt dọc website
  • share code floating sidebar
  • tạo đối tượng dính sticky trong wensite
  • tạo sticky sidebar với jquery
  • sử dụng code sticky sidebar như nào

Cài đặt, cấu hình và đặt mã theo dõi google analytics vào website

12:04 |

Quản trị website hiệu quả bằng việc tận dụng sức mạnh của mã theo dõi trong Google Webmasters.


Cài đặt, cấu hình và đặt mã theo dõi google analytics vào website
Cài đặt, cấu hình và đặt mã theo dõi google analytics vào website

Google analytics là gì ???


Google Analytic là một công cụ thống kê và phân tích lưu lượng truy cập được cung cấp miễn phí bởi Google. Hiện tại, google analytics đang hỗ trợ 5 giải pháp cho người dùng nhưng trong đó analytics nội dung trên website là phổ biến hơn cả. Đa số webmaster và SEOer ở Việt Nam đều đang sử dụng google analytics, còn bạn thì sao ?



Với google analytics, bạn sẽ có cái nhìn tổng quan về lưu lượng truy cập, từ khóa tìm kiếm, hành vi người dùng và rất nhiều nội dung khác đang tương tác trên website của bạn. Từ các con số thống kê cụ thể, chúng ta có thể dễ dàng xây dựng được những kế hoạch phát triển website trong tương lai và kiểm tra việc SEO đã đạt hiệu quả như mong muốn hay chưa ?

Ví dụ : sau một thời gian theo dõi google analytics, mình thấy bài viết kiếm tiền trên ipanel online có lượng truy cập tương đối lớn. Okie, như vậy SEO cũng tạm ổn, bây giờ mình sẽ tiếp tục mở rộng nội dung để liên kết bài viết này với các bài viết khác cùng chủ đề trong website nhằm tăng thêm lượt view ⇒ tăng doanh thu quảng cáo :)

Cài đặt, cấu hình và đặt mã theo dõi google analytics vào website
Lượng khách đang online và xem nội dung trên www.123itvn.com

Đăng ký (tạo mới) và đăng nhập vào tài khoản google analytics


- Để sử dụng công cụ google analytics, trước tiên bạn cần có 1 tài khoản Google (tài khoản dùng chung cho tất cả những dịch vụ cung cấp bởi Google). Nếu chưa có, hãy đăng ký ngay nhé !
- Truy cập trang chủ google analytics, trên thanh menu chọn Đăng nhập.

Cài đặt google analytics 


Bước 1 : Sau khi đăng nhập thành công, bạn sẽ được chuyển hướng tới trang giới thiệu. Tại đây, hãy nhấn vào nút Đăng ký để bắt đầu sử dụng google analytics.
Cài đặt, cấu hình và đặt mã theo dõi google analytics vào website
Thao tác đầu tiên với google analytics

Bước 2 : Hoàn thiện thông tin tài khoản
- Đối tượng theo dõi : website hoặc ứng dụng android. Ở đây, mình chọn website.
- Tên tài khoản.
- Tên trang web.
- URL trang web.
- Danh mục ngành.
- Múi giờ báo cáo : chọn vị trí Việt Nam.
Sau khi điền xong thông tin, kéo nội dung xuống dưới và nhấn Nhận ID theo dõi để chuyển sang bước tiếp theo.

Cài đặt, cấu hình và đặt mã theo dõi google analytics vào website
Thiết lập thông tin trên tài khoản google analytics

Bước 3 : Thỏa thuận điều khoản dịch vụ google analytics xuất hiện, chọn Tôi chấp nhận.

Bước cuối cùng trước khi sử dụng google analytics

Thiết lập và lấy mã theo dõi website (tracking code) trên google analytics 


- Trên menu ngang, chọn Quản trị.
- Tại tab Thuộc tính, chọn Thông tin theo dõi / Mã theo dõi.

Cài đặt, cấu hình và đặt mã theo dõi google analytics vào website
Lấy mã theo dõi google analytics

- Copy đoạn mã theo dõi do google analytics cung cấp.

Cài đặt, cấu hình và đặt mã theo dõi google analytics vào website
Đoạn mã theo dõi của google analytics

Đặt mã theo dõi google analytics lên website


- Với bất cứ trang nào mà bạn muốn theo dõi lưu lượng truy cập, hãy tìm thẻ đóng </head> và paste đoạn mã trên vào ngay trước đó.
Lưu ý : Bạn không được phép thay đổi bất kỳ nội dung nào trong đoạn mã vì điều đó sẽ làm thông tin theo dõi bị lỗi.

- Sau khi đặt mã theo dõi, google analytics sẽ cần khoảng 24 giờ để tiến hành thu thập dữ liệu. Trong thời gian này, tất cả thông số đều sẽ có giá trị là 0.
- Với một số mã nguồn như PHP, ASP hoặc công nghệ tương tự, bạn có thể dán đoạn mã theo dõi vào 1 tệp javasrcipt riêng, sau đó gọi đến nó trong cặp thẻ <head></head>
Ví dụ : <script type="text/javascript" src="js/ga.js"></script>

Hướng dẫn chèn mã google analytics lên blotspot


- Sử dụng công cụ chuyển đổi HTMLX để lấy đoạn code mới.
- Đăng nhập blogger, chọn Mẫu / chỉnh sửa HTML.
- Copy đoạn mã vừa chuyển đổi và paste vào trước thẻ đóng </head>.
- Lưu lại template.

Cài đặt, cấu hình và đặt mã theo dõi google analytics vào website
Chèn mã theo dõi google analytics lê blogspot


Hướng dẫn chèn mã google analytics lên wordpress


- Sử dụng plugin : Insert Headers and Footers

Chèn code google analytics vào wordpress
Ảnh : caominhblog.com

- Sau khi cài đặt plugin thành công, tại trang Dashboard của WordPress, chọn SettingInsert Headers and Footers.
- Tại mục Scripts in Header, dán mã theo dõi vào đó.
- Lưu lại.

Lời kết


Google analytics là một công cụ hữu ích mà webmaster và seoer không thể thiếu trong việc quản trị website. Ở bài viết tới, mình sẽ phân tích chi tiết hơn về các thông số google analytics. Chỉ cần nắm được điều này, chắc chắn bạn sẽ biết mình cần phải làm gì để thay đổi hành vi người dùng và thu hút thêm lượt truy cập cho website. Thân ;)


Từ khóa tìm kiếm :

  • hướng dẫn sử dụng google analytics
  • hướng dẫn cài đặt google analytics
  • cách tạo tài khoản google analytics
  • google analytics code
  • cài đặt google analytics
  • lấy mã theo dõi google analytics
  • đặt mã google analytics lên website
  • nhúng mã google analytics vào website

Download full ảnh phong trào bối rối vl

23:45 |

Download full ảnh phong trào bối rối vl
Bối rối vl =))


Tổng hợp ảnh và clip phong trào bối rối vl

12:38 |

Vừa mới chỉ xuất hiện trên xem.vn nhưng "Bối rối vl" đã nhanh chóng trở thành một phong trào được giới trẻ hưởng ứng rất nhiệt tình.


Tổng hợp ảnh và clip phong trào bối rối vl
Phong trào bối rối vl trên xem.vn

Psyduck - tên nhân vật chính của phong trào bối rối vl. Đây cũng là tên của một chú vịt trong truyện tranh nổi tiếng Pokemon. Với khuôn mặt lơ ngơ nhưng cực kỳ biểu cảm, Psyduck đang tạo nên một trào lưu chế ảnh siêu hot trong cộng đồng mạng Việt Nam.

Bạn thích sáng tạo ? Bạn muốn được nhiều người biết đến ? Hãy chế ảnh và gửi chúng cho fanpage 123Yolo . Mình sẽ tiếp tục tổng hợp và chia sẻ tới các bạn những tấm ảnh mới nhất của phong trào bối rối vl :)

[Share]




Clip tổng hợp của phong trào bối rối vl



Ảnh chế bối rối vl


Tổng hợp ảnh và clip phong trào bối rối vl
Bối rối vl phiên bản One Piece

Tổng hợp ảnh và clip phong trào bối rối vl
Có vẻ hư cấu :))

Tổng hợp ảnh và clip phong trào bối rối vl
Bối rối vl =))

Tổng hợp ảnh và clip phong trào bối rối vl
Lạc cmn đường rồi :v

Tổng hợp ảnh và clip phong trào bối rối vl
RIP nhé =))

Tổng hợp ảnh và clip phong trào bối rối vl
Bối rối vl cùng pikachu :3

Tổng hợp ảnh và clip phong trào bối rối vl
Bối rối vl phiên bản Đô rê mon

Tổng hợp ảnh và clip phong trào bối rối vl
Bối rối vl phiên bản Deadpool

Tổng hợp ảnh và clip phong trào bối rối vl
You can't bối rối me :))

Tổng hợp ảnh và clip phong trào bối rối vl
Éo hiểu ảnh này nghĩa gì luôn :))

Tổng hợp ảnh và clip phong trào bối rối vl
It's Bối Rối

Tổng hợp ảnh và clip phong trào bối rối vl
Nàng mona lisa bối rối vl :))

Tổng hợp ảnh và clip phong trào bối rối vl
John bối rối

Tổng hợp ảnh và clip phong trào bối rối vl
Gấp đôi canxi để làm gì, bối rối vl =))

Tổng hợp ảnh và clip phong trào bối rối vl
Thật là vi diệu :3

Tổng hợp ảnh và clip phong trào bối rối vl
Đắng ... à mà thôi

Tổng hợp ảnh và clip phong trào bối rối vl
Superman còn phải bối rối cơ mà

Tổng hợp ảnh và clip phong trào bối rối vl
Khi bối rối vl lên tiếng về Soái ca :))

Tổng hợp ảnh và clip phong trào bối rối vl
Lại bối rối vl rồi :3

Tổng hợp ảnh và clip phong trào bối rối vl
Bối rối vl phiên bản Sơn Tùng MTP

Tổng hợp ảnh và clip phong trào bối rối vl
Bảo sao mà không bối rối :v

Tổng hợp ảnh và clip phong trào bối rối vl
Có gì đó sai sai :))

Tổng hợp ảnh và clip phong trào bối rối vl
Bối rối vl cùng scandal Hoa hậu hoàn vũ 2015

Tổng hợp ảnh và clip phong trào bối rối vl
Cô dâu ... bối rối vl =))

Tổng hợp ảnh và clip phong trào bối rối vl
Có 1 sự giống nhau không hề nhẹ :D

Tổng hợp ảnh và clip phong trào bối rối vl
Why so Bối rối ???

Tổng hợp ảnh và clip phong trào bối rối vl
Vãi cả bối rối !!!

Tổng hợp ảnh và clip phong trào bối rối vl
Bối rối vl, thật không thể tin được !

Tổng hợp ảnh và clip phong trào bối rối vl
Bối rối vl phiên bản nhà báo =))

Tổng hợp ảnh và clip phong trào bối rối vl
Bối rối everywhere :))


Gia hạn tên miền trên namecheap.com

14:50 |

Hướng dẫn cách gia hạn tên miền tại namecheap.com nhanh chóng và thành công.


Gia hạn tên miền trên namecheap.com
Gia hạn tên miền trên namecheap.com

Gia hạn tên miền trên namecheap.com


Bước 1 : Đăng nhập vào hệ thống namecheap.
Bước 2 : Bên menu trái, chọn Domain List. Tại danh sách tên miền được bạn đăng ký trên namecheap, thằng nào sắp hết hạn sẽ có chữ Renew hiển thị ngay bên cạnh. Nhấn vào đó để gia hạn tên miền.

Gia hạn tên miền trên namecheap.com
Danh sách tên miền sắp hết hạn trên namecheap

Bước 3 : Tại trang thanh toán.
- Nếu có mã giảm giá, hãy nhập nó vào ô Promo Code rồi nhấn Apply. Lấy mã giảm giá namecheap.
- Kiểm tra số năm gia hạn + WhoisGuard.
- Nhấn Confirm Order khi hoàn tất.

Bước 4 : Thanh toán
Namecheap hiện hỗ trợ 3 phương thức thanh toán
- Card payment (VISA, MasterCard, American Express).
- Paypal.
- Account Balance.

Ở bài viết này, mình sử dụng phương thức thanh toán bằng Paypal, hãy đăng ký tài khoản paypal nếu bạn chưa có. Trong trường hợp muốn thay đổi phương thức khác, click here.
- Chọn checkout with Paypal.
- Đăng nhập và làm theo hướng dẫn, okie xong :)

Tiếp theo, nhấn Continue và đợt tới khi giao dịch hoàn tất, hãy check lại xem gia hạn tên miền thành công chưa nhé.

Gia hạn tên miền trên namecheap.com
Xác nhận thanh toán bằng Paypal

Đợi hệ thống xử lý, sau khi hoàn tất bạn có thể thấy hạn mới của tên miền ở trang Dashboard. Như vậy là việc gia hạn tên miền trên namecheap đã thành công !


Từ khóa tìm kiếm :

  • gia hạn tên miền trên namecheap
  • gia hạn domain namecheap.com
  • cách gia hạn tên miền trên namecheap.com
  • gia hạn tên miền namecheap thành công

Chèn icon vào tiêu đề bài viết giống xem.vn

17:36 |

Thủ thuật giúp cho tiêu đề bài viết trở nên sinh động hơn bằng các icon ngộ nghĩnh, ưu tiên blogspot nhé :D


Chèn icon vào tiêu đề bài viết giống xem.vn
Chèn icon vào tiêu đề bài viết giống xem.vn

Nếu bạn là 1 fan trung thành của haivl.com, nay là xem.vn thì có lẽ các icon như hình trên đã trở nên quá quen thuộc. Ngày hôm nay, mình sẽ chia sẻ với các bạn cách để chèn icon vào trong tiêu đề bài viết giống như vậy.

Xem demo hoặc Điều lười biếng nhất mày từng làm là gì

Code chèn icon vào tiêu đề bài viết giống xem.vn


<script type="text/javascript">
var a = "Nam đẹp trai :))"
//cắt hết khoảng trắng của tiêu đề
a = a.trim()
//lấy ra 3 ký tự cuối cùng
var b=a.substr(a.length-3,3)
//cắt đi khoảng trống nếu có
b = b.trim()
//đoạn lệnh xử lý
if (b == ":)")
{
var c = a.replace(b,'<img src="http://3.bp.blogspot.com/-Q7ieqv4cpyU/VkVUsl4F9XI/AAAAAAAAJeE/af4B0Uv7_As/s1600/%2529.png">')
}
else if (b == ":))")
{
var c = a.replace(b,'<img src="http://3.bp.blogspot.com/-YTzF3aoxy3o/VkVEvO7Kv-I/AAAAAAAAJcU/5JiA8BKdz1k/s1600/%2529%2529.png">')
}
else (c=a)
document.write(c)
</script>

Đoạn code trên có 3 phần mình đôi đậm
- Biến a - Nam đẹp trai :)) : biến này được sử dụng để lấy tiêu đề của bài viết, tùy theo ngôn ngữ lập trình  bạn có thể thay cụm từ này bằng code khác cho phù hợp nhé.
- Biến b : ký tự của icon đầu vào Ví dụ : :D, :P, :v, ...
- Biến c : URL của hình ảnh đầu ra.

Ưu điểm
- Bạn có thể bổ sung thêm nhiều hình ảnh khác bằng việc copy-paste đoạn code mày đỏ in nghiêng.
- Load nhanh, không làm ảnh hưởng đến tốc độ tải trang.

Nhược điểm
- Mỗi tiêu đề chỉ có thể chèn vào tối đa 1 icon, cái này do mình chưa mày mò thêm nên hiện tại code chỉ hỗ trợ được có thế :D
- Icon phải nằm ở cuối cùng ở tiêu đề.
- Ký tự của icon đầu vào có độ dài tối đa là 3.

Dành riêng cho anh em chơi blogspot (blogger)


<!--ST - CHÈN KÝ TỰ VÀO TIÊU ĐỀ BÀI VIẾT Ở TRANG CHỦ-->
<a expr:href='data:post.url' target='_blank'>
<script type='text/javascript'>
a = &quot;<data:post.title/>&quot;
//cắt hết khoảng trắng của tiêu đề
a = a.trim()
//lấy ra 3 ký tự cuối cùng
var b=a.substr(a.length-3,3)
//cắt đi khoảng trống nếu có
b = b.trim()
//đoạn lệnh xử lý
if (b == &quot;:)&quot;)
{
var c = a.replace(b,&quot;<img src='http://3.bp.blogspot.com/-Q7ieqv4cpyU/VkVUsl4F9XI/AAAAAAAAJeE/af4B0Uv7_As/s1600/%2529.png'/>&quot;)
}
else if (b==&quot;:))&quot;)
{
var c = a.replace(b,&quot;<img src='http://3.bp.blogspot.com/-YTzF3aoxy3o/VkVEvO7Kv-I/AAAAAAAAJcU/5JiA8BKdz1k/s1600/%2529%2529.png'/>&quot;)
}
//trường hợp tiêu đề không có ký tự
else (c=a)
document.write(c)
</script>
</a>
<!--FN - CHÈN KÝ TỰ VÀO TIÊU ĐỀ BÀI VIẾT Ở TRANG CHỦ-->

Thân !

Từ khóa tìm kiếm :

  • chèn icon vào tiêu đề bài viết giống haivl
  • icon ở tiêu đề bài viết
  • chèn icon vào tiêu đề bài viết cho blogspot
  • chen icon vao tieu de bai viet

Kiểm tra website responsive bằng Viewport Resizer

12:54 |

Viewport Resizer - công cụ giúp quản trị viên có thể kiểm tra tính đáp ứng của website một cách cực kỳ hiệu quả.


Kiểm tra website responsive bằng Viewport Resizer
Kiểm tra website responsive bằng Viewport Resizer

Với sự phát triển mạnh mẽ của các thiết bị thông minh, website của bạn cũng cần phải được "nâng cấp" để hiển thị tốt nhất trên nhiều màn hình với các kích cỡ khác nhau. Website responsive là thuật ngữ ám chỉ điều đó.

Vậy, làm thế nào để chúng ta có thể kiểm tra được tính đáp ứng của 1 website. Có một cách thủ công và rất đơn giản : dùng chuột để điều chỉnh kích thước của trình duyệt, co giãn từ to đến nhỏ dần và ngược lại. Cách này khá nhanh, nhưng lại không mấy hiệu quả.

Công cụ Viewport Resizer


Viewport Resizer là một công cụ có thể tương tác với trình duyệt để kiểm tra độ responsive của website. Không cài đặt, chỉ cần lưu vào bookmark là bạn có thể sử dụng ngay lập tức. Ngay từ lần sử dụng đầu tiên, mình đã cực kỳ hài lòng với Viewport Resizer.

Ưu điểm : Viewport Resizer cung cấp cho chúng ta khá đầy đủ các kích cỡ màn hình. Thao tác đơn giản, chỉ việc click để kiểm tra từng giao diện tương ứng.

Nhược điểm : javascript hoặc jquery có thể chạy sẽ không mượt mà cho lắm.
Ok, giờ đến phần thao tác nhé :)

Hiển thị thanh đánh dấu (bookmarks)


Với trình duyệt Chrome, Cốc Cốc
- Tại thanh công cụ, nhấn vào biểu tượng "tùy chỉnh và điều khiển". (Cốc cốc ở bên trái hoặc Chrome ở bên phải)
- Chọn Dấu trang / Hiển thị dấu trang

Kiểm tra website responsive bằng Viewport Resizer
Bookmarks trên trình duyệt Cốc Cốc

Với trình duyệt Firefox : trên thanh công cụ, chọn View / Toolbars / Bookmarks Toolbar

Kiểm tra website responsive bằng Viewport Resizer
Bookmarks trên trình duyệt Firefox

Đánh dấu Viewport Resizer


- Truy cập địa chỉ : http://lab.maltewassermann.com/viewport-resizer/
- Đưa con trỏ vào khung màu xanh, sau đó kéo và di chuyển con trỏ lên thanh bookmark vừa được hiển thị.

Kiểm tra website responsive bằng Viewport Resizer

- Truy cập website cần kiểm tra tính responsive.
- Nhấn vào biểu tượng () và đợi 1 lát, công cụ Resizer sẽ xuất hiện.

Kiểm tra website responsive bằng Viewport Resizer

- Tại đây, bạn có thể kiểm tra tính responsive của website bằng cách click vào từng icon. Mỗi icon sẽ đại diện cho 1 màn hình thiết bị tương ứng. Từ thấp nhất 320x480 (iPhone4) cho tới FullHD.

Lời kết



Dựa trên giao diện mà Viewport Resizer hiển thị, bạn có thể thay đổi code HTML, CSS để mọi thứ nhìn ổn hơn. Tuy nhiên, hãy đảm bảo là bạn nắm vững về code nhé. 


Từ khóa tìm kiếm :

  • kiểm tra website responsive bằng viewport resizer
  • công cụ viewport resizer
  • check responsive bằng viewport resizer
  • viewport resizer kiểm tra tính đáp ứng website
Vui Status
BÀI MỚI
top
search search