Thứ Ba, 25 tháng 10, 2016

Chúc mừng năm mới 2017 với việc trang trí pháo hoa cho Blogger

Chính thức đã bước vào năm 2016 với cái tết Tây hoành tráng bằng những màn bắn pháo hoa ở những thành phố lớn như: Hà Nội - Đà Nẵng - Sài Gòn. Còn tết âm lịch, tết của dân tộc Việt Nam thì sao? Cộng đồng Blogger có trang trí gì cho những ngôi nhà nhỏ của mình trong dịp này? Một thủ thuật rất hấp dẫn sẽ giúp bạn trang trí cho blog của mình trở nên đúng dịp nhất khi có những màn bắn pháo trực tiếp ngay trên chính blog của mình.\


Hướng dẫn thêm pháo hoa để chúc mừng năm mới 2016 cho Blogger


  • Bước 1: Vào bảng điều khiển Blogger 
  • Bước 2: Chọn BỐ CỤC (layout) -> Thêm widget (Add a widget) -> HTML/Javascript
  • Bước 3: Dán code dưới đây vào tiện ích đó
<script type="text/javascript">
// <![CDATA[
var bits=80; // how many bits
var speed=33; // how fast - smaller is faster
var bangs=5; // how many can be launched simultaneously (note that using too many can slow the script down)
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cf", "#f93", "#f0c"); 
//                     blue    red     green   purple  cyan    orange  pink
var bangheight=new Array();
var intensity=new Array();
var colour=new Array();
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var stars=new Array();
var decay=new Array();
var swide=800;
var shigh=600;
var boddie;
if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) {
  var oldonload=window.onload;
  if (typeof(oldonload)!='function') window.onload=funky;
  else window.onload=function() {
    if (oldonload) oldonload();
    funky();
  }
}
addRVLoadEvent(light_blue_touchpaper);
function light_blue_touchpaper() { if (document.getElementById) {
  var i;
  boddie=document.createElement("div");
  boddie.style.position="fixed";
  boddie.style.top="0px";
  boddie.style.left="0px";
  boddie.style.overflow="visible";
  boddie.style.width="1px";
  boddie.style.height="1px";
  boddie.style.backgroundColor="transparent";
  document.body.appendChild(boddie);
  set_width();
  for (i=0; i<bangs; i++) {
    write_fire(i);
    launch(i);
    setInterval('stepthrough('+i+')', speed);
  }
}}
function write_fire(N) {
  var i, rlef, rdow;
  stars[N+'r']=createDiv('|', 12);
  boddie.appendChild(stars[N+'r']);
  for (i=bits*N; i<bits+bits*N; i++) {
    stars[i]=createDiv('*', 13);
    boddie.appendChild(stars[i]);
  }
}
function createDiv(char, size) {
  var div=document.createElement("div");
  div.style.font=size+"px monospace";
  div.style.position="absolute";
  div.style.backgroundColor="transparent";
  div.appendChild(document.createTextNode(char));
  return (div);
}
function launch(N) {
  colour[N]=Math.floor(Math.random()*colours.length);
  Xpos[N+"r"]=swide*0.5;
  Ypos[N+"r"]=shigh-5;
  bangheight[N]=Math.round((0.5+Math.random())*shigh*0.4);
  dX[N+"r"]=(Math.random()-0.5)*swide/bangheight[N];
  if (dX[N+"r"]>1.25) stars[N+"r"].firstChild.nodeValue="/";
  else if (dX[N+"r"]<-1.25) stars[N+"r"].firstChild.nodeValue="\\";
  else stars[N+"r"].firstChild.nodeValue="|";
  stars[N+"r"].style.color=colours[colour[N]];
}
function bang(N) {
  var i, Z, A=0;
  for (i=bits*N; i<bits+bits*N; i++) { 
    Z=stars[i].style;
    Z.left=Xpos[i]+"px";
    Z.top=Ypos[i]+"px";
    if (decay[i]) decay[i]--;
    else A++;
    if (decay[i]==15) Z.fontSize="7px";
    else if (decay[i]==7) Z.fontSize="2px";
    else if (decay[i]==1) Z.visibility="hidden";
    if (decay[i]>1 && Math.random()<.1) {
       Z.visibility="hidden";
       setTimeout('stars['+i+'].style.visibility="visible"', speed-1);
    }
    Xpos[i]+=dX[i];
    Ypos[i]+=(dY[i]+=1.25/intensity[N]);
  }
  if (A!=bits) setTimeout("bang("+N+")", speed);
}
function stepthrough(N) { 
  var i, M, Z;
  var oldx=Xpos[N+"r"];
  var oldy=Ypos[N+"r"];
  Xpos[N+"r"]+=dX[N+"r"];
  Ypos[N+"r"]-=4;
  if (Ypos[N+"r"]<bangheight[N]) {
    M=Math.floor(Math.random()*3*colours.length);
    intensity[N]=5+Math.random()*4;
    for (i=N*bits; i<bits+bits*N; i++) {
      Xpos[i]=Xpos[N+"r"];
      Ypos[i]=Ypos[N+"r"];
      dY[i]=(Math.random()-0.5)*intensity[N];
      dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;
      decay[i]=16+Math.floor(Math.random()*16);
      Z=stars[i];
      if (M<colours.length) Z.style.color=colours[i%2?colour[N]:M];
      else if (M<2*colours.length) Z.style.color=colours[colour[N]];
      else Z.style.color=colours[i%colours.length];
      Z.style.fontSize="13px";
      Z.style.visibility="visible";
    }
    bang(N);
    launch(N);
  }
  stars[N+"r"].style.left=oldx+"px";
  stars[N+"r"].style.top=oldy+"px";
window.onresize=set_width;
function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  }
  if (sw_min==999999 || sh_min==999999) {
    sw_min=800;
    sh_min=600;
  }
  swide=sw_min;
  shigh=sh_min;
}
// ]]>
</script><a 
href="http://minhminhthuthuatseo.blogspot.com/">IT</a>
  • Bước 4: Lưu tiện ích đó lại và F5 blog của bạn để xem kết quả.

