Việc chèn video Youtube vào sidebar giúp chủ Blog dễ dàng giới thiệu về Blogger hoặc dịch vụ của Blog với độc giả và khác hàng. Bài viết hướng dẫn cách cách chèn video Youtube vào sidebar của Blogger vô cùng đơn giản bằng cách sử dụng một đoạn mã HTML duy nhất.
Cách chèn video Youtube vào sidebar của Blogger
Cách chèn video Youtube vào sidebar của Blogger

Cách chèn video Youtube vào sidebar của Blogger

1. Đăng nhập vào Blog
2. Vào Bố cục (Layout)
3. Chọn Thêm Tiện ích (Add Widget)
4. Tạo 1 tiện ích HTML/Javarscip và chèn đoạn code phía dưới vào
[css]
<div class="widget-content">
<iframe width="336" height="169" src="http://www.youtube.com/embed/gEBJeqvJReg" frameborder="0" allowfullscreen></iframe>
<style>
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}
.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod=’auto expand’);
zoom: 1;
}
.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover {
text-decoration: none;
}
</style>
</div>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="//www.blogger.com/rearrange?blogID=8193278726666811965&amp;widgetType=HTML&amp;widgetId=HTML15&amp;action=editWidget&amp;sectionId=sidebar" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML15&quot;));" target="configHTML15" title="Edit">
<img alt="" height="18" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18" />
</a>
</span>
</span>
<div class="clear">
</div>[/css]
Trong đó các bạn cần lưu ý đoạn mã sau
[css]<iframe width="336" height="169" src="http://www.youtube.com/embed/gEBJeqvJReg" frameborder="0" allowfullscreen></iframe>[/css]
  • width=”336″ là chiều rộng của Video
  • height=”169″ là chiệu cao của Video
  • http://www.youtube.com/embed/gEBJeqvJReg : Link Video youtube dưới dạng mã nhúng
Các bạn chỉnh sửa chiều rộng vào chiều cao của Video sao cho cân đối vào phù hợp với độ rộng của Sidebar

Cách lấy link video Youtube dưới dạng mã nhúng

Để lấy link video Youtube dưới dạng mã nhúng bạn làm như sau
Trong trang xem video, kéo xuống phía dưới và nhấn vào tab chia sẻ
Cách lấy link video Youtube dưới dạng mã nhúng
Cách lấy link video Youtube dưới dạng mã nhúng
 Đường link gạch đỏ chính là đường link bạn cần
Trên đây là một thủ thuật blogger đơn giản, giúp bạn dễ dàng chèn video Youtube vào sidebar của Blogger để quảng cáo, giới thiệu về Blog cũng như dịch vụ của Blog. Chúc các bạn thành côn
g