5 công cụ hữu ích cho các bài viết của blogger

Với một blogger, việc viết bài mỗi ngày là một trong những công việc quan trọng nhất cho đứa con tinh thần của mình, với mỗi bài viết được đầu tư và chỉnh chu, việc kéo traffic về với blog không còn là việc khó, Và ở bài viết hôm nay mình dự định sẽ chia sẻ cho các bạn top 5 công cụ hỗ trợ cho blogger mỗi khi viết bài.

Với những công cụ này, không những hỗ trợ bạn viết bài tốt hơn mà nó còn giúp bạn tăng traffic về cho blog của mình.

 1. Keyword Planner

Bạn biết cụm từ "từ khóa" chứ? đó là nội dung truy vấn của mọi người khi lên google và gõ "từ khóa" đó để hỏi google về những vấn đề họ cần tìm tới. Keyword Planner là một công cụ hỗ trợ blogger trong việc tìm kiếm những từ khóa tiềm năng với giá thầu cao mà độ cạnh tranh thấp và đương nhiên nó được cung cấp bởi Google. việc chọn lọc những từ khóa rất quan trọng trong một content đó.

Keyword Planner - công cụ phân tích từ khóa Thông thường, mỗi khi viết blog tôi thường tìm những nội dung và những truy vấn mà nhiều người có thể tìm kiếm trên mạng. Google Keyword Planner là một trong những công cụ mà mỗi blogger đều sử dụng hàng ngày để tìm kiếm traffic, lưu lượng và những từ khóa có mức độ cạnh tranh về cho blog của mình.

2. Grammarly - công cụ kiểm tra lỗi chính tả 


Grammarly - công cụ kiểm tra lỗi chính tả Grammarly là một công cụ hữu ích cho các blogger để kiểm tra lỗi trong bài viết của mình. Công cụ này sẽ giúp bạn kiểm tra lỗi chính tả, ngữ pháp và đọc lại toàn bộ bài viết của bạn.
Bạn có thể thêm tiện ích này vào trình duyệt internet của bạn để kiểm tra lỗi cho bài viết của bạn.
TẠI ĐÂY 

3. Canva Canva - công cụ tạo ảnh online 


Bạn không giỏi về Photoshop để tạo lên những tấm hình đẹp cho blog của mình, yên tâm vì cộng đồng designer sẽ hỗ trợ các bạn rất nhiều phần mềm về khoản này. Canva là một trong những công cụ tạo ảnh tuyệt vời như thế. Canva có đủ tất cả các bố cục, hình ảnh, khung hình, định dạng văn bản, ảnh nền và một số sticker phụ thêm... sẽ giúp bạn tạo ra những bức ảnh sống động nhất và mang đậm chất cá nhân cho blog của bạn. Đơn giản là bạn chỉ cần tìm kiếm chủ đề ảnh cho bài viết của mình bằng cách nhập truy vấn của bạn vào ô tìm kiếm, sau đó kéo thả ảnh mà bạn tìm kiếm vào phần background cho trước nằm bên phải, hoặc bạn có thể thêm một số yếu tố như văn bản, hay sticker cho bức ảnh của bạn trở nên sinh động hơn. Canva cũng hỗ trợ bạn bằng cách cho phép bạn upload lên những bức ảnh trên máy của bạn để thêm vào bức ảnh đang thiết kế của bạn. Để có thể sử dụng được tính năng này Canva yêu cầu bạn phải đăng nhập vào mới sử dụng được, tuy nhiên việc đăng nhập không mấy khó khăn vì Canva hỗ trợ bạn đăng nhập bằng tài khoản Google+ và Facebook, và chỉ với một vài thao tác là bạn đã có ngay một bức ảnh sinh động cho bài viết của mình.

4. Google Analytics 

Công cụ phân tích Google Analytics Sau viết xong một bài viết thì không phải xem như là bạn đã hoàn thành xong nhiệm vụ và cứ để đó là sẽ có người vào xem thì đó là một suy nghĩ hoàn toàn sai lầm nhé. Bạn cần phải có một chương trình phân tích để giúp bạn theo dõi nguồn traffic đổ về website của bạn là đến từ đâu, thời gian ở lại trang của bạn trung bình là bao lâu, vị trí của khách truy cập và nhiều thống kê khác nữa mà bạn có thể biết được từ công cụ phân tích Google Analytics này.

