nhungsuutam

Thứ Hai, 25 tháng 2, 2013

Icon đẹp và độc cho blog

]

Thứ Sáu, 15 tháng 2, 2013

Bài viết ngẫu nhiên tốc độ cao cho Blogger kèm ảnh thumbnail

Một trong những tiện ích mình kiêng kỵ nhất là Random Posts, bởi tiện ích này tải toàn bộ dữ liệu từ feed về, không những làm chậm tốc độ cho blog mà còn không chính xác với blog có trên 500 bài viết - đây là con số bài viết tối đa được feed tải về. Trong tiện ích mình giới thiệu sau đây thay vì 1 lần tải toàn bộ feed thì mình tải lần lượt theo số bài viết muốn hiển thị và chỉ lấy duy nhất 1 bài trong 1 lần tải. Trước đó sẽ có 1 lần tải dữ liệu đầu tiên từ feed để xác định tổng số bài viết hiện có, 1 hàm lấy ngẫu nhiên 5 số khác nhau từ 1 đến tổng số bài viết. Ví dụ muốn hiển thị 5 bài viết ngẫu nhiên thì sẽ có 6 lần tải feed, mặc dù số lần lấy nhiều nhưng dung lượng 1 lần lấy lại nhỏ. Khối lượng chỉ tương đương với blog bạn có tổng số bài viết là 6, so sánh vậy để thấy nếu blog càng nhiều bài viết thì tiện ích này có tốc độ nhanh hơn kiểu tải toàn bộ feed rất nhiều lần.

Demo for Post

☼ Cách tiến hành:

1- Đăng nhập vào Blog

2- Vào thiết kế

3- Chọn Chỉnh sửa HTML

4- Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}

5- Bấm Lưu Mẫu lại.

6- Thêm 1 widget HTML/Javascript tại nơi muốn hiển thị Random Posts. Hiệu chỉnh Tiêu đề và dán đoạn mã dưới đây vào phần Nội dung rồi chọn LƯU.

<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_info='yes';
var rdp_comment='Nhận xét';
var rdp_disable='Tắt Nhận xét';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN8Wovx-0PqLmu5XIbHRfGZ0ffSN67E1MvlYCK6IPZJtWgRI_3h7-0S4Rrh2FmBBl_rx8ohFMI-u-FQTOXsDFpn2dzqSJUNKyaRlXNkLwFXVLNwWSg631rq40czgG2jv65XfbYCLFlfgMr/"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

Thay 5 bằng số bài viết bạn muốn hiển thị. Nếu không muốn hiển thị thông tin ngày tháng đăng bài và số nhận xét hãy thay yes thành ký tự bất kỳ khác.

Nếu muốn áp dụng cho một nhãn bạn thay:

/feeds/posts/default

Bằng:

/feeds/posts/default/-/Tên%20Nhãn

%20 để thay cho ký tự trống nếu tên nhãn gồm 2 câu trở lên.
Nếu muốn cho tiêu đề bài viết thành chữ in đậm thì Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

#random-posts a{font-weight:bold}

Demo:

Chúc thành công!

Thứ Năm, 14 tháng 2, 2013

Bài viết ngẫu nhiên có ảnh thmbnail cho blogspot

Trước kia mình cũng nhìn thấy style này bên mothuthuat nhưng sau khi ngừng hoạt động thủ thuật này cũng ít người biêt đến ! Trông khá đẹp mắt thích hợp với rất nhiều giao diện khác nhau : tin tức, shop,thời trang,diễn đàn...

Hôm nay Viettin24h chia sẻ lại đến các bạn thủ thuật hay này

Ảnh minh họa:

☼ Cách tiến hành:

1- Đăng nhập vào Blogger

2- Vào Phần tử trang (Bố Cục)

3- Chọn Thêm Tiện ích

4- Tạo 1 widet HTML/Javarscip và dán đoạn code sau vào:


<style type="text/css">
* {margin:0;padding:0;}
#random-posts {
width:300px;
}
#random-posts h3 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYX6gLHwf3R8YnbkGGkw7cPxnZXmmjTG3ByoAlTymrTXjqMWMbtUBPvSNqofohXL97rsA8c3Tco4CDnkJKa6Q5KeCTvVY7sgEDmqmfSn69n4PswDomMcvwiHqPhHyUyf6RljnB3kPeA6y9/h120/img-bg-rd1-namkna-blogspot-com.png) no-repeat top left; 
padding:3px 5px 14px 5px;
font-size:13px;
color:#fff;
}
img#rd-thumb {
float:left;
width: 40px; 
height:40px; 
margin-right:5px; 
border:1px solid #ccc;
padding:2px;
}

img#rd-thumb0 {
float:left;
width: 80px; 
height:80px; 
margin-right:5px; 
border:1px solid #ccc;
padding:2px;
}

ul, li {list-style:none;}
#random-posts li {
height:50px !important;
padding:5px 3px 0 5px;

}
li#li-rd a, li#li-rd-chan a, li#li-rd-le a {text-decoration:none;}
li#li-rd a:hover, li#li-rd-chan a:hover, li#li-rd-le a:hover {text-decoration:underline;}
li#li-rd {border:1px solid #ddd; background:#f6f6f6;height:90px !important;font-weight:bold;}
li#li-rd-chan {background:#f6f6f6;}

div#info h1 {font-size:20px;}
div#footer {padding-left:135px;}
</style>

<div id="random-posts"><h3>Random Posts</h3>
<div id='rd-posts-loading'>
<img align='absmiddle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHsKnwAII-wPo9qrq2sdzS6epqj6nrEhdd9fR0F-4xL8kg6BFs9C_ig7f-n094_dkDeLv1skjocRPC_OSA3N81vo7sF47EZNnBMNvhvfVlrJXkfW-wvp8cVI8tDp2XZY4g52mRd85MkKBW/s1600/loading-related-namkna-blogspot-com.gif'/>
</div>
</div>

<script type="text/javascript">
var maxEntries = 7;
nocmtext = "No Comment";
cmtext = "Comments";
</script>
<script src="https://script-viettin24h.googlecode.com/svn/branches/rd-post-thumb.js" type="text/javascript"></script>
<script src="http://viettin24h.com/feeds/posts/default/-/Blogspot-tips?alt=json-in-script&callback=getRandomPosts&max-results=999999" type="text/javascript"></script>

Trong đó:
Thay Blogspot-tips thành tên nhãn bạn muốn hiển thị.
Thay http://viettin24h.com/ thành URL địa chỏ blog của bạn vào. Chúc các bạn thành công !

5- Bấm Lưu Mẫu (save template) lại.

Chúc thành công!

Thứ Hai, 11 tháng 2, 2013

Tiện ích bài viết mới nhất có ảnh thumbnail

Trước đây mình có post một bài viết đề cập đến việc hiển thị bài viết và Comment mới nhất cho blogger, tuy nhiên ở thủ thuật đó thì bài viết chỉ hiển thị tiêu đề và tóm tắt một đoạn nội dung không có ảnh thumbnail. Hôm nay mình xin chia sẽ cùng các bạn tiện ích bài viết mới nhất có ảnh thumbnail, với thủ thuật này thì bài viết hiển thị cùng ảnh thumbnail nằm bên trái. Hơn nữa tiện ích có thêm hiệu ứng thay đổi bài viết ở một thời gian nhất định. Bạn có thể xem mô tả bên dưới để thấy rỏ hơn.

Hoặc các bạn có thể xem hình dưới:

☼ Bắt đầu tiến hành

1. Đăng nhập vào tài khản blogspot
2. Vào bố cục thêm 1 HTML/Javascript
3. Chèn thêm đoạn code sau vào phần tử HTML trên

<script type="text/javascript">
$(document).ready(function(){

var first = 0;
var speed = 2000; //tốc độ chuyển sang bài khác
var pause = 3000;  //thời gian dừng (số càng nhỏ thì sẽ chuyển đổi càng nhanh)

function removeFirst(){
first = $('ul#listticker il:first').html();
$('ul#listticker il:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}

function addLast(first){
last = '<il style="display:none">'+first+'</il>';
$('ul#listticker').append(last)
$('ul#listticker il:last')
.animate({opacity: 1}, speed)
.fadeIn('fast')
}

interval = setInterval(removeFirst, pause);
});
</script>

<style type="text/css">

#listticker{
height:397px; /*chiều cao của bài viết */
width:253px;  /*độ rộng của bài viết (nhỏ hoặc bằng độ rộng tablewidth ) */
overflow:hidden;
border:solid 1px #3399ff;
padding:0px 0px 0px 0px;;
}
#listticker il{
order:solid 0px #990000;
margin:0;
padding:0px;
list-style:none;
}

