Showing posts with label tao-blogger-chuyen-nghiep. Show all posts
Showing posts with label tao-blogger-chuyen-nghiep. Show all posts

Thursday, August 3, 2017

Hướng dẫn tạo Push Notification (thông báo đẩy) cho Blogspot

Hướng dẫn tạo Push Notification (thông báo đẩy) cho Blogspot

Giúp khách hàng biết được trang Blogspot của mình có bài viết mới



Push Notification (thông báo đẩy) là gì?

  • Push Notification là một dạng thông báo cho khách hàng biết rằng trang Blogspot của bạn vừa có bài đăng mới. Dạng thông báo đẩy cho Blogspot bằng PushCrew này hoạt động tốt trên các trình duyệt phổ biến hiện nay như: Chrome, FireFox, Coccoc ...v..v.... nên khách hàng sẽ luôn nhận được thông báo của bạn.

Ích lợi của việc dùng Push Notification (thông báo đẩy) cho trang Blogspot?

  • Push Notification hiện nay rất phổ biến và được nhiều trang web lớn thường dùng nó cho việc kinh doanh của mình (kể cả Facebook). Khi bạn sử dụng Push Notification cho trang Blogspot của bạn, đọc giả vào và đăng ký nhận thông báo thì họ ko cần phải check mail như cách dùng tiện ích "Theo dõi qua Email" sẵn có của Blogspot, mà thông báo sẽ được hiển thị ngay trên trình duyệt của họ. Đặc biệt nếu bạn tạo trang Blogspot bán hàng thì thông báo đẩy này rất có lợi cho việc kinh doanh,bán hàng của bạn. Khi bạn đăng 1 bài viết về sản phẩm mới, thông báo sẽ được hiển thị ngay trên trình duyệt của khách hàng giúp khách hàng nhận biết thông tin cập nhật và khiến cho khách hàng trở lại trang Blog bán hàng của mình sớm nhất, thu hút nhiều lượt xem bài viết hơn, dẫn đến doanh số bán hàng tăng lên

Hướng dẫn cách tạo Push Notification (Thông báo đẩy) cho Blogspot


Cách 1:
  • Bước 1: Truy cập vào website: https://pushcrew.com --> Signup for FREE
  • Bước 2: Điền đầy đủ thông tin của bạn vào --> chọn Creat Account
  • Bước 3: trong mục Setting --> chọn phần Code and Implementation --> bạn copy đoạn code trong phần SMART CODE
  • Bước 4: vào phần Quản trị Blog --> Chủ đề --> Chỉnh sửa HTML
  • Bước 5: trong phần Code, bấm Ctr+F để tìm thẻ đóng  </head>
  • Bước 6: paste đoạn code vào trước thẻ đóng </head>
  • Bước 7: Lưu mẫu và kiểm tra kết quả ^^
Cách 2: (đơn giản hơn và Sơn Nguyễn đang sử dụng)
  • Bước 1-2-3: làm tương tự như trên
  • Bước 4: vào phần Quản trị Blog --> Thêm tiện ích --> HTML/Javascript
  • Bước 5: paste đoạn code vào phần nội dung (phần Tiêu đề để trống)
  • Bước 6: Lưu và kiểm tra kết quả ^^


Cài đặt Push Notification (Thông báo đẩy)


Truy cập vào website: https://pushcrew.com -->  Đăng nhập vào

Trong phần Setting của PushCrew --> bạn vào phần Customize for Desktop
  • Display push notifications permission box after seconds on your website: số phút Push Notification (Thông báo đẩy) sẽ xuất hiện khi khách hàng truy cập vào trang Blogspot của bạn
  • Upload Logo: bạn có thể upload logo của bạn lên tại đây
  • Customize opt-in box for your website:
  • Title: Tiêu đề dòng thông báo (có thể thay đổi theo ý muốn của bạn)
  • Subtitle: Mô tả phần thông báo (có thể thay đổi theo ý muốn của bạn)
  • Allow Button Text: Tên nút Allow (có thể thay đổi theo ý muốn của bạn)
  • Disallow Button Text: Tên nút Disallow (có thể thay đổi theo ý muốn của bạn)
Ps: Phía trên sẽ có phần xem trước để bạn tiện thay đổi các thông số

Bấm Save để hoàn tất ^^

Để xem thêm các thủ thuật Blogger khác, bạn bấm vào "Blogger" trên thanh menu nhé!

Chúc các bạn thành công!

Để tìm các bài viết trên Google nhanh nhất, hãy tìm theo cú pháp: "từ khóa tìm kiếm + nguyentruongson.info"

<<< Bài trước
Bài 43: Thiết kế website Bất động sản miễn phí bằng Blogspot (cơ bản)
Bài 44: Thiết kế website Bất động sản chuyên nghiệp bằng Blogspot (nâng cao)
Bài sau >>>

Tuesday, July 25, 2017

Thiết kế website Bất động sản chuyên nghiệp bằng Blogspot (nâng cao)

Thiết kế website Bất động sản chuyên nghiệp bằng Blogspot

Mẫu Blogger Templates có Slide hình ảnh rất sinh động và hoàn toàn miễn phí




Tiếp nối chuỗi Serie tạo blog Bất động sản miễn phí bằng Blogspot, hôm nay Sơn Nguyễn tiếp tục làm video hướng dẫn các bạn cách thiết kế website Bất động sản bằng Blogspot nâng cao. Thực hành xong bài này các bạn sẽ thấy rất khác so với bài trước vì bài trước chỉ là tạo Blogspot cơ bản rồi cài đặt, chỉnh sửa, thiết kế để nhìn bắt mắt hơn, nhưng làm xong bài này thì các bạn còn tạo Blogspot chuyên nghiệp hơn ^^



  • Link download Blogger Templates trong video tại đây
  • Nhớ SUBSCRIBE (đăng ký) kênh để nhận được video mới nhất: https://goo.gl/5QxXSf
Mọi thắc mắc, góp ý các bạn cứ comment bên dưới nhé

Chúc các bạn thành công!

P/s: Nếu bạn thấy bài này hay, hữu ích thì hãy share cho bạn bè và đồng nghiệp của mình nữa nhé

Wednesday, July 19, 2017

Hướng dẫn tạo Menu ngang và Menu dọc cho Blogspot

Hướng dẫn tạo Menu ngang và Menu dọc cho Blogspot

Giúp trang Blogspot của bạn trông đẹp hơn, gọn gàng hơn và chuyên nghiệp hơn



Thực ra các hướng dẫn này Sơn Nguyễn đã có ở Bài 1: Hướng dẫn tạo Blogspot chi tiết từ căn bản đến nâng cao và Bài 38: Hướng dẫn tạo Menu Categories danh mục cho Blogspot nhưng đến giờ này vẫn có nhiều bạn vẫn "hỏi thăm" nhờ hướng dẫn thêm -.-

Mà cũng lâu rồi ko hướng dẫn về thủ thuật Blogger nên hôm nay Sơn Nguyễn tổng hợp lại 3 cách tạo menu cho Blogspot đơn giản để các bạn mới dễ hình dung hơn nhé
  1. Tạo Menu ngang cơ bản cho Blogspot
  2. Tạo Menu ngang chứa nhiều bài viết cho Blogspot
  3. Tạo Menu dọc cho Blogspot

Ps: bên thanh sidebar bên phải đã có mục Serie các bài hướng dẫn Blogspot đã được sắp xếp sẵn từ bài đầu tiên đến bài cuối nhất, các bạn chịu khó từ từ tham khảo thêm nhé

#1: Tạo Menu ngang cho Blogspot (cơ bản)

Ví dụ như tạo Blogspot về Bất động sản thì phần menu ngang gồm các Trang sau: CHỦ ĐẦU TƯ, QUY MÔ, VỊ TRÍ, TIỆN ÍCH, MẶT BẰNG, PTTT, NGÂN HÀNG, LIÊN HỆ ...v...v...
(Xem hình minh họa)

Cách làm như sau:

Vào Bố cục --> Trang -->  Trang mới --> tiến hành tạo các trang Menu ngang cho Blogspot


(nếu làm như hình minh họa trên thì cần tạo các Trang lần lượt có tên: CHỦ ĐẦU TƯ, QUY MÔ, VỊ TRÍ, TIỆN ÍCH, MẶT BẰNG, PTTT, NGÂN HÀNG, LIÊN HỆ ...v...v...)

Sau khi tạo xong các Trang cần thiết để làm Menu ngang cho Blogspot thì bạn vào Bố cục --> Cross Column (nằm phía trên Main - Bài đăng trên Blog) --> Thêm tiện ích 


--> chọn Wiget Trang



--> tick chọn các Trang đã tạo --> kéo sắp xếp lại vị trí --> Lưu



Cuối cùng kiểm tra kết quả xem thế nào nhé ^^

#2: Tạo Menu ngang có nhiều bài viết cho Blogspot

Với cách #1 thì mỗi menu ngang của Blogspot chỉ chứa được 1 bài viết mà thôi. Nếu bạn muốn Menu ngang đó chứa được nhiều bài hơn thì tham khảo cách dưới đây nhé

Hình minh họa
Menu "Điện thoại Nokia" trên thanh Menu ngang của Blogspot có nhiều bài viết

Tạo Menu có nhiều bài viết như hình trên chỉ là thủ thuật đơn giản của Blogger: dùng Label (Nhãn) của bài viết để tạo Menu ngang cho Blogspot. Khi click vào tên Menu thì hiện ra nhiều bài viết có chung Label (ví dụ như hình minh họa phía trên). Vì vậy, khi viết bài, các bạn nhớ thêm Label (nhãn) vào từng bài viết để dễ dàng tạo Menu ngang có nhiều bài viết  nhé ^^

Cách làm như sau: 

Bố cục --> Cross Column --> Thêm tiện ích --> Trang



Sau đó bấm vào Thêm liên kết bên ngoài



--> Đặt tên cho Menu
--> Paste link của Label (Nhãn) của bài viết vào (link các Label của Blogspot có dạng: Domain/search/label/tên Label)
--> Lưu liên kết là xong


#3: Tạo Menu dọc cho Blogspot

Làm tương tự như tạo Menu ngang có nhiều bài viết cho Blogspot, chỉ khác là tạo Menu bên phần sidebar ở bên phải hoặc bên trái mà thôi

Menu dọc nằm bên thanh sidebar bên phải của Blogspot

Cách làm:

Bố cục --> sidebar-right-1 --> Thêm tiện ích


--> Trang 
--> phần Tiêu đề (tùy chọn): thay chữ Pages thành tên của Menu chính (ví dụ như ở hình minh họa là: Laptop, Điện thoại ...)
 --> Thêm liên kết bên ngoài




 --> Đặt tên cho Menu con (ví dụ như lúc nãy bạn đặt tên Menu chính là Laptop rồi thì tên Menu con sẽ là: Dell, Acer ..v...v...) --> Paste link vào --> Lưu liên kết --> Xong ^^

Với cách tạo Menu dọc cho Blogspot đơn giản như thế này nhưng vô cùng lợi hại, vì nó có thể tạo ra nhiều Menu hơn, rất thuận tiện cho các bạn tạo Blog bán hàng có nhiều danh mục sản phẩm cần đưa ra Trang chủ

Các bạn xem thêm ở bài viết này để hiểu rõ hơn nhé (có video hướng dẫn trong bài sẽ dễ hình dung hơn)
>> Hướng dẫn tạo Menu Categories danh mục cho Blogspot

#4: Tạo Menu ngang nhiều cấp đổ dọc xuống cho Blogspot

Menu ngang có nhiều cấp đổ dọc xuống

Như vậy, Sơn Nguyễn đã hướng dẫn xong 3 cách tạo Menu cho Blogspot đơn giản. Còn các bạn muốn tạo Menu ngang có nhiều cấp đổ xuống thì các bạn tìm các Templates Blogger phù hợp có sẵn các đoạn code menu ngang đa cấp đổ dọc xuống rồi, các bạn chỉ tiền hành cài đặt lại nó thôi. Cũng đơn giản thôi mà ^^.

Cách làm:
Các bạn vào chỉnh sửa HTML --> bấm Ctr+F để tìm tên Menu rồi thay thế chúng và đưa đường link vào thay cho dấu '#' là ok thôi (nhớ làm từng cái 1, xong kiểm tra kết quả, thấy ok thì làm tiếp)

Các bạn hãy tham khảo thêm Bài 8: Hướng dẫn thiết kế website chuyên nghiệp với Blogspot để dễ làm hơn nhé ^^

Sắp tới Sơn Nguyễn sẽ thu xếp thời gian để làm 1 vài bài hướng dẫn tạo blogspot bán hàng, tạo blog bất động sản ...v....v... dùng các template Blogspot download trên mạng về, lúc đó sẽ có phần tạo Menu đổ xuống nhiều cấp để các bạn tham khảo thêm

Comming soon ...

Chúc các bạn thành công!
  • Để tìm các bài viết trên Google nhanh nhất, hãy tìm theo cú pháp: "từ khóa tìm kiếm + nguyentruongson.info"

Saturday, April 22, 2017

Hướng dẫn chống Copy bài viết trên Blogspot đơn giản hiệu quả nhất

Hướng dẫn chống Copy bài viết trên blogspot đơn giản hiệu quả nhất

Và cả chống click chuột phải, quét khối nội dung bài viết của Blogspot trên mọi trình duyệt


Gần đây có nhiều bạn PM cho mình than phiền rằng trang Blogspot của họ bị sao chép nội dung trái phép mà ko biết làm sao để hạn chế và ngăn chặn. 

Mặc dù mình đã động viên rằng, hiện nay Google chú trọng và ưu tiên đánh giá cao tính bản quyền của nội dung, dù có bị sao chép thì cũng sẽ ko được Google công nhận và cho phép xuất hiện trên Google, nhưng nhiều bạn vẫn cảm thấy khó chịu khi bị copy, sao chép bản quyền 1 cách trắng trợn như vậy. Vì lẽ đó, hôm nay mình xin chia sẽ cách chống Copy nội dung bài viết và chống click chuột phải trên Blogspot 1 cách đơn giản hiệu quả nhất để bạn giữ bản quyền nội dung bài viết của mình khỏi kẻ xấu xa ^^




Cách chống Copy bài viết và chống click chuột phải trên Blogspot

Bước1: Đăng nhập vào trang Blogspot cần chống Copy nội dung bài viết

Bước 2: chọn Chủ đề (trước kia là Mẫu) --> Chỉnh sửa HTML

Bước 3: bấm Ctrl + F để tìm thẻ <body>

Bước 4: Copy đoạn code bên dưới và Paste đè lên (thay thế) thẻ <body>
<body oncontextmenu='return false' onmousedown='return false' onselectstart='return false'>
Bước 5: Lưu mẫu và kiểm tra kết quả ^^

Chú ý:

Có 1 số Template Blogspot, thẻ <body> sẽ có dạng khác 1 chút so với các Template đơn giản sẵn có của Blogger, ví dụ như: <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> . Lúc đó bạn Copy đoạn code bên dưới và paste đè lên nó (thay thế nó) là xong ^^
<body expr:class='&quot;loading&quot; + data:blog.mobileClass' oncontextmenu='return false' onmousedown='return false' onselectstart='return false'>

Hi vọng với bài viết này sẽ giúp nhiều bạn đỡ đau đầu hơn với nạn ăn cắp bản quyền bài viết ^^

Với những trang chia sẻ, hướng dẫn như trang này của mình thì ko nên áp dụng thủ thuật này, vì như thế các bạn sẽ ko Copy được các đoạn code được chia sẻ ở trong các bài viết ^^

Chúc các bạn thành công!
Nhớ bấm  g+ chia sẽ nhé ^^

Friday, April 21, 2017

Hướng dẫn tạo Bài viết liên quan cho Blogspot theo Nhãn (Label) bài viết