5. Google Webmasters 

Google Webmasters giống như một người đưa thư tốc hành, gửi các bài viết mới của bạn tới đích Google. Với các bài viết được google index càng nhanh đồng nghĩa với bài viết của bạn sẽ nhanh chóng được tìm thấy trên internet hơn. Ngoài ra, Google Webmasters còn cấp nhiều tính năng như hiệu suất tìm kiếm, nguồn lưu lượng tìm kiếm, từ khóa nội dung, lỗi tìm nạp và nhiều tính năng khác. Trên đây là 5 công cụ hỗ trợ cho blogger mà mình hay sử dụng mỗi khi viết bài. Bạn thường sử dụng công cụ nào trong số những công cụ hỗ trợ viết bài cho blogger trên. Nếu như bạn có công cụ nào hay khác ngoài những công cụ trên bạn cũng có thể chia sẻ cho mọi người cùng sử dụng bằng cách để lại bình luận ở phần bình luận phía dưới bài viết nhé. Chúc các bạn thành công.

Tăng traffic cho blog với tool SumoMe

Tăng traffic cho blog luôn luôn là “niềm mong mỏi” những người làm blogger. Ngoài công việc SEO bạn vẫn thường dùng, các công việc làm thế nào để kích thích các người xem blog của bạn cùng chia sẻ nội dung bài viết trên mạng xã hội càng nhiều càng tốt là qan trọng không kém.


Nông thức dưới đây đã được thực nghiệm và đưa ra sử dụng khá hiệu quả, chia sẻ với các bạn xem các bạn thấy thế nào!?








Trong bài viết này sẽ hướng dẫn bạn cách cài đặt và sử dụng công cụ SumoMe, một công cụ tăng traffic hoàn toàn miễn phí, với 12 chức năng cực hữu ích chắc chắn sẽ giúp bạn làm được nhiều việc mong muốn


SumoMe cho phép bạn đặt các biểu tường chia sẻ lên mạng xã hội vào blog, tạo popup đăng ký email, tích hợp Google Analytics, gắn biểu tượng chia sẻ hình ảnh lên mạng xã hội Facbook, Pinterest…




Một số tính năng tuyệt vời khác của SumoMe
Tạo một trang Welcom Mat để thu thập email mạnh mẽ nhất
Công cụ Heat Maps cho phép bạn theo dõi được hành vi người dùng trên website, cụ thể nó cho biết người dùng đã từng click vào vị trí nào trên trang bạn đang bật Heat Maps
Thống kê các trang, bài viết được chia sẻ nhiều nhất trên mạng xã hội
.....

Làm thế nào để bắt đầu sử dụng SumoMe?


Có 2 cách:


Cách 1: Để bắt đầu sử dụng bạn chỉ cần đăng ký một tài khoản tại trang SumoMe. Sau đó làm theo hướng dẫn rất đơn giản.


Ở bước thứ 2 sau đăng ký bạn có thể copy đoạn code như hình dưới và dán vào thẻ <head> hoặc đơn giản hơn click luôn vào biểu tượng WordPress để cài đặt plugin SumoMe.




Cách 2: Tải về plugin SumoMe và cài đặt nó vào WordPress để bắt đầu sử dụng.


Sau khi đã kích hoạt plugin, bạn sẽ thấy bên góc phải xuất hiện biểu tượng vương miện của SumoMe, click vào đó để đăng ký tài khoản như hình dưới.






Làm theo các bước hướng dẫn. Sau khi đăng nhập thành công bạn sẽ thấy một cửa sổ hiện ra, chỉ cần nhấp vào Sumo Store.









Kéo xuống mục Sharing và chọn biểu tượng Share




Sau khi cài đặt bạn chọn tag Layout. Lựa chọn vị trí hiển thị các biểu tượng chia sẻ lên mạng xã hội.


Kinh nghiệm: Đối với giao diện máy tính bạn nên chọn hiển thị ở bên tay trái màn hình (điều này làm cho các biểu tượng di chuyển theo khi người đọc cuộn trang xuống phí dưới), đối với giao diện thiết bị di động nên để cuối trang như hình bên dưới Ngọc thiết lập.

Công cụ nén và giải nén CSS trực tuyến