Chúc bạn vui vẻ !

Thứ Hai, 24 tháng 10, 2016

Cách thay favicon cho blogger dễ dàng

Favicon là ảnh nhỏ đại diện cho công ty,blog , điển hình như logo hoặc biểu tượng cho trang web của bạn, nó xuất hiện trên thanh địa chỉ trình duyệt, trang yêu thích , bookmark.

Mặc định, Favicon của  Blogger là hình biểu tượng chữ B da cam. Nhưng nếu muốn thay Favicon Blogger thì không có gì khó khăn.
CÁCH THAY FAVICON CHO BLOGGER CỰC KÌ DỄ DÀNG

Đăng nhập vào Blogger > Bố cục > Click Chỉnh sửa



Tiếp đó, trình duyệt tự động mở Popup cho phép upload Favicon cho Blogger. Giờ Upload Favicon đã chuẩn bị ở trên vào

Nếu thành công, bạn nhận được thông báo như trong hình



Vậy là bạn thay Favicon cho Blogger thành công. Lưu ý : Có thể Favicon không update ngay lập tức nên đợi 1 lúc là được.

Chủ Nhật, 23 tháng 10, 2016

Hướng dẫn resize toàn bộ hình ảnh trong blogger/blogspot

Mặc dù Blogger cung cấp công cụ giúp Resize hình ảnh bài viết nhưng nếu cần Resize tất cả hình ảnh trong Blogger thì làm sao ? Trong bài viết, hướng dẫn bạn Resize tất cả hình ảnh trong Blogger nhanh chóng với 1 đoạn mã CSS.





CÁCH RESIZE TẤT CẢ HÌNH ẢNH BLOGGER NHANH CHÓNG

1. Đăng nhập Blog

2. Vào (Template)

3. chỉnh sửa HTML.

4. Tìm ]]></b:skin> rồi  chèn trước đoạn mã :

    [css].post-body img {
    width: 480px!important;
    height: auto!important; }[/css]

Trước khi thêm đoạn mã, bạn cần thay đổi 01 vài thông số phù hợp nhất với Blog bạn.

    480px là chiều rộng ảnh sau resize
    Thay auto bằng chiều cao ảnh nếu muốn

Cuối cùng, Save template và quay lại trang chủ kiểm tra.Chúc các bạn thành công

