Iris Tips
Iris TipsIntroducing Blogger Shortcode Plugin
Blogger Shortcode được phát triển bởi STCnetwork, plugin sẽ cho phép bạn thêm, chỉnh sửa các yếu tố web một cách nhanh chóng mà không cần sử dụng các cú pháp coding dài dòng, phức tạp. Bây giờ bạn có thể chèn video, âm thanh, hình ảnh, tab, accordions,... vv chỉ với một dòng code trong bài viết của mình, trong các widgets, sidebars và bạn đoán thử xem còn nơi nào khác? Còn cả bên trong phần bình luận nữa. Thêm code chưa bao giờ dễ dàng đến thế. Hãy cùng bắt đầu nào!
Blogger Shortcode là gì?
Shortcode Plugin là một macrocode, tức là một dòng mã có chứa một tập hợp các hướng dẫn mà cho phép bạn dễ dàng khi ghi một đoạn code. Shortcodes có thể giúp bạn nhúng các tập tin hoặc tạo ra các đối tượng trong Blogspot với một dòng mã mà thông thường sẽ đòi hỏi rất nhiều đoạn mã phức tạp và dài dòng.
Với Blogger Shortcode bạn có thể dễ dàng chèn các đối tượng như video, audio, tập tin, trang trình chiếu và tất cả các yếu tố web quan trọng như accordions, tab, nút bấm với màu sắc đa dạng... vào trong Header, Sidebar, Footer, kể cả trong bài viết và bình luận. Plugin này không đòi hỏi nhiều kiến thức về HTML, CSS hay JavaScript, plugin này rất nhẹ và tối ưu được những đoạn code giúp trang bạn tải nhanh hơn lên đến 50%.
Nó khác gì so với Wordpress Shortcode?
Wordpress với một lượng mã nguồn khổng lồ, và là cảm hứng cho STCnetwork viết nên Shortcode này cho Blogger. Shortcode cho Blogger chỉ đơn giản là chuyển đổi các chức năng PHP vào chức năng jQuery.Không giống như Wordpress shortcodes chỉ có thể được chèn vào bên trong nội dung bài viết, Blogger shortcode cho phép bạn chèn nội dung ngay cả bên trong các widget và bình luận. WP shortcode API là nền tảng chỉ dành riêng cho Wordpress, nhưng các plugin trong Blogger shortcode không chỉ giới hạn trong Blogger mà nó còn chắc chắn có thể làm việc trên bất kỳ trang web nào dù tĩnh hay động.
Các shortcodes này bổ sung tính năng cho nhau mà không gây xung đột. Bạn có thể chèn shortcodes này bên trong một shortcodes khác để có thể có được trải nghiệm tốt nhất.
Shortcodes như accordion và tabs có thể được thêm nhiều lần trên một trang duy nhất mà không ảnh hưởng lẫn nhau. Plugin này sẽ tối ưu hóa và làm giảm thời gian tải trang rất tốt.
Danh sách Shortcode được hỗ trợ
| Shortcode | Diễn giải |
|---|---|
| [accordion] | Accordion là một danh sách xếp chồng lên nhau theo chiều dọc của menu, trong đó mỗi hàng có thể được "mở rộng" hoặc "dãn ra" và hiển thị những nội dung liên quan đến hạng mục đó. Các menu có thể được bật và tắt một cách dễ dàng. |
| [tab] | Widget Tab tạo menu hiển thị trong một cửa sổ duy nhất, sử dụng các tab như một widget điều hướng. |
| [code] | Nhúng code theo cú pháp Highlighter mà vẫn bảo toàn các định dạng ban đầu của code |
| [quote] | Khung nền quote đẹp |
| [button] | CSS3 Buttons nhiều màu sắc |
| [icon] | Chèn icon FontAwesome với các tùy chọn tùy chỉnh hỗ trợ |
| [soundcloud] | Nhúng một bài nhạc hoặc playlist vào blog |
| [dailymotion] | Nhúng Video trên Dailymotion |
| [youtube] | Nhúng Video trên YouTube |
| [divider] | Chèn một Dấu phân tách ngang để phân chia một phần, cũng có thể dùng làm nơi chứa nút nút Back To Top |
| [num] | Chèn một số đính kèm bên trong một nền tròn |
| [warning] | Chèn khung thông báo dạng cảnh báo |
| [success] | Chèn khung thông báo dạng thành công |
| [alert] | Chèn khung thông báo dạng cảnh báo |
| [info] | Chèn khung thông báo dạng thông tin |
| [update] | Chèn khung thông báo dạng cập nhật mới |
| [facebook] | Nhúng Plugin Facebook Page |
Cách thêm Shortcode vào Blogger
1 Vào Mẫu >> Chỉnh sửa HTML, thêm đoạn code sau vào trước thẻ </head> <!-- Blogger Shortcode Plugin Dynamic JS File iris-tips.blogspot.com -->
<script src='https://sites.google.com/site/iristipsblogger/file/shortcodes.js' type='text/javascript'></script> 2 Tiếp theo tìm đến thẻ <head> thêm đoạn CSS bên dưới vào sau thẻ đó
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> 3 Và cuối cùng là lưu template của bạn lại.
Cú pháp hiển thị
Để hiển thị các Shortcode bạn cần đặt chúng vào bên trong dấu ngoặc vuông [ ]. Ví dụ đối với Shortcode dailymotion [dailymotion src="x2lhjki"][/dailymotion] Hoặc
[dailymotion src="x2lhjki" /] Trong đó x2lhjki là ID của video trên Dailymotion
Một số lỗi thường gặp khi sử dụng Shortcode
1 Chỉ ghi các kí tự thường, không được ghi hoa khi dùng shortcode.2 Không thêm khoảng trống khi ghi shortcode.
3 Các giá trị thuộc tính sử dụng dấu nháy đơn ' hoặc đôi "
4 Khi thêm nhiều hơn 1 thuộc tính phải cách nhau bằng dấu cách.
5 Không sử dụng [ ] trong thuộc tính. Vd: color="[#000]"
Hướng dẫn sử dụng từng Shortcode cụ thể
Đối với một số Shortcode như Accordion, Tab... ngoài các bước trên cần thêm CSS vào template của bạn.Các bạn hãy đón xem tại những bài viết tiếp theo của Iris Tips nhé!
Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!
Created by Iris Tips
Mẹo nhỏ khi bình luận