Handmade

Công nghệ

Làm đẹp

Được tài trợ

Kết quả tìm kiếm

Showing posts with label thủ thuật blogger. Show all posts
Showing posts with label thủ thuật blogger. Show all posts

22 February 2017

Hướng dẫn cách tạo trang lỗi 404 với hộp tìm kiếm đẹp cho Blogspot

Với những trang lỗi 404, nếu không được tùy chỉnh gì thì nó thật sơ sài và chán ngắt ^_^ Vì thế, với mục đích làm đẹp trang 404, thì mình sẽ hướng dẫn các bạn cách tạo trang lỗi 404 với 1 hộp tìm kiếm đẹp cho Blogspot của bạn.

Thay trang lỗi 404 bằng hộp tìm kiếm đẹp cho Blogspot

Trang lỗi 404 là gì?

Là trang sẽ xuất hiện mỗi khi người dùng truy cập vào web nhưng địa chỉ này không tồn tại, có thể đường dẫn này là của 1 bài viết cũ đã bị xóa, cũng có thể đó là 1 đường dẫn chưa từng tồn tại, do người dùng gõ nhầm. Trang 404 sẽ thông báo cho độc giả biết rằng bài viết đã bị xóa hoặc đường dẫn chưa từng tồn tại, và độc giả nên vào 1 đường dẫn khác.

Lợi ích của trang 404 là gì?

Như đã nói ở trên, trang 404 thông báo cho người dùng biết rằng đường dẫn này đã không tồn tại hay không còn tồn tại nữa. Ngoài ra trang 404 giúp thông báo với các bots tìm kiếm trang không tồn tại và điều hướng bots trên web, việc không có trang 404 sẽ làm cho website bị đánh giá thấp vì quá nhiều đường dẫn không tồn tại và báo lỗi.

Hướng dẫn cách tạo trang lỗi 404 với hộp tìm kiếm đẹp cho Blogspot

Vì trang 404 mặc định nó sẽ chẳng có gì, nhìn sẽ mất cảm tình. Vì thế, với thủ thuật blogspot này, mình muốn đưa 1 hộp tìm kiếm vào trang này, nhằm giúp người dùng tìm kiếm nội dung mình cần thông qua nó nếu gặp phải trang lỗi 404.

Trang lỗi 404 tùy chỉnh

- Truy cập vào trang quản trị Blogger

- Vào Cài đặt (Settings) -> Tùy chọn tìm kiếm (Search preferences):

Tùy chọn tìm kiếm (Search preferences)

- Tại mục Lỗi và chuyển hướng (Error and redirections) -> Không tìm thấy trang tùy chỉnh (Custom page not found), thêm vào đoạn code sau:

Không tìm thấy trang tùy chỉnh

<style>
#search-button-links1 {
    position: relative;
    top: 0;
    right: 0;
    height: 60px;
    width: 580px;
    font-size: 18px;
    color: #000;
    text-align: center;
    text-decoration:none;
    line-height: 42px;
    border-width: 0;
    background-color: #5caddf;
margin:5px;
    cursor: pointer;
}
#search-box1 {
    position: relative;
    width: 100%;
    margin: 0;
}
#search-form1 {
    height: 40px;
    border: 1px solid #999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;
}
#search-text1 {
    font-size: 14px;
    color: #ddd;
    border-width: 0;
    background: transparent;
}
#search-box input[type="text"] {
    width: 90%;
    padding: 11px 0 12px 1em;
    color: #333;
    outline: none;
}
#search-button1 {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    width: 80px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 42px;
    border-width: 0;
    background-color: #4d90fe;
    -webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;
}
</style>
<div id='search-box1'>
  <form action='/search' id='search-form1' method='get' target='_top'>
    <input id='search-tex1t' name='q' placeholder='Tìm kiếm trên huongdantulam.com' type='text'/>
    <button id='search-button1' type='submit'><span>Tìm kiếm</span></button>
  </form>