Hướng dẫn tạo Bài viết liên quan cho blogspot theo Nhãn (Label) bài viết

Đọc giả sẽ dễ dàng theo dõi tiếp các bài viết liên quan có cùng nhãn (label) của bài viết hiện tại


Bài viết liên quan hiển thị theo Nhãn (Label) của bài viết Blogspot

Hôm nay Sơn Nguyễn tiếp tục với Series Hướng dẫn tạo Bài viết liên quan (Related Post) cho Blogspot. Và bài hướng dẫn hôm nay sẽ là tạo Related Post theo Nhãn (Label) bài viết Blogspot

Các bước tạo Related Post theo Nhãn (Label) bài viết Blogspot:

Bước 1: Đăng nhập vào Blogspot cần tạo Related Post --> Chủ đề (trước kia là Mẫu) --> Chỉnh sửa HTML




Bước 2: đặt con trở soạn thảo trong ô code, bấm Ctrl + F để tìm dòng <div class='post-footer'>

Bước 3: Copy đoạn code bên dưới và dán (paste) vào sau dòng <div class='post-footer'> (phía dưới dòng)

<!-- related post --><b:if cond='data:blog.pageType == &quot;item&quot;'><div class='widget-content'><h2>Các bài liên quan</h2><div id='saliproit183'/><br/><br/>&lt;script type=&quot;text/javascript&quot;&gt;homeUrl3 = &quot;nguyentruongson.info&quot;;maxNumberOfPostsPerLabel = 6;maxNumberOfLabels = 6;function listEntries10(json) {var ul = document.createElement(&#39;ul&#39;);var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?json.feed.entry.length : maxNumberOfPostsPerLabel;for (var i = 0; i &lt; maxPosts; i++) {var entry = json.feed.entry[i];var alturl;for (var k = 0; k &lt; entry.link.length; k++) {if (entry.link[k].rel == &#39;alternate&#39;) {alturl = entry.link[k].href;break;}}var li = document.createElement(&#39;li&#39;);var a = document.createElement(&#39;a&#39;);a.href = alturl;var txt = document.createTextNode(entry.title.$t);a.appendChild(txt);li.appendChild(a);ul.appendChild(li);}for (var l = 0; l &lt; json.feed.link.length; l++) {if (json.feed.link[l].rel == &#39;alternate&#39;) {var raw = json.feed.link[l].href;var label = raw.substr(homeUrl3.length+21);label = decodeURIComponent(label);var txt = document.createTextNode(label);var h = document.createElement(&#39;h4&#39;);h.appendChild(txt);var div1 = document.createElement(&#39;div&#39;);div1.appendChild(h);div1.appendChild(ul);document.getElementById(&#39;saliproit183&#39;).appendChild(div1);}}}function search10(query, label) {var script = document.createElement(&#39;script&#39;);script.setAttribute(&#39;src&#39;, &#39;http://&#39; + query + &#39;/feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);document.documentElement.firstChild.appendChild(script);}var labelArray = new Array();var numLabel = 0;<b:loop values='data:posts' var='post'><b:loop values='data:post.labels' var='label'>textLabel = &quot;<data:label.name/>&quot;;var test = 0;for (var i = 0; i &lt; labelArray.length; i++)if (labelArray[i] == textLabel) test = 1;if (test == 0) {labelArray.push(textLabel);var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?labelArray.length : maxNumberOfLabels;if (numLabel &lt; maxLabels) {search10(homeUrl3, textLabel);numLabel++;}}</b:loop></b:loop>&lt;/script&gt;</div></b:if><br/><!-- /related post -->



Bước 4: Bấm Lưu mẫu và kiểm tra kết quả ^^

Chú ý:

- Thay nguyentruongson.info bằng địa chỉ Blogspot của bạn.  Lưu ý địa chỉ Blogspot của bạn ko có "http://" ở đầu và "/" ở cuối nhé (ví dụ link blogspot là: http://affiliatemarketingchitiet.blogspot.com/ thì bạn chỉ lấy affiliatemarketingchitiet.blogspot.com thôi)

- Thông số maxNumberOfPostsPerLabel: số bài viết tối đa được hiển thị của Nhãn (Label) ở mục Bài viết liên quan

- Thông số maxNumberOfLabels: Số Nhãn (Label) tối đã được hiển thị trong mục Related Post (bài viết liên quan)

- Nếu kết quả ko thấy gì thì các bạn xóa đoạn code vừa paste đi và tìm 1 trong 3 dòng dưới đây:
  1. <div class='post-footer-line post-footer-line-1'>
  2. <div class='post-footer-line post-footer-line-2'>
  3. <div class='post-footer-line post-footer-line-3'>
Sau đó dán (paste) lần lượt đoạn code vào sau dòng vừa tìm được (paste vào phía dưới dòng vừa tìm được). Nếu kiểm tra kết quả ok rồi thì thôi, còn ko thì làm lại với dòng khác (nhớ phải xóa đoạn code vừa paste đi nhé, rồi mới tìm dòng khác để paste lại đoạn code vào)

Trang blogspot làm demo cũng phải paste đoạn code vào sau dòng thứ 3 mới có kết quả ^^


Chúc các bạn thành công!
Nhớ bấm  g+ ủng hộ nhé ^^
*Đoạn code được sưu tầm trên mạng

Để tìm các bài viết trên Google nhanh nhất, hãy tìm theo cú pháp: "từ khóa tìm kiếm + nguyentruongson.info"

<<< Bài trước
Bài 37: DreamHost giảm giá Hosting 40% + Free Domain
Bài 39: Hướng dẫn tạo Bài viết liên quan (Related Post) cho Blogspot
Bài sau >>>

Wednesday, April 19, 2017

Hướng dẫn tạo Bài viết liên quan (Related Post) cho Blogspot

Hướng dẫn tạo Bài viết liên quan (Related Post) cho Blogspot

Giúp đọc giả thuận tiện theo dõi và xem thêm được nhiều bài viết khác của bạn có liên quan đến chủ đề của bải viết hiện tại của bạn



Có nhiều mẫu Template Blogger có tích hợp sẵn phần Related Post, và có 1 số mẫu thì ko. Hôm nay Sơn Nguyễn sẽ hướng dẫn các bạn cách tạo Bài viết liên quan cho Blogspot của bạn (hay còn gọi là tạo Related Post cho Blogspot)


Tạo Bài viết liên quan (Related Post) hiển thị Bài mới nhất (Recent Post)

Bước 1: Đăng nhập vào Blogspot cần tạo Related Post --> Chủ đề (trước kia là Mẫu) --> Chỉnh sửa HTML



Bước 2: đặt con trở soạn thảo trong ô code, bấm Ctrl + F để tìm thẻ đóng </head>

Bước 3: Copy đoạn code 1 bên dưới và dán (paste) vào trước thẻ </head> (phía trên thẻ)

<b:if cond='data:blog.pageType == &quot;item&quot;'><script type="text/javascript">//<![CDATA[var titles=new Array();var titlesNum=0;var urls=new Array();var time=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);e=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a]}}titles=c;urls=b;time=e}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;document.write("<ul>");if(titles.length==0){document.write("<li>Không có bài viết liên quan</li>")}else{while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}document.write('<li><a href="'+urls[c]+'" title="'+time[c].substring(8,10)+"/"+time[c].substring(5,7)+"/"+time[c].substring(0,4)+'">'+titles[c]+"</a></li>");if(c<titles.length-1){c++}else{c=0}b++}}document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length)};//]]></script></b:if>

Paste đoạn code vào trên thẻ đóng </head>

Bước 4: Tiếp tục bấm Ctrl + F để tìm dòng <div class='post-footer'>

Bước 5: Copy đoạn code 2 bên dưới và dán (paste) vào sau dòng <div class='post-footer'> (phía dưới dòng)

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b>Bài viết liên quan:</b><b:loop values='data:post.labels' var='label'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/></b:loop><script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script></div></b:if>

Paste đoạn code phía dưới dòng <div class='post-footer'>

Bước 6: Lưu mẫu và kiểm tra kết quả ^^

Chú ý:

- Thông số var maxresults = 5; Số bài viết hiển thị ở mục Bài viết liên quan (Related Post) bên dưới bài đăng của Blogspot

- Nếu kết quả ko thấy gì thì các bạn xóa đoạn code 2 vừa paste đi và tìm 1 trong 3 dòng dưới đây (bấm Ctrl + F để tìm)
  1. <div class='post-footer-line post-footer-line-1'>
  2. <div class='post-footer-line post-footer-line-2'>
  3. <div class='post-footer-line post-footer-line-3'>
Sau đó dán (paste) lần lượt đoạn code 2 vào sau dòng vừa tìm được (paste vào phía dưới dòng vừa tìm được). Nếu kiểm tra kết quả ok rồi thì thôi, còn ko thì làm lại với dòng khác (nhớ phải xóa đoạn code 2 vừa paste đi nhé, rồi mới tìm dòng khác để paste lại đoạn code 2 vào)

Trang Blogspot làm demo phải paste vào dòng thứ 3 mới ra kết quả đấy ^^


Chúc các bạn thành công!
Nhớ bấm g+ chia sẽ nhé ^^
*Các đoạn code được sưu tầm trên mạng

Để tìm các bài viết trên Google nhanh nhất, hãy tìm theo cú pháp: "từ khóa tìm kiếm + nguyentruongson.info"

<<< Bài trước
Bài 36: 10 lý do bạn nên chọn Hosting trên DreamHost
Bài 37: DreamHost giảm giá Hosting 40% + Free Domain
Bài sau >>>

Wednesday, August 31, 2016

Hướng dẫn tạo Bình luận mới nhất cho Blogspot (có Avatar hiển thị)

Hôm nay Sơn Nguyễn chia sẻ thủ thuật Blogger: tạo Bình luận mới nhất cho Blogspot (có Avatar hiển thị)

Tiện ích này sẽ giúp các bạn cập nhật các comment mới nhất của đọc giả trên website/Blogspot của bạn, giúp bạn để có phương án xử lý kịp thời (trả lời, hỗ trợ, giải đáp những thắc mắc của đọc giả khi xem bài viết của bạn, hoặc xóa các comment spam ... 1 cách nhanh nhất)


Ko những thế, tiện ích này cũng khá bắt mắt: có hiển thị hình ảnh Avatar của người tham gia comment, đoạn trích bình luận và có hiệu ứng chuyển động khi đưa chuột vào

Tiện ích Bình luận bài viết mới nhất cho Blogspot


Thủ thuật này cũng đơn giản thôi mà ^^

P/s: màu sắc của Tiện ích này tùy thuộc vào Template mà bạn đang dùng cho Blogspot của bạn

Các bước tạo hiển thị Bình luận bài viết mới nhất cho Blogspot 

Bước 1: Đăng nhập vào Blogger

Bước 2: Trong phần quản trị --> Bố cục

Bước 3: Chọn nơi hiển thị tiện ích Bình Luận bài viết mới nhất --> Thêm tiện ích -->  HTML/JavaScript

Bước 4: Đặt tiêu đề cho tiện ích (Bình luận mới nhất hoặc Recent Comments) Sau đó Paste đoạn code bên dưới vào phần nội dung 

Bước 5: Bấm Lưu để lưu lại

Bước 6: Bấm Lưu sắp xếp để hoàn tất

Bước 7: Bấm Xem blog để chiêm ngưỡng thành quả :D

Đoạn code tạo hiển thị Bình luận bài viết mới nhất cho Blogspot

<style type="text/css" scoped>
ul.allbloggertricks_recent{list-style:none;margin:0;padding:0;}
.allbloggertricks_recent li{background:none!important;display:block;clear:both;overflow:hidden;list-style:none;border:1px solid transparent;border-radius:9px;max-height:100px;-webkit-transition-duration:.5s;-moz-transition-duration:.5s;-o-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:0;-moz-transition-property:0;-o-transition-property:0;transition-property:transform;margin:0 0 6px!important;padding:3px!important}
.allbloggertricks_recent li:hover{border:1px solid #ddd;
-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-o-transform:rotate(6deg) }
.allbloggertricks_recent a {text-decoration:none;}
.avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px
#ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;width:35px;height:35px}
.allbloggertricks_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
var
numComments = 5,
showAvatar = true,
avatarSize = 35,
roundAvatar = true,
characters = 40,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
maxfeeds=50,
adminBlog='Your Name';
//]]>
</script>
<script type="text/javascript" src="https://googledrive.com/host/0B-0uHUanipfMU1FDNkI2U1FWMG8"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=allbloggertricks_recent&amp;&amp;max-results=50">
</script>

Các bạn chỉnh sửa các thông số màu xanh cho phù hợp với ý của bạn:
  • numComments = 5: Số bình luận sẽ hiển thị. 
  • showAvatar = true: hiển thị Avatar tài khoản Google của người bình luận (nếu ko muốn hiển thị Avatar thì đổi qua False)
  • avatarSize = 35: Size hình Avatar. 
  • characters = 40: Số ký tự bình luận được hiển thị
  • defaultAvatar = http://www.gravatar.com/avatar/?d=mm: hình Avatar mặc định. 
  • maxfeeds=50: Số lượng bình luận tối đa được hiện thị. 
  • adminBlog='Your Name': Tên Admin.

Chú ý: Tiện ích này chỉ hiện thị những Bình luận được post bằng tài khoản Google thôi nhé, nếu bạn/đọc giả comment bằng Facebook thì nó ko thống kê và hiển thị đâu nhé :D

Để tham gia bình luận, bạn phải đăng nhập vào tài khoản Google (có thể đăng nhập bằng tài khoản Gmail của bạn)

Để xem bình luận thuộc bài nào, bạn bấm vào Bình luận trong tiện ích, trình duyệt sẽ đưa bạn đến bài viết có bình luận đó.


Bạn thử comment dưới bài này và xem kết quả sao nhé ^^ Phần Bình luận bài viết mới nhất của web này nằm ở dưới chân trang ^^ Bình luận mới nhất sẽ nằm trên cùng.

Chúc các bạn thành công!

P/ss: đoạn code trong bài viết được sưu tầm trên mạng


Để tìm các bài viết trên Google nhanh nhất, hãy tìm theo cú pháp: "từ khóa tìm kiếm + nguyentruongson.info"

<<< Bài trước
Bài 33: Top 6 nhà cung cấp WordPress Hosting nước ngoài nên dùng
Bài 34: Hướng dẫn tạo Menu Categories danh mục cho Blogspot
Bài sau >>>

Sunday, August 14, 2016

Hướng dẫn đăng ký AdSense bằng Blogspot (có video demo chi tiết)

Hướng dẫn đăng ký AdSense bằng Blogspot

Có video hướng dẫn demo chi tiết


Việc đăng ký Adsense bằng Blogspot thì lần trước Nguyễn Trường Sơn đã có 1 bài viết hướng dẫn rất chi tiết rồi, nên bài này chỉ cập nhật Video hướng dẫn để các bạn có thể tham khảo thêm

Video hướng dẫn đăng ký AdSense bằng Blogspot


  • Các bạn hãy bấm ĐĂNG KÝ (Subscribe) Kênh để ủng hộ và nhận được video mới nhất nhé
  • Link: https://youtu.be/OBGcyKB8Ves

Hướng dẫn thêm Reactions (phản ứng) vào bài viết Blogspot

Hôm nay Sơn Nguyễn sẽ hướng dẫn bạn cách thêm Reactions (phản ứng) vào bài viết Blogspot.

Thực ra chức năng này đã có sẵn trong Blogger rồi, chúng ta chỉ cần "bật" nó lên thôi



Khi đọc giả vào xem Blogspot của bạn, ở phía dưới cùng của bài viết, ngoài việc chia sẻ kết nối với các trang Mạng xã hội như Facebook, Twitter, G+ ... và để lại Comment thì đọc giả còn có thể để lại những phản ứng (cảm xúc) của họ khi xem bài viết của bạn. Những Reactions (phản ứng) này do bạn tự "thiết kế" ra theo ý thích của bạn nhằm tạo sự thích thú và vui nhộn kích thích đọc giả tham gia. Vì vậy bài viết của bạn nên có chức năng Reactions (phản ứng) để đọc giả tham gia bình chọn đánh giá cho bài viết của bạn

Việc thêm Reactions (phản ứng) vào bài viết Blogspot cũng cực kỳ đơn giản. Chỉ cần vào trang Blogspot của bạn và bật nó lên thôi ^^

Video hướng dẫn thêm Reactions (phản ứng) vào bài viết Blogspot


  • Các bạn hãy bấm ĐĂNG KÝ (Subscribe) Kênh để ủng hộ và nhận được video mới nhất nhé
  • Link: https://youtu.be/KYTzmKIqVMc
Hướng dẫn thêm Reactions (phản ứng) vào bài viết Blogspot

Truy cập vào Blogger --> Đăng nhập

Trong phần quản trị --> Bố cục --> Blog Posts (Bài đăng trên Blog) --> Chỉnh sửa

Tick vào ô Phản ứng để bật chức năng này

Tiến hành chỉnh sửa, thay đổi cho Reactions (phản ứng) phù hợp với mong muốn của bạn

Bấm Lưu để hoàn tất

Check kết quả nào ^^

Để xem thêm các thủ thuật Blogger bạn bấm vào "Blogger" trên thanh menu nhé!

Để tìm các bài viết trên Google nhanh nhất, hãy tìm theo cú pháp: "từ khóa tìm kiếm + nguyentruongson.info"

<<< Bài trước
Bài 25: Hướng dẫn tạo bộ nút Social Network cho Blogspot
Bài 26: Hướng dẫn tạo hiển thị Tổng số bài viết và Comment trên Blogspot
Bài sau >>>

Tuesday, August 2, 2016

Hướng dẫn tạo hiển thị Tổng số bài viết và Comment trên Blogspot

Hôm nay Nguyễn Trường Sơn sẽ hướng dẫn tạo hiển thị Tổng số bài viết và Comment trên Blogspot.

Điều này sẽ giúp đọc giả có cái nhìn tổng quan hơn về trang Blogspot của các bạn



Video hướng dẫn tạo hiển thị Tổng số bài viết và Comment trên Blogspot 


  • Các bạn hãy bấm ĐĂNG KÝ (Subscribe) Kênh để ủng hộ và nhận được video mới nhất nhé
  • Link: https://youtu.be/7eRIXxgckrU
Hướng dẫn tạo hiển thị Tổng số bài viết và Comment trên Blogspot

Đầu tiên các bạn đăng nhập vào Blogger

Trong phần quản trị ---> Bố cục

Ở phía thanh bên bên phải (Sidebar-right) --> Thêm tiện ích --> HTML/JavaScript

  1. Nhập tiêu đề
  2. Dán đoạn code bên dưới vào phần nội dung
<script style="text/javascript">
function showpostcount(json) {
document.write('<left>Tổng Số bài Viết: <b>' + parseInt(json.feed.openSearch$totalResults.$t,10)
+ '</b></center>');}</script>
<script src="
http://www.nguyentruongson.info/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>
<p>
<script style="text/javascript"></script>
<script style="text/javascript">
function numberOfComments(json) {
document.write('<left>Tổng Số Comment: <b>' + json.feed.openSearch$totalResults.$t +
'</b></center>');}</script>
<script src="
http://www.nguyentruongson.info/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>
  • Thay dòng màu vàng theo ý thích của các bạn nhé
  • Thay dòng màu xanh bằng trang Blogspot của các bạn

Bấm Lưu để hoàn tất

Kéo sắp xếp Widget theo vị trí mong muốn

Bấm Lưu sắp xếp để hoàn tất

Bấm Xem blog để xem kết quả ^^

Để xem thêm các thủ thuật Blogger bạn bấm vào "Blogger" trên thanh menu nhé!
P/s: đoạn code được sưu tầm trên mạng,

Monday, August 1, 2016

Hướng dẫn tạo bộ nút Social Network cho Blogspot

Hôm nay Sơn Nguyễn sẽ chia sẽ với các bạn cách tạo bộ nút Social Network cho Blogspot

Bộ Social Network này gồm 3 nút: Facebook, G+ và Twitter là 3 Mạng xã hội khá phổ biến hiện nay



Bộ Socila Network này được thiết kế theo dạng Floating gồm 1 hàng dọc nằm 1 bên của trang Blogspot/website của bạn, đã được Fix đứng im và trượt theo trang web khi bạn kéo xuống ko gây nhức mắt cho đọc giả của bạn

Socila Network Floating


Video hướng dẫn tạo bộ nút Social Network cho Blogspot

Video đã bị xóa theo kênh cũ. Vào kênh mới trong phần contact

Cách tạo bộ nút chia sẽ liên kết các mạng xã hội Social Network cho Blogspot như sau:

Truy cập vào Blogger --> Đăng nhập bằng tài khoản Gmail của bạn

Trong phần quản trị Blogspot --> Bố cục --> Chọn bất kỳ mục nào và +Thêm tiện ích --> Chọn HTML/JavaScript

Phần tiêu đề: các bạn để trống

Phần nội dung: các bạn dán đoạn code này vào

<style type="text/css">
#Share {position:fixed; top:35%; left:0%; background-color:#2AA4CF;padding:2px;z-index:10;border-bottom-right-radius:5px;border-top-right-radius:5px;}
#Share .Sharebutton {float:left;clear:both;}
</style>
<div id='Share'>
<div style="margin:4px;">
<div class='Sharebutton' id='facebook'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script>
<fb:like layout='box_count' show_faces='false'></fb:like>
</div>
<br />
<div class='Sharebutton' id='google'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div class='Sharebutton' id='twitter'>
<a class="twitter-share-button" href="https://twitter.com/share" data-count="vertical"> Tweet </a>
<script type="text/javascript" async src="//platform.twitter.com/widgets.js"></script>
</div>
</div>
</div>

Bấm Lưu để hoàn tất

Các bạn tự chiêm ngưỡng thành quả của mình nhé ^^

Để xem thêm các thủ thuật Blogger bạn bấm vào "Blogger" trên thanh menu nhé!
P/s: đoạn code được sưu tầm trên mạng,

Friday, July 29, 2016

Hướng dẫn thiết kế Website bằng WordPress miễn phí - Theme Sydney

Hôm nay Sơn Nguyễn sẽ hướng dẫn thiết kế Website bằng WordPress miễn phí với Theme Sydney.

Bài viết hướng dẫn từng bước cụ thể, có nhiều hình ảnh minh họa rõ ràng và có Video hướng dẫn chi tiết





Để thiết kế Website Wordpress bạn cần chuẩn bị
  1. Domain (tên miền/địa chỉ của Website)
  2. Hosting (lưu trữ/ chứa nội dung của website)
  3. Install WordPress (WordPress đã cài đặt cơ bản)
  4. Thiết kế Website (Cấu hình cài đặt Website)

Bước 1+2: Hướng dẫn mua Hosting khuyến mãi 50% + Free Domain


Bước 4: Thiết kế Website bằng WordPress - Theme Sydney (Cấu hình cài đặt Website)

Video Hướng dẫn thiết kế Website bằng WordPress miễn phí - Theme Sydney

Video đã bị xóa theo kênh cũ

Subscribe kênh mới tại link https://www.youtube.com/channel/UCry2i_oQ_zmz2fZLCwjHOKQ

Hướng dẫn thiết kế Website bằng WordPress - Theme Sydney

Do đã có video hướng dẫn chi tiết cụ thể rồi nên mục bài viết này Sơn Nguyễn sẽ tổng quan lại các bước thiết kế Website WordPress. Mặc dù vậy cũng rất chi tiết từng bước ko thua kém gì Video hướng dẫn (vì hình ảnh hướng dẫn minh họa quá nhiều nên sẽ cập nhật sau)

Cài Theme cho Website

Appearance --> Theme --> Add New


Search tìm Theme Sydney --> Install để cài đặt --> Activate để hoàn tất




Tiếp theo bạn click vào Begin installing plugins



Tick vào Plugin để chọn tất cả

Mục Bulk Actions: chọn Install --> Apply



Sau đó bạn click vào Return to Required Plugins Installer



Tick ô Plugin để chọn tất cả

Mục Bulk Actions: chọn Activate --> Apply



Cài đặt Plugin cho website

7 Plugin cần phải cài đặt
  1. Black Studio TinyMCE Widget
  2. Contact From 7
  3. Easy Facebook Likebox
  4. Recent Posts Widget Extended
  5. SiteOrigin Widgets Bundle
  6. Theme Junkie Custom CSS
  7. Lightbox Plus Colorbox

Đầu tiên, bạn vào phần quản trị website --> Plugins --> Add New



Search tìm Widget Black Studio TinyMCE Widget

Bấm Install Now để cài đặt --> Bấm Activate Plugin để hoàn tất




Bấm Add New để cài Widget tiếp theo



Search tìm Widget Contact From 7

Bấm Install Now để cài đặt --> Bấm Activate Plugin để hoàn tất



Bấm Add New để cài Widget tiếp theo

Search tìm Widget Easy Facebook Likebox

Bấm Install Now để cài đặt --> Bấm Activate Plugin để hoàn tất



Bấm Add New để cài Widget tiếp theo

Search tìm Widget Recent Posts Widget Extended

Bấm Install Now để cài đặt --> Bấm Activate Plugin để hoàn tất



Bấm Add New để cài Widget tiếp theo

Search tìm Widget SiteOrigin Widgets Bundle

Bấm Install Now để cài đặt --> Bấm Activate Plugin để hoàn tất



Bấm Add New để cài Widget tiếp theo

Search tìm Widget Theme Junkie Custom CSS

Bấm Install Now để cài đặt --> Bấm Activate Plugin để hoàn tất



Bấm Add New để cài Widget tiếp theo

Search tìm Widget Lightbox Plus Colorbox

Bấm Install Now để cài đặt --> Bấm Activate Plugin để hoàn tất


Bấm Add New để cài Widget tiếp theo

Search tìm Widget Digg Digg

Bấm Install Now để cài đặt --> Bấm Activate Plugin để hoàn tất

Bấm Add New để cài Widget tiếp theo

Search tìm Widget Yoast SEO

Bấm Install Now để cài đặt --> Bấm Activate Plugin để hoàn tất


Tạo trang Home cho Website

Trong phần quản trị --> Pages --> Add New



Đặt Tiêu đề cho trang: Home--> Mục Template: chọn Front Page --> Publish



Tiếp tục Add New trang mới --> đặt Tiêu đề là Blog --> Publish --> Update

Cài đặt trang Home

Trong phần quản trị --> vào Appearance --> Customize



Kéo xuống chọn Static Front Page




Front page displays: chọn A static page

Front page: chọn Home

Posts page: chọn Blog

--> Save & Publish



Bấm quay trở ra --> chọn Header area




Trong mục Header type

Front page header type: chọn Full screen slide

Site header type: chọn No header (only menu)



Header Slides

Slider speed: tốc độ hình ảnh của slide (cứ để mặc định)



FIRST SLIDE

Tiến hành up hình ảnh cho Slide đầu tiên --> Select Image --> Upload Files --> Select Files để up hình từ máy tính của bạn



Sau khi up hình cho Sile 1 lên, bạn tiến hành thay đổi Tiêu đề và mô tả cho hình ảnh Slide 1 ở 2 dòng:

Title for the first slie: Tiêu đề cho Slide 1
Subtitle for the first slide: mô tả cho Slide 1



Làm tương tự cho các Slide còn lại (Theme này có tổng cộng là 5 Slide)

Sau khi hoàn tất 5 Slide, bạn thay đổi CALL TO ACTION BUTTON

URL for your call to action button: đường link website của bạn (có thể đưa đường link chi tiết đến 1 trang nào đó của website)

Text for your call to action button: lời kêu gọi hành động

Sau đó bấm Save & Publish để hoàn tất



Tiếp theo, bạn trở ra ngoài phần Customize lúc nãy --> chọn Fonts




Body font size = 16 --> Save & Publish

Tiếp theo, chúng ta thay đổi phần Colors




Primary color = #838383

Menu background = #838383

Màu của Call to Action button đã thay đổi --> Save & Publish

Tiếp theo, cài đặt cấu hình cho Blog options




Blog layout: chọn Masonry (gird style)

Exerpt lenght: chọn 20 --> Save & Publish




Như vậy là xong phần này. Bạn có thể xem thành quả của bạn làm từ lúc nãy đến giờ ^^

Tiếp tục thiết kế website nào

Thay đổi logo, icon cho website

Bạn vào mục Site title/tagline/logo


Tiến hành thay đổi Site Title, Tagline cho website (Phần tagline có thể ko cần)

Nếu bạn có logo thì chọn Select Image để up logo lên thay cho Site Title và Tagline



Bạn cũng có thể thay Site Icon cho website nếu muốn (Site Icon là những hình ảnh nhỏ nằm trên thanh trình duyệt khi bạn truy cập vào website)

Nếu bạn ko có logo, hoặc bạn ko biết thiết kế logo thì bạn vào trang logomarkr.com để lấy logo nhé

Cấu hình Our Services

Quay trở lại phần quản trị website --> Services --> Add New Service



Nhập tiêu đề và nội dung vào



Trong phần Service info --> chọn Service icon bằng cách bấm vào here --> sẽ có rất nhiều icon để bạn chọn, bạn chỉ càn copy tên icon và past vào ô Service icon là xong




Bạn nhớ tạo thêm Categories xong mới bấm Publish nhé



Tiếp tục bấm Add New Service để tạo thêm 2 Service nữa. Cũng làm tương tự như Service đầu (nhớ tick 2 Service này vào Categories lúc nãy nhé)



Sau đó bấm vào All Service, kiểm tra xem 3 Service có cùng Categories ko?



Sau đó tiến hành cấu hình OUR SERVICE

vào Pages --> Home --> Page Builder --> Add Row (Set row layout = 1) --> Insert





Bấm vào Row để chọn Row, sau đó bấm +Add Widget



Chọn cài Widget: Sydney FP: Services Type A



Sau đó bấm Edit



Đặt Title cho Service

Nhập Categories của 3 Service vừa tạo lúc nãy (nhớ nhập đúng Categories nhé)

Bấm Done


Bấm Update

Xem thành quả của bạn nào



Thay màu chữ cho Service

Vào Customize --> Colors --> Body text: bạn chọn màu đen (mã màu #000000)

--> Save & Publish

TẠO NÚT CALL TO ACTION

Trong phần quản trị --> Pages --> Home --> Add Row

Set row layout = 1 ---> bấm Insert

Sau đó chọn Edit Row


--> bấm vào Theme

Top/bottom padding = 50

Background Image --> chọn hình ảnh làm hình nền (background)

Row Layout: chọn Full With

--> Bấm Done để hoàn tất




Bấm vào Row để chọn Row --> +Add Widget



Chọn Widget: Layout Builder



Sau đó bấm Edit --> Add row




Set row layout =1 --> Insert

Sau đó chọn +Add Widget


---> chọn Widget Text


--> Edit


--> nhập Title vào ---> bấm Done



Bấm Edit Row



--> Theme -->

Top/bottom padding = 0
Color: #d838383
--> Done

Tiếp tục Add Row nữa



Set row layout = 2 ---> Insert

Bấm chọn Row 1 --> +Add Widget


--> chọn Widget: Sydney FP: Call to action


Sau đó bấm Edit


Title: ko nhập gì cả

Enter your call to action: Nhập thông điệp kêu gọi hành động của bạn

Link for the button: Nhập đường link website của bạn vào, có thể nhập link đến thẳng 1 trang nào dó của bạn

Title for the button: nhập tiêu đề cho nút keu gọi hành động

Mục Attributes

CSS Style: background-color: rgba(0,0,0,3)

--> Done



Làm tương tự cho row 2



Sau đó bấm Edit row --> Theme --> Top/bottom padding = 0

--> Done

--> Update

Xem thành quả nào


Tiếp theo, tiến hành cài đặt LATEST NEWS gồm 6 blog

Trong phần quản trị --> Pages --> Home --> Add row (set row layout = 1)

Kéo sắp xếp lại row

Bấm vào Row để chọn Row --> +Add Widget

Vào Sydney Theme Widgets --> Sydney FP: Latest News --> Update



Lúc này phần LATEST NEWS vẫn chưa có gì



Cài đặt Call To Action

Bây giờ tiến hành làm Call To Action ở phía dưới Latest News Và thêm các liên kết Mạng xã hội (Facebook, Twtter, G+....)

Trong phần quản trị --> Pages --> Home --> Add row (set row layout = 1)

Kéo sắp xếp lại row

Bấm vào Row để chọn Row --> +Add Widget

Vào Sydney Theme Widgets --> Sydney FP: Call to action

Bấm Edit

Title: ko nhập gì cả

Enter your call to action: Nhập thông điệp kêu gọi hành động của bạn

Link for the button: Nhập đường link website của bạn vào, có thể nhập link đến thẳng 1 trang nào dó của bạn

Title for the button: nhập tiêu đề cho nút keu gọi hành động

Nhớ tick ô Display the button inline with the text?



Sau đó Edit row --> Theme -->

Top/bottom padding = 0

Background Color #232323

Row layout: Full Width

--> Done

--> Update

Kiểm tra thành quả nào



Tiếp theo, cài đặt cấu hình Social Network các liên kết mạng xã hội cho website

Trong phần quản trị --> Pages --> Home --> Add row (set row layout = 1)

Kéo sắp xếp lại row

Bấm Update

Tiếp theo vào Plugins --> SiteOrigin Widgets



--> Disabled --> Activate hết toàn bộ các Plugin ở đó




Trong phần quản trị --> Pages --> Home

Bấm vào Row lúc nãy để Edit Row --> Theme

Top/bottom padding = 10

Background Color #191919

Row Layout: Full Width

--> Done

Bấm vào Row để chọn Row --> +Add Widget

Chọn Widget: SiteOrigin Social Media Buttons



Edit --> Netwworks --> bấm Add --> Click Select network --> Select network



Tiến hành chọn các Network (phần đuôi của các netword bạn thêm địa chỉ tài khoản của mình nhé)

Ví dụ: với Facebook thì mình sẽ thêm là: http://facebook.com/nguyentruongson.org (Fanpage của mình)

Nếu bạn có cài đặt network là Email, phần URL các bạn điền: “mailto:địa chỉ mail của bạn”

Ví dụ: của Sơn Nguyễn sẽ là: mailto:contact@nguyentruongson.info hoặc mailto:sontruongnguyen.83@gmail.com

Phần Background color sẽ mặc định tự động màu của các Social Media, nhưng chúng ta nên dùng chung 1 màu thôi (#232323)

Sau đó bạn tiến hành Design and layout

Button theme: Flat

Padding: Low

Align: Center

--> Bấm Done để hoàn tất


--> Update

Kiểm tra thành quả nào



Như vậy là bạn đã cài đặt cấu hình xong phần trang Home của website rồi


Cấu hình trang About Us

Tiếp theo, chúng ta làm 1 trang About Us nội dung gồm:

Hình ảnh + nội dung giới thiệu + video giới thiệu (nếu có). Bên phải có thanh sidebar gồm Fanpage, các bài viết mới nhất (tin tức chẳng hạn)

Có thể tạo thêm 1 Call to action và 1 liên kết với mạng xã hội như lúc nãy

Trong phần quản trị --> Pages --> Add New để tạo trang About Us.

Phần Page Attributes, mục Template: chọn Fronpage --> Publish



Sau đó bấm Page Builder


--> Add row (set row layout = 1)

Bấm chọn row --> +Add Widget --> chọn Widget: Visual Editor



Thêm Widget xong, bấm Edit

Title: About Us

Nội dung: nhập nội dung giới thiệu của bạn vào + thêm hình ảnh + thêm video vào

Cách chèn video vào website WordPress

Bạn vào YouTube tìm 1 video nào đó, kéo xuống phía dưới bấm vào Chia sẻ, chọn Nhúng và Copy toàn bộ mã code lại. Sau đó quay lại website, trong phần soạn nội dung, bạn chuyển bài viết qua chế độ Text và paste đoạn code bạn vừa copy ở YouTube vào là xong

Sau đó bạn chuyển bài viết quay lại chế độ Visual để xem và tiếp tục soạn nội dung

Sau khi hoàn tất nội dung --> bấm Done

Tiếp theo chọn Edit row --> Theme

Top/bottom padding = 40

Row Layout: chọn Full Width

--> bấm Done để hoàn tất

--> Update

Bấm View page để xem kết quả

Tiếp theo Trong phần quản trị --> Pages --> About Us --> Add row (set row layout = 1)

Kéo sắp xếp lại row

Bấm Edit row --> Theme

Top/bottom padding = 30

Background Color: #d85050

Row Layout: chọn Full Width

--> bấm Done để hoàn tất

--> Update

Bấm chọn row --> +Add Widget --> trong phần Sydney Theme Widgets --> chọn Widget: Sydney FP: Facts



Thêm Widget xong, bấm Edit

Fist fact nam: Projects

First fact value: (số khách hàng đã mua sản phẩm/đã dùng dịch vụ)

First fact icon: bấm here để chọn

Làm tương tự cho 3 Facts còn lại

Sau đó, phần Widget Style, bạn vào Design

Font Color: chọn màu trắng

--> Done

-->Update

--> View page để xem kết quả



Tiếp theo Trong phần quản trị --> Pages --> About Us --> Add row (set row layout = 1)

Kéo sắp xếp lại row

Bấm Edit row --> Theme

Top/bottom padding = 30

Background Color: #232323

Row Layout: chọn Full Width

--> bấm Done để hoàn tất

Bấm chọn row --> +Add Widget --> trong phần Sydney Theme Widgets --> chọn Widget: Sydney FP: Call to action



Thêm Widget xong, bấm Edit

  1. Nhập thông điệp của bạn 
  2. link trang website của bạn 
  3. đặt tiêu đề cho nút kêu gọi hành động

--> Done



--> Update

--> View page để kiểm tra



Tiếp tục làm Social Network Button (làm tương tự như lúc nãy nhé)

Tiếp theo Trong phần quản trị --> Pages --> About Us --> Add row (set row layout = 1)

Kéo sắp xếp lại row

Bấm Edit row --> Theme

Top/bottom padding = 10

Background Color: #191919

Row Layout: chọn Full Width

--> bấm Done để hoàn tất

Bấm chọn row --> +Add Widget --> chọn Widget: SiteOrigin Social Media Buttons



Thêm Widget xong, bấm Edit --> thêm các Social network vào (dùng Background Color là #232323 nhé)

--> Done

--> Update

--> View page để kiểm tra



Căì đặt trang MEET OUR TEAM

Tiếp theo sẽ thiết kế mục MEET OUR TEAM (danh sách nhân sự công ty/nhân viên bán hàng....)

Đây là phần bạn đưa hình ảnh và thông tin của nhân sự công ty/nhân sự đội nhóm bán hàng vào đây để khách hàng thấy và liên hệ (nếu có)

Trong phần quản trị --> Employees --> Add New Employee



Nhập họ tên nhân viên vào mục tiêu đề

Mục Employee info

Employee position: nhập chức danh hoặc số điện thoại vào (nếu là đội ngũ bán hàng thì nên nhập số điện thoại)

Có thể thêm các thông tin khác (nếu muốn)

Sau đó Up hình nhân sự lên (trong phần Featured Image)

Tiếp theo: +Add New Category (phần này quan trọng). Mỗi nhân sự sẽ là 1 Category khác nhau (bạn có thể đánh dấu theo employee1, employee2,employee3.... hoặc ns1, ns2, ns3 ...để dễ quản lý).

Bấm Publish để hoàn tất

Bấm Add New Employee để thêm mới

Bạn có bao nhiêu nhân sự thì làm bấy nhiêu “hồ sơ”

--> Update

--> All Employees để kiểm tra toàn bộ nhân sự mình đã tạo hồ sơ. Nhớ là mỗi nhân sự là 1 Category khác nhau nhé (giống như mỗi nhân viên có 1 mã số nhân viên khác nhau vậy đó)



Tiếp theo trong phần quản trị ---> Pages --> Add New

Nhập tiêu đề: Nhân sự công ty/Đội ngũ bán hàng/ Sale Team .....v...v...

Page Attributes, mục Template: chọn Front Page

--> Publish

--->bấm Page Builder --> Add Row (set row layout = 1)

Bấm chọn row --> Add Widget --> chọn Visual Editor



--> Edit --> Đặt tiêu đề cho Widget --> Done

Bấm Edit row --> Theme

Top/bottom padding = 40

--> bấm Done để hoàn tất

Tiếp tục Add Row (set row layout = 1)

Bấm Edit row --> Theme

Top/bottom padding = 30

--> bấm Done để hoàn tất

Bấm chọn row --> Add Widget --> trong mục Sydney Theme Widgets --> chọn Sydney FP: Employees



--> Edit

--> Number of employees to show: chọn số cột cho danh sách nhân sự (Ví dụ: nếu bạn có 9 nhân sự và chia làm 3 cột thì bạn nhập số 3 vào ô)

Enter the slug for your category or leave empty to show all employees: nhập category của nhân sự vào. Nếu ở trên bạn nhập số bao nhiêu thì ở đây bạn nhập tương ứng category vào (cách nhau bởi dấu phẩy)

--> Done để hoàn tất

--> Add Row để tiếp tục.

Làm tương tự cho đến khi nhập đủ số nhân sự của bạn vào là xong (Ví dụ: bạn có 9 nhân sự và chia làm 3 cột 3 hàng thì bạn làm thêm 2 lần nữa là xong)

--> bấm View page để xem kết quả



Tiếp theo bạn tạo thêm 2 row nữa: Call to action và Social button (phần này các bạn tự làm nhé)



Tạo trang Image Gallery

Pages --> Add New

Đặt tiêu đề cho trang

Mục Page Attributes, phần Template: chọn Front Page --> Publish

--->bấm Page Builder --> Add Row (set row layout = 1)

Bấm chọn row --> Add Widget --> chọn Visual Editor



--> Edit --> Đặt tiêu đề cho Widget --> Phần nội dung bấm Add Media ---> Create Gallery ---> Upload Files --> Select Files --> Chọn hình ảnh để Up lên --> Create a new gallery

Bạn có thể đặt tên cho hình ảnh sản phẩm của mình

Phần Gallery Settings, mục Link To: chọn Media File

Chọn cột cho Gallery

--> Update gallery

--> Update

--> View page để xem kết quả

Nếu hình ảnh bị dính liền với nhau giữa 2 dòng thì bạn làm như sau

Trong phần quản trị --> Appearance --> Lightbox Plus Colorbox



Bạn kéo xuống phía dưới, tick vào ô Use For WordPress Galleries ---> Save all settings



Sau đó kiểm tra lại kết quả ^^

Bạn có thể làm thêm 2 row nữa nếu muốn: Call to action và Social button (phần này các bạn tự làm nhé)



Cài đặt cấu hình trang Contact Us

Pages --> Add New

Đặt tiêu đề cho trang

Mục Page Attributes, phần Template: chọn Front Page --> Publish

--->bấm Page Builder --> Add Row (set row layout = 1)

Bấm chọn row --> Add Widget --> chọn Visual Editor

--> Edit --> Đặt tiêu đề cho Widget --> Done

Bấm Edit row --> Theme

Top/bottom padding = 40

Row Layout: chọn Full Width

--> bấm Done để hoàn tất

--> Update

Add Row (set row layout = 2, phân vùng 70/30)



Bấm Edit row --> Theme

Top/bottom padding = 20

Row Layout: chọn Full Width

--> bấm Done để hoàn tất

Bấm chọn row 1 --> Add Widget --> chọn Visual Editor

--> Edit --> Đưa thông tin liên hệ của bạn vào phần nội dung

Cấu hình địa chỉ Email để khi khách hàng click vào là sẽ tự động gửi đến mail của mình

Chuyển chế độ soạn thảo qua Text

phần địa chỉ Email của bạn bạn sửa lại như sau:

<a href=”mailto:email của bạn”>email của bạn

Ví dụ: <a href=”mailto:contact@nguyentruongson.info”>contact@nguyentruongson.info

Chuyển bài viết về chế độ Visual

Enter xuống 2 lần --> bấm Horizontal line để tạo dòng kẻ ngang

--> Done

Bấm chọn row 1 --> Add Widget --> chọn SiteOrigin Google Maps



Edit

Map center: nhập địa chỉ của bạn

Map type: chọn Static image (Width = 640, Height = 250)

--> Done



Bấm chọn row 2 --> Add Widget --> chọn Visual Editor

--> Done

--> Update



sau đó, trong phần quản trị ---> Contact ---> chọn Contact form 1



Copy đoạn code --> bấm Save



Quay lại Pages --> Contact Us --> Edit --> Edit Widget row 2



Chuyển qua chế độ Text --> Paste đoạn code lúc nãy vào --> bấm Done để hoàn tất



--> Update

--> View page xem kết quả



Bạn tự thêm Row “Social Network” phía dưới nữa nhé ^^

Cài đặt cấu hình trang BLOG

Xóa bài viết mặc định của web đi --> bấm Thrash để xóa

Posts --> Add New

Tiến hành viết bài, up hình, up video ....

--> Publish



--> Add New để tạo thêm bài viết mới cho Blog

--> All post

Bấm Title để chọn tất cả bài post --> Bulk Actions: chọn Edit --> Apply



Ở dưới phàn Comment: chọn Allow để cho phép người đọc comment bình luận bài post của mình

--> Update



--> View page xem kết quả


Tạo Sidebar cho Blog

Khi bấm vài bài post sẽ thấy Sidebar phía bên phải, gồm: Fanpage và các bài post mới nhất

Appearance --> Widgets --> bấm vào các Widget và xóa đi



Sau khi xóa hết các Widget sẵn có, bạn tìm Widget Easy Facebook Likebox và kéo vào Sidebar --> điền địa chỉ Fanpage của bạn vào

bạn kéo xuống dưới, tick vào ô Responsive --> Save

Sau đó bạn tìm Widget Rêcnt Posts Extended và kéo vào Sidebar

Tiến hành điều chỉnh 1 vài thông số

Thumbnaiil (height,width,align): 75-75

Tick vào ô: Display Excerpt

Excerpt Lenght = 8

--> Save

Vậy là xong

Vào Customize --> Color --> Sidebar color: đổi qua màu đen

--> Save & Publish

Vào Pages --> Blog --> view

Cấu hình Menu ngoài Trang chủ (trang Home)

Vào Appearance --> Menus --> create a new menu

Menu name: Header Menu --> Create menu

tick ô: Primary Menu --> Save Menu

Sau đó tick chọn những menu chính sẽ xuất hiện ngoài trang chủ --> Add to Menu

Sắp xếp các Menu lại theo thứ tự

--> Save Menu

Kiểm tra kết quả

Nếu trong quá trình làm bạn có vấn đề gì cần giải đáp thì bạn hãy comment phía dưới, mình sẽ hỗ trợ thêm

Chúc các bạn thành công!

Hãy chia sẽ cảm xúc của bạn khi lần đầu làm chuyện ấy nhé ^^