Dịch vụ thiết kế website giá rẻ

Tùy chỉnh đăng video youtube lên blogger hình ảnh chất lượng HD

Lần trước mình đã giới thiệu một cách đăng video youtube lên blogspot có ảnh thumbnail tự động nhưng cách đó có nhược điểm ảnh nhỏ và sẽ bị mờ . Hôm nay, chúng ta thảo luận về "Làm thế nào để tùy chỉnh đăng video youtube lên blogger không bị mờ ảnh thumbnail'.Trong bài này tôi sử dụng tùy chỉnh thumbnail cho youtube nhúng video và nếu bạn nhấp vào hình thu nhỏ sau đó hiển thị các video và xem video điều này giúp đăng lên ảnh tự động và nét.
Tùy chỉnh đăng video youtube lên blogger hình ảnh chất lượng HD
Tùy chỉnh đăng video youtube lên blogger hình ảnh chất lượng HD
Điều này làm việc mã sử dụng jquery đơn giản:
$(document).ready(function(){
  $("#play").click(function(){
    $("#remove").hide();
    $("#add").show();
  });
});

và thiết kế youtube iframe sử dụng mã css với các lớp khác nhau:
.youtubeBorder
.youtube
.play


Nhấn vào play - Nhấn vào biểu tượng video sau đó hiển thị các video từ YouTube và xem video. [có thể sử dụng chức năng Autoplay sử dụng cho youtube video.]

