Được tạo bởi Blogger.
Home » Wap/Web master


Hôm nay mình sẽ share bản đã fix lỗi và chỉnh sửa

[Share] Template Mobile Blogger Đẹp (Fix Vỡ Khung)
Demo Online: [Demo]
Hướng dẫn:

Cách 1:
Mẫu -> Sao lưu/ khôi phục -> import template có đuôi .xml
Cách 2:
Mở file .xml ra copy hết code trong đó vào
Mẫu -> Chỉnh sửa HTML -> Click vào ô Mở rộng mẫu tiện ích -> xóa hết code có trong đó đi -> Post hết code vừa copy ở file .xml vào
Tìm đến:

<script src=\"/feeds/posts/default/-/Teen Story?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>

Teen Story là tên label mà nó sẽ lấy bài viết hiển thì ở index
Note:
Đây là template mình lấy trên mạng từ các nguồn khác nhau mình chỉ edit lại cho đẹp và tối ưu hóa seo 1 chút thôi 
Nguồn: Sâu Ciu Blog 


Demo hình ảnh


Link trực tiếp : Demo

1. Cách tạo chuyên mục

+ Tạo thư đúng vị trí đúng tên đường dẫn. (ví dụ: thong-bao)
+ Trong thư mục vừa tạo tạo các file namecat.txt (ghi tên chuyên mục vào vd: Thông báo), tạo
file mota.txt thêm mô tả (không cần cũng đc), tạo file index với nội dung trong file tải về. Nhớ là...thay$type và $cat cho phù hợp. $type =1,2,3,4 tùy nhưng phải đúng. Ví dụ, trong file tải về, thong-bao type 1, thong-bao/test type 2

2. Post bài viết

+ Tạo file .html trong thư mục của chuyên mục, và ghi nội dung như trong file tải vềm nhớ chỉnh sửa$type (1 cái này thôi là đc).
+ Trong các thư mục TL (title), DATE, ND (nội dung), đặt tên cho phù hợp nhớ. Ví dụ bài test-cai-nao.html trong thư mục thong-bao thì trong các thư mục trên mình đổi thành thong-bao._.test-cai-nao.txt. Điền nội dung cho phù hợp. Trong thư mục ND thì nhớ chỉ sử dụng Html

[Tải xuống] (5.11 KB)

Đầu tiên mình xin nói trước đây là bản template mình tìm được có nguồn ở trên mạng, nhưng đã bị mã hóa bản quyền, mình chỉ mang về xóa bản quyền đi, rồi share cho anh em sử dụng thôi :D
Một Số hình ảnh 
Giao Diện Web
[Share] Template Blogger Giao Diện Wap/Web

Giao Diện Mobile
[Share] Template Blogger Giao Diện Wap/Web

[Share] Template Blogger Giao Diện Wap/Web

Demo Online: [Demo]
Hướng dẫn:

Cách 1:
Mẫu -> Sao lưu/ khôi phục -> import template có đuôi .xml
Cách 2:
Mở file .xml ra copy hết code trong đó vào
Mẫu -> Chỉnh sửa HTML -> Click vào ô Mở rộng mẫu tiện ích -> xóa hết code có trong đó đi -> Post hết code vừa copy ở file .xml vào
Sau đó vào Mẫu -> Tùy chỉnh mẫu di động -> Đánh dấu vào ô Không. Hiển thị mẫu dành cho máy tính trên điện thoại di động.

– Trước đây mình đã có chia sẻ cùng các bạn code để tạo quảng cáo dưới dạng popup, tức là một cửa sổ mới sẻ hiện ra khi bạn click vào bất kỳ vị trí nào trên web/blog. Tuy nhiên với các code trước đây cũng có nhiều ưu và nhược điểm như số lần xuất hiện cửa sổ quá nhiều hay xuất hiển chỉ lần click đầu tiên... Hôm nay mình chia sẻ thêm cho các bạn 1 đoạn script nữa cũng nhằm tạo quảng cáo dưới dạng popup cho Blogspot của mình để bạn có thể lựa chọn phù hợp với mục đích của site mình. 

Ở code này thì quảng cáo hay cửa sổ popup chỉ xuất hiện 1 lần/1 ngày/1 IP nhất định. Nên nếu bạn muốn tránh gây phiền hà và bực bội cho khách truy cập của mình thì mình nghĩ tốt nhất bạn nên dùng cách hiển thị kiểu này sẽ chạy quảng cáo tốt hơn.

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Tìm đến thẻ <body> và thay thế thành như bên dưới 