</div>
<p style="color:#e33633; font-family:verdana, sans serif; font-size:16px; padding:24px; text-decoration:none">Trang này đã được xóa hoặc chưa từng tồn tại - Vui lòng truy cập <a href="http://huongdantulam.com">DIY</a>
Bạn có thể thay các đoạn chữ và link màu xanh tùy theo ý của bạn nhé, hoặc để nguyên đó mà xài thôi.

- Sau khi chỉnh sửa xong thì lưu lại. Và hãy kiếm tra web của bạn bằng 1 đường dẫn bất kỳ để dẫn tới trang lỗi 404 xem. ^_^

Hướng dẫn tạo widget xếp hạng bình luận (Top commentators) cho Blogspot

Widget xếp hạng bình luận (Hay top commentators) sẽ xếp hạng các blogger bình luận nhiều nhất trên blog của bạn, cung cấp cho bạn chi tiết số bình luận của blogger đó trên website bạn trong khoảng thời gian nhất định.

Tạo widget xếp hạng bình luận (Top commentators) cho Blogspot

Lợi ích gì từ bình luận và widget xếp hạng bình luận?

Bình luận là một phần của Blogspot, việc bình luận nhiều giúp cho nội dung bài viết được tươi mới trong mắt bots và tạo ra sự trao đổi, tương tác giữa những người dùng trong blog. Trang blog có càng nhiều bình luận thì càng tốt, tương tác càng nhiều, càng chất lượng, sẽ giúp chúng ta hỗ trợ cho việc SEO Blogspot dễ dàng hơn.

Widget xếp hạng bình luận ngoài việc cho mọi người biết những ai tương tác nhiều trên blog này, thì nó còn giúp níu giữ độc giả. Bạn có cảm thấy hãnh diện khi thấy mình nằm trong danh sách này ở một blog lớn không? Và vô hình chung, việc xếp hạng bình luận này có thể tạo sư ganh đua giữa những độc giả bằng cách comment trao đổi để thay đổi xếp hạng của mình ^_^

Đây là ảnh ví dụ nếu sử dụng widget top commentators này cho Blogspot của mình:

widget xếp hạng bình luận (Top commentators)

Hướng dẫn tạo widget xếp hạng bình luận (Top commentators) cho Blogspot

Với widget này, số bình luận sẽ nằm bên phải tên người bình luận nhé.
- Truy cập vào trang quản trị Blogger:

- Vào Bố cục (Layout), chọn vị trí muốn hiển thị widget xếp hạng bình luận, và thêm tiện ích (Add widget):