#listticker il{
height:30px;
padding:0px;
list-style:none;
}
#listticker a{
color:#ff0000;
margin-top:0px;
}
#listticker a:hover{
color:#003300;
margin-top:0px;
}

#listticker .news-title{
display:block;
font-weight:bold;
margin-bottom:0px;
font-size:11px;
}
#listticker .news-text{
display:block;
font-size:11px;
color:#666666;
}
#listticker img{
float:left;
margin-right:3px;
padding:0px 2px 12px 0px;
border:solid 0px #990000;
}
</style>


<script language="JavaScript">
imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieRaa5h94T2IjG26UBOlYHHQid2i2pdJfa30I9chnXrFvF9ZZCkdp5siue7VP-pjHWm84-2fTOfKuJVj_hAhYxCA2x8pHdwpcFMff6ZBoZ7GPxcMa2B0sNNf3CNnEggFmn09em5rqXrmQ/s200/namkna-blogspot-0.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieRaa5h94T2IjG26UBOlYHHQid2i2pdJfa30I9chnXrFvF9ZZCkdp5siue7VP-pjHWm84-2fTOfKuJVj_hAhYxCA2x8pHdwpcFMff6ZBoZ7GPxcMa2B0sNNf3CNnEggFmn09em5rqXrmQ/s200/namkna-blogspot-0.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieRaa5h94T2IjG26UBOlYHHQid2i2pdJfa30I9chnXrFvF9ZZCkdp5siue7VP-pjHWm84-2fTOfKuJVj_hAhYxCA2x8pHdwpcFMff6ZBoZ7GPxcMa2B0sNNf3CNnEggFmn09em5rqXrmQ/s200/namkna-blogspot-0.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieRaa5h94T2IjG26UBOlYHHQid2i2pdJfa30I9chnXrFvF9ZZCkdp5siue7VP-pjHWm84-2fTOfKuJVj_hAhYxCA2x8pHdwpcFMff6ZBoZ7GPxcMa2B0sNNf3CNnEggFmn09em5rqXrmQ/s200/namkna-blogspot-0.jpg";
imgr[4] = "http://lh3.ggpht.com/_TaHzV-QgYq0/Syigu0WT0PI/AAAAAAAAD54/SFW95fEf-_k/images.jpg";

showRandomImg = true;
tablewidth = 253; //độ rộng của bảng 
cellspacing = 0;
borderColor = "no";
bgTD = "#99ffff"; //màu nền của tiện ích (bạn có thể bỏ trống nếu không muốn dùng nền)

imgwidth = 42; //độ rộng ảnh thumb
imgheight = 40; //chiều cao của ảnh thumb
fntsize = 11; //kích thước của text
acolor = "";
aBold = true;
icon = " ☼ ";

text = "no";

showPostDate = false; //nếu muốn hiển thị ngày đăng thay FALSE thành TRUE

sumtitle = 22;  //số kí tự của tiêu đề bài đăng
summaryPost = 70;  // số kí tự nội dung bài viết
summaryFontsize = 11;
summaryColor = "#990000";
icon2 = " » ";

numposts = 15; //số bài viết hiển thị

home_page = "http://namkna.blogspot.com/";

</script>
<script src="http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/recent_post.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/jquery.min.js" type="text/javascript"></script>

Chỉnh sửa: Bạn hãy dựa vào các chú thích trên để chỉnh sửa cho phù hợp với blog của mình.
- Thay link màu đỏ trong code thành link ảnh mà bạn muốn thay thế khi bài đăng không có ảnh.
- Thay địa chỉ http://namkna.blogspot.com/ thành địa chỉ blog của bạn.

4. Save lại và chọn vị trí đặt thích hợp

Update: nếu bạn muốn hiển thị bài viết theo từng nhãn riêng thì hãy thay