CSS là một ngôn ngữ khá cơ bản và thiết yếu trong thiết kế web. Tổ hợp CSS trong toàn bộ một trang web ảnh hưởng lớn đến tốc độ hạ tải trang web đó. Nếu CSS nặng thì sẽ gây tốn nhiều thời gian cho việc tải trang web và ngược lại. Chính vì vậy việc nén mã CSS sẽ giúp tăng tốc độ hạ tải trang web.

Thay vì phải viết nhiều dòng để định dạng các thuộc tính, bạn thử tận dụng tính năng tốc kí của CSS, tức là ta gộp các dòng liên quan lại thành một dòng duy nhất. 

sử dụng công cụ tại http://mini-web-tools.googlecode.com/svn/p/css-compressor-and-beautifier.html

Tool chuyển đổi HTML

Nhập text của bạn vào ô bên dưới và click "Mã hóa" để đổi mã ký tự.

VD: & → &amp;

Mã ký tự đã được chuyển, click "Giải mã" để chuyển lại dạng text ban đầu.

VD: &amp; → &

...


Chuyển đổi Trong sáng

Chuyển đổi và trở thành & amp;

Chuyển đổi 'là & # 039;

Chuyển đổi "trở thành & quot;

Chuyển đổi <trở thành & lt;

Chuyển đổi> thành & gt;

link chuyen doi http://mkr-site.blogspot.com/p/konverter-html.html

Giải pháp Setting số điều trên Blogspot Home Page

Thông thường các trang chủ hoặc số nhà atikel / bài viết mà không xuất hiện điều chỉnh số tiền cố định / mặc dù trong điều chỉnh, đã được thiết lập. Ví dụ, phần thiết lập được thiết lập số xuất hiện trên trang chủ (home) 10 nhưng điều đó chỉ xuất hiện 6 hoặc 3. Những vấn đề này thường xảy ra trong một blog có sử dụng auto readmore. Bởi vì hầu hết các template mà tôi tạo ra bằng cách sử dụng một auto readmore vì vậy tôi nghĩ rằng bài viết này cần để tôi thực hiện. Tại sao các mẫu có sử dụng auto readmore thường số lượng các bài báo xuất hiện ở hiên không thể được quy định. Từ bài báo, tôi đọc nó, vì blogspot đã thiết lập kích thước tối đa của mỗi trang (trong trường hợp này các trang index). Mặc dù chúng tôi sử dụng các readmore auto cả javascript và dữ liệu đoạn, blogger / blogspot giữ kể kích thước tương tự như bản gốc, ngoại trừ chúng tôi thêm giờ nghỉ nhảy (khấu trừ sẽ hiển thị readmore). Bởi vì một trong hai ô tô readmore / data-đoạn, không phải phương pháp được sử dụng blogspot trong việc giảm kích thước trang. Vì vậy, đối với những người bạn của những người sử dụng tự động readmore hoặc là JS / data-đoạn vẫn nên đưa ra một ngắt dòng do đó số lượng thích hợp các bài báo xuất hiện trong các thiết lập blog. Điều này cũng áp dụng nếu bài viết của bạn chỉ bao gồm các hình ảnh. Nên nhảy break được đặt sau khi bức ảnh đầu tiên. Đối với những người bạn của những người không biết nơi mà vị trí của các ví dụ nhảy-break nah sau vẻ.

Cũng ở dạng html ngắt dòng sẽ là như thế này: <! - More ->.

Các bài nổi bật với CSS và jQuery

Thiết kế hấp dẫn trên blog có thể làm cho người đọc cảm thấy thoải mái trong việc thưởng thức đọc bạn phục vụ. Nhiều blogger để thêm tính năng cho blog của mình. Có những tính năng thường được đặc trưng bài tính năng. 
Cũng thời gian này tôi sẽ chia sẻ bài nổi bật trong đó có một cái nhìn khác hơn bình thường. Điều này đặc trưng màn hình hiển thị của CSS pseudo thứ n-con để thiết lập chiều rộng của mỗi zoom. 
Các bài như tôi áp dụng các mẫu MyTimeLine. Khái niệm này như là một hình ảnh đặc trưng bài barikut:

Đối với những người bạn của những người quan tâm để cài đặt một blog bạn có thể làm theo các bước sau:

Hiển thị Thêm một tiện ích trên blog bài viết