-  Chọn HTML/JavaScript, và thêm đoạn code sau vào bên trong nó:
<style type="text/css">
.top-commentators {
margin: 3px 0;
border-bottom: 1px dotted #ccc;
}
.avatar-top-commentators {
vertical-align:middle;
border-radius: 30px;
}
.top-commentators .commenter-link-name {
padding-left:0;
}
</style>
<script type="text/javascript">
var maxTopCommenters = 8;
var minComments = 1;  
var numDays = 0;      
var excludeMe = true;  
var excludeUsers = ["Anonymous", "_CTPG_ 2015", "Trần Bá Đạt _CTPG_"];
var maxUserNameLength = 42;
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';
//
var sizeAvatar = 33;
var cropAvatar = true;
//
var urlNoAvatar = "http://lh3.ggpht.com/-pWdg8wLsedo/UmVWQxLdwrI/AAAAAAAAEVk/-z7YgKykkuU/s1600/avatar_blue_m_96.png" + sizeAvatar;
var urlAnoAvatar = 'http://lh3.ggpht.com/-6B6DXCp8dek/UmVPm7D2mOI/AAAAAAAAEVU/Xz-3z2nRpUk/s1600/avatar1.png' + sizeAvatar;
var urlMyProfile = '';
var urlMyAvatar = '';
if(!Array.indexOf) {
 Array.prototype.indexOf=function(obj) {
  for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
  return -1;
}}
function replaceTopCmtVars(text, item, position)
{
  if(!item || !item.author) return text;
  var author = item.author;
  var authorUri = "";
  if(author.uri && author.uri.$t != "")
    authorUri = author.uri.$t;
  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
    avaimg = author.gd$image.src;
  else {
    var parseurl = document.createElement('a');
    if(authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
    }
  }
  if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
    avaimg = urlMyAvatar;
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
    avaimg = urlNoAvatar;
  var newsize="s"+sizeAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
  if(cropAvatar) newsize+="-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
    authorName = txtAnonymous;
  var imgcode = '<img class="avatar-top-commentators" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '<a class="commenter-link-name" href="'+authorUri+'">'+authorcode+'</a>';
  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[#]', position);
  text = text.replace('[count]', item.count);
  return text;
}
var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
  var one_day=1000*60*60*24;
  var today = new Date();
  if(urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for(var i=0 ; i<elements.length ; i++)
      if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
      }
  }
  if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g);
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
 
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
      if(days > numDays) break;
    }
    var authorUri = "";
    if(entry.author[0].uri && entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t;
    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
      continue;
    var authorName = entry.author[0].name.$t;
    if(excludeUsers.indexOf(authorName) != -1)
      continue;
    var hash=entry.author[0].name.$t + "-" + authorUri;
    if(topcommenters[hash])
      topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter;
    }
  }
  if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    return;
  }
  // convert object to array of tuples
  var tuplear = [];
  for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);
  tuplear.sort(function(a, b) {
    if(b[1].count-a[1].count)
        return b[1].count-a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
  });
  var realcount = 0;
  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < minComments)
        break;
    document.write('<di'+'v class="top-commentators">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>
Trong đó:
  • Số 0 ở numDays đó là số ngày lấy xếp hạng bình luận. Nếu để số 0 tức sẽ lấy toàn thời gian. Còn để số khác ví dụ như 30, thì xếp hạng bình luận sẽ lấy trong 30 ngày gần nhất.
  • Chữ màu xanh, các bạn thay tên G+ của các bạn vào nếu không muốn nó xếp hạng mình vào đó.
  • Số 8 màu đỏ, nằm trong var maxTopCommenters = 8, tức là chỉ hiển thị tối đa top 8 người bình luận nhiều nhất, muốn chuyển thành top 10 thì cứ đổi số 8 thành 10 thôi.
  • var sizeAvatar = 33, số 33 tức avatar có kích thước là 33x33 px, muốn to hay nhỏ hơn thì cứ thay đổi số 33.

- Lưu lại, và hoàn thành!

Sau khi lưu lại bạn sẽ thấy xếp hạng bình luận cho Blogspot của mình. Khá đẹp và bắt mắt đấy nhé ^_^ Chúc bạn có blog đẹp!

Cách hiển thị bài viết theo label tại trang chủ blogspot

Bạn muốn một trang chủ Blogspot có giao diện đẹp, hấp dẫn giống một trang báo tương tự như của huongdantulam.com hay nhiều trang web khác? Các bài viết sẽ hiển thị theo các label, giúp chúng ta phân ra nhiều chuyên mục tại trang chủ, nhằm giúp độc giả tiếp cận nhiều hơn với các bài viết trên blog.

Hiển thị bài viết theo label tại trang chủ Blogspot

Thủ thuật Blogspot này sẽ sử dụng các label để hiển thị các bài viết trong các label này. Ví dụ, các bạn có thể thấy ở trang chủ của mình. Đó là các label: hoc nau anhoc lam banhhoc moc lencong nghe và lam dep. Mỗi label sẽ hiển thị các bài viết nằm trong Label đó. Rõ ràng với cách hiển thị truyền thống là phân trang của blogspot thì các phân các chuyên mục như thế này giúp độc giả dễ dàng tiếp cận các thông tin mà chúng ta đang cung cấp.

Hướng dẫn hiển thị bài viết theo label tại trang chủ Blogspot

- Như thường lệ, tốt nhất trước khi chỉnh sửa chúng ta nên Backup lại code web trước đã.

- Truy cập vào trang quản trị Blogger: https://www.blogger.com

- Vào Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML):

edit html