Thứ Sáu, 21 tháng 10, 2016

Hướng dẫn chuyển từ blogspot sang wordpress

Bạn có blog trên Blogger (123.blogspot.com) và giờ, bạn muốn chuyển sang WordPress (self-hosted) có tên miền và server riêng như 123.com. Vậy, đâu là cách dễ dàng nhất chuyển từ Blogger > WordPress mà ko mất lượng truy cập từ google search, rank và người theo dõi blog bạn.



WordPress cung cấp công cụ để dễ dàng nhập toàn bộ bài viết ,bình luận Blogger vào blog WordPress. Tuy nhiên, việc chuyển từ Blogger sang WordPress còn nhiều thứ khác chứ ko đơn thuần là chuyển nội dung tới blog mới.

LÀM SAO CHUYỂN BLOGGER VỀ WORDPRESS

Trước khi bắt đầu, bạn sao lưu toàn bộ blog ở nơi an toàn.

    Đăng ký tên miền, hosting ,cài đặt WordPress
 

    Mở WordPress Dashboard – bảng điều khiển > vào Tools > Import, WordPress liệt kê nền tảng nó hỗ trợ nhập dữ liệu. Chọn Blogger. Nhấn Authorize > Allow access cho phép WordPress truy cập vào Blogger của bạn. Nó liệt kê blog có trên tài khoản , nhấn Import ,chờ một lát, toàn bộ sẽ được chuyển về.

 
 
    Mở Editor WordPress ở Appearance -> Editor ,mở file functions.php. Hầu hết theme của WordPress có file này, hoặc có thể tự upload bằng Cpanel hay FTP. Copy ,dán đoạn code vào file functions.php và nhấn Update File để lưu.   Như vậy gần xong, mở bất kỳ trang nào blog cũ, và nó chuyển hướng đến bài tương ứng WordPress.

Công cụ chuyển nội dung của WordPress có thể chuyển bài viết ,bình luận từ Blogger về, nó ko thể làm như vậy với hình ảnh trong blog cũ. Nhưng như vậy không sao, các URL hình ảnh được trỏ đến blogspot.com  ,vì vậy, bài viết của bạn có thể hiển thị đầy đủ.
LÀM GÌ TIẾP THEO?

Khi blog mới đã chạy ổn định, nên thêm trang web vào Google Webmaster, xác minh quyền sở hữu ,gửi Sitemap chứa đường link trong trang web là hoàn tất.

Thứ Năm, 20 tháng 10, 2016

Hướng dẫn việc cần làm sau khi tạo blogger

Hướng dẫn việc cần làm sau khi tạo blogger
Sau khi tạo Blogspot việc cần làm là Cài đặt thêm tính năng đầy đủ ra một Website, để Website có khả năng SEO mạn.
Mình sẽ liệt kê việc mình hay làm sau khi create Blogspot nhé. Tất nhiên là sử dụng Mẫu (Theme có sẵn).
Cài đặt Blogspot cho chuẩn
1. Mô tả Tiêu đề :

Hãy viết ngắn gọn đủ súc tích để mô tả về vấn đề mà blogspot bạn đang hướng tới.

2. Thẻ Meta mô tả:
Cài đặt này để hiện Description Trang chủ, đồng thời khi viết có phần Description cho Bài viết ,dùng để hỗ trợ mô tả cho người dùng biết nội dung trong bài viết và blog của bạn là gì.
Cài đặt : Phần này ởTùy chọn Tìm kiếm trong mục Cài đặt Blogspot.
3. Robots.txt tùy chỉnh:
Cần một code chuẩn cho Robots.txt , Sitemap trong đó nữa.Code như sau

 
User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search
Allow: /
Sitemap: http://www.hunglep.com/feeds/posts/default?orderby=UPDATED


4. Thẻ tiêu đề Robots tùy chỉnh:
Cài đặt cho Trang Home, Page, Bài viết là all, noodp. Các trang không quan trọng kiểu Archive thì đặt Nofollow.