Nếu blog của bạn đã không xuất hiện nút / ghi thêm các tiện ích trên Blog bài viết theo các bước sau để hiển thị nó:

1. Trên bảng điều khiển chọn Template và sau đó nhấp vào Chỉnh sửa HTML
2. Sau đó tìm các mã <b: section class = 'chính' id = 'chính' showaddelement = "no"> sau đó thay thế fox showaddelement là yes để nó trở nên như thế này <b: section class = 'chính' id = 'chính' showaddelement = ' yes '> 
   NB: Để tạo thuận lợi cho báo chí tìm kiếm Ctrl + F trên bàn phím của bạn và viết <b: section class =' chính 'id =' chính 'showaddelement =' no '>.
3. Nhấn Save

Thêm tiện ích HTML và script Các bài viết

1. Trên bảng điều khiển chọn Layout / Layout và sau đó nhấn vào Add a Gadget trên Blog Post Area
2. Sau đó di chuyển xuống để tìm các HTML / JavaScript và nhấp vào nút thêm góc hiện tại
3. Sau đó, Nhập đoạn mã sau:
   

   <style scoped = "" type = "text / css">
   #slides * {- MOZ-box-sizing: hộp biên giới; -webkit-box-sizing: hộp biên giới; hộp-sizing: hộp khẩu}
   #slides ul, # slide li {padding: 0; margin: 0; list-style: none; position: relative}
   #slides ul {height: 250px}
   li #slides {width: 49,9%; height: 100%; position: absolute; display: none}
   #slides li: nth-con (1), #slides li: nth-con (2), #slides li: nth-con (3), #slides li: nth-con (4) {display: block}
   #slides li: nth-con (1) {left: 0; top: 0}
   #slides li: nth-con (2) {left: 50,1%; width: 24,8%; chiều cao: 49,8%}
   #slides li: nth-con (3) {left: 75,2%; width: 24,8%; chiều cao: 49,8%}
   #slides li: nth-con (4) {left: 50,1%; top: 50,2%; chiều cao: 49,9%}
   #slides một {display: block; width: 100%; height: 100%; overflow: hidden}
   #slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
   #slides 50%; background-repeat: repeat-x; border: rắn # 0097BD 4px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px}
   #slides h4 {position: absolute; bottom: 30px; margin: 0; font-size: 18px; font-family: Georgia, Times, "Times New Roman"; left: 0; padding: 0 10px; color: white; z Index: 3; line-height: 20px; font-weight: normal}
   #slides li: nth-con (2) h4, # slide li: nth-con (3) h4 {font-size: 13px; line-height: 15px}
   #slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
   #slides li: nth-con (2) .autname, # slide li: nth-con (3) .autname {display: none}
   #slides .overlayx, # slide li {-webkit-chuyển tiếp: tất cả .4s dễ dàng-trong-ra; -moz-chuyển tiếp: tất cả .4s dễ dàng-trong-ra; -o-chuyển tiếp: tất cả .4s dễ dàng-trong-out ; -ms-chuyển tiếp: tất cả .4s dễ dàng-trong-ra; chuyển tiếp: tất cả .4s dễ dàng-trong-out}
   #slides li: hover {.overlayx -ms-filter: "progid: DXImageTransform.Microsoft Alpha (Opacity = 10)."; filter: alpha (opacity = 10); - KHTML-opacity: 0.1; -moz-opacity: 0.1 ; opacity: 0.1}
   #buttons {margin: 5px 0 0}
   #buttons một {display: inline-block; văn bản indent: -9999px; width: 15px; height: 25px; position: relative}
   #buttons một :: before {content: ""; width: 0; height: 0; border-width: 8px 7px; border-style: solid; border-color: transparent minh bạch minh bạch # 535 353; position: absolute; top: 50 %; margin-top: -8px; margin-left: -10px; left: 50%}
   #buttons một # nextx :: trước khi {border-color: bạch bạch bạch # 535 353; margin-left: -3px}
   phương tiện truyền thông chỉ có màn hình và (max-width: 600px) {
     #slides ul {height: 600px}
     #slides li: nth-con (1) {width: 100%; chiều cao: 49,8%}
     #slides li: nth-con (2) {top: 50,2%; chiều cao: 24,8%; left: 0; width: 49,8%}
     #slides li: nth-con (3) {left: 50,2%; top: 50,2%; width: 49,8%; chiều cao: 24,8%}
     #slides li: nth-con (4) {left: 0; top: 75,3%; chiều cao: 24,8%; width: 100%}
   }
   </ Style>
   <div id = "featuredpost"> </ div>
   <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type = "text / javascript"> </ script>
   <script src = "https://ivyth.googlecode.com/svn/js/featuredpost.min.js" type = "text / javascript"> </ script>
   <script type = 'text / javascript'>
   // <! [CDATA [
   $ (Document) .ready (function () {
   FeaturedPost ({
   blogURL "http://mkr-site.blogspot.com"
   MaxPost: 8
   idcontaint: "# featuredpost"
   ImageSize: 300,
   khoảng: 5000,
   autoplay: đúng,
   TagName: false
   });
   });
   //]]>
   </ Script>

   NB: On line 24 là mã cho đáp ứng. Mã đường khi màn hình hiển thị màn hình nhỏ hơn 600px. nếu bạn không muốn bao gồm các chức năng đáp ứng vui lòng loại bỏ các dòng mã 24-30. 
   Trên dòng 33 là liên kết jQuery thư viện script. Nếu có một mẫu hiện có xin vui lòng xóa mã này. Bởi vì việc lắp đặt nhiều hơn 1 jQuery thư viện có thể làm cho các lỗi
