Template Vienna Lite Responsive hỗ trợ SEO tốt

Template Blogspot Vienna Lite Responsive hỗ trợ SEO
Template Blogspot Vienna Lite Responsive hỗ trợ SEO
Tặng các bạn một template blogspot mà BDK cũng đang sử dụng. Có thể nói đây là lần đầu tiên BDK chia sẻ template blogspot, chắc có thể sẽ thiếu sót cái gì đó, mong mọi người góp ý. :)
Trước tiên nói về nguồn gốc thì Template này được thiết kế bởi Arlina Design. Template có rất nhiều tính năng hữu ích đặc biệt nhất có thể kể đến là khả năng SEO rất tốt. Cũng như ở tiêu đề có viết thì template này hỗ trợ cả Responsive tức là nó có khả năng tùy chỉnh theo từng kích thước màn hình khác nhau giúp người đọc có thể xem dễ dàng trên nhiều thiết bị và dĩ nhiên là thân thiện với thiết bị di động. Ngoài ra còn khá nhiều tính năng phải chờ bạn khám phá. Bây giờ chúng ta cùng cài đặt thôi!

Chỉnh sửa từng phần của template

Thật ra cái này có trong phần hướng dẫn mà các bạn đã download về. Tuy nhiên để dễ hiểu và trực quan thì mình xin viết ra chi tiết ở đây luôn.

1. Top menu

Bạn tìm kiếm trong template với từ khóa <nav class='top-menus'> và chỉnh sửa lại đoạn code sau
<nav class='top-menus'>
<ul>
    <li><a href='#' title='Sơ đồ trang web'><i class='fa fa-folder-o'/> Sitemap</a></li>

    <li><a href='#' title='Liên hệ với Khánh'><i class='fa fa-envelope-o'/> Liên hệ</a></li>

    <li><a href='#' title='Trao đổi liên kết'><i class='fa fa-link'/> Liên kết</a></li>

    <li><a href='#' target='_blank' title='Facebook Duy Khánh'><i class='fa fa-user'/> Tác giả</a></li>
    <li class='doremifa join'><a href='#' rel='nofollow' target='_blank' title='Join Our Site'><i class='fa fa-plus'/><span class='inv'/></a></li>
    <li class='doremifa gplus'><a href='#' rel='nofollow' target='_blank' title='Follow us on Google+'><i class='fa fa-google-plus'/><span class='inv'/></a></li>
    <li class='doremifa facebook'><a href='#' rel='nofollow' target='_blank' title='Follow us on Facebook'><i class='fa fa-facebook'/><span class='inv'/></a></li>
    <li class='doremifa instagram'><a href='#' rel='nofollow' target='_blank' title='Follow us on instagram'><i class='fa fa-instagram'/><span class='inv'/></a></li>
    <li class='doremifa twitter'><a href='#' rel='nofollow' target='_blank' title='Follow us on Twitter'><i class='fa fa-twitter'/><span class='inv'/></a></li>
 </ul>
 <a href='#' id='pull'>MENU</a>
</nav>
Bạn có thể thay dấu bằng liên kết đến blog của bạn. Ngoài ra bạn cũng có thể thay đổi icon của top-menu. Để biết cách tùy chỉnh icon bạn có thể tham khảo bài viết Hướng dẫn cách sử dụng Font Awesome Icons

2. Tùy chỉnh menu chính

Tìm đoạn code sau và chỉnh sửa menu theo ý mình<nav id='nav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>

3. Phân trang cho bài viết

 
Ở đây mình để mặc định là 5 bài viết trên 1 trang. Nếu bạn muốn chỉnh theo ý mình thì tìm đến đoạn code sau và chỉnh lại thông sốvar pageNaviConf = {
            perPage: 5,
            numPages: 5,
            firstText: &quot;First&quot;,
            lastText: &quot;Last&quot;,
            nextText: &quot;Next&quot;,
            prevText: &quot;Prev&quot;
        }
Cũng đừng quên vào bố cục chỉnh lại Số bài đăng trên trang chính để blog được nhất quán nhé

4. Widget Contact Form

