Chủ Nhật, 3 tháng 1, 2021

Thủ thuật chỉnh sửa giao diện web dịch vụ kế toán sử dụng nền tảng blogspot

Là nền tảng thiết kế web bằng ngôn ngữ XML & Script,  trang blogspot có giao diện thân thiện với các thiết bị di động như điện thoại, tương đối nhẹ, chuẩn seo rất thích hợp dùng làm trang web giới thiệu sản phẩm dịch vụ cho doanh nghiệp.

Như đã giới thiệu về template Sanai dùng làm web dịch vụ kế toán ở bài viết tại link sau : https://www.dichvuketoanplus.com/2020/12/tu-tay-thiet-ke-web-dich-vu-ke-toan-nhan-lam-bao-cao-thue-tai-nha-6635.html 

Phần này dichvuketoanplus.com xin giới thiệu một số thủ thuật hay giúp các bạn chỉnh sửa làm đẹp cho giao diện trang web kế toán cá nhân & công ty sử dụng nền tảng thiết kế web là Blogspot.

Hình ảnh minh họa web dichvuketoanplus.com trước khi chỉnh sửa

1. Thủ thuật thay thế Wiget bài đăng trên trang chủ - 'Blog1" bằng nội dung Web theo thiết kế tùy chỉnh của bạn . 

Trong trang chủ đề Temlate Sanai bạn tìm widget có id='Blog1' :

Cụ thể trong template SaNai chỉnh sửa giao diện trang chủ là web dịch vụ kế toán được chỉnh sửa như sau :

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Phần nội dung tùy chỉnh của kế toán NaSA ( bạn có thể thêm nội dung tùy chỉnh theo ý đồ riêng của bạn vào khu vực này. )

<b:else/>

<div class='bwrapsite-main' id='mainbwrap' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>

<b:section class='mainblogsec' id='mainblogsec' showaddelement='no'>

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

</b:section>
</div>
</b:if>

2. Code ẩn hiện văn bản trên trang chủ :

2.1 Chèn đoạn code này phía trên thẻ </head> :
<!--Ẩn hiện với : Bootstrap Collapse và Accordion-->
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css' rel='stylesheet'/>
<!--Kết thúc Ẩn hiện với : Bootstrap Collapse và Accordion--> 

2.2 Chèn đoạn code này trên phía trên thẻ </body> :
<!--Ẩn hiện với : Bootstrap Collapse và Accordion-->
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js'/>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js'/>
<!--End Ẩn hiện với : Bootstrap Collapse và Accordion-->
Chèn đoạn code này vào vị trí cần ẩn hiện văn bản, hình ảnh :
<div class='container mt-3'>
<a class='btn btn-link' data-target='#target1' data-toggle='collapse' href='#'>
<h2>
<font color='green' size='3'>
Cung cấp dịch vụ chất lượng, Uy Tín,
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<br/>
</b:if>
Chuyên Nghiệp Trọn gói, Hợp Tác Và Phát Triển
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<br/>
</b:if>
Bền Vững :
</font>
</h2>
</a>
<div class='collapse' id='target1'>
<center>
<a href='https://ketoannasa.com/'>
<img alt='dịch vụ kế toán, trọn gói, kế toán thời vụ uy tín, chất lượng tại TpHCM' src='https://1.bp.blogspot.com/-LG2_POXrvdE/X9v2wH3x8MI/AAAAAAAABck/_AXzsst0-lMenC3GU2WXTuRZtV2sbEtSwCLcBGAsYHQ/s16000/dichvuketoantrongoi-ketoanthoivu-taiTpHCM.png'/> </a>
</center>
<div class='post_info'>
<div class='post_desc'>
<font color='black' size='3'>
Nội dung văn bản cần ẩn hiện
</font>
</div></div>
</div>
</div>

Hình ảnh minh họa Web dichvuketoanplus.com sau khi chỉnh sửa
3. Code tạo trang sơ đồ trang web - site map  dạng html :

Mục đích của tạo Sitemap hay sơ đồ cho trang website cung cấp dịch vụ kế toán giúp tạo danh lục liệt kê toàn bộ tiêu đề bài viết được sắp xếp và phân loại theo từng chuyên mục giúp người đọc web dễ dàng tra cứu thông tin trên trang web dichvuketoanplus.com

