G Vusion is a product of Arlina Design, followed by G Vusion 2 and now G Vusion 2 Update (November 2015). I myself fix some html code in his template and optimizing it in May 2016 so you could use this safely.
You must check all template, both WordPress or Blogger each time you want to pick up one. Read this article Top Blogger Testing Tools and use them to check this template at first.
In my points of view, this template is really good, both SEO and graphic. If you spend more time to customize it, especially CSS code, it will be a great template (you could check out blogit.pw template)
Related: How to Install Blogger Templates
The reason I love this template is the features it provide: Responsive, SEO Friendly , Mobile Friendly, Personal Blog, Custom Threaded Comment, 2 Column, Light Base Theme Color, Responsive Ad Slot, Breadcrumbs, Related Posts with Thumb, Search Box, Social Share Button, Top Navigation, Responsive Dropdown Menu, Smooth Scroll back To Top, Custom Contact Form Widget, Social Links Widget, Recent Posts by Label Widget, Subscribe Box Widget,... and much more.
G Vusion 2 Update is a Responsive Blogger template. You could use it for many purposes.
Customize G Vusion 2 update
The one you have downloaded above is the ripped template. You need to add your info such as Google Analytics, Facebook ID, Contact address,... to the new template to make yours. To do that, follow these steps below.
Top Navigation
<div class='navigation' id='navigation'>
<nav class='mainin-nav' id='main'>
<ul>
<li class='home1'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li class='home2'><a href='#'>About</a></li>
<li class='home3'><a href='#'>Contact</a></li>
<li class='home4'><a href='#'>Advertise</a></li>
<li class='home5'><a href='#'>Sitemap</a></li>
</ul>
<a href='#' id='pull'>MENU</a>
</nav>
</div>
Main Navigation
<nav id='gvmenu'>
<input type='checkbox'/>
<label/>
<ul>
<li class='homers'><a href='/'>Home</a></li>
<li><a href='#'>Static Page</a></li>
<li><a class='ai' href='#'>Menu</a>
<ul class='menus'>
<li><a href='#'>Drop Menu</a></li>
<li><a href='#'>Drop Menu</a></li>
<li><a href='#'>Drop Menu</a></li>
<li><a href='#'>Drop Menu</a></li>
<li><a href='#'>Drop Menu</a></li>
</ul>
</li>
<li><a href='#'>Button</a></li>
<li><a class='trigger2' href='#' onclick='window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cen&hl=en'); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li>
</ul>
</nav>
Page Navigation
Page Navigation is one of the best widget of this template. It made the blog more profresional look, also kept it score with Google when you applying for Google Adsense because your blog has a good navigation system. If your want to customize the default setting of Page navigation, just simple search for something like those below:
var pageNaviConf = {
perPage: 5,
numPages: 3,
firstText: "First",
lastText: "Last",
nextText: "Next",
prevText: "Prev"
}
You can change the number of Posts per Page (but be sure to change that number on Label, Main post too) or change the Words represensed for Page navigation button.
SEO Meta Tag
G Vusion 2 Update blogger template has SEO key intergrated ready, you kust need to put your application ID, search engines ID,... to the form. Search code, then change the xxxxx with yours ID:
<meta content='xxxxx' name='keywords'/> <link href='https://plus.google.com/xxxxx/posts' rel='publisher'/> <link href='https://plus.google.com/xxxxx/about' rel='author'/> <link href='https://plus.google.com/xxxxx' rel='me'/> <meta content='xxxxx' name='google-site-verification'/> <meta content='xxxxx' name='msvalidate.01'/> <meta content='xxxxx' name='alexaVerifyID'/> <meta content='xxxxx' name='Author'/> <meta content='xxxxx' property='og:description'/> <meta content='xxxxx' property='fb:app_id'/> <meta content='xxxxx' property='fb:admins'/> <meta content='xxxxx' name='twitter:site'/> <meta content='xxxxx' name='twitter:creator'/>
Contact form
Create a new Page. Change to HTML edit (and do not return to Compose editing mode). Paste those codes below to that Page:
<form name="contact-form">
<span style="font-family:Open Sans,Arial,Helvetica,sans-serif;font-weight:700;"> Name </span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<span style="font-family:Open Sans,Arial,Helvetica,sans-serif;font-weight:700;"> Email Address <span style="color:#f56954;font-weight:bold;font-size:x-small;">important</span></span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<span style="font-family:Open Sans,Arial,Helvetica,sans-serif;font-weight:700;"> Content <span style="color:#f56954;font-weight:bold;font-size:x-small;">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;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{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;}
.post-body input {width:initial;}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
SiteMap
Same with Contact page. Create a new Page and name it sitemap.html. Paste codes to HTML mode and save Page.
<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>
<style scoped="" type="text/css">
#comments,#Label1,#FollowByEmail1 {display:none;}
#HTML3 {visibility:hidden;}
/* CSS Full Sitemap */
#bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:'Roboto';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#cdb280;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
#bp_toc a{text-align:left;float:none;font-size:90%;padding:0}
</style>
Social Links
Social Links was placed at the top of siteBar, usefull to connecting with visitors. Find the code below and add detail to it.
<div class='gvusion-socials-icons mom-socials-widget'>
<ul>
<li class='facebook'><a href='#' rel='nofollow' target='_blank' title='Follow us on Facebook'><i class='fa fa-facebook'/></a></li>
<li class='twitter'><a href='#' rel='nofollow' target='_blank' title='Follow us on Twitter'><i class='fa fa-twitter'/></a></li>
<li class='googleplus'><a href='#' rel='nofollow' target='_blank' title='Follow us on Google+'><i class='fa fa-google-plus'/></a></li>
<li class='rss'><a href='#' rel='nofollow' target='_blank' title='Follow us on RSS'><i class='fa fa-rss '/></a></li>
<li class='youtube'><a href='#' rel='nofollow' target='_blank' title='Follow us on Youtube'><i class='fa fa-youtube '/></a></li>
<li class='dribbble'><a href='#' rel='nofollow' target='_blank' title='Follow us on Dribble'><i class='fa fa-dribbble '/></a></li>
<li class='deviantart'><a href='#' rel='nofollow' target='_blank' title='Follow us on DeviantArt'><i class='fa fa-deviantart'/></a></li>
<li class='pinterest'><a href='#' rel='nofollow' target='_blank' title='Follow us on Pinterest'><i class='fa fa-pinterest '/></a></li>
<li class='instgram'><a href='#' rel='nofollow' target='_blank' title='Follow us on Instagram'><i class='fa fa-instagram '/></a></li>
<li class='tumblr'><a href='#' rel='nofollow' target='_blank' title='Follow us on Tumblr'><i class='fa fa-tumblr '/></a></li>
<li class='linkedin'><a href='#' rel='nofollow' target='_blank' title='Follow us on LinkedIn'><i class='fa fa-linkedin '/></a></li>
<li class='soundcloud'><a href='#' rel='nofollow' target='_blank' title='Follow us on Soundcloud'><i class='fa fa-soundcloud '/></a></li>
</ul>
</div>
Recent Posts by Label
Very usefull when you want to show posts of specific label only. Click the blank widget right under Page Navigation, then add the code below to it. Change YourLabel with your Label, Category you want to show up.
<script type='text/javascript'>var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 40;</script> <script type="text/javascript" src="/feeds/posts/default/-/YourLabel?orderby=updated&alt=json-in-script&callback=labelthumbs"></script> <a class='labelmore' href='/search/label/YourLabel/max-results=5' title='Show All'>More »</a>
Recent Comments Widget
Create a blank widget (HTML widget). Add the code below to it:
<style scoped='' type="text/css">
#HTML85 .widget-content {max-height:300px;overflow:auto;}
ul.arlinacomments{list-style:none;margin:0;padding:0}.arlinacomments li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-all;padding:10px 0;margin:0;}.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/AVvXsEiYPZG05UJdpa92UuSO6PKDsypqwOEo73EnzGW5gHOrOToQQZD_DSofQNoEsI6FrJTp3SYLhATNVoFl6tuRFsSKjFVhW_ruIQgBWbKNaA_85nTDkMZ6GYbYeOjP6yk8EyA5lB8KbQqKzpPN/"+avatarSize+"/blogger.png":-1!=n.indexOf("blogblog.com/img/openid16-rounded.gif")?"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCGAGVuKf_O0wPKmepJxefg8E5E3-40O_HsWjj8W3L1D3Ba0Z2yaViZ_Ggq9ypeDfLWo5s9546addvJX8fyjkoEP2eLYlPS6e9uCMI3ITZtD0F-qNzB-6eaZPUaGMsnzQ1l15ZAvKA2wKD/"+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=15,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/AVvXsEhb7lxh7XM7Ob28xvND8sx6t8BEyEq_0Ds_W23YIud376VaW1GW3TXFEd7wG3hDgD0cGMUDFCUiteBl15G8ZqSiz5NnkgMN41FYXhLm_m5zg75JbiPHx58yYfiGD1oRdaSRqK2WgJX_u5AR/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=15"></script>
Ad Banner HTML
G Vusion 2 Update already has a big banner ready for advertising. Banner 970x90. You could find this in Layout section. Just need to paste the Google Adsense or alternately ads ot it.
ShortCodes
Drop Caps
<span class="awal">Your First Letter here</span>
Blockquote
To create a block quote simply select all the text you want to become a citation and click on the icon Excerpts from the blog post text editor panel.
Tables in posts
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
</tbody>
</table>
Button
<div style="text-align: center;"><a href='' target='_blank'><button>Demo</button></a></div>
Mobile Responsive
Turn off the mobile version of this template, please click Template> button Gear> Select None. That mean this template has mobile section already and you will use it instead off blogger mobile support.
That's all. If you got any trouble when install and customize this template, share your problems here and we will have a look.
Latest
2 comments
why is that in my Phone the related post is in different language? and it redirects to another site?
I don't know what you mean?
May be you try to change the credit?
Comment here
Emoticon Emoticon