5. Phần KHÁC
Cài đặt Google Analytics Website để thống kê định lượng truy cập đến Website để có Chiến lược hợp lý.
Bổ sung Tính năng SEO Website
1. Tối ưu Thẻ Meta Title, Description và Keyword
Thêm Code trước thẻ đóng </Head>:
<b:if cond=’data:blog.pageTitle == data:blog.title’>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<b:if cond=’data:blog.metaDescription != &quot;&quot;’>
 <meta expr:content=’data:blog.metaDescription’ name=’description’/>
 <meta expr:content=’data:blog.pageName’ name=’keywords’/>
</b:if>
<b:if cond=’data:blog.pageType == &quot;archive&quot;’>
<meta content=’noindex, nofollow’ name=’robots’/>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;index&quot;’>
<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<meta expr:content=’data:blog.metaDescription’ name=’description’/>
<meta content=’index, follow’ name=’robots’/>
</b:if> <b:else/>
<b:if cond=’data:blog.pageTitle != data:blog.title’>
<meta expr:content=’data:blog.metaDescription’ name=’description’/>
</b:if></b:if>

2. Tối ưu thẻ Meta FB, G+
Thêm đoạn Code trước thẻ đóng </Head>:
<link href=’https://plus.google.com/+beehiep/about’ rel=’author’/>
<link href=’https://plus.google.com/+beehiep/posts’ rel=’publisher’/>
 <meta content=’vi_VN’ property=’og:locale’/>
<meta expr:content=’data:blog.pageName’ property=’og:title’/>
<meta expr:content=’data:blog.metaDescription’ property=’og:description’/>
<meta expr:content=’data:blog.url’ property=’og:url’/>
<meta expr:content=’data:blog.title’ property=’og:site_name’/>
<meta content=’article’ property=’og:type’/>
<meta expr:content=’data:blog.postImageThumbnailUrl’ property=’og:image’/>

Bạn có thể chỉnh sửa các thông tin theo G+ và  info để phù hợp với blogger của bạn.Như vậy là bạn đã sửa xong các chức năng cơ bản nhất hỗ trợ SEO tăng thứ hạng cho website rồi.

Thứ Tư, 19 tháng 10, 2016

Hướng dẫn sử dụng Google drive tạo mẫu Form đăng ký – form bán hàng cơ bản

Google drive ngoài cung cấp hệ thống lưu trữ trên mây thì còn cung cấp cho người sử dụng 1 hệ thống Office online rất hiệu quả. Bạn có thể tạo các văn bản, bảng tính, trình chiếu powerpoint,…và đặc biệt là form đăng ký – cực kỳ hữu dụng cho việc khảo sát và bán hàng online.
 


Tham khảo các bài trên mạng thì mình không tìm thấy được 1 bài hướng dẫn nào cụ thể cho người chưa biết gì về Google drive để sau khi đọc xong thì có thể làm luôn.Vì vậy mình viết 1 bài này để hướng dẫn sử dụng chi tiết Google drive để tạo Form đăng ký, khảo sát online.

Bước 1:

Bạn truy cập địa chỉ https://drive.google.com, đăng nhập bằng tài khoản Google của mình.

Bước 2.  Tạo Form

Các bạn click vào “Tạo”, chọn Mẫu (lưu ý ai dùng ngôn ngữ tiếng Anh thì sẽ là Form).

bảng tính Nó sẽ hiện ra như thế này biểu 
 
 
 
Các bạn lựa chọn các chủ đề tùy ý, mỗi chủ đề sẽ có background và font chữ khác nhau theo chủ đề. Cá nhân mình hay chọn Chim sơn ca và Sách cổ điển, lý do font chữ khá rõ ràng. :3

Sau khi chọn, các bạn nhớ click OK nhé. :v

Bước 3: Tạo nội dung cho Form

Các dạng câu hỏi các bạn có thể tạo trong Form bao gồm:

1. Văn bản:

Loại câu hỏi này thì mục trả lời sẽ là 1 câu, 1 đoạn. Loại này sử dụng khi bạn muốn đặt 1 câu hỏi mở cho khách hàng, không có đáp án cụ thể.

Ví dụ: Nguyện vọng của bạn khi tham gia khóa học là gì?

2. Văn bản của đoạn văn: Tương tự như Văn bản nhưng phần trả lời được mở rộng hơn.

3. Nhiều lựa chọn

Loại này thì phần đáp án sẽ có nhiều lựa chọn, khách hàng chỉ được chọn 1 trong các đáp án mình đưa ra (có thể thêm đáp án khác)

