Thanh di chuyển lên,xuống,cuộn trang cho Blog

Để thuận tiện hơn trong việc di chuyển trên trang ,cuộn trang theo kiểu xoắn ốc đây là thủ thuật tạo ra các nút di chuyển Home, Page Up, Page Down And và cuôn trang dự động!
Ảnh mịnh họa:

Cách thực hiện:
1. Đăng nhập Blogger
2. Chọn mẫu--> Chỉnh sảu HTML
3.Tìm đến thẻ </body> và dán code bên dưới vào trước nó:

Đọc thêm »

Thanh các mạng xã hội bên phải Blog

Hôm nay mình sẽ giới thiệu đến các bạn một tiện ích khá hay cho Blog! Các trang mạng xã hội : facebook, Twitter, G+... xuất hiện thanh bên phải dọc theo Blog

Ảnh minh họa

Đọc thêm »

Tạo khung liên kết bạn bè đẹp mắt cho Blogspot

Chắc hẳn bạn đã từng thấy tiện ích Friend Connect – Kết nối bạn bè trên một blog nào đó. Đây là một khung chứa liên kết đến các trang blog cá nhân của những người bạn của chủ Blog.

Tiện ích này không những có thể giúp chủ blog liên kết dễ dàng đến các Blog khác, mà đây còn là một hình thức để quảng bá lẫn nhau giúp tăng Pageview cho những blog được liên kết.

- Dĩ nhiên Google cũng đã cung cấp cho các Blogger một tiện ích tương tự là Google Friend Connect hay Followers, nhưng tiện ích này có một vài nhược điểm như :

• Phải sử dụng 1 file JavaScript để thực thi. Điều này xem ra không ổn vì sẽ ảnh hưởng đôi chút đến tốc độ tải trang của Blog, cho nên nó thường được các Blogger đặt ở Footer (bên ngoài content-wrapper để tiện ích tải sau cùng).
• Đoạn code để tạo nên tiện ích không hợp chuẩn W3C Validator - Điều này sẽ ảnh hưởng đến nhiều thứ khác như khả năng seo của chính blog bạn.

 Hôm nay mình sẽ giới thiệu đến các bạn cách tạo cho mình khung liên kết không mắc các nhược điểm trên.

 Demo for Post

1. Chuẩn bị

- Favicon của Blog bạn muốn liên kết

- Link đến Blog bạn muốn liên kết

2. Thực hiện

- Vào Thiết kế > Phần tử trang

- Tạo một widget HTML\JavaScript và dán vào đoạn code bên dưới ( không cần tạo tiêu đề cho widget )

<style type="text/css">
#namknaconnect{margin:0;  padding: 0; height:238px; overflow: auto;  background:url(http://1.bp.blogspot.com/-i4Ta82RggtU/T4D-FlKIHuI/AAAAAAAABfw/IiSVs-103LU/s1600/namkna-lien-ket-cong-dong-blogger-viet-namkna-blogspot-com.jpg)  no-repeat bottom right; font-weight:bold} 
#namknaconnect p {margin:0; padding:2px 10px} 
.favicon {width:16px; height:16px; margin-right:5px} 
.connect {width:48px; height:48px; margin:5px 10px -15px 0}
</style> 
<div id="namknaconnect"> 
<center  style="margin-bottom:15px"><img  src="http://2.bp.blogspot.com/-VZnzVoaXulk/T4D-gQcu-zI/AAAAAAAABf4/kaTX9D83xVE/s1600/namkna-connect-blogspot.png"  class="connect"/><a href="http://quangvietmkt.blogspot.com/2011/01/trao-oi-logo-lien-ket-cong-ong-blogger.html">KẾT NỐI BẠN BÈ</a></center> 
<p> <img src="YOUR FAVICON" class="favicon" /> <a href="       
http://quangvietmkt.blogspot.com/" target="_blank">Vietmkt</a></p> 
<p> <img src="YOUR FAVICON" class="favicon" /> <a href="       
Liên kết tới blog bạn bè" target="_blank">Tên blog</a></p> 
<!—tương tự cho các liên kết khác -->
</div>

Thay đoạn code được in đậm cho phù hợp.

* Update : do có bạn yêu cầu làm cho danh sách liên kết chuyển động từ dưới lên ( hoặc từ trên xuống ) để làm cho Blog trông đỡ “tĩnh lặng” hơn. Để làm điều đó, các bạn chỉ việc thay đoạn code bên trên bằng đoạn code sau :

<style type="text/css">      
#namknaconnect{margin:0;  padding: 0; border:double #ccc;  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY40LvpIUB-czlmP48XM6QkIggJyXcHFamMfybLOLnaWfUPW_XZxumYUhn0S6yaVnykHqAu2-vqSU22R478ICKqIssHIn7jTh0lrunlfeoi3ZKCtgEjJRHdrBemF1h7Po00zuKMW4eLtsj/s1600/namkna-lien-ket-cong-dong-blogger-viet-namkna-blogspot-com.jpg)  no-repeat bottom right; font-weight:bold}       
#namknaconnect p {margin:0; padding:2px 10px}       
.favicon {width:16px; height:16px; margin-right:5px}       
.connect {width:48px; height:48px; margin:5px 10px 0 0}       
</style>       
<div id="namknaconnect">       
<center  style="margin-bottom:25px"><img  src="http://2.bp.blogspot.com/-VZnzVoaXulk/T4D-gQcu-zI/AAAAAAAABf4/kaTX9D83xVE/s1600/namkna-connect-blogspot.png"  class="connect"/><a href="http://quangvietmkt.blogspot.com/2011/01/trao-oi-logo-lien-ket-cong-ong-blogger.html">KẾT NỐI BẠN BÈ</a></center> 
<marquee align='left' direction='up' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' height='165' width='100%'>       
<p> <img src="YOUR FAVICON" class="favicon" /> <a href="       
http://namkna.blogspot.com/" target="_blank">Namkna</a></p>       
<p> <img src="YOUR FAVICON" class="favicon" /> <a href="       
Liên kết tới blog bạn bè" target="_blank">Tên blog</a></p>       
<!--tương tự cho các liên kết khác-->       
</marquee>       
</div>

- Thay đổi Up thành down nếu bạn muốn trôi từ trên xuống.
Như vậy là bạn đã có tiện ích “Liên kết bạn bè” đơn giản mà đẹp mắt rồi đó.

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

theo namkna

Tạo trang liên hệ cho blog

Đăng nhập vào docs.google.com click Tạo mới và chọn Mẫu.

Ở cửa sổ chỉnh sửa biểu mẫu điền tiêu đề biểu mẫu. Biểu mẫu cho 2 trường là Câu hỏi Mẫu 1 và Câu hỏi Mẫu 2. Viết Tiêu đề Câu hỏi vào, nếu là câu hỏi bắt buộc thì click vào ô Đặt là câu hỏi bắt buộc sau đó chọn Đã xong để lưu. Muốn thêm câu hỏi mới thì chọn Nhân bản phía bên phải. Với trường Message (Tin nhắn) thì ởLoại câu hỏi bạn chọn văn bản của đoạn văn bản.

Đọc thêm »

Tạo khung liên kết blog đẹp

 Theo yêu cầu của bạn World APK mình sẽ hướng dẫn bạn cách làm khung liên kết blog, giống blog của mình đang dùng.Thủ thuật này cũng đơn giản thôi là sử dụng css có một số hiệu ứng như to chữ ,hiển thị thanh cuộn...

Tạo một widget HTML/Javascript mới tại vị trí thích hợp sau đó bạn dán đoạn code bên dưới vào phần nội dung rồi lưu lại.

<style type="text/css">
#chinhtrucblog{margin:0; padding: 0; height:290px;overflow: auto; background:url(Link hinh) background:#FFFF no-repeat bottom right; font-weight:bold ;} 
#chinhtrucblog p {margin:0; padding:2px 10px} 
.favicon {width:16px; height:15px; margin-right:8px} 
20px 0}
.tochu
{
color: red; 
}
.tochu:hover
{
color:red;
padding: 0px 0px 0px 16px;
}
</style>
<div id="chinhtrucblog"> 

<p>
<a href="http://www.viettin24h.com/" target="_blank" title="quangvietmkt|Giải trí|Game|Thủ thuật|" class="tochu"><img src="http://quangvietmkt.blogspot.com/favicon.ico" class="favicon" align="center"/>quangvietmkt</a></p>
</div>