Cách làm:
Đăng nhập Blogger =>Mẫu => Chỉnh sửa HTML
Bây giờ tìm kiếm các mã sau: </head> sao chép và dán mã dưới đây, trước </head> :
CSS Code: <style type='text/css'>
.youtubeBorder{background:none repeat scroll 0 0 #FFFFFF;border:1px solid #E0E0E0;border-radius:2px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);margin:10px 0 20px;padding:4px}
.youtubeBorder p.post-video{margin:0 !important}
.youtube{background-color:#000;max-width:100%;overflow:hidden;position:relative;cursor:hand;cursor:pointer;height:500px;width:100%}.youtube .thumb{bottom:0;display:block;left:0;margin:auto;max-width:100%;position:absolute;right:0;top:0;width:100%;height:auto;opacity:.8;filter:alpha(opacity=80)}
.youtube .play{filter:alpha(opacity=90);opacity:.9;height:77px;left:50%;margin-left:-38px;margin-top:-38px;position:absolute;top:50%;width:77px;background:url(&quot;http://4.bp.blogspot.com/-pKZ5beSqDZQ/VPyM_163ACI/AAAAAAAACRg/qUD29mLG1jw/s1600/icon-share123_vn.png&quot;) no-repeat}
.play:hover {filter:alpha(opacity=100);opacity:1;}
</style>
Sau khi thêm mã css và bây giờ tìm kiếm </body> tag.
Thêm mã dưới đây trước </body> tag.
HTML code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'>
</script>
<script>
$(document).ready(function(){
  $(&quot;#play&quot;).click(function(){
    $(&quot;#remove&quot;).hide();
    $(&quot;#add&quot;).show();
  });
});
</script>
Bây giờ chỉ việc copy đoạn code dưới dây và chèn vào bài đăng mới trong Blogspot ở chế độ HTML :

Tạo một bài viết mới và ở đâu bạn muốn đặt mã này, bạn chỉ cần copy đoạn mã dán bên dưới trong Phần Blogger Post HTML. <div  class='youtube' data-id='R-VXZxhHvxg'><iframe id="add" style="display:none" width="100%" height="500" src="//www.youtube.com/embed/R-VXZxhHvxg?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe><div id="remove"><img class='thumb' src="http://i.ytimg.com/vi/R-VXZxhHvxg/hqdefault.jpg"/><div class='play' id="play"></div></div></div> Tuỳ chỉnh mã nhúng này:

Cho ví dụ. Link youtube của bạn là - https://www.youtube.com/watch?v= RVEnhNzBlgM và sau https://www.youtube.com/watch?v= mã nền màu đỏ là link ID youtube.

Mã này thay thế tất cả các mã nền màu đỏ, như trên youtube nhúng mã video.
Nếu bạn muốn tự động phát video Youtube của bạn sau đó thêm? Autoplay = 1
ví dụ. https://www.youtube.com/watch?v= RVEnhNzBlgM? autoplay = 1
Sử dụng thu nhỏ tùy chỉnh của bạn cho youtube video của bạn
<img class='thumb' src=",,,,.jpg"/>
Tôi hy vọng bạn thích bài viết này chúc bạn thành công.

Blog giới thiệu dịch vụ chuyển văn phòng

Demo Blog giới thiệu dịch vụ chuyển văn phòng

- Download : Premium

- Mã nguồn : Template Blogspot

- Thiết kế    : Nguyễn Huy Tập

- Đánh giá   : 

- Giá File     : Liên hệ

Sửa lỗi ảnh Thumbail bị mờ trong blogspot

Đôi khi các bạn thêm một tiện ích, một thủ thuật blogspot trên mạng như bài viết liên quan hoặc tiện ích bài viết mới theo nhãn thấy hiện tượng ảnh mờ và bị co về kích thước 72x72px làm cho độc giả khó nhìn và xấu blog của bạn.
Demo lỗi ảnh Thumbail bị mờ trong blogspot
Demo lỗi ảnh Thumbail bị mờ trong blogspot
Để khắc phục vấn đề này nhằm làm tăng chất lượng hình ảnh Thumbail , áp dụng cho cả những tiện ích như Silder bloglist, Readmore không dùng Javascripts, Popularposst,.... thì làm như sau:
Đăng nhập blog => Mẫu => Chỉnh sửa HTML => chèn đoạn code sau trong thẻ body dạng như sau:  <body> chèn code </body> Mã code: <script type='text/javascript'>                
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("BlogList1",120);                
</script>
Trong đó:
BlogList1 là Id của tiện ích bạn muốn thay đổi kích thước ảnh thumbnail. bạn có thể thay đổi bằng Id tiện ích khác ví dụ bài viết liên quan có id là #baivietlienquan thì sẽ thay là baivietlienquan. Bài đăng phổ biến là Popularpost1.
120 là kích thước của ảnh thumbnail. Ở đây chiều rộng và chiều cao bằng nhau và cùng bằng 120x120 px.
Sưu tầm từ Blog Namkna - Chúc các bạn thành công.

Share tempalte blogger Fajri FirstGrid Responsive chuẩn seo

demo tempalte blogger Fajri FirstGrid Responsive chuẩn seo

- Download : Free

- Mã nguồn : Template Blogspot

- Thiết kế    : Fajri Andaviar

- Đánh giá   : 

Hướng dẫn xóa các ký tự lạ trên link bài viết blogspot

Có nhiều bạn hỏi tại sao link blog của mình xuất hiện những ký tự lạ #xxxx ví dụ như #VO-m6ashjshW3n và các xóa những ký tự lạ trên link blog đó đi như thế nào.

Demo
demo các ký tự lạ trên link bài viết blogspotĐối với một số template blog được share trên mạng do tích hợp sẵn tiện ích chia sẻ mạng xã hội Addthis  (Addthis.com) và trong đó có cả 1 đoạn javacript cho phép Add thiss theo dõi mức độ thường xuyên truy cập sao chép URL của bạn từ thanh địa chỉ của trình duyệt, bạn chỉ việc xóa đoạn Javacript này đi là được.
Bạn tìm trong Template của bạn đoạn code Addthis dạng tương tự như sau:
<script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:true};</script>
Nếu không muốn dùng đoạn tiện ích bên thứ 3 này nữa thì bạn có thể xóa luôn đi cũng được.
Chúc bạn thành công - Sưu tầm Internet
 
HOTLINE: 0988.227.905
Mr Tập
0988 227 905

Hỗ trợ trực tuyến

Ms Phương
0988.227.905

Hỗ trợ trực tuyến

Ms Thủy
0988.227.905

Hỗ trợ trực tuyến

Mr Giang
0988.227.905

Hỗ trợ trực tuyến