4. Nhấn Save

Gadget quấn Conditional HTML Tag

Nếu các bước trên là hơn bây giờ tiện ích giai đoạn đóng gói với các thẻ có điều kiện để quản lý bất cứ nơi nào, trình chiếu này sẽ được hiển thị. 
Ví dụ, một tiện ích mà chỉ muốn thể hiện sân trước / hiên như sau

1. Trên bảng điều khiển chọn Template và sau đó nhấp vào Chỉnh sửa HTML và kiểm tra trên Expand Widget Templates
2. Sau đó tìm các mã <b: section class = 'chính' id = 'chính' showaddelement = 'yes'>, có trước đây đã được thêm vào các widget HTML nó sẽ hiển thị các loại phụ tùng của HTML với id HTMLxx. (Xx: widget số HTML) 
   Ví dụ tùng HTML với id HTML5 Tôi sẽ thêm tags kiện thì chỉ có trên trang đầu / hiên 
   Sau đó, nó sẽ được như thế này:
   

   <b: widget id = 'HTML5'Đã bị khoá =' false 'title =' 'type =' HTML '>
   <b: includable id = 'chính'>
   <b: if cond = 'data: blog.url == các dữ liệu: blog.homepageUrl'> 
     <! - Chỉ hiển thị tiêu đề nếu đó là một không trống ->
     <b: if cond = 'data: các title = & quot; & quot;'>
       <h2 class = "title"> <data: Tiêu đề /> </ h2>
     </ B: if>
     <div class = 'widget nội dung ">
       <data: Nội dung />
     </ Div>
   
     <b: include name = 'QuickEdit' />
   </ B: if>
   </ B: includable>
   </ B: widget>

3. Nhấn Save

Tùy chọn

Miêu tả

blogURL

Điền với link blog của bạn ví dụ như http: //mkr-site.blogspot.com

MaxPost

Số Maksumal của bài viết / bài viết mà bạn muốn hiển thị

idcontaint

ID sẽ hiển thị một slideshow

ImageSize

kích thước của hình ảnh bạn muốn hiển thị

khoảng thời gian

Hiện doanh thu của các slide. đơn vị trong mili giây

autoplay

Nếu bạn muốn hiển thị các slide mà di chuyển tự động: tùy chọn để đúng hay sai

pBlank

Hình ảnh sao lưu nếu bài viết không có bản vẽ

MonthNames

Viết tên của tháng. Mặc định như thế này: MonthNames: ["January", "tháng hai", "Mar", "Tháng tư", "May", "June", "Tháng bảy", "Tháng Tám", "September", "Tháng Mười", "November" "Tháng mười hai"]

TagName

Nếu bạn muốn hiển thị bài viết dựa trên các thẻ / nhãn, ví dụ, các tag bloggersau đó được viết như thế này: tagname: "blogger"

Cài đặt Auto Slideshow CoinSlider trong Blogger / Blogspot