- Click vào vùng code, và tìm đến thẻ ]]></b:skin>, sau đó thêm đoạn code này vào phía trên nó:
img.label_thumb{float:left;margin-right:15px !important;height:65px; /* Thumbnail height */width:65px; /* Thumbnail width */border: 1px solid #ff00ff;}
#label_with_thumbs {float: left;width: 100%;min-height: 80px;margin: 0px 15px 2px 0px;padding: 1;}ul#label_with_thumbs li {padding:6px 0;min-height:60px;margin-bottom:1px;border-bottom: 1px solid #ff99ff;}
#label_with_thumbs li{list-style: none ;padding-left:1px !important;}
#label_with_thumbs a { text-transform: none;}#label_with_thumbs strong {padding-left:1px; }
- Tiếp tục tìm đến thẻ <head> và thêm đoạn code này vào phía dưới nó:
 <script type='text/javascript'>//<![CDATA[function labelthumbs(json){document.write('<ul id="label_with_thumbs">');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=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='http://lh3.ggpht.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s1600/picture_not_available.png';}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]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}elseif("summary"in entry){var postcontent=entry.summary.$t;}else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}if(showcommentnum==true){if(flag==1){towrite=towrite+' | ';}if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}if(displaymore==true){if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}document.write(towrite);document.write('</li>');if(displayseparator==true)if(i!=(numposts-1))document.write('');}document.write('</ul>');}//]]></script>
Sau đó lưu template lại.
- Cuối cùng, vào Bố cục (Layout), chọn vị trí mà bạn muốn hiển thị theo label, và thêm tiện ích (Add widget), chọn HTML/Javascript và thêm đoạn code này vào trong nó:
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script> <script type="text/javascript" src="/feeds/posts/default/-/label name?published&alt=json-in-script&callback=labelthumbs"></script>
Trong đó, chổ label name, các bạn thay bằng tên label muốn hiển thị ở trang chủ nhé. 

- Lưu lại và tận hưởng thành quả, bạn đã có thể hiển thị bài viết theo label tại trang chủ blogspot rồi đấy.

Và nếu muốn thêm các label khác, bạn chỉ cần lấy đoạn code phía trên đổi label name thành các label khác rồi thêm vào các vị trí muốn thôi. Và để có giao diện thật đẹp như của mình thì các bạn cần biết CSS để chỉnh sửa bố cục trang web nhé.

Hướng dẫn thêm xác nhận Admin trong bình luận Blogspot

Nếu có thắc mắc nào về việc thêm xác nhận Admin trong bình luận thì comment bên dưới nhé.Bạn có thấy rằng ở rất nhiều blog trong hộp bình luận có sự khác biệt giữa quản trị viên và khách không? Đó thường là những icon nhỏ như dấu tick, hình người (như của mình) hay là chữ Admin... Giúp người xem dễ theo dõi và biết đâu là Admin web và đâu là khách viếng thăm. Việc thêm các icon nhỏ như vậy giúp tạo ấn tượng cho người dùng, và những bình luận của admin sẽ được chú ý hơn.
Thêm xác nhận admin trong bình luận cho Blogspot
Nhiều template của Blogspot không hề có tính năng này, admin bình luận cũng giống như một thành viên bình luận thôi. Vì thế mình sẽ hướng dẫn các bạn thủ thuật thêm xác nhận admin thuật này, để không bỏ qua những lợi ích mà nó mang lại.

Hướng dẫn thêm xác nhận Admin trong bình luận Blogspot

- Truy cập vào trang quản trị Blogger: https://www.blogger.com/

- Vào Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML):

Edit HTML

- Click vào vùng code và tìm đoạn code sau:
.comments .comments-content .icon.blog-author
- Sau đó xóa hết toàn bộ code bên trong nó, code đó sẽ giống như thế này nhé:
background-repeat: no-repeat;  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==); 
- Và sau đó thay đoạn code dưới đây vào:
background: url("https://dl.dropboxusercontent.com/s/gp8fhc34w2rka9h/verified%20page.png") no-repeat scroll 0 0 transparent;
Trong đó, đường dẫn màu xanh là đường dẫn cho icon làm xác nhận Admin, như trên là dấu tick màu xanh, các bạn có thể tạo ra các icon khác thay vào đường dẫn đó nhé.