<body onclick='popunder();'>

<script>
/* <![CDATA[ */
function Set_Cookie(a,b,c,e,f,g){var d=new Date;d.setTime(d.getTime());d=new Date(d.getTime()+c);document.cookie=a+"="+escape(b)+(c?";expires="+d.toGMTString():"")+(e?";path="+e:"")+(f?";domain="+f:"")+(g?";secure":"")}function Get_Cookie(a){var b=document.cookie.indexOf(a+"="),c=b+a.length+1;if(!b&&a!=document.cookie.substring(0,a.length)||-1==b)return null;a=document.cookie.indexOf(";",c);-1==a&&(a=document.cookie.length);return unescape(document.cookie.substring(c,a))} function Delete_Cookie(a,b,c){Get_Cookie(a)&&(document.cookie=a+"="+(b?";path="+b:"")+(c?";domain="+c:"")+";expires=Mon, 11-November-2020 00:00:01 GMT")}
function popunder(){null==Get_Cookie("cucre")&&(Set_Cookie("cucre","cucre Popunder","1","/","",""),
pop=window.open("http://www.xiteen.mobi","windowcucre"),
pop.blur(),window.focus())}function addEvent(a,b,c){a.attachEvent?a.attachEvent("on"+b,c):a.addEventListener?a.addEventListener(b,c,!0):a["on"+b]=c} addEvent(window,"load",function(){addEvent(document.body,"click",function(){popunder()})});
/* ]]> */</script>

Bạn thay địa chỉ http://www.xiteen.mobi ở trên thành địa chỉ web/blog mà bạn muốn chạy quảng cáo.

5. Cuối cùng bạn save template lại

Xem thêm bài viết "Mở nhiều cửa sổ popup khi click chuột vào vị trí bất kì trên web/blog"

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


Bạn lướt web nhiều đôi khi bạn thấy một số site hay sử dụng 1 số từ khóa và chèn link vào đến 1 bài viết hay 1 chủ đề nào đó có liên quan trong bài viết đang xem. Dĩ nhiên điều đó bạn có thể chèn thủ công trong lúc soạn thảo bài viết đó để người xem click tới bài viết liên quan đó. Tuy nhiên nếu bạn muốn đặt link cho 1 từ khóa mà thường xuyên lặp lại trong nội dung bài viết của bạn và liên quan đến nội dung web/blog bạn cung cấp rất nhiều, bạn muốn đánh dấu, đặt link cho từ khóa đó thì việc làm thủ công sẽ mất cho bạn khá nhiều thời gian. Để giải quyết vấn đề đó thì hôm nay mình chia sẻ cho các bạn một thủ thuật sẽ tự động add link cho các từ khóa mà bạn đã thiết lập trước. Khi bạn đã thiết lập từ khóa và link dẫn cho từ khóa đó trước thì nếu bất kỳ bài viết nào trong web/blog của bạn có từ khóa đó thì nó sẽ được tự động được thêm link và đường dẫn bạn thiết lập cho nó.

Thủ thuật: Chèn link tự động vào các từ khóa trong bài viết cho Blogspot

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
5. Chèn code bên dưới ngay trước thẻ </head>
<script type='text/javascript'>
//<![CDATA[
function doHighlight(a,c,f){for(var d="",b=-1,g=c.toLowerCase(),e=a.toLowerCase();0<a.length;)b=e.indexOf(g,b+1),0>b?(d+=a,a=""):a.lastIndexOf(">",b)>=a.lastIndexOf("<",b)&&e.lastIndexOf("/script>",b)>=e.lastIndexOf("<script",b)&&(d+=a.substring(0,b)+'<a title="'+a.substr(b,c.length)+'" alt="'+a.substr(b,c.length)+'" href="'+f+'">'+a.substr(b,c.length)+"</a>",a=a.substr(b+c.length),e=a.toLowerCase(),b=-1);return d} function highlightSearchTerms(a,c,f,d){searchArray=c?[a]:a.split(" ");div=document.getElementById(d);a=div.innerHTML;for(c=0;c<searchArray.length;c++)a=doHighlight(a,searchArray[c],f);div.innerHTML=a;return!0};
//]]>
</script>

