Tạo bài viết

Thêm ảnh
Comment Thủ Thuật Blogspot Chèn ảnh, video từ Youtube vào phần nhận xét mặc định của Blogspot
  • Lưu bài viết

    Lưu bài viết để xem sau

  • Chia sẻ bài viết

    Chia sẻ bài viết lên Facebook

  • Đăng bình luận

    Bình luận về bài viết này

  • Báo lỗi bài viết

    Báo lỗi hoặc góp ý bài viết

    • Chèn ảnh, video từ Youtube vào phần nhận xét mặc định của Blogspot

    Quản trị viên
    Nếu bạn có theo dõi Blog của mình từ rất lâu thì lúc đó mình có cho phép đăng nhận xét bằng hình ảnh, video, mặt cười,... Bằng cách sử dụng javacsript hàm replace, thay link ảnh bằng đoạn mã HTML để hiển thị ra nội dung mình mong muốn.

    Nếu như bình luận bằng chữ đơn thuần không đủ dẫn chứng và thuyết phục, vì vậy biện pháp tốt nhất là thêm cả hình ảnh minh họa kèm theo sẽ phần nào thuyết phục được người khác.
    Tính năng này chỉ cho phép upload hình ảnh từ bên thứ 3 lên thôi chứ không upload ảnh trực tiếp từ máy tính lên như Facebook hay Zalo được, vì Blogspot không cho phép làm điều đó. Vì vậy khi sử dụng, bạn cần phải upload hình ảnh lên 1 host nào đó trước (khuyến khích dùng host Imgur), rồi copy link ảnh và chèn vào phần nhận xét thì ảnh mới hiện.
    LIVE DEMO

    Cách thực hiện

    Chèn tất cả javascript bên dưới vào trước thẻ </body> trong template.
    <b:if cond='data:view.isPost'>
    <!-- chỉ áp dụng cho trang bài viết -->
    <script type='text/javascript'>
    //<![CDATA[
    function replaceText(){if(!document.getElementById){return;}
    bodyText = document.getElementById("comments");
    theText = bodyText.innerHTML;
    theText = theText.replace(/\[img\].*?'.*?\[\/img\]/gi, "");
    theText = theText.replace(/\[youtube\].*?'.*?\[\/youtube\]/gi, "");
    theText = theText.replace(/\[img\]/gi, "<div style='clear:both'></div><img class='bsw-imgs' src='");
    theText = theText.replace(/\[\/img\]/gi, "'/><div style='clear:both'></div>");
    theText = theText.replace(/\[youtube\]http:\/\/youtu.be/gi, "<iframe width='100%' height='400' src='http://www.youtube.com/embed");
    theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed/");
    theText = theText.replace(/&amp;feature=/gi, "?rel=0' '");
    theText = theText.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe>");
    bodyText.innerHTML = theText;
    }replaceText();
    //]]>
    </script>
    <!-- bacsiwindows.com -->
    </b:if>
    và lưu lại.

    Cách sử dụng

    Để chèn hình ảnh, khi đăng nhận xét bạn nhập như sau:
    [img]https://i.imgur.com/iWCv1nv.png[/img]
    Để chèn video từ Youtube, bạn nhập như sau:
    [youtube]https://www.youtube.com/watch?v=32sYGCOYJUM[/youtube]

    P/s: Blog của mình không sử dụng chức năng này, bạn có thể test thoải mái trên blog demo này.

    Nếu bạn có theo dõi Blog của mình từ rất lâu thì lúc đó mình có cho phép đăng nhận xét bằng hình ảnh, video, mặt cười,... Bằng cách sử dụng javacsript hàm replace, thay link ảnh bằng đoạn mã HTML để hiển thị ra nội dung mình mong muốn.

    Nếu như bình luận bằng chữ đơn thuần không đủ dẫn chứng và thuyết phục, vì vậy biện pháp tốt nhất là thêm cả hình ảnh minh họa kèm theo sẽ phần nào thuyết phục được người khác.
    Tính năng này chỉ cho phép upload hình ảnh từ bên thứ 3 lên thôi chứ không upload ảnh trực tiếp từ máy tính lên như Facebook hay Zalo được, vì Blogspot không cho phép làm điều đó. Vì vậy khi sử dụng, bạn cần phải upload hình ảnh lên 1 host nào đó trước (khuyến khích dùng host Imgur), rồi copy link ảnh và chèn vào phần nhận xét thì ảnh mới hiện.

    LIVE DEMO

    Cách thực hiện

    Chèn tất cả javascript bên dưới vào trước thẻ </body> trong template.
    <b:if cond='data:view.isPost'>
    <!-- chỉ áp dụng cho trang bài viết -->
    <script type='text/javascript'>
    //<![CDATA[
    function replaceText(){if(!document.getElementById){return;}
    bodyText = document.getElementById("comments");
    theText = bodyText.innerHTML;
    theText = theText.replace(/\[img\].*?'.*?\[\/img\]/gi, "");
    theText = theText.replace(/\[youtube\].*?'.*?\[\/youtube\]/gi, "");
    theText = theText.replace(/\[img\]/gi, "<div style='clear:both'></div><img class='bsw-imgs' src='");
    theText = theText.replace(/\[\/img\]/gi, "'/><div style='clear:both'></div>");
    theText = theText.replace(/\[youtube\]http:\/\/youtu.be/gi, "<iframe width='100%' height='400' src='http://www.youtube.com/embed");
    theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed/");
    theText = theText.replace(/&amp;feature=/gi, "?rel=0' '");
    theText = theText.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe>");
    bodyText.innerHTML = theText;
    }replaceText();
    //]]>
    </script>
    <!-- bacsiwindows.com -->
    </b:if>
    và lưu lại.

    Cách sử dụng

    Để chèn hình ảnh, khi đăng nhận xét bạn nhập như sau:
    [img]https://i.imgur.com/iWCv1nv.png[/img]
    Để chèn video từ Youtube, bạn nhập như sau:
    [youtube]https://www.youtube.com/watch?v=32sYGCOYJUM[/youtube]

    P/s: Blog của mình không sử dụng chức năng này, bạn có thể test thoải mái trên blog demo này.

    Bình luận
    Chia sẻ

    Huỳnh Phụng Blogger

    Tôi thích viết Blog để chia sẻ trãi nghiệm của chính mình. Tôi làm việc về Digital Marketing (SEO, Google Adwords, Facebook) và hy vọng sẽ có cơ hội hợp tác với bạn trong tương lai. Cùng chia sẻ kinh nghiệm mình có được