- Lưu template lại và tận hưởng thành quả ^_^

Nếu có thắc mắc nào về việc thêm xác nhận Admin trong bình luận thì comment bên dưới nhé.

Hướng dẫn tự động thay đổi màu nền cho Blogspot

Bạn muốn trang web của mình mới lạ với mỗi lượt truy cập, nhằm làm cho người xem đỡ nhàm chán với giao diện hiện tại? Mình đề xuất các bạn nên thay đổi màu nền cho Blogspot của bạn, và mình sẽ hướng dẫn một thủ thuật blogspot giúp các bạn tự động thay đổi màu nền mỗi khi truy cập vào trang blog.


Hướng dẫn tự động thay đổi màu nền cho Blogspot


Cách thức hoạt động của quá trình thay đổi màu nền
Trước khi vào hướng dẫn mình sẽ giải thích một tí về cơ chế hoạt động của phương pháp ở bài này: Đó là sử dụng JQuery để tự động hóa việc thay đổi màu nền mỗi khi trang web được làm mới. Bất cứ khi nào trang blogspot của bạn được refresh thì màu nền sẽ ngay lập tức thay đổi.

Có nghĩa là mỗi khi người xem refresh trang blog của bạn, thì đồng nghĩa họ sẽ nhận được một màu nền mới, có lẽ nó sẽ giúp tạo ấn tượng hơn với người xem.


Hướng dẫn tự động thay đổi màu nền cho Blogspot

Dưới đây là các bước để thay đổi màu nền, các bạn chỉ cần làm theo hướng dẫn là được.

- Truy cập vào trang quản trị Blogger của bạn ở địa chỉ: https://www.blogger.com

- Vào Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML):


Hướng dẫn tự động thay đổi màu nền cho Blogspot

- Giờ click vào vùng code, sau đó bấm Ctrl + F để mở hộp tìm kiếm, và tìm đến thẻ </head>, thêm đoạn code này vào ngay bên trên nó:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js?ver=1.5' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
function get_random_color(){var e="0123456789ABCDEF".split("");var t="#";for(var n=0;n<6;n++){t+=e[Math.round(Math.random()*14)]}return t}$(function(){$(".post").each(function(){$(this).css("background-color",get_random_color())})})//]]></script>
Lưu ý, nếu template bạn đã có sẵn jquery.min.js thì bạn có thể bỏ đoạn code này đi:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js?ver=1.5' type='text/javascript'/>
 - Lưu template lại
Sau khi lưu template lại thì bạn hãy thử ra kiểm tra blog mình xem thế nào, bạn sẽ thấy mỗi lần bạn F5 thì blog của bạn sẽ tự động thay đổi màu nền. Khá hấp dẫn phải không nào? ^^

Hướng dẫn tự làm web miễn phí bằng blogspot


Chào các bạn, tự làm web miễn phí phục vụ việc kinh doanh online, thương mại trực tuyến hay một trang cá nhân để chia sẻ ngày càng phổ biến.
Để thiết kế 1 website, thuê code, thuê host hoặc máy chủ sẽ tốn kém hoặc bất cập với nhu cầu làm web không quá cầu kỳ.


Sau khi hệ thống blog 360 của yahoo dừng hỗ trợ, google lập tức đã tạo ra blogspot giúp ta có thể tự làm 1 web miễn phí vô cùng tiện lợi.

Bước 1:
Đầu tiên bạn truy cập vào https://www.blogger.com
Đăng nhập tài khoản Gmail của bạ vào, khi đó sẽ có màn hình quản trị Bog như này:

Bạn chọn settings, mục Language bạn chọn Tiếng Việt cho dễ làm nhé, sau khi chọn Tiếng Việt xong bạn bấm nút save bên phải phía trên của màn hình.

Bước 2:
Bắt đầu tạo web miễn phí với blogspot, bạn chọn mục Blog mới