Đọc thêm »

Cách thay đổi màu và thêm icon đẹp vào tiêu đề trên sidebar

Các bạn có thể dễ dàng thay đổi màu nền cho thanh tiêu đề tiện ích khi vào thẻ "Trình thiết kế mẫu", nhưng thẻ này chỉ áp dụng cho giao diện Blogger mặc định, còn các giao diện bạn tải trên mạng sẽ vô ích với "Trình thiết kế mẫu" này.

Đối với giao diện tải về trên mạng, bạn phải áp dụng thủ thuật sau:

Đầu tiên, bạn đăng nhập vào Blog > Chọn thiết kế > Chọn chỉnh sửa HTML (bấm chọn Mở rộng mẫu tiện ích), bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào dòng lệnh .main .Blog { và Enter thì bạn sẽ thấy dòng lệnh giống như vầy:   

Đọc thêm »

Tạo Thanh chia sẻ bài viết lên các mạng xã hội

Đối với những người đang sở hữu web/blog thì công cụ chia sẻ lên mạng xã hội like, tweet... không thể, nó có thể giúp đọc giả chia sẻ bài viết hay làm tăng trafic cho web/blog. Có rất nhiều cách để đặt các tiện ích này, hôm nay mình chia sẻ cùng các bạn cách bố trí các công cụ hữu ích này theo chiều dọc và với hiệu ứng trượt kế phần main mỗi khi bạn cuộn (scrollbar) chuột xuống phía dưới. 

Đọc thêm »

Các thủ thuật lập trình javascript với jquery

Tạo nhiều filter trên cùng một dòng:

//a filter allows you to reduce the set of matched elements //to those that match a given selector. In this case the query //removes anything which doesn't (:not) have (:has) a child with //class "selected" (.selected) .filter(":not(:has(.selected))")

Reuse Your Element Searches

var allItems = $("div.item"); var keepList = $("div#container1 div.item"); //Now you can keep working with those jQuery objects. For example, //trim down the "keep list" based on checkboxes whose names //correspond to <div>class names: $(formToLookAt + " input:checked").each(function() { keepList = keepList.filter("." + $(this).attr("name")); });</div>

Kiểm tra nếu có element hoặc class với lệnh has():

//jQuery 1.4.* includes support for the has method. This method will find //if a an element contains a certain other element class or whatever it is //you are looking for and do anything you want to them. $("input").has(".email").addClass("email_icon");

Đổi CSS với jquery:

//Look for the media-type you wish to switch then set the href to your new style sheet $('link[media='screen']').attr('href', 'Alternative.css');

Limit the Scope of Selection (For Optimization):

//Where possible, pre-fix your class names with a tag name //so that jQuery doesn't have to spend more time searching //for the element you're after. Also remember that anything //you can do to be more specific about where the element is //on your page will cut down on execution/search times var in_stock = $('#shopping_cart_items input.is_in_stock'); <ul id="shopping_cart_items"> <li> <input value="Item-X" name="item" class="is_in_stock" type="radio"> Item X</li> <li> <input value="Item-Y" name="item" class="3-5_days" type="radio"> Item Y</li> <li> <input value="Item-Z" name="item" class="unknown" type="radio"> Item Z</li> </ul>

Correctly Use ToggleClass:

//Toggle class allows you to add or remove a class //from an element depending on the presence of that //class. Where some developers would use: a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton'); //toggleClass allows you to easily do this using a.toggleClass('blueButton');

Thiết lập các hàm dành riêng cho IE:

if ($.browser.msie) { // Internet Explorer is a sadist. }

Thay thế một element với Jquery:

$('#thatdiv').replaceWith('fnuh');

Kiểm tra một element rỗng hay không:

if ($('#keks').html()) { //Nothing found ;}

Find out the index of an element in an unordered set

$("ul > li").click(function () { var index = $(this).prevAll().length; });

Bind a function to an event:

$('#foo').bind('click', function() { alert('User clicked on "foo."'); });

Append or add HTML to an element:

$('#lal').append('sometext');

Use an object literal to define properties when creating an element

var e = $("", { href: "#", class: "a-class another-class", title: "..." });

Filter using multiple-attributes

//This precision-based approached can be useful when you use //lots of similar input elements which have different types var elements = $('#someid input[type=sometype][value=somevalue]').get();

Preload images with jQuery:

jQuery.preloadImages = function() { for(var i = 0; i').attr('src', arguments[i]); } }; // Usage $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');

Set an event handler for any element that matches a selector:

$('button.someClass').live('click', someFunction); //Note that in jQuery 1.4.2, the delegate and undelegate options have been //introduced to replace live as they offer better support for context //For example, in terms of a table where before you would use.. // .live() $("table").each(function(){ $("td", this).live("hover", function(){ $(this).toggleClass("hover"); }); }); //Now use.. $("table").delegate("td", "hover", function(){ $(this).toggleClass("hover"); });

Find an option element that’s been selected:

$('#someElement').find('option:selected');

Hide an element that contains text of a certain value:

$("p.value:contains('thetextvalue')").hide();

AutoScroll to a section of your page:

jQuery.fn.autoscroll = function(selector) { $('html,body').animate( {scrollTop: $(selector).offset().top}, 500 ); } //Then to scroll to the class/area you wish to get to like this: $('.area_name').autoscroll();

Detect Any Browser:

//Detect Safari (if( $.browser.safari)), //Detect IE6 and over (if ($.browser.msie && $.browser.version > 6 )), //Detect IE6 and below (if ($.browser.msie && $.browser.version <= 6 )), //Detect FireFox 2 and above (if ($.browser.mozilla && $.browser.version >= '1.8' ))

Replace a word in a string:

var el = $('#id'); el.html(el.html().replace(/word/ig, ''));

Disable right-click contextual menu :

$(document).bind('contextmenu',function(e){ return false; });

Define a Custom Selector

$.expr[':'].mycustomselector = function(element, index, meta, stack){ // element- is a DOM element // index - the current loop index in stack // meta - meta data about your selector // stack - stack of all elements to loop // Return true to include current element // Return false to explude current element }; // Custom Selector usage: $('.someClasses:test').doSomething();

Check if an element exists

if ($('#someDiv').length) {//hooray!!! it exists...}

Detect Both Right & Left Mouse-clicks with jQuery:

$("#someelement").live('click', function(e) { if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) { alert("Left Mouse Button Clicked"); } else if(e.button == 2) alert("Right Mouse Button Clicked"); });

Show or Erase a Default Value In An Input Field:

//This snippet will show you how to keep a default value //in a text input field for when a user hasn't entered in //a value to replace it swap_val = []; $(".swap").each(function(i){ swap_val[i] = $(this).val(); $(this).focusin(function(){ if ($(this).val() == swap_val[i]) { $(this).val(""); } }).focusout(function(){ if ($.trim($(this).val()) == "") { $(this).val(swap_val[i]); } }); });

Automatically Hide or Close Elements After An Amount Of Time (supports 1.4):

//Here's how we used to do it in 1.3.2 using setTimeout setTimeout(function() { $('.mydiv').hide('blind', {}, 500) }, 5000); //And here's how you can do it with 1.4 using the delay() feature (this is a lot like sleep) $(".mydiv").delay(5000).hide('blind', {}, 500);

Add Dynamically Created Elements to the DOM:

var newDiv = $(''); newDiv.attr('id','myNewDiv').appendTo('body');

Limit The Number Of Characters in a "Text-Area" field:

jQuery.fn.maxLength = function(max){ this.each(function(){ var type = this.tagName.toLowerCase(); var inputType = this.type? this.type.toLowerCase() : null; if(type == "input" && inputType == "text" || inputType == "password"){ //Apply the standard maxLength this.maxLength = max; } else if(type == "textarea"){ this.onkeypress = function(e){ var ob = e || event; var keyCode = ob.keyCode; var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd; return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection); }; this.onkeyup = function(){ if(this.value.length > max){ this.value = this.value.substring(0,max); } }; } }); }; //Usage: $('#mytextarea').maxLength(500);

Create a basic test for a function:

//Separate tests into modules. module("Module B"); test("some other test", function() { //Specify how many assertions are expected to run within a test. expect(2); //A comparison assertion, equivalent to JUnit's assertEquals. equals( true, false, "failing test" ); equals( true, true, "passing test" ); });

Clone an element in jQuery:

var cloned = $('#somediv').clone();

Test if an element is visible in jQuery:

if($(element).is(':visible') == 'true') { //The element is Visible }

Center an element on screen:

jQuery.fn.center = function () { this.css('position','absolute'); this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px'); this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');return this;} //Use the above function as: $(element).center();

Put the values of all the elements of a particular name into an array:

var arrInputValues = new Array(); $("input[name='table\\[\\]']").each(function(){ arrInputValues.push($(this).val()); });

Strip HTML From Your Element

(function($) { $.fn.stripHtml = function() { var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi; this.each(function() { $(this).html( $(this).html().replace(regexp,”") ); }); return $(this); } })(jQuery); //usage: $('p').stripHtml();

Get a parent element using closest:

$('#searchBox').closest('div');

Log jQuery events using Firebug and Firefox:

// Allows chainable logging // Usage: $('#someDiv').hide().log('div hidden').addClass('someClass'); jQuery.log = jQuery.fn.log = function (msg) { if (console){ console.log("%s: %o", msg, this); } return this; };

Force links to open in a pop-up window:

jQuery('a.popup').live('click', function(){ newwindow=window.open($(this).attr('href'),'','height=200,width=150'); if (window.focus) {newwindow.focus()} return false; });

Force links to open in a new tab:

jQuery('a.newTab').live('click', function(){ newwindow=window.open($(this).href); jQuery(this).target = "_blank"; return false; });

Select siblings in jQuery using .siblings()

// Rather than doing this $('#nav li').click(function(){ $('#nav li').removeClass('active'); $(this).addClass('active'); }); // Do this instead $('#nav li').click(function(){ $(this).addClass('active') .siblings().removeClass('active'); });

Toggle All the checkboxes on a page:

var tog = false; // or true if they are checked on load $('a').click(function() { $("input[type=checkbox]").attr("checked",!tog); tog = !tog; });

Filter down a list of elements based on some input text:

//If the value of the element matches that of the entered text //it will be returned $('.someClass').filter(function() { return $(this).attr('value') == $('input#someId').val() ; })

Get mouse cursor X and Y

$(document).mousemove(function(e){ $(document).ready(function() { $().mousemove(function(e){ $("#XY").html("X Axis : " + e.pageX + " | Y Axis " + e.pageY); }); });

Make an entire List Element (LI) clickable

$("ul li").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul>

Parse XML with jQuery (Basic example):

function parseXml(xml) { //find every Tutorial and print the author $(xml).find("Tutorial").each(function() { $("#output").append($(this).attr("author") + ""); }); }

Check if an image has been fully loaded:

$('#theImage').attr('src', 'image.jpg').load(function() { alert('This Image Has Been Loaded'); });

How to namespace events using jQuery:

//Events can be namespaced like this $('input').bind('blur.validation', function(e){ // ... }); //The data method also accept namespaces $('input').data('validation.isValid', true);

Check if Cookies Are Enabled Or Not:

var dt = new Date(); dt.setSeconds(dt.getSeconds() + 60); document.cookie = "cookietest=1; expires=" + dt.toGMTString(); var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1; if(!cookiesEnabled) { //cookies have not been enabled }

How to Expire A Cookie:

var date = new Date(); date.setTime(date.getTime() + (x * 60 * 1000)); $.cookie('example', 'foo', { expires: date });

Replace any URL on your page with a clickable link

$.fn.replaceUrl = function() { var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi; this.each(function() { $(this).html( $(this).html().replace(regexp,'<a href="$1">$1</a>‘) ); }); return $(this); } //usage $('p').replaceUrl();

link

Thủ thuật lập trình jQuery - phần 1

Thủ thuật lập trình jQuery - phần 1

i

  

Những thủ thuật trong lập trình jquery mà giúp ích cho chúng ta rất nhiều để giải quyết một số vấn đề thường gặp của các bạn

1. Sử dụng jQuery từ Google
Google có một phiên bản mới của jQuery được làm sẵn có cho các nhà phát triển. Thay vì sử dụng bản sao jQuery riêng, bạn nên tận dụng dự “hào phóng” từ Google để sử dụng jQuery 

CODE



<script src="http://ajax.Googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>


2. Kiểm tra ngày sinh sử dụng jQuery
Kiểm tra ngày sinh là một chức năng thường có ở các trang web có nội yêu cầu độ tuổi phải trên 18. Với jQuery điều này thực hiện như sau: 

CODE


$("#lda-form").submit(function(){
    var day = $("#day").val();
    var month = $("#month").val();
    var year = $("#year").val();
    var age = 18;
    var mydate = new Date();
    mydate.setFullYear(year, month-1, day);

    var currdate = new Date();
    currdate.setFullYear(currdate.getFullYear() - age);
    if ((currdate - mydate) < 0){
        alert("Sorry, only persons over the age of " + age + " may enter this site");
        return false;
    }
    return true;
});


3. Kiểm tra hình ảnh nạp đúng cách
Làm thế nào để bạn biết nếu một hình ảnh đã được tải? Trong một số trường hợp đặc biệt như hình ảnh xác thực, người sử dụng có thể gặp vấn đề nếu hình ảnh không được nạp đúng cách. Sử dụng code dưới đây, bạn sẽ có thể biết nếu hình ảnh của được hiển thị.

CODE


$('#myImage').attr('src', 'image.jpg').load(function() {
    alert('Image Loaded');
});

4. Kiểm tra thuộc tính target=”blank” trong XHTML 1.0 Strict
Thuộc tính target=”blank”dùng trong việc muốn mở link ở 1 tab hoặc cửa số khác. Trong xHTML 1.0 Strict thì target=”blank” không được hỗ trợ. Dử dụng jQuery sẽ khắc phục được điều này.

CODE


$("a[@rel~='external']").click( function() {
    window.open( $(this).attr('href') );
    return false;
});


5. Tìm kiếm trong văn bản bằng cách sử dụng jQuery
Chức năng sau đây sẽ cho phép tìm kiếm văn bản đầy đủ trên trang bằng cách sử dụng jQuery. Tính năng này là không chỉ đẹp mắt mà còn hữu ích.

CODE


$.fn.egrep = function(pat) {

var out = [];
var textNodes = function(n) {
  if (n.nodeType == Node.TEXT_NODE) {
   var t = typeof pat == 'string' ?
    n.nodeValue.indexOf(pat) != -1 :
    pat.test(n.nodeValue);
   if (t) {
    out.push(n.parentNode);
   }
  }
  else {
   $.each(n.childNodes, function(a, b) {
    textNodes(b);
   });
  }
};
this.each(function() {
  textNodes(this);
});
return out;
};


6. outerHTML
Thuộc tính innerHTML rất hữu ích: Nó cho phép lấy nội dung của 1 phần tử HTML. Nhưng nếu bạn cần cả nội dung lẫn tag HTML? bạn cần “outerHTML”

CODE


jQuery.fn.outerHTML = function() {
    return $('
<div>').append( this.eq(0).clone() ).html();
};</div>


7. Mở popup
Mặc dù phổ biến của popup giảm cùng với sự gia tăng của các chức năng chặn popup, cửa sổ pop-up vẫn có thể có ích trong một số trường hợp cụ thể. Đây là code để mở các liên kết trong cửa sổ pop-up. Chỉ cần thêm class css “popup” vào liên kết của bạn để nó làm việc.

CODE


jQuery('a.popup').live('click', function(){
    newwindow=window.open($(this).attr('href'),'','height=200,width=150');
    if (window.focus) {newwindow.focus()}
    return false;
});


8. Nhận dạng trình duyệt
Như tiêu đề, việc phát triển website thích hợp với tất cả trình duyệt là một thử thách cho các nhà phát triển, đoạn code giúp ích cho việc đó.

CODE


//A. Target Safari
if( $.browser.safari ) $("#menu li a").css("padding", "1em 1.2em" );

//B. Target anything above IE6
if ($.browser.msie && $.browser.version > 6 ) $("#menu li a").css("padding", "1em 1.8em" );

//C. Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ) $("#menu li a").css("padding", "1em 1.8em" );

//D. Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ) $("#menu li a").css("padding", "1em 1.8em" );


9. Lấy vị trí tương đối của con trỏ chuột
Bạn có bao giờ muốn lấy được vị trí chuột tương đối? Chức năng này rất tiện dụng sẽ trả lại vị trí chuột (x và y) theo phần tử cha của nó

CODE


function rPosition(elementID, mouseX, mouseY) {
  var offset = $('#'+elementID).offset();
  var x = mouseX - offset.left;
  var y = mouseY - offset.top;

  return {'x': x, 'y': y};
}

10. Phân tích một file XML bằng cách sử dụng jQuery
XML là loại tập tin rất quan trọng trên Internet , và nhiều nhà phát triển phân tích chúng time by time.Toàn bộ quá trình phân tích thể hiện qua đoạn code sau:

CODE


function parseXML(XML) {
  //find every Tutorial and print the author
  $(XML).find("Tutorial").each(function()
  {
    $("#output").append($(this).attr("author") + "");
  });
} 

Bài viết mới nhất cuộn lên với Jquery cho Blogspot

Hiển thị một danh sách các bài viết gần đây bên sidebar của bạn (Scrolling/Ticker Recent Post Gadget For Blogger) là một cách tuyệt vời để giữ khách truy cập của bạn bận rộn. Có rất nhiều tiện ích bài viết gần đây bạn có thể sử dụng, nhưng namkna thủ thuật này chắc chắn sẽ gây sự chú ý của độc giả khi truy cập vào blog của bạn.

Widget bài viết mới nhất (gần đây) này tương tự như các bài viết gần đây với hình thu nhỏ nhưng có thêm chức năng cuộn (Scrolling). Nó kết hợp các plugin vticker jQuery để tạo ra một hiệu ứng trượt đơn giản và kiểu dáng đẹp và cuộn các bài viết. Tiện ích được giới thiệu bởi stylifyyourblog.

Ảnh minh họa:

Làm thế nào để add Scrolling Recent Post cho blogger?

1- Đăng nhập (login) vào Blog
2- Vào Bố cục (Lay out)
3- Chọn Thêm tiện ích (Add gadget)
4- Tạo một widget HTML/Javarscip và Thêm đoạn code bên dưới vào:

<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script style='text/javascript' src="http://dl.dropbox.com/u/70549761/Recent/quangvietmkt-blogspot-com/recentpostticker.js" ></script>
<script style='text/javascript' src='http://dl.dropbox.com/u/70549761/Recent/quangvietmkt-blogspot-com/recentpostswiththumbnailsv3.js'></script>
<script style='text/javascript'>
var numposts = 7;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
$(document).ready(function () {$('#sai').vTicker({
speed: 500,
pause: 3000,
showItems: 3,
animation: 'fade',
mousePause: false,
height: 0,
direction: 'up'
});});
</script>
<div id="sai">
<script src='http://quangvietmkt.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
</div>

Trong đó:

• Nếu blog bạn đã có thư viện Jquery thì hãy loại bỏ code màu xanh đi.
• Thay http://

  quangvietmkt

  .blogspot.com/ thành URL blog của bạn.
• numposts =7; là số lượng bài viết muốn hiển thị.
• showItems:3 Số bài viết hiển thị trong 1 lần chuyển động.
• speed: 500, thời gian chuyển động
• pause: 3000, thời gian dừng sau mỗi lần chuyển động
• var showpostthumbnails = true; hiển thị ảnh thumbnail nếu không muốn thì thay truethành false
• var showcommentnum = false; Nếu muốn hiển thị số comment thì thay flase thànhtrue
• var showpostdate = false; Nếu muốn hiển thị ngày đăng thì thay flase thành true
• var showpostsummary = false; Nếu muốn hiển thị mô tả thì thay false thành true
• width:55px;height:55px Chiều rộng và cao của ảnh thumbnail
• float:right Ảnh ở bên phải tiêu đề nếu muốn bên trái thì thay right thành left

Chú ý: 

Một điều rất quan trọng. Tiện ích có thể xảy ra tình trạng hiệu ứng di chuyển có thể khônghoạt động, có thể do mâu thuẫn giữa một số plugin jQuery đã có trong Blog của bạn, giải pháp phổ biến nhất để điều này là thêm mã sau đây vào cuối tiện ích:

<script type='text/javascript'>
jQuery.noConflict();
</script>

Nếu hiệu ứng di chuyển vẫn không làm việc thì bạn có thể loại bỏ bất kỳ plugin jQuery khác trong blog.