http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/recent_post.js

Thành:

http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/recent_label.js

Và thêm vào phần script như sau (code màu đỏ đậm)

<script language="JavaScript">
..................
..................
sumtitle = 22;  //số kí tự của tiêu đề bài đăng
summaryPost = 70;  // số kí tự nội dung bài viết
summaryFontsize = 11;
summaryColor = "#990000";
icon2 = " » ";

numposts = 15; //số bài viết hiển thị
label = "Blogspot Recent post"
home_page = "http://quangvietmkt.blogspot.com/";

</script>

Bạn nên Download File Js về Tại đây sau đó Upload lên host riêng để dùng lâu dài
Bạn chỉ việc thay tên nhãn (Blogspot Recent post) trong code thành tên nhãn bạn muốn hiển thị

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

Chủ Nhật, 10 tháng 2, 2013

Bài viết mới và comment mới nhất cho blogspot

Hôm nay mình JM sẽ hướng dẫn cách để các bạn tao tiện ích các bài đăng mới nhất (Recent Posts) hay các bài nhận xét mới nhất (Comment Posts). Với thủ thuật này các bài đăng hay những nhận xét mới nhất trên blog của bạn sẽ được tóm tắt ngắn gọn lại để giúp cho đọc giả dễ dàng xem bài hơn.

» Các bước để thực hiện để thêm bài viết mới nhất cho blogger!

Hình ảnh minh họa

1. Đăng nhập vào blog

2. Vào bố cục (Lay out).

3. Tạo một HTML/Javascript và dán code bên dưới vào:

<script>
    //<![CDATA[
// ----------------------------------------
// SHOW RECENT POSTS
// ----------------------------------------
// This functions takes a blogger-feed in JSON
// format and displays it.
//
// Version: 2.0
// Date:    2006-12-01
// Author:  Hans Oosting
// URL:     http://viettin24h.com/
// Share:   http://viettin24h.com/
// ----------------------------------------
//Modified by http://www.bloggerplugins.org
function showrecentposts(json) {

  for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }
    posttitle = posttitle.link(posturl);
    var readmorelink = "(more)";
    readmorelink = readmorelink.link(posturl);
    var postdate = entry.published.$t;
    var cdyear = postdate.substring(0,4);
    var cdmonth = postdate.substring(5,7);
    var cdday = postdate.substring(8,10);
    var monthnames = new Array();
    monthnames[1] = "Jan";
    monthnames[2] = "Feb";
    monthnames[3] = "Mar";
    monthnames[4] = "Apr";
    monthnames[5] = "May";
    monthnames[6] = "Jun";
    monthnames[7] = "Jul";
    monthnames[8] = "Aug";
    monthnames[9] = "Sep";
    monthnames[10] = "Oct";
    monthnames[11] = "Nov";
    monthnames[12] = "Dec";
    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
    var re = /<\S[^>]*>/g;
    postcontent = postcontent.replace(re, "");

    document.write("<li>"+posttitle+"</li>");
    if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);

    if (showpostsummary == true) {

      if (postcontent.length < numchars) {
          document.write('<i>');
         document.write(postcontent);
          document.write('</i>');}
      else {
          document.write('<i>');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '...' + readmorelink);
          document.write('</i>');}
}}}
    //]]>
</script>
<script style='text/javascript'>
var numposts = 5; // số bài bạn muốn hiển thị
var showpostdate = true; // nếu không muốn hiển thị ngày đăng bạn thay TRUE thành FALSE
var showpostsummary = true;
var numchars = 100; // số từ tóm tắt nội dung bài viết
</script>
<script src='http://viettin24h.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'></script>

4. Lưu tiện ích lại và Oke.

» Các bước để thực hiện để thêm nhận xét mới nhất cho blogger!

Hình ảnh minh họa

1. Đăng nhập vào blog

2. Vào bố cục (Lay out).

3. Tạo một HTML/Javascript và dán code bên dưới vào:

<script>
    //<![CDATA[
