Làm thế nào để chèn jsfiddle vào blogger?

jsFiddle là một công cụ web(web tool) hỗ trợ bạn viết, kiểm tra và chia sẻ JavaScript, CSS, HTML trực tuyến một cách nhanh trong. Nếu bạn là một blogger viết bài về các lãnh vực này thì công cụ web là không thể bỏ qua, vì nó giúp bạn chia sẻ và thể hiện nội dung code cũng như kết quả một cách nhanh chóng.

Sau khi bạn viết code vào các mục tương ứng cho từng mã code bạn chọn save, rồi chọn tiếp run để kiểm tra kết quả, và xem tiếp hướng dẫn bên dưới để hiểu và biết cách chèn vào blogger.


Cầu trúc chèn jsfiddle.

jsFiddle cho phép chèn kết quả và mã code trên tất cả các trang khác. Dưới đây là câu trúc URL để chèn jsFiddle vào blogger.

URL: http://{url_of_the_fiddle}/embedded/[{tabs}/[{style}]]/

url_of_the_fiddle
    Mặc định là "http://jsfiddle.net"

tabs
    jsfiddle cung cấp 4 tab hiển thị tương ứng javascript, html, css và result.

    js,html,css
        tab hiển thị mã nguồn.
    result
        tab hiển thị kết quả của mã nguồn.
    resource
        danh sách các tài nguyên ngoài, nó sẽ không hiển thị nếu không có tài nguyên.

skin
    Kiểu mẫu hiển thị bạn muốn sử dụng (default: light).


Getting the code

Các chức năng chia sẻ cơ bạn được nằm trong mục Share, bạn chọn Share và copy mã nhúng trong mục Embed on your page và paste nó vào trang bài viết trên blogger của mình.

Chèn jsfiddle vào blogger

Ví dụ tôi có một mã jsFiddle ở liên kết http://jsfiddle.net/bnson/se72y3g9/4/ , trong liên kết này jsFiddle sẽ cung cấp một đoạn mã mặc định như bên dưới, bạn chỉ việc copy và thêm nó vào bài viết của mình.

<iframe width="100%" height="300"
src="http://jsfiddle.net/bnson/se72y3g9/4/embedded/"
allowfullscreen="allowfullscreen" frameborder="0">
</iframe>

Sau khi thêm nó vào bài viết bạn sẽ thấy 4 tabs fiddle: js, html, css and result sẽ được hiển thị như bên dưới.



Làm thể nào để thay đổi tab hiển thị của jsfiddle.

trong ví dụ bên dưới tôi sẽ hiển jsfiddle với tab result là đầu tiên tiếp theo tương ứng là ,js,html,css/
URL: src="http://jsfiddle.net/bnson/se72y3g9/4/embedded/result,js,html,css/"



Nếu có vài tab bạn không muốn hiển thị bạn chỉ việc remove nó ra khỏi link src như ví dụ bên dưới tôi remove tag CSS và Javascript.
src="http://jsfiddle.net/bnson/se72y3g9/4/embedded/result,html/"



How to changing skin embedding the jsfiddle

jsFiddle cung cấp 2 skin cho bạn lựa chọn, nếu bạn không thích skin light mặc định thì chỉ việc thêm vào thông số /presentation/ như bên dưới là được.
src="http://jsfiddle.net/bnson/se72y3g9/4/embedded/html,css,result/presentation/"


Nếu bạn có bất kỳ thắc mắc nào, đừng ngần ngại hãy phản hồi tại đây.