Share Code trang báo lỗi 404 Đẹp cho Blogger Blogspot

Vì 1 lý do nào đó bài viết mà bạn từng đăng lên Blogger - Blogspot bị xóa mà vẫn có những lượng tìm kiếm nhất định với bài viết đó. Cách duy nhất là tạo 1 trang báo lỗi 404. Hôm nay Code SEO xin chia sẻ với các bạn cách làm trang báo lỗi 404 với giao diện phẳng - đơn giản - đẹp mà CodeSEO.net đang sử dụng... Bộ code này mình sử dụng css đơn giản và script đếm thời gian chuyển hướng trang nhìn khá đẹp

Đầu tiên các bạn có thể xem demo tại http://codeseo.net/404

» Bắt đầu code và cách dùng

1. Đăng nhập vào tài khoản Blogger

2. Vào phần mẫu  (Tempalte)

3. Chọn chỉnh sửa HTML (Edit HTML)

4. Bạn tìm đến trước thẻ </body> và dán vào code sau

Bộ này gồm css và javascript

<!--Error Page Not Found by codeseo.net-->
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
#error-page{background-color:#e9e9e9;position:fixed!important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999}#error-404{margin:11% auto}#error-404 .box-404{width:200px;height:200px;background:#21afa4;color:#fff;font-size:80px;line-height:200px;border-radius:10px;margin:0 auto 50px;position:relative}#error-404 .box-404::after{content:&quot;width:0;height:0;bottom:-8px;border-color:#21afa4 transparent transparent;border-style:solid;border-width:9px 9px 0;position:absolute;left:47%}#error-404 h1{text-transform:uppercase}#error-404 p{line-height:1.7em;font-size:15px;font-family:arial}
</style>
<div id='error-page'>
<div id='error-404'>
<div class='box-404'>404</div>
<h1>Trang bạn tìm kiếm không tồn tại</h1>
<p>Có thể URL bị hỏng hoặc đã bị ADMIN xóa bỏ</p>

Bạn sẽ trở về trang chủ <b>CodeSEO.net</b> sau <span id='time' style='color:red'>3</span> giây nữa<br/> 
<script type='text/javascript'> var jgt = 3; document.getElementById(&#39;time&#39;).innerHTML = jgt; function stime(){document.getElementById(&#39;time&#39;).innerHTML = jgt; jgt = jgt - 1; if(jgt == 0){clearInterval(timing); location = &#39;http://www.codeseo.net&#39;;} } var timing = setInterval(&quot;stime();&quot;,1000); </script>

  </div></div>
</b:if>
<!--/Error Page Not Found by codeseo.net-->

Các bạn thay các giá trị in đậm trong code theo ý muốn

3 là thời gian chuyển hướng trang

http://www.codeseo.net là địa chỉ mà bạn muốn chuyển hướng đến

Cảm ơn các bạn đã quan tâm có gì không hiểu hoặc không làm được các bạn có thể comment bên dưới

Read More

Cách ẩn bài viết mới nhất ngoài trang chủ blogspot

Cách ẩn bài viết mới nhất ngoài trang chủ blogspot. Cách ẩn hết các bài viết mới nhất mặc định của blogspot ngoài trang chủ. Ẩn bài viết ngoài trang chủ .

Việc ẩn bài viết ở trang chủ ta phải dùng một thủ thuật khác với thủ thuật ẩn widget, nếu dùng thủ thuật ẩn widget thì bài viết không được ẩn hoàn toàn. Vì thế mình sẽ dùng CSS kết hợp lệnh để ẩn nó.
Đây là thủ thuật đơn giả nên mình sẽ không post hình minh họa kết quả.

Cách ẩn bài viết mới nhất ngoài trang chủ blogspot !

Trước tiên thực hiện bạn phải xác định id của widget "Bài đăng trên blog", thông thường nó đều có id là "Blog1".Với một số blog có thể khác. Các bạn xác định theo các bước bên dưới:

1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed): => Tìm đoạn code sau :

<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'>

Sau đó ta vào: Mẫu -> chỉnh sửa HTML và dán code ngay bên dưới sau thẻ </b:skin>

Read More

Tạo form đăng ký nhận bài viết mới qua email cho blogspot

Feedburner là gì ?