Sau khi chọn mục Blog mới, sẽ xuất hiện khung nhập để bạn đặt tiêu đề và link truy cập cho blog của bạn.
Nhập xong, nếu tên miền còn khả dụng thì blogspot sẽ báo cho bạn là địa chỉ blog này có sẵn, khi đó bạn nhấp nút Tạo Blog màu cam bên dưới.

Lưu ý: Phần mẫu bên dưới, bạn cứ để mặc định mẫu Đơn Giản nhé, vì giao diện (template) của blog mình đi lấy chỗ khác về cho đẹp chứ dùng gì cái mẫu mặc định này.

Bước 3:
Sau khi tạo blog xong, web sẽ tự làm mới, đưa bạn về giao diện quản trị blog của mình, bao gồm các nhắc nhở vi phạm, điều khoản này nọ, mấy cái này bạn cứ bấm X tắt nó đi.



Bấm vào Xem Blog bạn sẽ thấy giao diện blog đơn giản của mình
Bấm Đăng Bài Mới để soạn những bài đầu tiên, lưu ý nhập đầy đủ Tiêu Đề, Thẻ tags...
Mục Bố Cục sau này sẽ dùng để sửa theme blog đẹp
Mục Mẫu để add giao diện blog mới, chỉnh sửa HTML của blog sau này
Mục Cài đặt để chỉnh múi giờ, ngôn ngữ..

Trang quảng lý bằng tiếng việt nên bạn có thể tà tà ngâm cứu dần.
Xin mời đọc các bài tiếp theo để có thể làm đẹp, làm chủ vấn đề tự làm web miễn phí nhé bạn.



16 February 2017

Hướng dẫn chuyển bài viết từ Blogspot sang WordPress

Bạn đang sử dụng Blogspot, mọi thứ ổn cả chỉ có điều thỉnh thoảng bị chặn và thêm nữa là tùy biến không quá nhiều. Nếu bạn tập trung làm nội dung thì blogspot là nền tảng tốt. Nhưng nếu bạn muốn vọc nhiều hơn, có quyền quản trị cao hơn thì bạn nên chuyển sang nền tảng khác như WordPress. Hôm nay mình sẽ viết một tút hướng dẫn cho các bạn chuyển đổi blog từ Blogspot sang wordpress.org nhé.




Mục tiêu : Chuyển từ một trang abc.blogspot.com sang abc.com sử dụng wordpress.org.
Yêu cầu : Quyền quản trị của site blogspot muốn chuyển + một site wordpress mới cài đặt trên hosting của bạn.

CÁCH THỨ 1:

Bước 1:
Đầu tiên, bạn cần đăng nhập quản trị của wordpress, vào mục Tools -> import sau đó chọn Blogger.
Blogger Import sang wordpress
Blogger Import sang wordpress
Khi bạn click vào Blogger như ở bước trên, việc này đồng nghĩa với việc bạn đã đồng ý với việc phải cài một plugin tên là Blogger Importer, và bạn nhấn Install để cài đặt Plugin này vào wordpress của bạn.
Bước này cần cung cấp tài khoản FTP để WordPress có thể cải plugin vào cho bạn.
Ative plugin và plugin này sẽ yêu cầu đăng nhập và quyền truy cập vào tài khoản Blogspot của bạn. Rất may là cái này của wordpress làm ra nên có thể chúng ta yên tâm mà cho nó vào. Cái này làm tôi liên tưởng đến hoàng thượng cho bọn hoạn quan vào mò mẫm công chúa vậy :v . Ok bạn nhấn Authorize để đồng ý.
dong-bo-blogger
Khi bạn cho phép plugin này đồng bộ với tài khoản của Google, bạn cần đăng nhập vào tài khoản Gmail mà kết nối với site blogspot bạn muốn chuyển sang. WordPress yêu cầu giấy phép, bạn nhấn allow (cho phép truy cập) để đồng ý. Ở đây có một điều tuyệt vời là bạn có thể Import được nhiều blogspot vào một site wordpress, quá tuyệt vời, ở đây tôi chỉ add một site blogspot vào thôi nhé, như hình sau:
site-blogspot
Bạn nhấn Import, quá trình sẽ tự động diễn ra để Import dữ liệu sang, ở phiên bản mới này có một điều tuyệt vời ông mặt trời là wordpress import luôn cả Image sang, mình nhớ không nhầm là ở phiên bản La Mã cổ đại (khoảng năm 2011 sau công nguyên) thì không Import được ảnh, họ sử dụng luôn ảnh (Images) trên blogspot. Có lẽ đây là một điểm mới 😀
Ok, bây giờ bạn có thể ra ngoài trang chủ và cảm nhận coi đã import được chưa, được rồi thì chưa xong đâu, tiếp đến chúng ta còn một bước nữa là tùy chỉnh pemarklink.