Ví dụ: Bạn chọn học vào ca nào?

    Sáng
    Chiều
    Tối

4. Hộp kiểm

Tương tự như “Nhiều lựa chọn” nhưng khách hàng sẽ được chọn nhiều hơn 1 đáp án (cũng có thể thêm đáp án khác)

5. Chọn từ danh sách

Tương tự như “Nhiều lựa chọn”, nhưng khách hàng chỉ được chọn các đáp án có sẵn mình đưa ra, không được đưa ra đáp án khác

6. Thang tỉ lệ

Tạo ra thang đo tỉ lệ

Ví dụ: Theo bạn học tiếng anh có quan trọng không?

Không quan trọng o o o o o Quan trọng

7.Lưới

Tạo ra nhiều lựa chọn theo cả hàng và cột, phù hợp cho việc khảo sát.

8. Ngày và 9. Thời gian

Đưa ra lựa chọn về thời gian, phù hợp việc tạo câu hỏi về ngày sinh của khách hàng hoặc lựa chọn thời gian.

Lưu ý: Những loại câu hỏi cần thiết cho việc tạo form bán hàng là: Ngày, lựa chọn, văn bản, hộp kiểm. Và chỉ cần làm thành thạo 4 loại câu hỏi này thì bạn đã có thể tạo được 1 Form đầy đủ cho việc bán hàng.

Sau khi nắm được 9 dạng câu hỏi, chúng ta bắt tay vào tạo mẫu câu hỏi thôi.😀

Phần “Mẫu câu không có tiêu đề” in đậm ở đầu, bạn điền vào đó tên mẫu của mình.

Ví dụ: Đăng ký học thử tiếng anh ở trung tâm ABCXYZ, Đăng ký mua sách Facebook marketing, phiếu khảo sát hành vi mua giày Nike ở thị trường Hà Nội… và chỉ điền 1 lần thôi nhé”.

Phần “mô tả biểu mẫu” dùng để miêu tả cụ thể cho Form của bạn, cho khách hàng biết bạn là ai, đang làm gì, đây là Form để làm gì,…

Mỗi 1 câu hỏi được tạo bởi 1 cửa sổ như thế này.
 


Capture Tiêu đề câu hỏi: Là câu hỏi mình muốn hỏi khách hàng Ví dụ: Họ và tên

Văn bản trợ giúp: Miêu tả câu hỏi hoặc yêu cầu của câu hỏi để khách hàng dễ hiểu

Ví dụ: Bạn điền họ tên đầy đủ vào nhé.😀

Lựa chọn loại câu hỏi: Bạn lựa chọn loại câu hỏi cho phù hợp với nội dung hỏi

Ví dụ: “Họ và tên” thì chọn Văn bản

“Ngày sinh” thì chọn Ngày

‘Đăng ký học ca nào?” thì chọn Nhiều lựa chọn ….

Tích vào ô “Câu hỏi bắt buộc” nếu bạn muốn khách hàng bắt buộc điền vào đó.

Sau khi xong nội dung câu hỏi, bạn click “Đã xong” và chuyển sang làm câu hỏi tiếp theo bằng cách click “Thêm mục”.

Bạn có thể chỉnh sửa câu hỏi, nhân đôi câu hỏi hoặc xóa câu hỏi bằng các biểu tượng chỉnh Sau khi đã làm xong hết các câu hỏi, bạn hoàn thiện lại bảng câu hỏi của mình với các phần như:

Thêm câu cám ơn hoặc xác nhận khách hàng đã đăng ký thành công ở mục như hình dưới. cám ơn   Lưu ý là mọi thay đổi sẽ được Google drive tự động lưu lại ngay sau khi bạn thao tác, vì vậy không cần quan tâm đến việc Form đã lưu hay chưa.😀

Đến đây, cơ bản đã xong phần tạo nội dung cho Form, chúng ta sẽ xem cách quản lý Form và sử dụng Form online như thế nào.
Bạn lên đầu form và sẽ thấy 1 thanh như hình dưới đây



Phần Xem câu trả lời: Mỗi 1 Form sẽ có 1 bảng tính Excel online để ghi nhận câu trả lời, khi bạn click vào “Xem câu trả lời” thì Google drive sẽ dẫn bạn đến bảng Excel đó.