Feedburner là một dịch vụ miễn phí của Google cho phép quản trị viên có thể tạo nguồn cấp RSS trên website. Feedburner hiện đang cung cấp khá nhiều tính năng hữu ích  Một bộ công cụ hữu ích là tính năng Newletter cần cho chúng ta sử dụng để chuyển tải liên thông thông tin bài viết giữa các Web Blog và người dùng qua email.

feedburner có rất nhiều tác dụng đặc biệt, bởi trong quá trình thiết kế Web Blog có rất nhiều tính năng yêu cầu phải cung cấp Fead mới có thể hoạt động.

RSS là một định dạng tập tin thuộc họ XML dùng trong việc chia sẻ tin tức Web (Web syndication) được dùng bởi nhiều website tin tức và weblog.

Công nghệ của RSS cho phép người dùng Internet có thể đặt mua, hoặc miễn phí thông tin từ các websites có cung cấp khả năng RSS (RSS feeds); chúng thường là các site có nội dung thay đổi và được thêm vào thường xuyên.

Rõ ràng đây là một nguồn traffic không nên bỏ qua. Vì vậy bạn cần một dịch vụ để gửi “feed” đến khách truy cập đăng ký nhận bản tin mới trên website của mình. Hai dịch vụ miễn phí tốt nhất hiện nay được cung cấp bởi WordPress (cài đăt plugin Jetpack) và Google feedburner. Google feedburner dễ sử dụng, có số liệu thống kê trực quan và hoàn toàn miễn phí.

Bước 1: Cách đăng ký:

URL feedburner là điều kiện quan trọng để form đăng ký nhận bài viết mới hoạt động ổn định. Có lẽ vì cùng chung cha đẻ Google mà mỗi blogspot khi vừa sinh ra đã có sẵn URL feedburner.

Việc đầu tiên là bạn đã có Account trên Google chưa? Nếu chưa có, bạn hãy vào trang: Làm thế nào đăng ký tài khoản Google?  nhé, ở nơi đây mình sẽ hướng dẫn cho bạn một cách tường tận.

Nếu đã có rồi và hiện thời đã đăng nhập vào Google Account rồi, bạn cần thực hiện các bước sau:

- Truy cập vào Blogger Dashboard như hình dưới:

- Bên menu trái chọn Bố cục.
- Kéo nội dung xuống phần Sidebar và nhấn Thêm tiện ích.
- Kéo thanh cuộn trượt dọc biên phải cửa sổ xuống phía dưới, chọn vào: Theo dõi qua Email

- Chọn Theo dõi qua email (Subcribe via email). Đây chính là phiên bản thu nhỏ của feedburner.

- Cửa sổ mới xuất hiện, copy đoạn text khoanh như hình dưới đây (KtBnCngKhanhnguyensBlog). Sau đó nhấn Hủy để kết thúc, chỉ cần lấy được đoạn text này là xong.

Bước 2 : Tạo form đăng ký nhận bài viết mới:

- Tạo 1 Widget HTML hoặc một trang HTML mà bạn muốn đặt Source Code bên dưới. Có thể bạn muốn đặt trong Template cũng được, ở chổ nào mà bạn muốn, chẳng hạn ở những phần <data:post.body/> hoặc <post-footer-line post-footer-line...> nhưng phải mã hóa Code. Trong Blog của mình có phần mã hóa Code nằm trên phần Comments cho Blogger.
-  Add Code dưới đây vào phần bạn chọn và cho xuất bản. Nhớ làm xong thao tác nào, bạn cũng cần phải Save để ghi lại nhé.

Mã Code:

<div class="Email">

<style>

