"Grid Tech" Responsive Blogger Template

Live Demo Download

I think that if you are our blog's royal reader then you might have noticed that I have not posted for approx 2 weeks because I was designing a responsive blogger template for you but now I have came here with an awesome surprise for you a responsive blogger template. "Grid Tech" is an grid style blogger template specially designed for tech blogs, the name of this template says it all.
It's a SEO optimized template so you don't have to take the tension of on-page SEO. So what are you waiting for? let's start the post from below and give you an awesome,responsive,grid style etc. blogger template.

Credits Of Grid Tech

This template is totally created by me so you are free to use but with credit link if you remove the credit link your template will be redirect to my site. So be careful to do anything and if you want to remove the footer credits then you have to buy the premium version of this blogger template which will give the full support to you even day and night means 24/7. Thanks for co-operating with me.

Note : If you are interesting in buying this blogger template then do comment below or visit my facebook profile ID. 

Features Of Grid Tech

1. Responsive : The Grid Tech blogger template is 100% responsive tested on all device like Iphone 3G, 4, 4S, 5, 5S, 6, 6+, 6S , Samsung S5, S6 Edge and some Nokia devices. So you are free to use it if you want a responsive template.
2. Main Menu : You have seen on lots of sites that there is a menu which give details of the site from specified labels so you have free to use this template for some stylish look.
3. Ad Banner Below Header : So the awesome thing is that it will generate a good amount of earning because it has a Ad banner just after header. So if you want to generate good amount of earning you have to use this template.
4. Grid Style Posts With Sidebar : I have added posts with stylish look means its a grid style posts and yeah, I have not removed sidebar so it gives it more professional look.
5. Stylish Pagination : I have added a stylish Pagination in replace of older,newer posts so it gives a professional + stylish look to the template.
6. 3 Column Footer With Footer Menu : I have added the 3 column footer with the menu on the top of the footer. So it is give an elegant look to the template.
7. More Features : Related Posts, Share Buttons, Author Box, Custom Comment Style, Custom Heading Styles, Custom Bullet List, Custom Number List and Much more.

This template is my attempt to give the tech bloggers a more professional look and I hope that I have made a perfect blogger template for you all. Perhaps, you can use this template to any niche of your blog no issue just with some modification or no modification.

Customization Of Grid Tech

Grid Tech responsive blogger template needs some basic customization so if you have some basic knowledge of HTML then you can customize it easily if not then follow the below steps to customize it. 

Customizing The Mega Menu

• Go to Blogger>>Template>>Edit HTML
• Find for <nav id='menutop'>
• You'll see the code same as below

<nav id='menutop'>
<input type='checkbox'/>
<label/>
<ul>
<li><a href='//bloggerjinni.blogspot.com/'><i class='fa fa-home'/></a></li>
<li><a href='/search/label/blogger'><i class='fa fa-btc'/> Blogger</a></li>
<li><a href='/search/label/WordPress'><i class='fa fa-krw'/> WordPress</a></li>
<li><a href='/search/label/Make%20Money'><i class='fa fa-usd'/> Make Money</a></li>
<li><a href='/search/label/SEO'><i class='fa fa-signal'/> SEO</a></li>
<li><a href='/search/label/Widgets'><i class='fa fa-cogs'/> Widgets</a></li>
<li><a href='/search/label/Template'><i class='fa fa-cloud'/> Templates</a></li>
<li><a href='/search/label/CSS'><i class='fa fa-css3'/> CSS</a></li>
<li><a href='/search/label/Newbies%20Series'><i class='fa fa-users'/> Newbies Series</a></li>
</ul>
</nav>

• Replace all the bold text with yours.

Customizing The Footer Menu

• Go to Blogger>>Template>>Edit HTML
• Find for <div class='menubottompic'> 
• You'll see the code same as below

<div class='menubottompic'>
<div id='menubottom-container'>
<div class='menubottom'>
<ul>
  <li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Downloads</a></li>
<li><a href='#'>Resources</a></li>
</ul>
</div>

• Replace all the bold text with yours. 

Customizing The Ad Banner Below Header

• Go to Blogger>>Template>>Edit HTML
• Find for <div class="place">
• You'll see the code same as below

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSq9kv827ny8xcIGWDLPWiRcLE_r9vgb-_8LiCMujU05kYyejA9GWLo7uvzNN1zOfDo4buz20W_OW3b-o2b8dpQi_28qFslofAuMfQfjxTxGnvjkwofCerQOB9CP0d6HhFsvneyX9Qqfa0/s1600/ad+1.png' title='ad+1'/>

• Replace whole code with your ad codes. 

Customizing Author Box

• Go to Blogger>>Template>>Edit HTML
• Find for <div class='postauthorbox'>
• You'll see the code same as below

<div class='postauthorbox'>
<div class='postauthoravatar'>
<img alt='Abdul Samad Essani' src='https://lh3.googleusercontent.com/-IUoeb-UIads/AAAAAAAAAAI/AAAAAAAAB3Q/tZFXdPU8-u8/s120-c/photo.jpg'/>
<div class='postauthorlabel'/>
</div>
<div class='postauthorcontent'>
<div class='postauthorhead'>
<h5>
                            Posted By:
                            <a href='https://plus.google.com/u/0/+abdulsamadessani' title='Abdul Samad Essani'>
                              Abdul Samad Essani
                            </a>
</h5>
</div>
<div class='postAuthorbio'>
                          Abdul Samad Essani is the owner and founder of BloggerJinni.blogspot.com. I love to blogging, Design Blogger template, Web Developing and Graphic Designing. I like to learn and share blogging tips with you. Thanks for Reading This Article.
                          <b>
</b>
</div>
<div class='postauthorbox-footer'>
<div style='float:left;text-align:left;'>
                            Join Me On:
                            <a href='//www.twitter.com/samad_100' rel='nofollow'>
                              Twitter
                            </a>
                            |
                            <a href='https://www.facebook.com/absamadessani' rel='nofollow' target='_blank'>
                              Facebook
                            </a>
                            |
                            <a href='//plus.google.com/+abdulsamadessani' rel='nofollow' target='_blank'>
                              Google Plus
                            </a>
</div>
</div>
</div>
</div>

• Replace the bold text with your's. 

Now your all customization has been done successfully and I hope there will be no problem in customization.

Final Words

So this was our "Grid Tech" Responsive Blogger Template if you want any frequent help then commented on this blog is a great idea to get 24/7 help service because I'm always ready to help you. Thanks for using our template. Stay happy and Stay tuned!!

• Tweet
• Share
• Share
• Share
• Share

About Admin

Syed Zaver Abbas is SEO expert in pakistan. he is web designer, web developer, software developer and graphics designer that means he is multi talented. he is also learning more about computer science.

Related Post