//Recent Comments Widget originally by Blogger Templates and updated by Blogger Widgets
function showrecentcomments(json){for(var i=0;i<a_rc;i++){var b_rc=json.feed.entry[i];var c_rc;if(i==json.feed.entry.length)break;for(var k=0;k<b_rc.link.length;k++){if(b_rc.link[k].rel=='alternate'){c_rc=b_rc.link[k].href;break;}}c_rc=c_rc.replace("#","#comment-");var d_rc=c_rc.split("#");d_rc=d_rc[0];var e_rc=d_rc.split("/");e_rc=e_rc[5];e_rc=e_rc.split(".html");e_rc=e_rc[0];var f_rc=e_rc.replace(/-/g," ");f_rc=f_rc.link(d_rc);var g_rc=b_rc.published.$t;var h_rc=g_rc.substring(0,4);var i_rc=g_rc.substring(5,7);var j_rc=g_rc.substring(8,10);var k_rc=new Array();k_rc[1]="Jan";k_rc[2]="Feb";k_rc[3]="Mar";k_rc[4]="Apr";k_rc[5]="May";k_rc[6]="Jun";k_rc[7]="Jul";k_rc[8]="Aug";k_rc[9]="Sep";k_rc[10]="Oct";k_rc[11]="Nov";k_rc[12]="Dec";if("content" in b_rc){var l_rc=b_rc.content.$t;}else if("summary" in b_rc){var l_rc=b_rc.summary.$t;}else var l_rc="";var re=/<\S[^>]*>/g;l_rc=l_rc.replace(re,"");if(m_rc==true)document.write('On '+k_rc[parseInt(i_rc,10)]+' '+j_rc+' ');document.write('<a href="'+c_rc+'">'+b_rc.author[0].name.$t+'</a> commented');if(n_rc==true)document.write(' on '+f_rc);document.write(': ');if(l_rc.length<o_rc){document.write('<i>&#8220;');document.write(l_rc);document.write('&#8221;</i><br/><br/>');}else{document.write('<i>&#8220;');l_rc=l_rc.substring(0,o_rc);var p_rc=l_rc.lastIndexOf(" ");l_rc=l_rc.substring(0,p_rc);document.write(l_rc+'&hellip;&#8221;</i>');document.write('<br/><br/>');}}}
    //]]>
</script>
<script style='text/javascript'>
var a_rc=5; // số bài nhận xét bạn muốn hiển thị
var m_rc=true; // nếu không muốn hiển thị ngày đăng bạn thay TRUE thành FALSE
var n_rc=false;
var o_rc=100; // số từ tóm tắt nội dung comment
</script>
<script src='http://viettin24h.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments'></script>

4. Lưu tiện ích lại và Oke.

» Tùy chỉnh code!

Bạn hãy thay code màu đỏ http://viettin24h.com/ thành địa chỉ blog của bạn.

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

Thứ Sáu, 8 tháng 2, 2013

Tùy biến header toàn tập cho Blog

Trong quá trình thiết kế web hay blog chắc hẳn không ít bạn từng nghĩ đến việc chia header ra làm 2 3 phần gì đó hay chèn flash chèn nhạc vvv... vào header. Trong bài viết này mình sẽ đề cập đến cách thức làm việc của header blogger như thế nào và tùy biến header ra sao. Hy vọng sẽ giúp ích được cho các bạn

Những câu hỏi thường gặp với widget header.

1. Làm sao chia header ra làm 2 - 3 phần?
2. Làm sao chèn nhạc, flash vào header?
3. Làm sao gắng tiện ích khác (quảng cáo chẳng hạn) lên header?
4. Làm sao xóa header vì thấy nó thừa thải quá...

Giải đáp cho các câu hỏi đó của các bạn tại đây.

Phần 1: Nói về widget header của blogger.

Khi vào template của bạn , bạn sẽ thấy có 1 đoạn code tương tự như thế này.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Viettin24h-Tin tức,Giải trí,Thủ thuật tổng hợp (Tiêu đề)' type='Header'/>
</b:section>

Dòng chữ mình tô đỏ sẽ khác nhau tùy blog. Đoạn code trên là đoạn code của widget header. Bài viết này chúng ta sẽ làm việc với nó đây. Mình tạm gọi nó là đoạn code A nha.

Khuyến cáo các bạn nếu muốn tìm hiểu thì nên tạo 1 trang blog mới. Xóa toàn bộ template và chỉ để lại cấu trúc cơ bản và widget header để tiện tìm hiểu.