.Email {width:270px; height:250px; background:#3e433e; margin:5px auto; font-size:13px; color:#d1d1d1; text-align:center; padding:10px; }

.Email b {font:bold 24px helvetica; color:#fff; float:left; width:inherit; text-align:center; padding:20px 0; }

.Email form {width:250px; margin:0 auto;}

</style>

<b>Theo dõi qua Email</b><br />

Đăng ký để cập nhật những bài viết mới nhất từ Khanhnguyen' s Blog!<br />

<br />

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=KtBnCngKhanhnguyensBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="KtBnCngKhanhnguyensBlog" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Đăng ký" /></form></div>

- Chọn Mẫu / Chỉnh sửa HTML.
- Copy - paste đoạn mã sau vào vị trí bạn muốn đặt form theo dõi.- Thay thế URL chổ mã in đậm trên Code bằng đoạn text copy ở hình trên.
- Chỉnh sửa lại chiều rộng width và chiều cao height cho phù hợp với yêu cầu của bạn.
- Lưu template lại và cho Blog của bạn hoạt động thử xem nào.
Bạn có thể thử mở thêm trang nầy để chép dán source code trên bài nầy vào kiễm tra thử:

• Hộp thử Test Html/JavaScript

Bạn có thể xem thêm các bài viết sau:

• Hướng dẫn đăng ký và sử dụng FeedBurner cho Blogger

Chúc các bạn thành công tốt.

Người viết: Nguyễn Đạt Khánh

Read More

Seo nhãn (Label) trên Widget chuẩn của Blogger

Mặc định, để tạo nhãn Label theo chương mục trên Blogger, mình thường hay sử dụng thiết kế chuẩn của nó. Blogger là một ứng dụng thiết kế Web của Google, luôn luôn có sẳn các thiết kế chuẩn. Nhiều tiện ích được phát triển và tích hợp ở đây. Trên nền tảng Layout, có sẳn cả một giao diện để thiết kế bố cục cho một Website mà bạn đã từng thấy, có nghĩa là bạn muốn Add Widget thêm các tiện ích hiển thị, chỉ cần Click chuột vào đó và chọn lựa.

Tuy nhiên, Blogger chỉ cung ứng những thứ đủ xài, không tốn phí nên chúng ta cần phải tùy biến nhiều thứ lắm, để chúng trở thành cái của riêng ta. Widget Label cũng vậy, trông rất đơn điệu, làm hoài cũng chán. Ở phần thiết kế Template, vào Edit Html, bạn có thể tùy biến được rất nhiều trên chính Source code của nó.

Để hiểu thêm nhiều về cách thiết kế Web trên nền tảng Blogger, bạn có thể vào tham khảo bài: 

• Hướng dẫn cách tạo Blog bằng Blgospot cho Blogger
• Cách thêm tiện ích (widget) vào vị trí bất kỳ trong blogspot

Nếu như các bạn đã biết rồi, có thể vào thẳng vấn đề trong Blogger với các bước như sau:

- Layout: Phải có sẳn Widget Label, nếu không có phải chịu khó chọn Add Widget (thêm tiện ích), và chọn tên Widget Label để thêm vào.

- Template: Bạn vào Edit Html(Chỉnh sữa mẫu). Nhấn Ctrl+F tìm thẻ: </b:skin> và chép dán Source dưới đây lên phía trên nó: (Tùy kiểu mà bạn muốn)

Kiểu 1:

.Label a {
    padding-left: 20px;
    background: #000;
    padding: 0 10px;
    color: #fff!important;
    border-radius: 70px;
    -moz-border-radius: 70px;
    height: 27px;
    line-height: 32px;
    text-transform: uppercase;
    text-decoration: none;
    border: none !important;
    -webkit-transition: all .3s ease-in-out !important;
    t: 20pxt: 20px;
    float: left;
    margin-left: 5px;
    margin-top: 5px;
    font-size: 10px;
}
.Label a:hover {
    color: #000 !important;
    background: #ff0;
}

Sau khi xong tất cả, cho Blogger chạy thử mình sẽ có giao diện giống như trong hình dưới đây. Mình cũng đã làm như thế. Có thể các bạn vào phần demo dưới để xem thử nhé.!

http://ketbancungkhanhnguyen5.blogspot.com/









Kiểu 2:



.widget li, .BlogArchive #ArchiveList ul.flat li{  list-style: none;
  padding: .25em 0;
  margin: 0;
  text-indent: 0;}
.label-size {
float: left;
font-size: 13px;
}
.list-label-widget-content ul,
.list-label-widget-content li {
list-style: none outide none;
}
.list-label-widget-content li a {
background: #F3F3F3;
color: #525252;
border: 1px solid #E2E2E2;
border-radius: 3px;
float: left;
padding: 5px;
margin-bottom: 5px;
line-height: 16px;
width: 153px;
}
.list-label-widget-content li span {
color: orangered;
background: #F3F3F3;
border-radius: 3px;
min-width: 40px;
float: right;
padding: 6px;
margin-bottom: 5px;
text-align: center;
border: 1px solid #E2E2E2;
}
.list-label-widget-content li span:first-child {
background: #F3F3F3;
border: 1px solid #E2E2E2;
border-radius: 3px;
border-right: 10px solid;
border-left: 10px solid;
width: 113px !important;
float: left;
padding: 5px;
margin-bottom: 5px;
line-height: 16px;
width: 250px;
}
.list-label-widget-content li a:hover,
#footer-nav .list-label-widget-content li a:hover {
background: orangered;
color: #fff;
}
.cloud-label-widget-content .label-size {
font-size: 100%;
float: left;
}
.cloud-label-widget-content .label-size a {
color: #666;
float: left;
font-size: 12px;
margin: 0px 5px 5px 0px;
padding: 5px;
text-decoration: none;
border: 1px solid #E2E2E2;
border-radius: 3px;
}
.label-size a:hover, .label-size:hover .label-count, .label-size:hover a {
background-color: #FD4326;
color: #FFF;
text-decoration: none;
transition: all 0.2s ease-out 0s;
}
.cloud-label-widget-content .label-size span {
color: #666;
float: left;
font-size: 12px;
margin: 0px 5px 5px 0px;
padding: 5px;
text-decoration: none;
border: 1px solid #E2E2E2;
border-radius: 3px;
}
.cloud-label-widget-content .label-size span:first-child,
.cloud-label-widget-content .label-size span:first-child span:nth-child(2) {
background: #FD4326;
color: #FFF;
}