6. Tìm đến đoạn code như bên dưới
<data:post.body/>

7. Thay thế đoạn code vừa tìm được thành đoạn code sau
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
highlightSearchTerms('Từ khóa 1',true,'Link cho từ khóa 1','summary<data:post.id/>');

highlightSearchTerms('Từ khóa 2',true,'Link cho từ khóa 2','summary<data:post.id/>');

highlightSearchTerms('Từ khóa 3',true,'Link cho từ khóa 3','summary<data:post.id/>');
</script>

Bạn thay từ khóa và link cho các từ khóa tương ứng. Nếu bạn muốn thêm hay bớt từ khóa thì chỉ cần copy hay xóa bỏ đoạn code highlightSearchTerms('Từ khóa 1',true,'Link cho từ khóa 1','summary<data:post.id/>'); và chỉnh sửa lại cho hợp lý là được.

8. Cuối cùng save template lại

Bây giờ bạn hãy truy cập vào bất kỳ 1 bài viết mà có chứa từ khóa bạn đã thiết lập ở trên để thấy kết quả nhé. Đây là một cách khá hay giúp bạn đặt link cho từ khóa quan trọng khá nhanh và góp phần nào vào việc SEO cho từ khóa  bạn.

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

Với thủ thuật hiển thị biểu tượng (icon) phía trước link của từng loại tập tin mình nhớ đã có 1 bạn giới thiệu, tuy nhiên vẫn còn khá nhiều bạn hỏi mình về cách này nên mình xin chia sẻ để bạn nào đang cần có thể áp dụng. Với thủ thuật này thì bạn dễ dàng hiển thị được các biểu tượng tương ứng với từng loại file bạn đặt link, và thủ thuật rất hữu ích với các site chèn link . Với đoạn css bên dưới nó sẽ tự động nhận dạng ra loại file bạn chèn vào link và hiển thị biểu tượng đại diện tương ứng. Như đuôi là *.doc thì icon word, *.gif sẽ icon ảnh gif...

Hình ảnh minh họa
Tự động nhận dạng và thêm biểu tượng trước link của từng loại tập tin trong Blogspot

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
a[href*='.js'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif2wKbctQLkzGsmOqIBoDU50OYzdf0wKHtoz9rtOuBqZqyZqyh8bO6O5MfJbI24gdI6Jka5Ai4ycG61gr8t-AP3EZPJPhM53VT9GHRSuyehHL2D7gZSQMjrxvq_rOQrCbZF3SUafbTego/s400/file_js.png) no-repeat 0 0; padding:7px 0 0 25px; }

a[href*='.gif'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN4amyhq2uaPoisUPGQzE4rWL9BtfcXmFHhAH6-KjymvOiMn7IlBgQdAGIXrcBD_FL4kEgdSj3CIqBGQi5BOSs-PgAg87Qgtvl5NN8LI4NQjMrEuGoIlodkFy4yMqAs6mHooLQL4_tPh4/s400/file_gif.png) no-repeat 0 0; padding:7px 0 0 25px; }