Ví dụ như thế này: of 
 
 
Bảng tính Excel này sẽ là chỗ thông tin khách hàng của bạn tập trung vào, và đương nhiên bạn phải quan tâm tới nó vì doanh thu sẽ ở đây mà ra.

Phần Chấp nhận câu trả lời: Hiện tại thì khách hàng sẽ điền được vào Form của bạn, khi bạn không muốn nhận câu trả lời nữa (hoặc hết hạn nên hủy chương trình) thì bạn click vào phần này, Form sẽ tự động không ghi nhận câu trả lời nữa.

Phần Xem biểu mẫu trực tiếp: Click vào đây thì bạn sẽ xem được giao diện hiện tại của Form (khách hàng cũng sẽ nhìn thấy như thế). Sau khi đã xem trước, chỉnh sửa, nắn nót cụ thể và ưng ý nhất với Form của mình, bạn click vào “gửi biểu mẫu”. 
 
 
 
gửi Link dạng https://docs.google.com/&#8230;. sẽ là link truy cập trực tiếp vào Form của bạn. Bạn chỉ việc đưa cho khách hàng link này và đợi kết quả thu về. ^^

Phần “Gửi biểu mẫu qua email” để bạn có thể chia sẻ quyền sửa, truy cập cho 1 email khác.

Cuối cùng, click vào “đã xong”, và bạn đã hoàn thành xong 1 Form trực tuyến.

Bạn lưu ý: tệp ghi câu trả lời có tên mặc định là : Tên Form của bạn (Câu trả lời)

Ví dụ: Form “tặng sách” thì Tệp câu trả lời có tên là “tặng sách (Câu trả lời)”

Hiển thị hình ảnh video Youtube mặc định

Bài viết quay trở lại, đó là một sự thiếu sót và chúng tôi sẽ cố gắng khắc phục nó trong năm 2016. Một thủ thuật nho nhỏ mà trong dịp đầu năm muốn chia sẻ với các bạn, đặc biệt là những bạn nào đang sử dụng blogger để làm 1 trang chia sẻ video nguồn chủ yếu từ Youtube của mình.
Bài viết trước đây mình cũng đã chia sẻ nội dung tương tự. Bạn có thể xem qua: Cách lấy hình ảnh Video Youtube tự động cho blogspot
Còn nội dung dưới đây là thêm 1 cách nữa để bạn có nhiều lựa chọn hơn.
BẮT ĐẦU NÀO
* Mọi video của Youtube đều có cấu trúc link hình ảnh dạng:
http://img.youtube.com/vi/VIDEO ID/IMAGE NUMBER.jpg
Ví dụ:
Link video: https://www.youtube.com/watch?v=TTEijimZwag
Có những kích thước hiển thị hình ảnh video tùy chọn sau (theo cấu trúc link ở trên)



  • Hiển thị hình ảnh video với kích thước mặc định
http://img.youtube.com/vi/TTEijimZwag/0.jpg
Ta được kết quả hình ảnh lớn đại diện của video đó 480x360 (Pixel)

  • Hiển thị hình ảnh của video với kích thước 120x90 (Pixel)
http://img.youtube.com/vi/TTEijimZwag/1.jpg

Thay số 1 bằng số 2 và số 3 thì ta sẽ được thêm 2 hình ảnh đại diện nhỏ nữa từ video đó.

Như vậy là bạn đã có được link hình ảnh. Để chèn hình ảnh vào nội dung để hiển thị thì các bạn sử dụng thẻ <img trong HTML có dạng:
<img src=http://img.youtube.com/vi/VIDEO ID/0.jpg width="400px" alt="Miêu tả hình ảnh"/>
!
Chúc các bạn vui vẻ !

Khắc phục lỗi mất ảnh trên Blogspot

