 |
| Template Blogspot Vienna Lite Responsive hỗ trợ SEO |
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 Icons2. 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
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: "First",
lastText: "Last",
nextText: "Next",
prevText: "Prev"
}
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&max-results=9999&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+="…",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 »",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&callback=arlinacomments&max-results=7"></script>
7. Ký tự đầu lớn nổi bật
<span class="first-letter">Ký tự đầu tiên</span>
8. Sử dụng nút Demo và Download
<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 cườiMặt cười