Cái này dùng để tạo trang liên hệ trên blog của bạn. Bạn chỉ cần tạo trang mới và dán code sau vào là được.<form name="contact-form">
<span><i class="fa fa-pencil-square-o"></i> Name </span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  
<span><i class="fa fa-envelope-o"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span> 
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> 
<span><i class="fa fa-keyboard-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />  
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ccc;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit{font-family:'Open Sans';float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>

5. Tạo trang sitemap

Tạo trang mới và thêm đoạn code sau là được<div id="bp_toc">
Loading TOC. Please wait....</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

6. Widget Recent Comment

Bạn vào phần Bố cục chọn chỉnh sửa widget comment rồi dán đoạn code sau vào khung HTML là được<style scoped='' type="text/css">
ul.arlinacomments{list-style:none;margin:0;padding:0}.arlinacomments li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:0!important;word-break:break-all}.arlinacomments li .avatarImage{float:left;margin-right:10px;position:relative;overflow:hidden}.arlinacomments li img{position:relative;overflow:hidden;display:block;width:42px;height:42px}.arlinacomments li a{font-weight:700}.arlinacomments li span{margin-top:2px;color:#666;display:block;font-size:12px;line-height:1.4}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments
function arlinacomments(a){var e;e='<ul class="arlinacomments">';for(var t=0;numComments>t;t++){var r,o,n,i;if(t==a.feed.entry.length)break;e+="<li>";for(var d=a.feed.entry[t],s=0;s<d.link.length;s++)"alternate"==d.link[s].rel&&(r=d.link[s].href);for(var l=0;l<d.author.length;l++)o=d.author[l].name.$t,n=d.author[l].gd$image.src;n=-1!=n.indexOf("/s1600/")?n.replace("/s1600/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s220/")?n.replace("/s220/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s512-c/")&&0!=n.indexOf("http:")?"http:"+n.replace("/s512-c/","/s"+avatarSize+"-c/"):-1!=n.indexOf("blogblog.com/img/b16-rounded.gif")?"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh42zPwIhzPSLXpb9vRrXz2sbkLM1oDAcXrK5rXg24ZwHF5tb6vvspeye7-XhTqAy9QiZIJYW_uWRc0OkoEb5QPs-tZJlznjNuBiJe9KWrttKqFxoKp3eDNzuq_Xyc6RQJt2NnciAFKIeul/"+avatarSize+"/blogger.png":-1!=n.indexOf("blogblog.com/img/openid16-rounded.gif")?"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg66475meV21Pr7Y8jGQYeXg6mBlI87DS9d-fCbwf-fbYo4-HD4IlJCYr6D8LboYbxLc847NP5aGoM5IlpM8azBYIa5jTAA1XaiqBVDti6063ozCld-Bg5dX7Mn7Uv4t3NdI5B5K0L5x7fM/"+avatarSize+"/openid.png":-1!=n.indexOf("blogblog.com/img/blank.gif")?-1!=defaultAvatar.indexOf("gravatar.com")?defaultAvatar+"&s="+avatarSize:defaultAvatar:n,1==showAvatar&&(i=1==roundAvatar?"avatarRound":"",e+='<div class="avatarImage '+i+'"><img class="'+i+'" src="'+n+'" alt="'+o+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div>'),e+='<a href="'+r+'">'+o+"</a>";var A=d.content.$t,v=A.replace(/(<([^>]+)>)/gi,"");""!=v&&v.length>characters?(v=v.substring(0,characters),v+="&hellip;",1==showMorelink&&(v+='<a href="'+r+'">'+moreLinktext+"</a>")):v=v,e+="<span>"+v+"</span>",e+="</li>"}e+="</ul>";var c="";0==hideCredits&&(c="display:block;"),e+="",document.write(e)}var numComments=7,showAvatar=!0,avatarSize=42,roundAvatar=!0,characters=40,showMorelink=!1,defaultAvatar="http://2.bp.blogspot.com/-XjxrXKBPQqs/VYcGtLWPGUI/AAAAAAAAKaQ/5jr871JIwds/s1600/default-avatar.jpg",hideCredits=!0,numComments=numComments||5,avatarSize=avatarSize||60,characters=characters||40,defaultAvatar=defaultAvatar||"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhClQm30WvcD_f1vvloEO55FVbyOl7AqYVNpc8XgYMr7RW7rw2tXE3EUrfdiUnnM5AsXmptLWCicav6mjy-YlS_P45Vxs3hUhyi72Jx3ciV_s_pvf9HRvA-5jk33QmULmtk1IAY-2qfb2jL/s1600/default-avatar.jpg",moreLinktext=moreLinktext||" More &raquo;",showAvatar="undefined"==typeof showAvatar?!0:showAvatar,showMorelink="undefined"==typeof showMorelink?!1:showMorelink,roundAvatar="undefined"==typeof roundAvatar?!0:roundAvatar,hideCredits="undefined"==typeof hideCredits?!1:roundAvatar;
//]]>
</script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=arlinacomments&amp;max-results=7"></script>

7. Ký tự đầu lớn nổi bật

Trang trí ký tự đầu tiên của bài viết cho nó có hoa hòe chút ý mà. Chúng ta dán đoạn code này vào đầu bài viết<span class="first-letter">Ký tự đầu tiên</span>

8. Sử dụng nút Demo và Download

Sử dụng đoạn code sau<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="Link của bạn" target="_blank">DEMO</a></li>
<li><a class="download" href="Link của bạn" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
<div class="clear"></div>
Mình hướng dẫn cơ bản đến đây thôi. Còn một số phần mình thấy cũng đơn giản hoặc ít quan trọng nên mình không nhắc đến. Chúc bạn thành công! Có vấn đề gì có thể để lại comment.

Một Blogger nghiệp dư thích tìm hiểu về blogspot và các thủ thuật blog. Hy vọng từ cái nhìn của một người không chuyên có thể giúp bạn dễ dàng hơn trong con đường xây dựng Blog.

KHI TA CHIA SẺ - HẠNH PHÚC ĐƯỢC NHÂN LÊN

CÓ THỂ BẠN MUỐN XEM