Coinslider một slideshow làm với jQuery rằng có một hiệu ứng chuyển cảnh thú vị. Hiệu ứng chuyển tiếp mà tồn tại trong slideshow này cụ thể là xoáy, mưa, thẳng. Bởi vì hiệu quả là không quá nhiều mà slideshow này chỉ có kích thước (12KB). 
Nhìn vào cấu trúc của HTML để tạo slideshow này không phải là quá phức tạp. Vì vậy, tôi đã cố gắng để làm cho nó trong autoslideshow phiên bản (kết hợp với các blogger thức ăn). Tốt cho những người bạn của những người muốn cài đặt một blog, bạn có thể làm theo các bước dưới đây. Trong khi quan tâm đến phiên bản hướng dẫn có thể được đọc diwebsitenya workshop.rs.

Hiển thị Thêm một tiện ích trên blog bài viết

Nếu blog của bạn đã không xuất hiện nút / ghi thêm các tiện ích trên Blog bài viết theo các bước sau để hiển thị nó:

1. Trên bảng điều khiển chọn Template và sau đó nhấp vào Chỉnh sửa HTML
2. Sau đó tìm các mã <b: section class = 'chính' id = 'chính' showaddelement = "no"> sau đó thay thế fox showaddelement là yes để nó trở nên như thế này <b: section class = 'chính' id = 'chính' showaddelement = ' yes '> 
   NB: Để tạo thuận lợi cho báo chí tìm kiếm Ctrl + F trên bàn phím của bạn và viết <b: section class =' chính 'id =' chính 'showaddelement =' no '>.
3. Nhấn Save

Thêm tiện ích HTML và script CoinSlider Slideshow