Nếu lười thì tạo blog mới rồi copy toàn bộ đoạn code bên dưới về paste vào template ngồi tìm hiểu.

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:skin><![CDATA[
#box{background:red; margin:0 auto; text-align:center; }
]]></b:skin>
</head>
<body>
<div id='box'>
<b:section class='head' id='head' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Viettin24h-Tin tức,Giải trí,Thủ thuật tổng hợp (Tiêu đề)' type='Header'/>
</b:section>
</div>
<b:section class='sbar1' id='sbar1' showaddelement='yes'/>
</body>
</html>

Cấu trúc bên trên sẽ rất đơn giản. Bây giờ bạn vào chỉnh sửa mẫu bạn sẽ thấy đoạn code A trên sẽ xuất hiện rất nhiều code nhỏ trong đó. Nó sẽ có dạng giống giống như sau:

<b:section class='head' id='head' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Võ Quốc An Blog (Tiêu đề)' type='Header'>
<b:includable id='main'>

<b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == "BEHIND"'>
      
      <b:if cond='data:mobile'>
          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        <b:else/>
          <div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); "                        + "background-position: "                        + data:backgroundPositionStyleStr + "; "                        + data:widthStyleStr                        + "min-height: " + data:height                        + "_height: " + data:height                        + "background-repeat: no-repeat; "' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        </b:if>
    <b:else/>
      
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        
        <b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
          <b:include name='description'/>
        </b:if>
      </div>
    </b:if>
<b:else/>
    
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
      </div>
      <b:include name='description'/>
    </div>
</b:if>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
<b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>

Trong đoạn code trên mình đã đánh dấu 1 số code màu đỏ. Nhìn đoạn code trên thì khá lằng nhằng cũng không cần hiểu nhiều làm gì. Mình xin giải thích đoạn code đó ngắn gọn dể hiểu là:

Nếu header có sử dụng ảnh làm nền thì set background-img của header là liên kết ảnh vừa ải lên. Xuất tên blog và mô tả blog ra header. Ngược lại nếu header không sử dụng ảnh thì xuất tên blog và mô tả blog ra header.

Mình chỉ dịch đại khái những dòng lệnh trên cho mọi người dể hiểu chứ không dịch sát nghĩa từng đoạn code nên đừng bắt lỗi chổ này làm gì nha.

Ý nghĩa của mấy đoạn code màu đỏ mình đã đánh dấu.

<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'>
Tương đương với
<div style='background-image:url(link_ảnh); background-position:...; background-repeat:no-repeat;' id='header-inner'>

<data:title/>: Xuất ra tên blog.

<data:description/>: Xuất ra dòng mô tả blog.

data:blog.homepageUrl: Xuất ra địa chỉ trang chủ.

Cơ bản header chỉ làm nhiêu đó việc thôi. Bây giờ đã nắm được cách làm việc của header rồi thì mình khuyến khích các bạn nên viết code header bằng tay mà không cần sử dụng đếnđoạn code A nữa. Và để làm được điều đó thì mình cần xác định là header của mình cần những gì.

Ví dụ: bạn muốn header của mình chỉ có tên blog và mô tả blog thì thay đoạn code A thành

<div id='blogheader'>
<div class='titlewrapper'>
Tên Blog Của Bạn.</div>
<div class='descriptionwrapper'>
Mô Tả (Slowgun) của blog. </div>
</div>

Xong chỉ việc cài thuộc tính css cho 2 class titlewrapper và descriptionwrapper và chèn trước thẻ ]]></b:skin> là xong.

Nếu muốn background của header có ảnh thì chỉ việc cài đặt css background:url(link_ảnh)cho id Blogheader là xong.

Nếu chưa biết về css thì bạn xem qua bài viết css căn bản.

Ưu nhược điểm của 2 cách làm trên.

Về mức độ tiện dụng thì hiển nhiên là dùng widget có sẵn của blogger là tiện hơn rồi. Không cần phải hiểu nhiều gì về code.
Còn về thời gian load thì dễ thấy rằng với cách code bằng tay khi load chỉ cần xuất ra 1 dòng chữ thay vì phải load 1 widget rồi phải xuất data từ widget đó ra. Mỗi widget tiết kiệm 1 chút thời gian thì blog của bạn sẽ nhanh hơn đáng kể đó.