<script type="text/javascript">var postTitle=new Array();var postUrl=new Array();var postMp3=new Array();var postDate=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function loadtoc(a){function b(){if("entry"in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category"in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postMp3[ii]=o;if(h<10){postBaru[ii]=true}else{postBaru[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><a href="http://dichvuketoanplus.com" style="font-size: 14px; text-decoration:none; color: #616469;">Dich Vu Ke Toan Chuyen Nghiep Trọn Goi </a>')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postMp3[e];postMp3[e]=postMp3[g];postMp3[g]=f;var f=postBaru[e];postBaru[e]=postBaru[g];postBaru[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postMp3[f];postMp3[f]=postMp3[h];postMp3[h]=g;var g=postBaru[f];postBaru[f]=postBaru[h];postBaru[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Judul Artikel";var m="Klik untuk sortir berdasarkan judul";var d="Tanggal";var k="Klik untuk Sortir bedasarkan tanggal";var c="Kategori";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Klik untuk menampilkan semua"}h+="<table>";h+="<tr>";h+='<td class="toc-header-col1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="toc-header-col2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="toc-header-col3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="toc-header-col4">';h+="Download MP3";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="toc-entry-col1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="toc-entry-col2">'+postDate[g]+'</td><td class="toc-entry-col3">'+postLabels[g]+'</td><td class="toc-entry-col4"><a href="'+postMp3[g]+'">Download</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr><td class="toc-entry-col1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="toc-entry-col2">'+postDate[g]+'</td><td class="toc-entry-col3">'+postLabels[g]+'</td><td class="toc-entry-col4"><a href="'+postMp3[g]+'">Download</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Menampilkan Semua '+postTitle.length+" Artikel<br/></span>"}else{var f='<span class="toc-note">Menampilkan '+l+" artikel dengan kategori '";f+=postFilter+"' dari "+postTitle.length+" Total Artikel<br/></span>"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postBaru[a]==true){document.write(' - <strong><em><span style="color: rgb(255, 0, 0);">New !</span> </em></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle('toc-result','blind');">?? Menampilkan Daftar Isi</a> <img src="http://radiorodja.googlepages.com/new_1.gif"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Download mp3 : <a href="'+postMp3[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}};</script> <script src="http://dichvuketoanplus.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script> 

Ghi chú :
Sửa link tô màu đỏ thành link web của bạn. 

4. Code chèn hiển thị số điện thoại trên trang Web :

4.1 Chèn đoạn code này phía trên thẻ </head> : 

 <!--Css chen dien thoai dau trang--> <style>
.fone {
font-size: 19px; /* chữ cạnh nút gọi */
color: #f00;
line-height: 40px;
font-weight: bold;
background: #000; /*Màu nền số điện thoại*/
padding-left: 48px; /* cách bên trái cho chữ */
margin: 0 0;
}
.fix_tel { position:fixed; top:10px; left: 0; z-index:999;} /* left 18px là cách bên trái 18px. nếu muốn cho nút gọi sang phải thay là right */
.fix_tel a {text-decoration: none; display:block;}
.tel {width:205px; height:40px; position:relative; overflow:hidden;background-size:40px;border-radius:28px;border:none} .ring-alo-phone {
background-color: transparent;
cursor: pointer;
height: 82px;
position: absolute;
transition: visibility 0.5s ease 0s;
visibility: hidden;
width: 80px;
z-index: 200000 !important;
}
.ring-alo-phone.ring-alo-show {
visibility: visible;
}
.ring-alo-phone.ring-alo-hover, .ring-alo-phone:hover {
opacity: 1;
}
.ring-alo-ph-circle {
animation: 1.2s ease-in-out 0s normal none infinite running ring-alo-circle-anim;
background-color: transparent;
border: 2px solid #f58220; /*màu sóng*/
border-radius: 100%;
height: 70px;
left: 6px;
opacity: 0.1;
position: absolute;
top: 15px;
transform-origin: 50% 50% 0;
transition: all 0.5s ease 0s;
width: 70px;
}
.ring-alo-phone.ring-alo-active .ring-alo-ph-circle {
animation: 1.1s ease-in-out 0s normal none infinite running ring-alo-circle-anim !important; }
.ring-alo-phone.ring-alo-static .ring-alo-ph-circle {
animation: 2.2s ease-in-out 0s normal none infinite running ring-alo-circle-anim !important;
}
.ring-alo-phone.ring-alo-hover .ring-alo-ph-circle, .ring-alo-phone:hover .ring-alo-ph-circle { border-color: #f58220; /*màu sóng*/
opacity: 0.5;
}
.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-circle, .ring-alo-phone.ring-alo-green:hover .ring-alo-ph-circle { border-color: #4d4d4d; /*màu sóng khi hover*/
opacity: 0.5;
opacity: 0.5;
}
.ring-alo-phone.ring-alo-green .ring-alo-ph-circle { border-color: red; /*màu sóng*/
opacity: 0.5;
opacity: 0.5;
}
.ring-alo-ph-circle-fill {
animation: 2.3s ease-in-out 0s normal none infinite running ring-alo-circle-fill-anim;
background-color: #000;
border: 2px solid transparent;
border-radius: 100%;
height: 30px;
left: 30px;
opacity: 0.1;
position: absolute;
top: 33px;
transform-origin: 50% 50% 0;
transition: all 0.5s ease 0s;
width: 30px;
}
.ring-alo-phone.ring-alo-hover .ring-alo-ph-circle-fill, .ring-alo-phone:hover .ring-alo-ph-circle-fill { background-color: rgba(0, 175, 242, 0.5);
opacity: 0.75 !important;
}
.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-circle-fill, .ring-alo-phone.ring-alo-green:hover .ring-alo-ph-circle-fill {
background-color: rgba(117, 235, 80, 0.5);
opacity: 0.75 !important;
}
.ring-alo-phone.ring-alo-green .ring-alo-ph-circle-fill {
background-color:red; /*màu sóng*/
opacity: 0.75 !important;
}
.ring-alo-ph-img-circle {
animation: 1s ease-in-out 0s normal none infinite running ring-alo-circle-img-anim;
border: 2px solid transparent;
border-radius: 100%;
height: 50px; /*cao cua icon dien thoai*/
left: 15px;
opacity: 1;
position: absolute;
top: 25px;
transform-origin: 50% 50% 0;
width: 50px; /*thap cua icon dien thoai*/
}
.ring-alo-phone.ring-alo-hover .ring-alo-ph-img-circle, .ring-alo-phone:hover .ring-alo-ph-img-circle { background-color: #80837c;
}
.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-img-circle, .ring-alo-phone.ring-alo-green:hover .ring-alo-ph-img-circle {
background-color: #4d4d4d; /*màu khi hover icon*/
}
.ring-alo-phone.ring-alo-green .ring-alo-ph-img-circle {
background-color: #f58220; /*Màu icon */
}
@keyframes ring-alo-circle-anim {
0% {
opacity: 0.1;
transform: rotate(0deg) scale(0.5) skew(1deg);
}
30% {
opacity: 0.5;
transform: rotate(0deg) scale(0.7) skew(1deg);
}
100% {
opacity: 0.6;
transform: rotate(0deg) scale(1) skew(1deg);
}
}
@keyframes ring-alo-circle-img-anim {
0% {
transform: rotate(0deg) scale(1) skew(1deg);
}
10% {
transform: rotate(-25deg) scale(1) skew(1deg);
}
20% {
transform: rotate(25deg) scale(1) skew(1deg);
}
30% {
transform: rotate(-25deg) scale(1) skew(1deg);
}
40% {
transform: rotate(25deg) scale(1) skew(1deg);
}
50% {
transform: rotate(0deg) scale(1) skew(1deg);
}
100% {
transform: rotate(0deg) scale(1) skew(1deg);
}
}
@keyframes ring-alo-circle-fill-anim {
0% {
opacity: 0.2;
transform: rotate(0deg) scale(0.7) skew(1deg);
}
50% {
opacity: 0.2;
transform: rotate(0deg) scale(1) skew(1deg);
}
100% {
opacity: 0.2;
transform: rotate(0deg) scale(0.7) skew(1deg);
}
}
.ring-alo-ph-img-circle a img {
padding: 6px 0 0px 6px;
width: 40px;
position: relative;
top: -1px;
}
/*-----------------*/
</style>
<!--Ket thuc CSS dien thoai --> 

2.2 Chèn đoạn code này trên phía trên thẻ </body> :

<!--Thẻ Div chèn code hiển thị điện thoại đầu trang-->
<div class='fix_tel'>
<div class='ring-alo-phone ring-alo-green ring-alo-show' id='ring-alo-phoneIcon' style='right: 150px; bottom: -12px;'> <div class='ring-alo-ph-circle'/>
<div class='ring-alo-ph-circle-fill'/>
<div class='ring-alo-ph-img-circle'>
<a href='tel:0936592759'><img alt='G' class='lazy' src='https://1.bp.blogspot.com/-oLlyaJt-dXc/X-LbgfljM6I/AAAAAAAABfs/Jb8ILVa8ms8soAbNc5S2zpvuGYxc8upqgCLcBGAsYHQ/s16000/Call-dichvuketoanTpHCM.png'/></a>
</div>
</div>
<div class='tel'>
<a href='tel:0936592759'><p class='fone'>
<font color='white'>
0936.592.759
</font>
</p></a>
</div>
</div>
<!--Kết thúc thẻ Div chèn code hiển thị điện thoại đầu trang -->


Previous Post
Next Post

0 nhận xét: