Tạo trang thông báo lỗi Error 404 cho Blogspot

Khi bạn truy cập vào 1 link của Website nào đó thấy xuất hiện dòng thông báo lỗi 404 page not Found. Dòng thông báo đó muốn nói với bạn rằng, đường link đó đã không còn tìm thấy. Vậy làm thế nào để tạo được 1 trang thông báo lỗi như thế trong Blogspot?

- Bài viết này mình sẽ giúp bạn thực hiện điều đó giúp bạn tránh để xảy ra lỗi trong Blogspot. 

Demo XEM TẠI ĐÂY

Cách thực hiện. 

- Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML).

 - Tìm (Ctrl + F) tới thẻ đóng và dán code dưới đây ngay trên nó

<b:if cond='data:blog.pageType == "error_page"'> <style> #error-not-found {background: #ff0000;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFHYAQT1UrsmkSNb-uAVtYtq8XAxzkVkejjQR8D0AL9A_98Y5N3jFikfh7x9YBpbHfth02kAniLK7qR2DdTiTU8ev6bZAtm8kvFz65Hmn5PptdRZLpCHJwwhc5jpPE_SvGZJ6hGMoDebI/s1600/bg_body.gif)no-repeat top center,-moz-radial-gradient(center 40%, circle cover, #ff0000 0%, #880000 100%); background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFHYAQT1UrsmkSNb-uAVtYtq8XAxzkVkejjQR8D0AL9A_98Y5N3jFikfh7x9YBpbHfth02kAniLK7qR2DdTiTU8ev6bZAtm8kvFz65Hmn5PptdRZLpCHJwwhc5jpPE_SvGZJ6hGMoDebI/s1600/bg_body.gif)no-repeat top center,-webkit-gradient(radial, center 40%, 0, center 40%, 800, from(#ff0000), to(#880000) ); text-align:center; position:fixed; top:0px; right:0px; bottom:0px; left:0px; padding-top:270px; z-index:999999; } #error-not-found h1 { font-size:640px!important; position:absolute; font-family:Arial; top:70px; left:50%; letter-spacing: -8px; margin-left:-502px!important; width:960px; z-index:-2; color:rgba(0,0,0,.09)!important; } #error-not-found h2 { font-family:arial black; text-transform:normal; font-size:35px; line-height:66px!important; letter-spacing: -3px; color:#fff!important; margin:0!important; padding:0!important; } #error-not-found p a, #error-not-found p a:visited, #error-not-found p a:hover{ font-family:arial black; text-transform:normal; font-size:20px; line-height:40px!important; border:none; font-weight: bold; color:rgba(0,0,0,.5)!important; margin:0!important; padding:0!important; text-decoration:none!important; } </style> <div id='error-not-found'> <h1>404</h1> <h2&gt;www.Cafe50.com</h2> <h2>Page Not Found !</h2><br/> <p> <a href='/' title='Trở về trang chủ'>Back to home page</a></p> </div> </b:if>

Thay đổi www.Cafe50.com thành đường link website của bạn
Lưu lại và ví dụ 1 đường link website của bạn mà không có nhé

Subscribe box phong cách Wordpress cho Blogger

Bài viết này mình sẽ chia sẻ một style nữa của Email Subscribe Box cho Blogger mang phong cách của Wordpress. Với thủ thuật này bạn sẽ có một khung đăng ký nhận bài mới miễn phí qua email đẹp giống như những blog trên nền tảng worpress. Các bạn có thể xem hình ảnh minh họa ở bên dưới:

Bước 1: Đăng nhập vào Blogger -> Bố cục ( Layout) -> tạo một tiện ích HTML/JavaScripts tại vị trí muốn hiển thị widget.

Bước 2: Dán đoạn code sau vào phần nội dung

<div align="center" id="kjmagic"> <div id="kjsubscription" filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#55AAEE', endcolorstr='#003366',gradienttype=0 ); width: 265px;"> <h4 id="kjmagic-title-text" style="color: 000; font-size: 20px;"> Đăng ký nhận tin mới qua Email của bạn</h4> <div id="kjmagic-sub-title-txt" style="color: 000; font-size: 14px;"> Đăng ký ngay để nhận bài mới hoàn toàn miễn phí qua Email của bạn</div> <br /> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=KjMagic', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input class="name" id="kjmagic-subscriber-name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Tên của bạn" /><br /> <input class="email" id="kjmagic_subscriber_email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Email của bạn" /><br /> <div class="separator" style="clear: both; text-align: center;"> </div> <input name="uri" type="hidden" value="KjMagic" /><input name="loc" type="hidden" value="en_US" /> <input id="kjmagic-submit-text" style="height: auto; padding: 5px 0;" type="submit" value="Đăng ký ngay hôm nay !" /></form> </div> </div> <style> #kjsubscription {margin: 0px;padding: 10px;height: auto!important;padding: 0px 10px 15px 15px !important; text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px; margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#kjsubscription p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif; padding: 5px;border: none;}#kjsubscription input.name { background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfEKULvfSswLTRf4578vd_rpl1LWCp_2OItA86_Ove4oUG-WDAygrOTh7BnGr8H535b_83a2qYhh_tKlPTAfO5OdjzUgMfN8ynssy2y3g7u9zJ4resrBp5Jt3lHkvov80gsVbOs5VF60Xv/s1600/subscribe-name.png) no-repeat center right;} #kjsubscription input[type="text"] {border: 1px solid #111 !important; font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;} #kjsubscription input.email {background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkty5L1_KNfpUXcjZ4N3likShWEvvKvOdGGxjjouSXfR0WU7aWyW990Ny05q53PJJrjCCWcJuK0p4tmpMUhvEpese4YT4-usD_1SFgVytSKAJHRcDdOcPO-TLIPP2dCZZfaarryusiRdqn/s1600/subscribe-email.png) no-repeat center right;}#kjsubscription input { font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#kjsubscription h4 {margin-bottom: 8px !important; font-weight: bold !important;line-height: 26px !important;letter-spacing: normal; text-transform: none;text-decoration: none; text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif; border: none;padding: 0px !important;float: none;}input:hover[type="submit"] { background-color: #0094D2;border: 1px solid #0094D2;color: red;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2; color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input { color: #333;font-family: 'Droid Sans', sans-serif;}#kjsubscription input[type="submit"] {background: #f6640e; border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important; padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;} #kjsubscription input[type="submit"]:hover {color: #FFFC00;}</style>

- Chỉnh sửa những chỗ màu đỏ thành ID Feedburner của bạn.

- Có thể sửa những chỗ màu xanh theo ý thích của bạn.

Recent Comments có hình ảnh cho blogger

Để khuyến khích những độc giả comment là làm thế nào để những comment của họ được hiện lên trang chủ. Nên bài viết sau đây mình sẽ hướng dẫn cho các bạn một thủ thuật để cập nhật những comment mới nhất của blog.

Demo

Bạn thêm widget HTML/Javascript mới tại vị trí phù hợp rồi bạn dán đoạn code dưới đây rồi save lại và xem kết quả .

<style type="text/css"> ul.w2b_recent_comments{list-style:none;margin:0;padding:0;} .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;} .w2b_recent_comments li .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;} .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;} .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;} </style> <script type="text/javascript"> //<![CDATA[ // Recent Comments Settings var numComments = 5, showAvatar = true, avatarSize = 60, roundAvatar = true, characters = 110, showMorelink = false, moreLinktext = "Xem thêm »", defaultAvatar = "http://www.gravatar.com/avatar/?d=mm", hideCredits = true; //]]> </script> <script type="text/javascript" src="http://shareallworld.googlecode.com/files/w2b-recent-comments-gravatar.js"></script> <script type="text/javascript" src="http://vietanhgroup.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Thay thế http://vietanhgroup.blogspot.com bằng link blog của bạn

Hướng dẫn cách xóa bỏ thuộc tính của Blogger từ A -> Z

Có nhiều bạn thắc mắc để làm thế nào xóa bỏ phần cung cấp bởi Blogger không ? Và đây là câu trả lời cho các bạn ^.^



Đây là phần các bạn hay hỏi mình cần xóa cung cấp bởi Blogger



Mặc đinh thì blogspot nó sẽ không hiển thị nút xóa cho các bạn. Bạn có vào code xóa đi nhưng backup lại vẫn sẽ hiển thị




Đây là cách mà các bạn muốn nó không xuất hiện nữa rất đơn giản 

Theo mặc định các bạn tìm tới dòng code sau




<b:widget id='Attribution1' locked='true' title='' type='Attribution'>


Rồi các bạn thay giá trị True bằng False thì nó sẽ xuất hiện nút xóa cho các bạn thực hiện




<b:widget id='Attribution1' locked='false' title='' type='Attribution'>


Bây giờ nó đã xuất hiện và thực hiện xóa thôi


Nếu thấy hay và có ích hãy like và chia sẻ bài viết này nhé các bạn

Auto readmore cho blogspot với Cutter.js

Thủ thuật Auto Read More tăng khả năng SEO Blogger cải thiện tốc đọ load trang nhanh hơn, phát tiển code bởi Noct Blog.

Trước khi thực hiện thủ thuật này thì bạn nên sao lưu lại template gốc để đề phòng, sau đó vào phần chỉnh sửa HTML rồi chèn đoạn CSS sau phía trên ]]></b:skin>

.thumb,.no-thumb{float:left;margin-right:15px;width:120px;height:120px;overflow:hidden;position:related}
.no-thumb{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlvR0_WPzgQCQxnmhLmKs0sJqIoECasyzSAjmE-OtmJhKQQ_PEzt9LVV1BQerjCMVEcWnTYw4A99Az_iuf_2auivxm58IrO1XCFP8dLtqd9fPPN_OM-HL3MjSkF2QwaPdwzfDaynrxNhGM/s1600/no_image.png) 0 0 no-repeat;}
a.jump-link{font-weight:bold}

Chèn đoạn Javascript này trước thẻ đóng </head>

<script type='text/javascript'>//<![CDATA[
var snippet=30; G="s120-p";
function H(b,a){return b.replace(/<.*?>/gi,"").split(/\s+/).slice(0,a-1).join(" ")} function rm(b){var b=document.getElementById(b),a="",a=b.getElementsByTagName("img");if(1<=a.length){C=a[0].src;B=C.split("/");D=B[2];if(-1!=D.indexOf("blogspot")||-1!=D.indexOf("googleusercontent")||-1!=D.indexOf("ggpht"))F=B[7],C=-1==F.indexOf(".")?C.replace(F,G):B[0]+"//"+B[2]+"/"+B[3]+"/"+B[4]+"/"+B[5]+"/"+B[6]+"/"+G+"/"+B[7];a='<div class="thumb"><img src="'+C+'" /></div>'}else a='<div class="no-thumb"></div>';b.innerHTML=a+H(b.innerHTML,snippet)+"..."};
//]]></script>

snippet=30;/*số ký tự được hiện thị*/

Cuối cùng, chọn mở rộng tiện ích tìm đến <data:post.body/> sửa nó thành:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<span expr:id='&quot;p&quot; + data:post.id'><data:post.body/></span>
<script type='text/javascript'>rm(&quot;p<data:post.id/>&quot;)</script><b:else/><data:post.body/></b:if>
<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' expr:href='data:post.url + &quot;#more&quot;'>Read More</a><b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Read More</a>
</b:if>
</b:if>
<div class='clear'/>

Save template lại, vậy là gần như xong, nếu trong template của bạn có đoạn dưới đây thì xóa nó đi:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>