Nội dung bài viết
Thật ra việc xuất hiện các biểu tượng này cũng không phải chuyện gì quá nghiêm trọng, mà nó chỉ là 1 tính năng trong Blogger.
Nếu anh em xem website dưới dạng khách truy cập thì sẽ không nhìn thấy những biểu tượng này, bởi! Nó có ảnh hưởng tới đọc giả/ khách của chúng ta đâu. Thế sao ta phải xóa nó làm gì:))
Ờ thì...mình biết là vậy nhưng cái chính nó làm cho chúng ta đôi lúc sẽ cảm thấy khá khó chịu khi cứ nhìn thấy những icon này xuất hiện trên website. Để không phải khó chịu nữa thì mình xóa nó đi thôi.
Biểu tượng cờ lê và bút chì là gì?
Cờ lê và bút chì là những công cụ chỉnh sửa nhanh mà Blogger cung cấp cho chúng ta để có thể nhanh chóng thực hiện thao tác chỉnh sửa các widget hay bài viết ngay trực tiếp tại website, mà không phải quay trở lại giao diện quản trị của Blogger.
Những biểu tượng này luôn xuất hiện khi chúng ta đăng nhập vào blogger.com. Dù nó có ích khi giúp ta nhanh chóng chỉnh sửa, nhưng chính cái có ích đó lại làm cho mình có cảm giác website rất mất thẩm mỹ, mỗi lần mình quay lại web để kiểm tra những thay đổi đã được lưu.
Với những người khó tính thì đây không phải là 1 tính năng hay ho cho lắm, ngược lại trông nó rất phiền phức và rối mắt.
Vậy chúng ta phải làm thế nào để loại bỏ những icon cờ lê và bút chì đáng ghét này. Nó rất đơn giản anh em xem và làm theo hướng dẫn của Ryan nhé!
Hướng dẫn xóa bỏ biểu tượng cờ lê và bút chì cho Blogspot
Trong phần này chúng ta sẽ tiến hành xóa lần lượt icon bút chì trước, kế đến sẽ là icon cờ lê. Ok! Chúng ta bắt đầu luôn nào.
Loại bỏ icon bút chì (Quick edit icon) trong bài viết
Bước 1: Anh em đăng nhập vào blogger.com và ngay tại giao diện quản trị của Blog anh em chọn vào mục "Bố cục" (Layout)
Bước 2: Ngay tại đây, chúng ta kéo xuống vào tìm hộp công cụ có tên là "Bài đăng trên blog" (Blog Posts) nó nằm trong phần main. Ta tiếp tục nhấp chọn vào dòng chữ "Chỉnh sửa" (Edit) để tiến hành mở hộp công cụ bài đăng.
Bước 3: Ta nhấp bỏ chọn ô có tên "Hiển thị chỉnh sửa nhanh" (Show Quick Editing), chọn "Lưu lại" và giờ chúng ta quay lại website để kiểm tra kết quả.
Đó chỉ vậy thôi là anh em mình giải quyết xong 1 thằng rồi :D. Giờ ta giải quyết thằng kế tiếp nào.
Loại bỏ icon cờ lê (Wrench icon) trên giao diện website
Bước 1: Cũng ngay tại giao diện quản trị của Blogger chúng ta chọn vào mục "Chủ đề" nhấp vào dấu "..." và chọn vào dòng "Chỉnh sửa HTML" (Edit HTML) để truy cập vào phần chỉnh sửa HTML của Template.
Bước 2: Ta nhấn phím Ctrl + F và tìm kiếm đoạn mã sau
<b:include name='quickedit'/><!-- b:include name='quickedit' -->Đoạn code <b:include name='quickedit'/> có thể có nhiều hơn 1 đoạn, cụ thể nó tương ứng với số lượng widget đang có trên website của anh em. Nếu anh em thêm widget mới thì đồng nghĩa nó cũng sẽ xuất hiện thêm 1 đoạn mã. Do đó, anh em nhớ xóa hoặc thay thế hết các đoạn mã tương tự có trong phần chỉnh sửa Template nhé! Bước 4: Xong rồi không còn bước nào nữa, giờ lưu lại và xem kết quả nào.
Bonus: Xóa bỏ biểu tượng cờ lê bằng thuộc tính CSS
Nếu anh em thấy cách trên quá rắc rối khi mỗi lần thêm 1 widget mới chúng ta lại phải tìm và xóa bỏ/ thay thế nó bằng đoạn code mình cung cấp bên trên thì đây mình sẽ chỉ cho anh em cách làm đơn giản hơn.
Ok! Anh em làm theo mình nhé! Do biểu tượng này được gán 1 giá trị là "quickedit" nên chúng ta sẽ lợi dụng nó để ẩn icon cờ lê đi bằng thuộc tính "none" trong CSS. Cụ thể như sau:
Bước 1: Anh em truy cập vào phần "Chỉnh sửa HTML" và tìm đoạn code
]]></b:skin.quickedit{display:none;}Ok! Chỉ vậy thôi là mấy cái icon củ cải đó sẽ biến mất hết. Chúc anh em thành công :))
![lỗi hiển thị bài viết liên quan]( "lỗi hiển thị bài viết liên quan")
Bước 2: Anh em Copy và Paste đoạn code sau lên bên trên đoạn code mà ta vừa tìm được
Bước 3: Anh em tiếp tục tìm kiếm đoạn code sau
Bước 4: Ta sẽ thay thế toàn bộ đoạn code vừa tìm thấy bằng đoạn code bên dưới này
Bước 5: Sau khi thay thế xong chúng ta lưu lại và kiểm tra thành quả. ^^
Hướng dẫn thêm bài viết liên quan cho Blogger
Bây giờ chúng ta vào công việc chính là bổ sung thêm tiện ích Related Posts cho bài viết trên web. Lần trước khi chúng ta thêm các bài viết demo cho blog trong phần hướng dẫn chuẩn hóa giao diện website
Nếu anh em chú ý thì sẽ phát hiện ra lỗi ở phần Related Posts không hiển thị chính xác bài viết liên quan và bị mất hình ảnh.
Đó cũng là lý do mà mình viết bài này để giúp anh em khắc phục lỗi đó. Ok! Không lằng nhằng nữa anh em mình vô làm luôn thôi.
Bước 1: Anh em ta lại quay về phần "Chỉnh sửa HTML" và tìm đoạn code sau
</head><b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:left;
width:auto;
}
#related-posts h2 {
margin-top:10px;
background:none;
padding:3px;
}
#related-posts .related_img {
margin:5px;
border:4px solid #f2f2f2;
width:105px;
height:105px;
transition:all 300ms ease-in-out;
-webkit-transition:all 300ms ease-in-out;
-moz-transition:all 300ms ease-in-out;
-o-transition:all 300ms ease-in-out;
-ms-transition:all 300ms ease-in-out;
}
#related-title {
color:#222;
line-height:16px;
padding:0 10px;
text-align:center;
text-shadow:0 2px 2px #fff;
width:100px;
}
#related-posts .related_img:hover {
opacity:.7;
filter:alpha(opacity=70);
-moz-opacity:.7;
-khtml-opacity:.7;
}
#related-title:hover {
text-decoration:underline;
}
</style>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5inaAeaXkpYLDNceWRujMz60Z2hnGeaCXN8W6JnJb7DnBk81nt9jV0ponGp76bifp-1JGjKIBmzSyNoL3h9zvKwOhVLL8OpmAstIKiZ1rqlDcVP_lCl3ldNfu2jNigeR3mZtyAFcVO8Uo/s1600-rw/no-thumbnail.webp";showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=20;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s} function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="related_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5inaAeaXkpYLDNceWRujMz60Z2hnGeaCXN8W6JnJb7DnBk81nt9jV0ponGp76bifp-1JGjKIBmzSyNoL3h9zvKwOhVLL8OpmAstIKiZ1rqlDcVP_lCl3ldNfu2jNigeR3mZtyAFcVO8Uo/s1600-rw/no-thumbnail.webp'}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h2>'+relatedpoststitle+'</h2>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]></script>
</b:if><div class='post-footer'>Có 2 đoạn code như vậy anh em tìm đoạn thứ 2 nhé!Bên trên nó sẽ có đoạn code như sau
<b:if cond='data:blog.pageType == "item"'>
<section class='boxframe' id='related-posts'>
<div id='related-posts'>
<script type='text/javascript'>
//<![CDATA[
var ry='<h3 class="heading-border"><span>Related Posts</span></h3>';rn='<h3 class="heading-border"><span>No related post available</span></h3>';rcomment='comments';rdisable='disable comments';commentYN='yes'; var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=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('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW0FIF3uS2UWKRBx1W1C9qF3klR2wklHR3Nzq6sC-wAdK5jACVkBQ8oIK8mX8G6Cq3XmNb5KtoX8JrmbXCA2h0yliwKPmLIzvJlE7neB6n-hTCpn1p7fNNPP9qvFquUHjqjylRk_8oBJWi/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=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]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}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);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><div class="pthumb"><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a><div class="clear"></div></li></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]></script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var maxresults=4;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');
</script>
</div>
<div class='clear'/>
</section>
</b:if><!-- Related post -->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=4;
var relatedpoststitle="<b style='font-size: 22px;color: #000;'>Bài viết liên quan:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
</b:if>
<!-- End Related post -->Tổng kết
Ok! Như vậy là mình đã hoàn thành xong bước hướng dẫn cho anh em cách khắc phục tình trạng xuất hiện các icon chỉnh sửa trên giao diện của website, cũng như bổ sung thành công tiện ích bài viết cùng chuyên mục cho Blogspot.
Trong bài viết tiếp theo, Ryan sẽ cùng mọi người thực hiện những chỉnh sửa cơ bản để làm đẹp cho website bằng CSS, như thay đổi kiểu chữ, kích cỡ, định dạng, thay đổi màu sắc, đóng khung các thành phần trong website, .vân. vân. .và. .vân. .vân. Cùng chờ nhé (●'◡'●).
Nếu anh em có thắc mắc nào thì nhớ để lại comment dưới phần bình luận mình sẽ giải đáp cho mọi người. Chúc anh em thành công. Còn giờ thì bái bai và hẹn gặp lại anh em.
0 Nhận xét
» Không spam link lung tung, vì chúng ta là những con người văn minh ^^