Bước 2: Tùy chỉnh Permalink trong wordpress

Để tránh trường hợp sau khi chuyển dư liệu sang WordPress thì xuất hiện link đứt gãy, bạn cần tùy chỉnh lại cấu trúc permalink cho phù hợp với dạng link của blogspot. Theo mặc định, link của blog xây dựng trên blogspot luôn có dạng là: /yyyy/mm/post.html, vậy trong wordpress bạn cũng phải để cấu trúc link có dạng như vậy. Bạn vào mục setting –> permalink, chọn loại Custom Structure và nhập vào cấu trúc như sau: /%year%/%monthnum%/%postname%.html.
Tùy chỉnh Permalink custom
Tùy chỉnh Permalink custom
Ok, xong rồi đó. Giờ bạn hãy kiểm tra lại thành quả đạt được như thế nào nhé. Chúc bạn có thêm một thủ thuật hữu ích.

CÁCH THỨ 2:
Bước 1. Tải dữ liệu từ Blogger

Bạn truy cập vào blogger để lấy dữ liệu từ blog cũ, bằng cách:
Cài đặt > Khác > Xuất blog
tai-noi-dung
Một cửa sổ bật ra, bạn nhấn tiếp vào Tải xuống blog:
xuat-blog
Bạn sẽ có một file xml, file của tôi nặng khoảng 3,7 MB – dĩ nhiên đấy chỉ toàn là ký tự chứ chưa có ảnh gì. 

Bước 2. Up dữ liệu lên WordPress

Dĩ nhiên trước khi bước này tiến hành bạn đã phải có một trang WordPress chờ sẵn rồi. Nó sẽ bao gồm một tên miền và hosting.
Tên miền mới có thể là vì bạn chưa từng sử dụng tên miền riêng cho blog (blog của bạn có tên miền dạng abcxyz.blogspot.com) hoặc bạn có sử dụng tên miền riêng nhưng nay chuyển sang một tên miền hoàn toàn khác (như trường hợp của tôi chuyển từ tên miền mangluoitoancau.com sang ducanhplus.com).
Để up dữ liệu, bạn vào Bảng tin > Công cụ > Nhập vào (Tools » Import)
Sau đó bạn chọn nhập vào từ Blogger:
nhap-vao-tu-blogger
Nó sẽ cài plugin giúp bạn chuyển dữ liệu từ Blogger sang WordPress. Sau khi cài xong bạn nhớ activce (kích hoạt).
Tiếp theo, bạn upload file xml tải ở bước 1 lên:
uploadfile

Bước 3. Chuyển ảnh từ blogspot sang host mới

Xong bước 2, bạn sẽ thấy các bài viết của mình trên trang mới, tuy nhiên có thể bạn sẽ vẫn thấy đường dẫn ảnh là của blogger chứ không phải trên host mới của bạn.
Để upload toàn bộ ảnh từ blogspot sang host mới bạn sử dụng plugin Import External Images.
Nó sẽ quét tất cả các ảnh có link bên ngoài rồi chuyển về host.
chuyen-anh-tu-blogspot-sang-wordpress
Sau khi cài đặt plugin, các bạn vào Phương tiện > Import Images. Rồi chọn Import Images Now.

Bước 4. Thiết lập đường dẫn tĩnh – liên kết của bài viết

Chúng ta biết blogger có dạng URL như sau: tenmien/nam/thang/ten-bai-viet.html
Chúng ta sẽ thiết lập liên kết tĩnh của bài viết trên WordPress theo cách tương tự.
Ở phần Cài đặt (Setting), bạn chọn liên kết tĩnh (permalink), rồi chọn như hình bên dưới (Monh and name)
lien-ket-tinh

Bước 5. Đổi hướng URL

Cái này rất quan trọng nhá, vừa để bạn giữ lưu lượng truy cập, vừa để khách hàng vẫn vào được trang cần vào (vì url trang ngày xưa đã bị đổi rồi) và về lâu dài cũng để cho Google biết rằng trang mới là trang cũ chuyển sang nên sẽ giữ thứ hạng của trang mới trên công cụ tìm kiếm chứ không đánh tụt hạng.
Cách làm như sau. Bạn blogger > Mẫu, kéo xuống phía dưới rồi nhấn vào hoàn nguyên về mẫu cổ điển (Revert to Classic Template). Cuối cùng bạn paste đoạn code sau vào chỗ Sữa HTML Mẫu:
<html>
<head>
<title><$BlogPageTitle$></title>
<script>
<MainOrArchivePage>
window.location.href=”http://www.example.com/”
</MainOrArchivePage>
<Blogger>
<ItemPage>
window.location.href=”http://www.example.com/?blogger=<$BlogItemPermalinkURL$>”
</ItemPage>
</Blogger>
</script>
<MainPage>
<link rel=”canonical” href=”http://www.example.com/” />
</MainPage>
<Blogger>
<ItemPage>
<link rel=”canonical” href=”http://www.example.com/?blogger=<$BlogItemPermalinkURL$>” />
</ItemPage>
</Blogger>
</head>
<body>
<MainOrArchivePage>
<h1><a href=”http://www.example.com/”><$BlogTitle$></a></h1>
</MainOrArchivePage>
<Blogger>
<ItemPage>
<h1><a href=”http://www.example.com/?blogger=<$BlogItemPermalinkURL$>”><$BlogItemTitle$></a></h1>
<$BlogItemBody$>
</ItemPage>
</Blogger>
</body>
</html>
Cuối cùng nhấn Lưu mẫu
Chú ý: bạn nhớ thay example.com bằng tên trang web mới của bạn 
Tại trang WordPress của bạn, bạn tìm đến file function.php rồi copy đoạn code này cho xuống cuối rồi nhấn Save để lưu file:
function blogger_query_vars_filter( $vars ) {
  $vars[] = "blogger";
  return $vars;
}
 
add_filter('query_vars', 'blogger_query_vars_filter');
 
function blogger_template_redirect() {
  global $wp_query;
  $blogger = $wp_query->query_vars['blogger'];
  if ( isset ( $blogger ) ) {
    wp_redirect( get_wordpress_url ( $blogger ) , 301 );
    exit;
  }
}
 
add_action( 'template_redirect', 'blogger_template_redirect' );
 
function get_wordpress_url($blogger) {
  if ( preg_match('@^(?:https?://)?([^/]+)(.*)@i', $blogger, $url_parts) ) {
    $query = new WP_Query ( 
      array ( "meta_key" => "blogger_permalink", "meta_value" => $url_parts[2] ) );
    if ($query->have_posts()) { 
      $query->the_post();
      $url = get_permalink(); 
    } 
    wp_reset_postdata(); 
  } 
  return $url ? $url : home_url();
}
Thôi thế là xong rồi đấy ạ, phải mất vài ngày cho đến vài tuần để Google cập nhật hết các đường dẫn mới trên công cụ tìm kiếm. Bạn chịu khó đợi nhé.
Hiện tại khách truy cập đướng dẫn cũ của blog sẽ ngay lập tức được chuyển hướng sang blog mới.
Giờ thì tất cả đã trên WordPress, nội dung lẫn hình ảnh, sớm muộn trên công cụ tìm kiếm cũng vậy.
Chúc mừng bạn đến với thế giới hoa lệ của WordPress!

 
Copyright © 2017 Hướng dẫn tự làm - Làm Kem - Bánh Flan - Handmade: huongdantulam.com