a[href*='.doc'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiUs5zt5iaX1boqRZccJroIXg3TcilG3GusGWL90MrWeOhU_jw8S77L5meAVC4DazLS2e9U0eauiolo-lieHEn6jHJKfd5PReaxE8i_mIrXzTR1gRrnwyS1_UCTjTnvOVPnjfYqKPo5Vs/s400/file_doc.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.rar'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnMO-9fSOoWjVROIH1B9lwToNyj9ANxqZdXfJ0cXFQhlxgcoc0Of3BPzb7viyEL_jjgnPaB8hp6mfTu-yykjaXMQFdyqAi8y39bxaCzNPHBzU2ARDSub1pDYK16-N7mWILOMTYalJiKAk/s400/file_rar.png) no-repeat 0px 0px;padding:7px 0 0 25px; }

a[href*='.zip'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihTHocUdqd195XhB0eNCsdwazBx_mOWXISJE7Ag94a9PfQ_cHwu2sNnt8SQd7e5b_xkilUfObZpPPnVWfHdAaCuvIaK7qbJpUw5nQu6ghRymPbW8KfUcmSqVSWUsROrKlMM810uxESqxg/s400/file_zip.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.mp4'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlFy1apZutj74vGnXybOoLPN4D05jLOvLzixNeidQPxffsMQ9AXEwpNrx8T9hdeVu2cbZcnjPunr83gNOOal9q9H9ngY2CSsWfHrYX_jLuQTY09kUHm-5bx0VbuOtEfUd8IOIZYg3axJ0/s400/file_mp4.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.php'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR0uN7xYzCHQbfmLpTzwg-DzZ_354OaQxqYj19eJZzTBbIkyKTiyTGqeuhkUd8QfF8ESdxykrK5ooLYvgXewIDwcndbE670zpqefe1CrU7qaJRbzhVP5Md6K_3jiWnQeaYXaklju32L0g/s400/file_php.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.xml'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_cHZSSnk4xcdHZ8KvCMXk5s8LzxCz1wr9xEsBtmjr10wudazL3UH4F5_3a4QEFXQTxT80DglDureoUD9HI4bjrizQdByTkEFBMhQrCOehValDPTeHOHZvjHOWsO46M0Dhliu6tbjhilU/s400/file_xml.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.pdf'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGspQ84yAjfCQswhN_tEK6O3sBr8kQ8NqROXqJ4GNxHAkpkHXarZMH2GRUaB7OnfNYcxy_M85ttzlNcz0GG69Ye-C2ztEwsblXec_sVXY7ZRWKyb9JZs1lmRER1n8A_xNS_0EMypThB9g/s400/file_pdf.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.xls'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiafU2cNwRtT9qb1zZL3ylgknckNYHUqemvh453IOxts72LWZYrOapeArcGfCEwso3PxOIG_AgQU_Psy-MOF2nJQCGFvVEOHANc4cOLG8NJv5kKLvBXN5RNu-6WzpkZSPzpyUX-dpWPmUA/s400/file_xls.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.mpg'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjybD079PM2-hwLLpRajORCXmESQVQ38rJpV9fkww4axwS9NUmtZvbP33ap0kcisLTm4ESMTzpgvoersv6oRdLoDOZ-ek7eNZJJMrd2B9vxB_xELCncwMtIXtzHzVr5Cy_3exc8vnD5_h8/s400/file_mpg.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.bmp'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4lHx8nBMXtzG_j_XR6I-Gc0OcWKpodgMLU8DeICzMS4fE3PXlo1dMsbaTpQbegC_NVvt4yeV8LiMWDexmnNkVgYC56P57N9xzaMx1swIy-A-Ed08ZSuTG7__zfK-7geDSv17YL29iZoA/s400/file_bmp.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.avi'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiif7RSl-XxvTosGNdq5QMAfb0yiVUAp-_S57a-y9-_bDsY6PubmJ9pARdxG8oyYbUIj0zqtrcRc4ZhvCj7roaNqNx4U_EeFO8Qbgvk7s4m1RUPnOER4Atc8AqZKn9sGLshrKgfwn2CxNY/s400/file_avi.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='.mp3'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyz7Fnq1DSMUYrx0bMFYD0a7jM8SgUon-aFBoK9kV1-lNEwSBKRLbAesto7eIffZZpviGPE9AduMGUGVU-qObHwAqzmpMD1U39-0ynCJmS1YTXI8QNdK3HQUfeXuNS8Xr_o2viFheqvjI/s400/audio_alt.png) no-repeat 0px 0px; padding:7px 0 0 25px; }

a[href*='mailto'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj55yLaotPD0vHsMLQUI0kdaBYTfTlC0lynFNFWvabceaAbvTajBbtCfw3IKvPtwFOzY0HpcR1_maTkQRfynL_CswJ0xe_vJKnuN49BlbuOtN-r_KCI_766ZpN-ZhcajQgSr5f3s4x1M5Y/s400/e_mail.png) no-repeat 0px 0px; padding:0 0 0 25px; }

Bạn có thể tải bộ icon về máy tại đây hoặc tại đây và  lên host của mình lấy link thay thế vào background ở trên.


Thỉnh thoảng khi lướt qua 1 số web/blog bạn thấy một hiệu ứng ảnh cũng khá thú vị đó là hiệu ứng làm mờ dần ảnh khi bạn rê chuột vào hình ảnh đó. Hiệu ứng này không đơn giản sử dụng thuộc tính opacity mà ở đây chúng ta sử dụng thư viện JQuery sẽ tạo nên một hiệu ứng thú vị hơn nhiều. Ở đây mình sẽ chia sẻ cho bạn 1 đoạn code nhỏ để có thể tạo hiệu ứng này cho Blogspot của mình khá dễ dàng.


» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào trước thẻ </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".post img").fadeTo("slow", 1.0); // Độ mờ ban đầu của ảnh trước khi rê chuột (1.0 tức ảnh rỏ nhất, 0 là mờ nhất)
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.3); // Độ mờ của ảnh khi rê chuột vào
},function(){
$(this).fadeTo("slow", 1.0); // Độ mờ của ảnh khi không còn rê chuột vào ảnh
});
});
</script>

Ở trên chỉ là tạo hiệu ứng cho các hình ảnh ở trang bài viết của Blogspot, nếu bạn muốn tạo hiệu ứng cho các ảnh thuộc class nào đó thì chỉ việc thay đổi .post thành class ban muốn tạo hiệu ứng là được.

Ngoài việc tạo hiệu ứng làm mờ ảnh như trên thì chúng ta hoàn toàn có thể áp dựng ngược lại hiệu ứng này, tức là ban đầu chúng ta sẽ để hình ảnh dạng mờ và khi rê chuột vào hình ảnh sẽ rỏ hơn vẫn hiệu ứng đẹp mắt đấy. Bạn chỉ cần thay đổi thông số ở bên trên là được. Ví dụ thay 0.3 thành 1.0 và ngược lại 1.0 thành 0.3. 

5. Cuối cùng save template lại.

Bạn hoàn toàn có thể tự mình mày mò và tọa thêm hiệu ứng mà mình thấy ưng ý cho hình ảnh trên  của mình nhé.


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


Ở bài viết này mình chia sẻ cho các bạn đoạn code có thể giúp bạn hiển thị được thời gian hiện tại ngay trên thanh tiêu đề của trình duyệt. Để cài đặt cho Blog của bạn thì bạn chỉ cần copy và dán đoạn code bên dưới như hướng dẫn.

Hình ảnh minh họa
Hiển thị thời gian hiện hành ngay trên thanh tiêu đề của trình duyệt cho Blogspot

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Chọn Bố cục (Layout)
3. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<Script Language="JavaScript" Type="Text/JavaScript">
var mytime1=24;
function mytime2() {
mytime3=mytime1+6;
mytime4=mytime1+mytime3;
timexx=mytime1+mytime3+mytime4;
timexxx=timexx/mytime4*mytime1; twelfth=mytime4*mytime1/12*mytime3;
timexxxx=mytime1+mytime3/timexxx-16*timexx;
timexxxxx=twelfth*(mytime1-5)/mytime4+timexx;
timexxxxxx=timexxxxx/timexxxx+mytime1*mytime4-timexx;
mytime5=(timexxxxxx+mytime1/mytime4*timexx+mytime3*timexxx)/twelfth+timexxxxx-timexxxxxx-1;
mytime6=Math.floor(mytime5);
mytime8=mytime6*mytime3/2+100;
mytime7 = window.setTimeout("mytime2()", mytime8);
var mytime9 =  Date();
var mytime10= mytime9.toLocaleString();
document.title = mytime10;}
function op(){mytime2()}
window.onload=op;
</script>

4. Save tiện ích lại

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



Code by OverStar
[Share] Template Mobile Blogger Đẹp
Demo Online: [Demo]
Hướng dẫn:

Cách 1:
Mẫu -> Sao lưu/ khôi phục -> import template có đuôi .xml
Cách 2:
Mở file .xml ra copy hết code trong đó vào 
Mẫu -> Chỉnh sửa HTML -> Click vào ô Mở rộng mẫu tiện ích -> xóa hết code có trong đó đi -> Post hết code vừa copy ở file .xml vào
Tìm đến:

<script src=\"/feeds/posts/default/-/Teen Story?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>

Teen Story là tên label mà nó sẽ lấy bài viết hiển thì ở index
Note:
Đây là template mình lấy trên mạng từ các nguồn khác nhau mình chỉ edit lại cho đẹp và tối ưu hóa seo 1 chút thôi 

Hôm nay mình sẽ hướng dẫn anh em làm JohnCMS ngay trên điện thoại mà không cần tới PC làm gì 
Mình sẽ dùng host CP11 để làm cho tiện và nhanh chóng ! host CP11 thì bạn có thể đi xin ai đó hoặc bỏ ra ít tiền là có rồi ! không thì vào trang này đăng kí 1 host cũng tạm ổn !
www.hostingnuocngoai.com ! đăng kí sao thì mình không thể chỉ được ! vì đây là topic hướng dẫn làm JohnCMS nên mình chỉ tập trung vào vấn đề này thôi ! 

Để tiện cho việc upload code nặng lên host nhanh chóng và tiết kiệm chi phí ta sử dụng code này nhé :
Link tải : upvn.mobi/?id=7327
Pass : newstyleclan
Sau khi có hosting rồi bạn đăng nhập host bằng cách sau : IP:2082 (ví dụ :210.245.94.117:2082) rồi nhập user và pass host vào ! 

sau khi đăng nhập xong ta tìm dòng Legacy File Manager như trong hình dưới



khi ta click vào xong sẽ được một màn hình như bên dưới vá bây giờ ta ấn Upload files nhé !



Khi click vào Upload files xong ta ấn vào nút duyệt (browser) để chọn file nhé !


bây giờ ta sẽ chọn file copy.zip lúc nãy vừa mới tải về !


sau khi chọn file xong ta sẽ thấy nó như hình bên dưới và bây giờ ấn Upload là xong 



sau khi upload xong rồi ta kéo xuống tìm file copy.zip hồi nãy mới upload xong và click vào nó nhé ! 



khi click xong nó sẽ hiện ra một bảng chọn như thế này và ta ấn vào chữ Extract File Contents để giải nén file copy.zip



Sau khi đã giải nén xong bạn có thể sử dụng được file này rồi nhé ! chỉ việc chạy file theo đường dẫn sau : domain/copy.php và sẽ thấy như hình bên dưới !



và ta nhập link code john vào ô nhập nội dung rồi ấn tải về là xong !
Link code + data JohnCMS : 95.211.164.99/~newstyle/share/john/johncms.zip

sau khi đã có code john trên host rồi ta tiến hành vào host và thực hiện việc giải nén code như bước giải nén file copy.zip nhé !

Bây giờ tới bước tiến hành cài đặt code JohnCMS 
B1 : Ta phải tạo một tài khoản database



sau khi ấn vào chữ MySQL Database ta sẽ thấy một bảng như hình bên dưới ! ta bắt đầu tạo từng phần nhé ! 
đầu tiên bạn nhập vào ô New Database với tên gì tuỳ bạn.mình ghi là johncms 
sau khi tạo xong phần New Database ta làm tiếp phần Add New User nhé !



sau khi đã tạo xong hai bước New Database vàAdd New User ta tiến hành kết hợp hai cái này lại với nhau nhé !



khi ấn vào nút add ta dược một cái bảng chọn như hình dưới 




thế là ta xong phần tạo Database rồi nhé !

giờ ta sẽ vào thư mục file manger sửa file db.php nào !

bạn vào file manager và tìm thư mục incfiles nhé ! nhớ click vào icon thư mục nha ! đừng click vào chữ



bây giờ ta sẽ thấy file db.php và bây giờ click vào chữ nhé !



sẽ ra một bảng chọn như hình dưới 



sau khi ấn vào Edit File xong sẽ ra như hình dưới !



và bây giờ sửa cấu hình



thế là gần xong rồi !  bây giờ chỉ còn bước import database và sửa thông số trong phpmyadmin là xong thôi

bây giờ ta tiến hành import database nhé ! để import database ta chạy theo dường dẫn sau : domain/saoluu.php ! bây giờ ta nhập user và pass host để đăng nhập vào hệ thống phpmyadmin của nó để tiến hành import database



sau khi đăng nhập xong bạn chọn mục mình khoanh màu cam nhé ! và dòng chọn cơ sở dữ liệu bạn chọn tên database lúc bươc bạn tạo tên database và dòng chọn tên tập tin bạn chọn file database nhé ! sau khi chọn xong bạn ấn vào nút ok để tiến hành import database


sau khi import xong bạn đăng nhập vào phpmyadmin nhé ! 



sau khi ấn vào chữ phpMyAdmin xong bân sẽ thấy danh sách Table .bạn tìm table cms_settings để sửa lại đúng link trang wap của bạn nhé !



và bạn chỉ việc ấn vào cây bút chì có chữ edit và sửa link đúng với tên miền của bạn và lưu lại là xong



sau khi sửa xong mục phpmyadmin ta được thành quả như thế này ! 

/
Copyright by XiTeen.Mobi