Giới thiệu Blogger Shortcode Plugin cần được quan tâm (sử dụng nhiều)

Thật bất ngờ! IT Việt 360 có đọc được 1 số thủ thuật dành cho Blogspot rất hay và tiện ích cho người sử dụng và điều đầu tiên để làm được những thủ thuật đó (dần dần itviet360 sẽ giới thiệu) đó là bạn phải hiểu được Blogger Shortcode Plugin, cái mà chúng tôi sẽ giới thiệu ngay dưới đây. Đây là một tiện ích được STCnetwork giới thiệu, lợi ích của nó là cho phép bạn thêm các yếu tố Web với rất ít bước làm mà không sử dụng bất kỳ bước nào dài hay đoạn code xấu xí. Bạn có thể chèn video, âm thanh, hình ảnh, các tab, accordions, vv chỉ với một dòng mã trong bài viết của mình, widgets, sidebars và các nơi khác? còn bên trong Blog của bạn Comment! Chúng được nhúng trong Blogger với một cách hiểu chưa bao giờ dễ dàng đến thế.
Blogger Shortcode Plugin

Shortcode Blogger là gì?
Blogger shortcode là một dạng 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 làm những điều tiện lợi mà không mất nhiều tìm hiểu nào cả. 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 blog BlogSpot với một dòng mã mà thông thường sẽ đòi hỏi rất nhiều phức tạp, code dài và xấu.
Bây giờ bạn có thể dễ dàng chèn các đối tượng như Video, Audio, tập tin, trình chiếu và tất cả các yếu tố web quan trọng như accordions, tab, nút đầy màu sắc, hộp đồ bên trong Header, Sidebar, Footer, bài viết, Pages, tựa đề và các ý kiến đáng kinh ngạc ngay cả bên trong! Nó không đòi hỏi kiến thức về HTML, CSS hay JavaScript. Các plugin là rất nhẹ và hỗ trợ "đa nhúng" của nó sẽ làm giảm thời gian tải trang của bạn lên 50%.

Danh sách Shortcode hỗ trợ
Sự phát triển cho đến nay khoảng 10 shortcodes và hy vọng trong thời gian tới có khoảng 50 shortcodes nữa cho những phiên bản cập nhật. Shortcodes sẽ được tạo ra dựa trên tầm quan trọng và khả năng sử dụng của họ. Mỗi shortcode với một hướng dẫn riêng.

Một shortcode bản thân nó không phải là một mã nhưng một TEXT được chế biến dưới dạng HTML.  :)

Sau đây là các shortcodes phát triển cho đến nay.
Shortcode Mô tả
[accordion] Accordion là danh sách xếp chồng lên nhau theo chiều dọc của các mặt hàng trong đó mỗi hàng có thể được "mở rộng" hoặc "kéo dài" tiết lộ những nội dung liên quan đến hạng mục đó. Mục có thể được bật và tắt một cách dễ dàng. Một ví dụ là các widget accordion
[tab] Widget Tab cho phép nhiều tài liệu hoặc các tấm được chứa trong một cửa sổ duy nhất, sử dụng các tab như một widget điều hướng để chuyển đổi giữa các bộ tài liệu. Một ví dụ là nhiều Tab Widget
[code] Nhúng Highlighter cú pháp mà bảo tồn các định dạng ban đầu của mã nguồn
[quote] Chèn một Fancy Blockquote
[button] Chèn Buttons CSS3 đầy màu sắc
[icon] Chèn biểu tượng FontAwesome bất cứ nơi nào với các tùy chọn tùy chỉnh hỗ trợ
[soundcloud] Nhúng theo dõi SoundCloud
[dailymotion] Chèn Dailymotion Video
[youtube] Chèn YouTube Video
[divider] Chèn một Separator ngang để phân chia một phần, cũng có chứa một nút Back To Top
[num] Chèn một con số kèm theo bên trong một nền tròn
[warning] Chèn một hộp với thông điệp cảnh báo
[success] Chèn một hộp với tin nhắn thành công
[alert] Chèn một hộp với thông điệp cảnh báo
[info] Chèn một hộp với một số thông tin
[update] Chèn một hộp với Cập nhật thông báo trạng thái
[facebook] Nhúng Facebook Page Plugin
[image] Nhúng hình ảnh bất cứ nơi nào bạn muốn trong độ phân giải cắt rõ ràng!!
[tooltip] Chèn một Fancy CSS3 Tooltip trên hoặc dưới siêu liên kết để hiển thị thông tin thêm