Lỗi thứ 1 : Thường mấy bạn làm Blog nền tảng Blogger nghỉ rằng ảnh upload Blogspot có liên quan gì ảnh trên picasaweb.google.com hay Google+ mà cứ xuất hiện  nhỉ? Vậy là xóa hết ảnh picasaweb.google.com hay Google+ rồi vào lại Blog. Gặp hiện tượng”Lỗi ảnh do xóa khi chưa biết gì”. Vì ảnh upload lên Blogspot upload lên Google+  đều lưu trữ ở picasaweb.google.com . Cách khắc phục duy nhất là bạn upload tất cả ảnh đã bị xóa đi thay link từng ảnh




 Lỗi thứ 2: Lỗi do nhà mạng chặn thì chắc ai cũng biết hết , nhà mạng chỉ chặn domain chứa link .blogspot.com thôi ! Vậy đâu là lối thoát người dùng Blogger?

Cách 1: Chỉnh sửa thủ công: Khi upload ảnh bài viết, link ảnh  có dạng *.bp.blogspot.com, chỉ cần chuyển bài viết chế độ HTML rồi sửa link thành lh4.googleusercontent.com hay lh4.ggpht.com là được.

Cách 2: Sử dụng đoạn Javascript, với cách link ảnh tự động chuyển về lh4.googleusercontent.com  . Vào Blog => Mẫu =>Chỉnh sửa HTML. Nhấn  Ctrl + F và tìm thẻ </body>. Sau đó dán mã Code ở phía trên thẻ </body> và save
1
2
3
4
5
6
7
8
&lt;script type='text/javascript'&gt;
//&lt;![CDATA[
var images = document.getElementsByTagName("img");
for(var i=;i&lt;images.length;i++) {
images[i].src = images[i].src.replace(/[-9]+.bp.blogspot.com/,"lh4.googleusercontent.com");
}
//]]&gt;
&lt;/script&gt;

Thứ Tư, 5 tháng 10, 2016

Hướng dẫn tạo hiệu ứng xoay tròn hình ảnh trong blogger

Trong bài viết này hướng dẫn bạn tạo hiệu ứng xoay tròn hình ảnh bằng CSS3 cho Blogger đơn giản. Xin giải thích thêm, khi áp dụng thủ thuật này, hình ảnh xoay 1 vòng ,chuyển thành hình tròn nếu độc giả rê chuột khá đẹp mắt

Bản chất hiệu ứng là sử dụng CSS3 tạo hiệu ứng xoay tròn ảnh và hiệu ứng bo tròn ảnh nên sẽ ko làm giảm tốc độ Blog.



Để tạo <strong>hiệu ứng xoay tròn ảnh Blogger, đầu tiên cần áp dụng mã CSS3 bằng thêm đoạn code vào trước thẻ ]]>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
[css].morph img {
border:25px solid #158aee;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.morph img:hover {
border:25px solid #158aee;
border-radius: 250px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
margin: ;
padding: ;
margin-bottom:0px;
overflow:hidden;
}[/css]


Trong đó :

[css]border:25px solid #158aee;[/css]

Là viền trước rê chuột vào

    25px : kích thước viền
    #158aee : màu đường viền

Bạn có thể xóa đi nếu không cần thiết
Gợi ý xem thêm :   Hướng dẫn bật thẻ Description trong blogger cho từng bài viết

[css]border:25px solid #158aee;[/css]

Là viền sau khi rê chuột vào. Cái này tương tự như  trên.

Tiếp theo, thêm ảnh có hiệu ứng vào bài viết bất cứ chỗ nào, chỉ cần thêm mã sau vào. Lưu ý thêm vào bài viết phải sang chế độ HTML
[css]<div class=”morph pic”>
<img alt=”morph hover effect” src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnoIfdIjtd1YFkxkwz_Yw-i24GhGe7zOtEFM8OM8MGktjBYl-bEiUSsEsSUlxXrakZy31SWegzPTPwqOKlyvPSYaMIQR6PGZJfMXABDg14U3rlAgPgwn-3kGm-i7ddGjFO9WII-9X3UBQF/s1600/morph.png” />
</div>[/css]

Trong đó https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnoIfdIjtd1YFkxkwz_Yw-i24GhGe7zOtEFM8OM8MGktjBYl-bEiUSsEsSUlxXrakZy31SWegzPTPwqOKlyvPSYaMIQR6PGZJfMXABDg14U3rlAgPgwn-3kGm-i7ddGjFO9WII-9X3UBQF/s1600/morph.png : link ảnh áp dụng hiệu ứng