Phần 2: Tùy biến header của blogger.

Như ban đầu mình đã đề cập. Làm sao để chia header ra 2 - 3 phần hoặc làm sao chèn flash, nhạc vào header sẽ được giải quyết trong phần 2 này.

Ví dụ: Mình muốn chia header ra 2 phần. Phần bên trái chứa tên blog, slowgun của blog. Phần bên phải chứa 1 bài nhạc. Cách làm như sau:

Tìm đến đoạn code A như mình đã nếu ở phần 1. Thêm vào trước vào sau đoạn code A theo mẫu sau:

<div class='header'>
<div class='header1'>
Đoạn code A
</div>
<div class='header2'>
Code của bài hát hoặc flash hoặc bất kỳ 1 đoạn code gì đó.
</div>
<div style='clear:both'/>
</div>

Mục đích của việc làm trên là tạo ra các module chứa các thành phần mình muốn thêm vào. Ví dụ ở trên là mình tạo ra module header chứa 2 module con là header1 và header2.

Tiếp theo là cài đặt css qui định chiều rộng chiều cao của các header trên và chèn trước thẻ]]></b:skin>. Đoạn css bên dưới là 1 ví dụ.

.header{
width:550px;
height:60px;
text-align:center;
box-shadow:1px 1px 3px 3px #666;}
.header1{
width:330px;
height:40px;
float:left;
padding:10px;
color:#333;}
.header2{
width:200px;
height:60px;
float:right;}

Cơ bản chỉ bao nhiêu đó thôi.

Lưu ý: trong demo bên dưới các class chứa css mình để bên trong thẻ <style type='text/css'>...</style> Khi đưa vào template thì bạn để các class phía trên thẻ ]]></b:skin> là được.

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

Thứ Ba, 5 tháng 2, 2013

Auto like miễn phí cho facebook

Bạn post stt lên Facebook mà muốn được nhiều lượt like nhưng không biết làm cách nào, cũng đơn giản thôi, hãy làm theo hướng dẫn của mình để có lượng like cực khủng chỉ trong vài giây nhé
- Đầu tiên post stt cần câu like
- Sau đó vào trang Auto Like Facebook Status - Status Likes
- Click vào nơi có chữ lấy Token Access
- Tiếp theo cho phép cài đặt ứng dụng xperia
- Sau đó sẽ có 1 trang mới hiện ra thông báo Success, bạn phải copy toàn bộ link có site đó...
- Vào lại trang Auto Like Facebook Status - Status Likes
- Rồi paste vào bên trái ô submit
- 1 trang mới sẽ hiện ra và hiển thị tất cả các status mà bạn đã post....chọn cái cần lấy like rồi submit
- Đợi 1 lúc rồi check xem stt đó của bạn xem đc like nào chưa
Điều kiện để có Like, ai ko làm được thì chưa làm bước này nhé!

Bạn phải trên 18 tuổi
Bạn phải kích hoạt chế độ Subscribe tại đại chỉ: https://www.facebook.com/about/subscribe
Hướng dẫn: Khi đã đủ các điều kiện trên, các bạn vào địa chỉ: https://www.facebook.com/about/subscribe rồi chọn Allow Subcribe là xong.

LƯU Ý:

Cứ khoảng 5p trở lên mới bấm submit được lần tiếp theo nhé!
Không bấm submit 2 lần trên 1 stt hay 1 ảnh!

Giao diện hiện đại dễ sử dụng.

Link autolike

Link access token hợp lệ là

Mã:

https://www.facebook.com/connect/login_success.html#access_token=CAABempp6Ls0BAHmdNhvZBIiZBThjXtLhBLZCaKITum4dMWixKBUWaJ4LTIISAt2dIEb570E7dUxs4Ev3AqiMQgnivbXEQ9yp3vTmA4qt47bzbjPeq6BMfQ9XKQsq5gjm6n8HIGYM22vMPnvROjYrHZC96ckDb8gZD&expires_in=0

Hướng dẫn sử dụng

Chúc các bạn tự kỉ vui vẻ