1. Trên bảng điều khiển chọn Layout / Layout và sau đó nhấn vào Add a Gadget trên Blog Post Area
2. Sau đó di chuyển xuống để tìm các HTML / JavaScript và nhấp vào nút thêm góc hiện tại
3. Sau đó, Nhập đoạn mã sau:
   

   <style scoped="" type="text/css">
   #coinautoslide{margin:0 auto;border:4px solid white;border-radius:2px;font:normal normal 11px Verdana,Geneva,sans-serif;line-height:1.6em}
   .coin-slider{overflow:hidden;zoom:1;position:relative}
   .coin-slider a{text-decoration:none;outline:none;border:none}
   .cs-buttons{font-size:0;padding:10px;float:left}
   .cs-buttons a{margin-left:5px;height:10px;width:10px;float:left;border:1px solid #B8C4CF;color:#B8C4CF;text-indent:-1000px}
   .cs-active{background-color:#B8C4CF;color:#FFFFFF}
   .cs-buttons a{border-radius:50%;background:#CCC;background:-webkit-linear-gradient(top,#CCCCCC,#F3F3F3);background:-moz-linear-gradient(top,#CCCCCC,#F3F3F3);background:-o-linear-gradient(top,#CCCCCC,#F3F3F3);background:-ms-linear-gradient(top,#CCCCCC,#F3F3F3);background:linear-gradient(top,#CCCCCC,#F3F3F3)}
   a.cs-active{background:#599BDC;background:-webkit-linear-gradient(top,#599BDC,#3072B3);background:-moz-linear-gradient(top,#599BDC,#3072B3);background:-o-linear-gradient(top,#599BDC,#3072B3);background:-ms-linear-gradient(top,#599BDC,#3072B3);background:linear-gradient(top,#599BDC,#3072B3);border-radius:50%;box-shadow:0 0 3px #518CC6;border:1px solid #3072B3!important}
   .cs-title{width:100%;padding:5px 0;background-color:#000000;color:#FFFFFF}
   .cs-title strong{display:block;font-size:120%}
   .cs-title p{margin:0}
   .cs-title cite{font-size:90%}
   .cs-title strong,.cs-title cite,.cs-title p{padding:0 10px}
   .cs-prev,.cs-next{background-color:#000000;color:#FFFFFF;padding:0 10px}
   </style>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
   <script type='text/javascript'>
   var AutoCoinConfig = {  
    url_blog: "http://mkr-site.blogspot.com", 
    MaxPost: 7, 
    cmtext: "Komentar", 
    MonthNames : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"], 
    pBlank : "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif", 
    NoCmtext : "Belum Ada Komentar",
    imageSize :500,
    SumChars : 100,
    tagName:false,
    width: 500,
    height: 250,
    spw: 7,
    sph: 5,
    delay: 3000,
    sDelay: 30, 
    opacity: 0.7,
    titleSpeed: 500,
    effect: '',
    navigation: true,
    links : true,
    hoverPause: true,
    prevText: 'prev',
    nextText: 'next'
   };
   </script>
   <script src="https://ivyth.googlecode.com/svn/js/autocoin.min.js" type="text/javascript"></script>

   NB: On line 17 là liên kết jQuery thư viện script. Nếu có một mẫu hiện có xin vui lòng xóa mã này.Bởi vì việc lắp đặt nhiều hơn 1 jQuery thư viện có thể làm cho các lỗi
4. Nhấn Save

Gadget quấn Conditional HTML Tag

Nếu các bước trên là hơn bây giờ tiện ích giai đoạn đóng gói với các thẻ có điều kiện để quản lý bất cứ nơi nào, trình chiếu này sẽ được hiển thị. 
Ví dụ, một tiện ích mà chỉ muốn thể hiện sân trước / hiên như sau

1. Trên bảng điều khiển chọn Template và sau đó nhấp vào Chỉnh sửa HTML và kiểm tra trên Expand Widget Templates
2. Sau đó tìm các mã <b: section class = 'chính' id = 'chính' showaddelement = 'yes'>, có trước đây đã được thêm vào các widget HTML nó sẽ hiển thị các loại phụ tùng của HTML với id HTMLxx. (Xx: widget số HTML) 
   Ví dụ tùng HTML với id HTML5 Tôi sẽ thêm tags kiện thì chỉ có trên trang đầu / hiên 
   Sau đó, nó sẽ được như thế này:
   

   <b:widget id='HTML5' locked='false' title='' type='HTML'>
   <b:includable id='main'>
   <b:if cond='data:blog.url == data:blog.homepageUrl'> 
     <!-- only display title if it's non-empty -->
     <b:if cond='data:title != &quot;&quot;'>
       <h2 class='title'><data:title/></h2>
     </b:if>
     <div class='widget-content'>
       <data:content/>
     </div>
   
     <b:include name='quickedit'/>
   </b:if>
   </b:includable>
   </b:widget>>

3. Nhấn Save

Tùy chọn

Miêu tả

url_blog

Điền với link blog của bạn ví dụ như http: //mkr-site.blogspot.com

MaxPost

Số Maksumal của bài viết / bài viết mà bạn muốn hiển thị

cmtext

Nếu có một bài viết bình luận

ImageSize

kích thước của hình ảnh bạn muốn hiển thị

SumChars

Số lượng các ký tự mà bạn muốn xuất hiện trong phần tóm tắt

NoCmtext

Bài viết nếu không có ý kiến.

pBlank

Hình ảnh sao lưu nếu bài viết không có bản vẽ

MonthNames

Các định dạng của văn bản trong tên của tháng.

TagName

Nếu bạn muốn hiển thị bài viết dựa trên các thẻ / nhãn, ví dụ, các tag bloggersau đó được viết như thế này: tagname: "blogger"

width

Chiều rộng của các slideshow.

height

chiều cao của các slideshow.

SPW

Số lượng các hộp vào chiều rộng (số cột)

SPH

Số lượng các hộp trên cao (số lượng tuyệt đối của các hàng)

delay

Slide thay đổi thời gian

sDelay

thay đổi thời gian để các hộp trên slide có hiệu lực (SPW và SPH)

opacity

Mức Tranfaransi (0-1)

titleSpeed

Thời gian cho các hiệu ứng trên các tiêu đề mục

effect

Loại có hiệu lực tại thời điểm chuyển các slide. Tùy chọn: "ngẫu nhiên", "xoáy", "mưa", "thẳng".

navigation

Nếu bạn muốn hiển thị các giá trị chuyển hướng: đúng hay sai

links

Nếu bạn muốn kích hoạt các liên kết đến hình ảnh. Giá trị: đúng hay sai

hoverPause

Dừng trượt nếu không có con chuột vào nó.

prevText

Bài viết trước

nextText

Bài viết kế tiếp

Sidebar Các bài viết với CSS và jQuery

Trước đây tôi đã phân bổ cho bài nổi bật như thế này, nhưng được đặt trên đầu trang của bài viết. Trong khi các bài đặc trưng là phải được đặt trên thanh bên. 
Các kịch bản mà tôi sử dụng trên một hơi khác nhau để nó có thể được sử dụng trên thanh bên. . Bởi vì thường khi được đặt trên thanh bên không chỉ dành cho các bài báo gần đây, nhưng cũng đến nhãn đặc biệt 
Đối với những người bạn của những người quan tâm để cài đặt một blog bạn có thể làm theo các bước sau:

Thêm tiện ích HTML và script Các bài viết

1. Trên bảng điều khiển chọn Layout / Layout và sau đó nhấn vào Add a Gadget mà tồn tại trong sidebar
2. Sau đó di chuyển xuống để tìm các HTML / JavaScript và nhấp vào nút thêm góc hiện tại
3. Sau đó, Nhập đoạn mã sau:
   

   <style scoped="" type="text/css">
   ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
   ul.rcentside{font:normal normal 11px Verdana,Geneva,sans-serif}
   ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative}
   ul.rcentside{width:100%;height:500px}
   ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
   ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block}
   ul.rcentside img{border:0;width:100%;height:100%}
   ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
   ul.rcentside li:nth-child(2){left:0;top:50%}
   ul.rcentside li:nth-child(3){left:50.5%;top:50%}
   ul.rcentside li:nth-child(4){width:100%;left:0;top:75%}
   ul.rcentside  .overlayx,ul.rcentside li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
   ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVgrQOowUgGom9nzNiXd0eiDlDtzu_XJKszB8CFV2q89t98CG15FmU0pfKalcG9LVBXWJkUsw-dAVs1ZeBk5YR4qFlYdhSsL1360Ig6aLT9J0_BEMMyP7ubopvSTlI5ojPGEooN-0lLW8/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
   ul.rcentside .overlayx,ul.rcentside img{border:4px solid #2E8DCE;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
   ul.rcentside li:nth-child(1) .overlayx{background-position:50% 25%}
   ul.rcentside .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
   ul.rcentside h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}
   ul.rcentside li:nth-child(1) h4,ul.rcentside li:nth-child(4) h4{font-size:150%}
   ul.rcentside .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
   ul.rcentside li:nth-child(2) .autname,ul.rcentside li:nth-child(3) .autname{display:none}
   .buttons{margin:5px 0 0}
   .buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
   .buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
   .buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
   </style>
   <div id="featuredpostside"></div>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
   <script src="https://ivyth.googlecode.com/svn/js/featuredpostside.min.js" type="text/javascript"></script>
   <script type='text/javascript'>
   //<![CDATA[
   FeaturedPostSide({
   blogURL "http://www.veggiesnfruitsjuiceplus.com/"
   MaxPost:8,
   idcontaint:"#featuredpostside",
   ImageSize:300,
   interval:5000,
   autoplay:true,
   tagName:false
   });
   //]]>
   </script>

   NB: On line 29 là liên kết jQuery thư viện script. Nếu có một mẫu hiện có xin vui lòng xóa mã này.Bởi vì việc lắp đặt nhiều hơn 1 jQuery thư viện có thể thực hiện sai sót.
4. Nhấn Save

Tùy chọn

Miêu tả

blogURL

Điền với link blog của bạn ví dụ như http:// www.veggiesnfruitsjuiceplus.com/

MaxPost

Số Maksumal của bài viết / bài viết mà bạn muốn hiển thị

idcontaint

ID sẽ hiển thị một slideshow

ImageSize

kích thước của hình ảnh bạn muốn hiển thị

khoảng thời gian

Hiện doanh thu của các slide. đơn vị trong mili giây

autoplay

Nếu bạn muốn hiển thị các slide mà di chuyển tự động: tùy chọn để đúng hay sai

pBlank

Hình ảnh sao lưu nếu bài viết không có bản vẽ

MonthNames

Viết tên của tháng. Mặc định như thế này: MonthNames: ["January", "tháng hai", "Mar", "Tháng tư", "May", "June", "Tháng bảy", "Tháng Tám", "September", "Tháng Mười", "November" "Tháng mười hai"]

TagName

Nếu bạn muốn hiển thị bài viết dựa trên các thẻ / nhãn, ví dụ, các tag bloggersau đó được viết như thế này: tagname: "blogger"