Hướng dẫn cài đặt: Blogger Shortcode Plugin
Thực hiện theo các bước sau để cài đặt các Plugin shortcode trên blog blogger của bạn.

1. Về bảng điều khiển Blogger -> (Mẫu) Template -> Chỉnh sửa HTML (Edit HTML)

2. Tìm kiếm đến </ body>

3. Dán các tập tin JS tự động cập nhật sau ngay phía trên nó
<!-- Blogger Shortcode Plugin. HD IT Viet 360 -->
<script src='https://itviet360-com.googlecode.com/svn/trunk/shortcodes.js' type='text/javascript'></script>

4. Tiếp theo tìm đến <head>
5. Dán code CSS dưới đây ngay dưới nó
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Lưu ý rằng trong đoạn mã trên tôi đã bao gồm các phiên bản mới nhất của jQuery và thư viện FontAwesome. Tôi đề nghị bạn sử dụng những phiên bản thay vì bất kỳ phiên bản cũ bạn có thể đã được sử dụng.
 
6. Lưu mẫu của bạn và bạn đang làm tất cả!

Chức năng mới được tự động chèn vào bên trong tập tin shortcode JS và bạn cần phải cài đặt nó chỉ một lần. Tôi sẽ tiếp tục cập nhật trang này để giới thiệu bất kỳ bản cập nhật được thực hiện cho các kịch bản và shortcodes mới được tạo ra sẽ được nối thêm vào Danh sách Bảng trên trang này.

Cú pháp của Shortcode
Shortcodes có một tên và các thuộc tính. Các thuộc tính này là tùy chọn giúp bạn cấu hình một đối tượng. Shortcodes được tượng trưng bởi các dấu ngoặc vuông. Các dấu ngoặc đóng và mở giống như HTML, nhưng với một định dạng đơn giản hơn nhiều như hình dưới đây:

Giả sử bạn cần nhúng một đoạn video Dailymotion bên trong bài đăng trên blog của bạn, sidebar hoặc blog ý kiến sau đó bạn có thể làm điều đó trong hai cách.
[youtube src="xqYTfr0ZEHg"][/youtube]
Hoặc đơn giản hơn là
[youtube src="xqYTfr0ZEHg" /]
Bạn có thể thấy kết quả ở ví dụ trên Ở ĐÂY
Bây giờ nếu bạn muốn thay đổi màu sắc của các nút chơi, ẩn thông tin máy nghe nhạc và chỉnh sửa kích thước máy nghe nhạc sau đó bạn có thể chèn các thuộc tính như hình dưới đây
[youtube src="xqYTfr0ZEHg" width="100%" background="0080ff" height="100" info="0"][/youtube]
hoặc đơn giản hơn
[youtube src="xqYTfr0ZEHg" width="100%" background="0080ff" height="100" info="0" /]

Nhìn chung Blogger Shortcode Plugin sẽ là rất nhiều tiện ích mà sắp tới ITViet360 sẽ giới thiệu tới bạn đọc. Chuyên mục: , , ,

2 comments:

  1. làm sao để có hiện cái bảng nhắc nhỡ like fanpage như trang này vậy nhỉ. ad chỉ mình với... mình mới chơi blog... đây là blog mình: http://chiase72h.blogspot.com/ mình có đặt qc ở cuối nhưng sao nó hiện 1 bên chứ ko hiện ở giữa, mình muốn đặt 2 cái thì fai làm sao hả b

    ReplyDelete