Sau khi xong tất cả, cho Blogger chạy thử mình sẽ có giao diện giống như trong hình dưới đây. 






http://ketbancungkhanhnguyen7.blogspot.com/









Kiểu 3:
- Thêm đoạn css sau trên ]]></b:skin>



.Label ul{margin:0!important;padding:0!important;list-style-type:none!important}
.Label ul li{margin:0!important;border:0!important;background:transparent!important;padding:0 0 0 10px!important}
.Label ul li a{display:block;position:relative;margin:10px 0!important;background:#17b38f;padding:10px 0 10px 20px!important;font-size:14px;line-height:20px;color:#fff!important;text-decoration:none}
.Label ul li a:hover{color:#fff!important;text-decoration:none}
.Label ul li a:hover:after{background:#ff4e47}
.Label ul li a:before{content:'';position:absolute;top:0;left:-10px;width:0;height:0;border-top:20px solid transparent;border-right:10px solid #17b38f;border-bottom:20px solid transparent}
.Label ul li a:after{content:'';position: absolute;top:17px;left:0;border-radius:50%;background:#fff;width:6px;height:6px}
.Label ul li span{float:right;margin-right:-10px;background:#ff4e47;width:30px;height:20px;font-size:10px;color:#fff;text-align:center}

CHỈNH SỬA WIDGET LABEL

- Nếu Widget Label trong Blogger của bạn chỉ có mỗi một, bạn mở Template kiễm tra thử sẽ thấy nó có tên duy nhất là Label1 và không có bất kỳ một Widget nào khác có tên Label.
- Tìm đoạn code sau trong widget Label1 bên trong Template:

<b:loop values='data:labels' var='label'>
  <li>
    <b:if cond='data:blog.url == data:label.url'>
      <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
      <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
      <span dir='ltr'>(<data:label.count/>)</span>
    </b:if>
  </li>
</b:loop>

Thay thế đoạn code vừa tìm thành đoạn code dưới đây:


<b:loop index='i' values='data:labels' var='label'>
  <b:if cond='data:i &lt; 5'>
    <li><a expr:href='data:label.url' rel='tag'><data:label.name/><b:if cond='data:showFreqNumbers'><span><data:label.count/></span></b:if></a></li>
  </b:if>
</b:loop>

Con số 5 màu đỏ ở trên là số tên nhãn mà bạn muốn xuất hiện.
Sau khi xong tất cả, cho Blogger chạy thử mình sẽ có giao diện giống như trong hình dưới đây. 






http://ketbancungkhanhnguyen8.blogspot.com/




Từ những Code trên, bạn có thể tùy biến thữ dược rất nhiều hình dạng khác nhau, mà bạn có thể vọc cho biết. Mình chỉ sưu tầm được cái nào thì chia sẽ cái đó. Chúc các bạn nhiều may mắn.




Người viết: Nguyễn Đạt Khánh.

Read More