Hello

Something Wrong

Popular Posts

HTML 3

Hiển thị các bài đăng có nhãn Blogger. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Blogger. Hiển thị tất cả bài đăng

Thứ Ba, 6 tháng 3, 2018

Tạo Nút Back Top Đẹp Cho Blogspot

Tạo Nút Back Top Đẹp Cho Blogspot


Nếu như Template của các bạn chưa hoàn thiện, và bạn muốn thêm vào một số chức năng để website thêm sinh động. Vì thế hôm nay mình sẽ hướng dẫn các bạn tạo nút Backtop cực đẹp cho Blogspot

Tao Nut Back Top Đẹp Cho Blogspot - Nut Trang Dau

Các Bước Thực Hiện

Bước 1: Chèn CSS vào trước ]]></b:skin>

#bttop{cursor:pointer;background:#dadada;color:#66689c;position:fixed;bottom:0px;z-index:9999;right:0;padding:15px 15px 5px 30px;font-size:1.5em;display:block;border-radius:100px 0 0 0}

Bước 2: Chèn đoạn code bên dưới vào nơi bất kì, lời khuyên cài ở cuối trang

<span id='bttop' style='cursor:pointer' title='Về đầu trang'><i class='fa fa-angle-up'/></span>
<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$(&quot;#bttop&quot;).fadeIn();}else{$(&quot;#bttop&quot;).fadeOut();}});$(&quot;#bttop&quot;).click(function(){$(&quot;body,html&quot;).animate({scrollTop:50},500);});});</script>


Bước 3: Lưu Lại


Chúc Các Bạn Thành Công

Thứ Bảy, 17 tháng 2, 2018

Thủ Thuật Blogspot Cho Người Tự Học SEO - SEO Căn Bản

Thủ Thuật Học SEO Từ A Đến Z

Thu Thuat Blogspot Cho Nguoi Tu Hoc SEO - SEO Can Ban


Khi bắt đầu học SEO tốt nhất ta nên chọn cho mình một blog. Ưu Tiên Blogger vì đây là 1 host miễn phí của google với tên miền miễn phí có đuôi yourdomain.blogspot.com giúp các bạn dễ dàng thử nghiệm SEO và nếu có thành công, lên top bạn vẫn có thể tận dụng nó để làm blog bán hàng, viết blog cũng được và nếu có thất bại thì cũng không sao

Các Bước Hướng Dẫn Tối Ưu Cho Blogspot Bao Gồm:

- Chọn Template Chuẩn SEO
- Tối Ưu File Robot.txt Cho Blogspot
- Tùy Chỉnh URL Bài Viết Thân Thiện
- Tạo Sitemap Cho Blogspot
- Tối Ưu Hình Ảnh Bài Viết Cho Blogspot
- Tạo Bài Viết Liên Quan

Tiến Hành 

1.Chọn Template Chuẩn SEO

Để chọn các template chuẩn SEO các bạn có thể tham khảo ở các website bên dưới


Chú ý khi chọn template cần chọn các template responsive friendly ( Nghĩa là template thân thiện với người dùng, hỗ trợ kích thước điện thoại )

2. Tối Ưu File Robots.txt Cho Blogspot

Để tối ưu file robot.txt các bạn làm theo các bước 

Bước 1: Đăng nhập https://www.blogger.com/
Bước 2: Nhìn vào thanh menu bên trái chọn " Cài Đặt "
Bước 3: Trong mục " Cài Đặt " chọn " Chọn " Tùy Chọn Tìm Kiếm "
Bước 4:  Chọn mục robot tùy chỉnh, chỉnh sửa và bật robot tùy chỉnh và điền code bên dưới


User-agent: Mediapartners-Google
Disallow:
User-agent: *
Allow: /
Disallow: /search
Disallow: /*?updated-max=*
Disallow: *archive.html

3. Tùy Chỉnh URL Bài Viết Thân Thiện 

Các bạn có tự đặt câu hỏi tạo URL thân thiện làm như thế nào không?
Đây là ví dụ: http://www.topchiaseit.com/2018/02/code-tao-nut-demo-download-cho-blogger-blogspot.html và cái dòng được tô đỏ các bạn có thể tùy chỉnh cho nó thân thiện hơn với người dùng để dễ tìm kiếm, cách thức thực hiện
- Ta sử dụng tính năng Tùy Chỉnh Liên Kết Cố Định trong bản " Cài Đặt Bài Đăng "

Thu Thuat Blogspot Cho Nguoi Tu Hoc SEO - SEO Can Ban

4. Tạo Sitemap Cho Blogspot

Để tạo được sitemap cho blogspot : Mình sẽ hướng dẫn ở một bài đăng khác

5. Tối Ưu Hình Ảnh Cho Blogspot

Rất đơn giản, ta chỉ cần chọn mục " Thuộc Tính " ở ảnh bằng các tick vào ảnh đã tải lên bài viết và điền 

Ở mục Văn Bản Tiêu Đề: Các bạn điền có dấu
Ở mục Văn Bản Thay Thế: Các bạn điền không dấu

Thu Thuat Blogspot Cho Nguoi Tu Hoc SEO - SEO Can Ban


Thu Thuat Blogspot Cho Nguoi Tu Hoc SEO - SEO Can Ban

6. Tạo Bài Viết Liên Quan 

Các bạn tìm đến thẻ </head> và thêm đoạn code bên dưới vào trước 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>

Sau đó đến dòng

<div class='post-footer'>

Thêm đoạn code bên dưới

<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>

Lưu ý: maxresult=5 chính là số bài viết liên quan được hiển thị và bạn có thể thay đổi

Thứ Năm, 15 tháng 2, 2018

Code Tạo Nút Demo Download Đẹp Cho Blogger - Blogspot Nên Dùng

Bài Hướng Dẫn Code Tạo Nút Demo Download Đẹp Cho Blogger - Blogspot

Code Tao Nut Demo Download Dep Cho Blogger - Blogspot

Hướng Dẫn Các Bạn Tạo Nút Demo Download đẹp để làm công việc chia sẻ template blogspot hay wordpress chẳng hạn. Bạn sẽ dán đường link của mình phía sau nó để tăng thêm vẽ đẹp thẩm mĩ cho website của bạn, được cảm giác dễ chịu cho người dùng.

Bước 1: Đầu tiên các bạn copy đoạn mã css bên dưới dán vào trước mục ]]></b:skin>


 #wrap {
margin: 20px auto;
text-align: center;

}
#wrap br {
display: none;
}
.btn-slide, .btn-slide2 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid #0099cc;
margin: 10px;
transition: .5s;
}
.btn-slide2 {
border: 2px solid #efa666;
}
.btn-slide:hover {
background-color: #0099cc;
}
.btn-slide2:hover {
background-color: #efa666;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #0099cc;
}
.btn-slide2:hover span.circle2 {
color: #efa666;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
left: 40px;
opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
opacity: 1;
left: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
display: block;
background-color: #0099cc;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.btn-slide2 span.circle2 {
background-color: #efa666;
}
.btn-slide span.title,
.btn-slide span.title-hover, .btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #30abd5;
transition: .5s;
}
.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
color: #efa666;
left: 80px;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
left: 80px;
opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
color: #fff;

}

Thế là đã xong bước css cho mục demo download.

Bước 2: Các bạn tiếp tục vào bài viết các bạn cần đặt mục demo download - vào phần html - và copy đoạn mã bên dưới dán vào thôi.

<div id="wrap">
<a class="btn-slide" href="#" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a class="btn-slide2" href="
#" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>

Chú ý: # ở đây là link các bạn điền vào nhé 


Chúc Các Bạn Thành Công

Thành Quả Của Chúng Ta

Video Hướng Dẫn Tạo Nút Demo Download Cho Bạn Nào Muốn Làm Theo

Thứ Năm, 8 tháng 2, 2018

Tạo Khung Comment Facebook Dành Cho Template Của Blog Có Hổ Trợ Comments System

Bài ViếtTemplate Dành Cho Blog - Website của các bạn có hổ trợ Comments system 


Nếu template bạn hổ trợ comment system hãy làm theo các bước như sau, rất đơn giản:
Tao Khung Comment Facebook Dành Cho Template Cua Blog Co Ho Tro Comment System

Bước 1: Các bạn vào blog của mình qua: https://www.blogger.com ta được giao diện như hình


Tao Khung Comment Facebook Dành Cho Template Cua Blog Co Ho Tro Comment System


Bước 2: Chọn mục Chủ Đề 

Tao Khung Comment Facebook Dành Cho Template Cua Blog Co Ho Tro Comment System
Bước 3: Các bạn tiến đến mục Comment system và Thêm vào ô trống  facebook


Tao Khung Comment Facebook Dành Cho Template Cua Blog Co Ho Tro Comment System



Hướng Dẫn Chèn Thêm Khung Bình Luận Facebook Vào Blog - Website

Các bạn muốn chèn khung bình luận facebook hãy xem hướng dẫn bên dưới bài 
Huong Dan Chen Them Binh Luan Facebook Vao Blog - Website

Theo dõi các bước làm của mình để có được khung comment facebook vào blog - website của các bạn nhé

Bước 1

Vào trang facebook: https://developers.facebook.com/
1. Đăng nhập tài khoảng facebook ở góc phải hình 

Huong Dan Chen Them Binh Luan Facebook Vao Blog - Website

Bước 2:

1. Thêm ứng dụng mới 
2. Các bạn nhập tên ứng dụng
3. nhập email
4. Tạo ID ứng dụng
Như hình dưới ạ 

Huong Dan Chen Them Binh Luan Facebook Vao Blog - Website

Bước 3: Được chuyển đến khung hình bên dưới 

1. Các bạn chọn trong mục menu mục " Xét Duyệt Ứng Dụng
2. Bật => Chế độ ứng dụng của bạn Công Khai

Huong Dan Chen Them Binh Luan Facebook Vao Blog - Website

Bước 4: Đến Mục Cài Đặt Trong Menu

1. Mục Thông Tin Cơ bản 
2.  Thêm nền Tảng 
3. Là bước 4 trong hình chọn vào " Trang WEB "
4. Nhập URL website của bạn vào 
5. Ấn bắt đầu nhanh
6. Copy script của facebook đưa như hình dán vào sau thẻ <body> của blog- website bạn
7. Nhập url website- blog nhấn " Tiếp " 

Huong Dan Chen Them Binh Luan Facebook Vao Blog - Website

Huong Dan Chen Them Binh Luan Facebook Vao Blog - Website

Huong Dan Chen Them Binh Luan Facebook Vao Blog - Website

Bước 5: Các bạn đến địa chỉ sau: https://developers.facebook.com/docs/plugins/comments

Huong Dan Chen Them Binh Luan Facebook Vao Blog - Website

Bước 6: Sau khi ấn lấy mã ta tiếp tục sao chép đoạn mã sau và bỏ vào sau thẻ <body>

Huong Dan Chen Them Binh Luan Facebook Vao Blog - Website

Bước 7: Dán đoạn mã vừa copy vào sau thẻ <body>

Lưu ý sửa lại dòng code có dạng ví dụ bên dưới. Sửa lại bằng cách thêm amp; vào sau 1 và version=v2.12  để khi lưu không bị lỗi: 
vd: 
https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.12&appId=554237011578579&autoLogAppEvents=1';
Thay Đổi Thành
https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&amp;version=v2.12&amp;appId=554237011578579&autoLogAppEvents=1';
Bước 8Tìm đoạn code sau: <b:include data='post' name='post'/>
 - Dán dòng lệnh dưới đây sau đoạn code vừa tìm:

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-comments' data-num-posts='9' data-width='740px' expr:data-href='data:blog.canonicalUrl'/>
</b:if>



Bước 9: Các bạn chèn code sau vào sau thẻ <head>
<meta content='ID ứng dụng ' property='fb:app_id'/>
ID ở đây là ID ứng dụng ban đầu như trong hình 


Huong Dan Chen Them Binh Luan Facebook Vao Blog - Website



Bước 10: Bước cuối cùng là các bạn vào đường dẫn sau: https://developers.facebook.com/tools/comments


Nhập tên người kiểm duyệt comment facebook vào để kiểm duyệt comment facebook trên blog- website của bạn





Huong Dan Chen Them Binh Luan Facebook Vao Blog - Website



Vẫn còn 1 cách tạo khung comment facebook khác

Thứ Tư, 7 tháng 2, 2018

Hướng Dẫn Lấy Tên Miền Miễn Phí Và Trỏ Tên Miền Đó Về Blogger

Bài viết sau đây mình sẽ hướng dẫn các bạn trỏ tên miền ở website dot.tk về blog của các bạn nhé, nếu quan tâm hãy theo dõi mình làm

Tóm Tắt Nội Dung 

1. Bước Đăng Kí Tên Miền Miễn Phí
2. Bước Trỏ Tên Miền Về Blogger

Bước Đăng Kí Tên Miền Miễn Phí

Đầu tiên các bạn đến website: http://www.dot.tk/ để lấy tên miền miễn phí


Huong Dan Lay Ten Mien Mien Phi Va Tro Ten Mien Ve Blogger

Hình 1

Huong Dan Lay Ten Mien Mien Phi Va Tro Ten Mien Ve Blogger
Hình 2

Ở Hình 2, sau khi nhập tên miền các bạn muốn các bạn hãy bấm nhận ngay, sau đó ta tiến đến bước thanh toán, hãy ấn vào Thanh Toán như hình 3
Huong Dan Lay Ten Mien Mien Phi Va Tro Ten Mien Ve Blogger
Hình 3
- Tiếp Theo, khi được dẫn đến đây các bạn chọn 12 Tháng như hình nhé, sau đó nhấn tiếp tục 
Huong Dan Lay Ten Mien Mien Phi Va Tro Ten Mien Ve Blogger
Hình 4

Các bạn Nhập Gmail của mình hoặc đăng nhập bằng tải khoảng của Freenom nếu đã có sẵn ( như hình 5 )
Huong Dan Lay Ten Mien Mien Phi Va Tro Ten Mien Ve Blogger

Hình 5
Sau khi nhập Gmail xong website sẽ gữi xác nhận và các bạn sẽ nhận được tên miền rồi nhé, ta sẽ cùng nhau đến bước trỏ tên miền về blog của mình


Bước Trỏ Tên Miền Về Blogger 


- Ở Blogger Các bạn sẽ Vào Cài Đặt -> Cơ Bản -> Xuất Bản địa chỉ blog và thiết lập tên miền thứ 3
Huong Dan Lay Ten Mien Mien Phi Va Tro Ten Mien Ve Blogger
Hình 6
Huong Dan Lay Ten Mien Mien Phi Va Tro Ten Mien Ve Blogger
Hình 7

- Sau đó bấm Lưu, nhưng Blog báo lỗi các bạn đừng lo lắng nhé Chú ý vào 4 Ô vuông bên dưới hình 8, đến đây các bạn quay lại trang freenom.com  để gán các ô vuông bên dưới cho blog nhận biết được nhé

Huong Dan Lay Ten Mien Mien Phi Va Tro Ten Mien Ve Blogger
Hình 8

- Quay trở lại Freenom.com nhé các bạn đến quản lý Domain ( Tên Miền ) và chọn manage domain

Huong Dan Lay Ten Mien Mien Phi Va Tro Ten Mien Ve Blogger
Hình 9

- Sau Đó chọn Tiếp vào Manage Freenom DNS

Huong Dan Lay Ten Mien Mien Phi Va Tro Ten Mien Ve Blogger

- Lúc này Ta Được 
Huong Dan Lay Ten Mien Mien Phi Va Tro Ten Mien Ve Blogger
Hình 10

- Ta có 2 mục cần giải quyết bây giờ bạn sẽ cần More Records thêm 6 ô như mục 1 2 Tổng là 6 ô nhé
- Ở mục 1: các bạn copy 4 Ô mình khoanh tròn ở Blog copy và điền vào theo như mẫu nhé
- Ở mục 2 Các bạn cứ điền Ở mục Target y như hình Không Thay Đổi nhé

Sau đó ta quay trở lại Blog bấm lưu 
Lưu ý: Nếu lưu như vậy người dùng chỉ có thể đến website bằng www.tên miền 
Nên ta Cần thêm một bước là Tick vào chuyển hướng nhé.
Huong Dan Lay Ten Mien Mien Phi Va Tro Ten Mien Ve Blogger
Hình 11
Đến Đây Đã Kết Thúc Nội Dung Nếu Có Lỗi Hay Thắc Mắc CMT Bên Dưới Nhé
Cảm Ơn Các Bạn Đã Đọc Bài Viết

Chúc Các Bạn Thành Công