Blogger Lab Full Width Version Responsive Template

Blogger Lab Full Width Version Responsive Template

Comments: 61
data:blog.title
responsive tempalte

After successful response from user I have released today Blogger Lab v1.1 and also releasing Blogger Lab Full width v1.1. I hope this template will give you best user experience. I have fixed all bugs. And Pure Font Awesome based icons used on various part of the template. Hope you would like it.

page speed
Blogger Lab Full Width Responsive Template
Version: 1.1
Platform: Blogger / Blogspot
Release date : 26th May 2015
Author : Mohammad Fazle Rabbi
Website: www.bloggerspice.com
License : Creative Commons Attribution 3.0




Some Features that has incorporated with this beautiful template-
 
FeaturesAvailability
Responsive Template DesignYes Check
Unlimited color Changeable optionYes
SEO friendlyYes
Fast LoadingYes Check
Auto Blog Post summarize And Read More ButtonYes
Auto Image Crop With Thumbnail (Home Page and Label Page Only)Yes
Dynamic HeadingYes
CSS And HTML Base Menu With Drop down (Superfish)Yes
Sidebar Tabs Widgets ready (Powered By Jquery)Yes
User Friendly JASON Search BoxYes
2 Column StyleYes
Beautiful Layout StyleYes
Clean TypographyYes
Custom Official RSS Subscription WidgetYes
Font Awesome 4.3.0 based icons (Latest Version)Yes
CSS Based Social Share Widget (Placed Post Footer) Yes
Ads Banner ReadyYes
BreadcrumbsYes
Post RatingYes
Related Posts with ThumbYes
Social Share ButtonYes
Numbered Page NavigationYes
Flicker Image GalleryYes
Bouncing back To TopYes
ShortcodesYes
Meta Keywords And Description Support (Official Meta Description Support)Yes
Multi Author SupportedYes
EmotionYes
Unique Comment SystemYes
Custom 404 PageYes
Well DocumentationYes

Installation

For installing this template please visit the below tutorial and follow 2nd Method only-

Need Help?

Blogger Lab Full Width Version Responsive Template download zip file included A to Z Blogger blog Creation to Theme Instillation Help. So New Blogger’s And Professional Blogger Can Understand How to Work with this Blogger Template. If You Use My Theme and Need Help from Me I'll do my best to assist you. I Online 8 Hours Per day so leave a comment below or send me email. My Time one GMT + 6:00). For SEO related open discussion you can write in comment section. Thank you.

License

This free Blogger template is licensed under the Creative Commons Attribution 3.0 License, which permits both personal and commercial use.

However, to satisfy the 'attribution' clause of the license, you are required to keep the footer links intact which provides due credit to its authors. For more specific details about the license, you may visit the URL below:
  • http://creativecommons.org/licenses/by/3.0/


Troubleshooting

There are some problem with in template installation. Because this template build with HTML2 so sometimes problem may arise. So here is some pre solution for installing the template accurately.
  • Question: My Template is showing Double Post?
  • Answer: This can be happen due to older template's code mixed with new template HTML code. So to solve the issue you have to make a clean installation. That means you have to remove all previous code of your older template and after that add the new template code. For details tutorial please visit the below Tutorial link and follow the 2nd method. 
Recommended: 

  • Question: No post content  is displaying while clicking on Post link?
  • Answer: This problem may arise but the solution is very simple. Just follow the below steps-
Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on -> Template -> Edit HTML->

Step 3
 Now find Blog1 or Blog2 by pressing Ctrl+F (Windows) or CMD+F (Mac) 

Step 4 Now replace Blog1 with Blog2. If you find Blog2 then replace Blog2 with Blog1.

Step 5 hit the Save template button. And check you template and see your post content is displaying.

I hope question from your guys thus I can give solution while you are using my template. Thank you.

Speak Your Mind

osadharon ekti template share korlen vai color ta darun hoyeche ..

Thanks Aslam.. :baby

i cant download this template .... :dont-know

Hi Mayen Download link is working well.. try with different browser.

http://www.mediafire.com/download/tt3aflookibcjhr/Blogger+Lab+Full+Width+V1.1+Responsive+Template.zip

helpful thak you very much

i face a problem about this template. i send a screenshoot of that problem on facebook.

Hi Saidur..

Apni nicer code ta search koron abong sekhan theke background-color:#FEFEFE; code ta background-color:#dfd0a1; diye change koron.

#spiceright{width:99%;float:right;background-color:#FEFEFE;}

abar nicer code ta search koron

#post-wrapper .innerwrap{padding:0 10px;}

aaita replace kore nicer code add koron

#post-wrapper .innerwrap{padding:0 10px;background-color:#dfd0a1;}

hope it will work now.

গুগোলে banglasahittoblog.blogspot.com লিখে সার্চ দিলে টাইটেল এর পরে ব্লগের ডিসক্রিপশন আসে না , আর read more এ ক্লিক করার পর পোস্ট এর লেখা বড় করতে চাই।

Please follow the tutorial from below link-

http://www.bloggerspice.com/2014/12/blog-meta-title-description-for-search-engine.html

for increasing Font please addd below link before closing b:skin

.post-body{font-size:200%;}

what is b:skin? please details.

Copy the script from below and Paste it above/before ]]></b:skin>

.post-body{font-size:200%;}

ami to eta chai ny. ami chaichi j read more a jowar por likha ta jeno boro dakhay. apnar solution a home page a likha boro dakhay & read more a gela likha ager moto choto dakhay. ami home page a likha choto r read more a jawar por likha boro dakhta chai.

in the post so that writing can be big, bold and italic how to edit it. I already create a big, bold and italic but always save so little writing on the post. thanks

in the post so that writing can be big, bold and italic how to edit it. I already create a big, bold and italic but always save so little writing on the post. thanks

Hi Ferdina
I can't understand what exactly you want to say. Do you want to increase/decrease Font size of this template???

if you wish you can write your own native language (Indonesian). Please write clearly. :t

Selamın aleyküm brother I install this theme, but the next button is malfunctioning.
have the same problem the next button on your site is malfunctioning.
How to solve this problem it is the reason?
I'm waiting for a response from you. please help me

Walaikumus Salam Brother Baris Vatansever..I think Blogger platform has updated. For this reason Ajax file is not functioning properly. So you have to disable the Ajax file.

Please go to your Blogger Dashboard -> Edit Html

Now locate below code

Prev",next:"Next &#187;",loadAjax:true,

Now simply alter loadAjax:true with loadAjax:false

It page navigation will work now. However this is a temporary solution. I will work for further solution. Thank for the information. :wr

Very very Thank you brother loadAjax true change loadAjax:false and the problem was solved :up :lo |o| I'll follow you to solve the problem of loading gif.
you let me know if there is a solution have please.
I am going to be so happy... brother

I want to ask you something brother.
I want to remove the top title LATEST POST.
right. column 3 title Popular and comments. category. how can I do it ?
If you help me. I would be very happy.
Thank you in advance. brother
You can come and see what I want to do my blog. my. blog name Blogdan indir

Hi Baria, For removing Latest post please Edit your template and locate script like below and delete it.

<div class='innerwrap'>
<div class='drop-menu'>
<div><div class='menuitem'><a class='itemexpend' href='#'>
KATEGORİLER
</a>
<div class='hidden' id='droplabel'></div>
</div>
</div>
</div>
<script type='text/javascript'>
labeljs();
</script>


You can remove Popular posts and comment from Blogger Layout section. But you can't remove the tab. Because the tab script is encoded with other script. If you delete then template will break. I did this for script protection. :as

Suddenly Ajax based all widget stop working in Blogger platform. This problem has arises from Google Blogger.

different codes bro
theme gives an error

I want to add three topic which are popular editions, comments and categories on top of the left column.
And can we change the codes.
Can you please help me about this issues ?

sorry bro. I wrote wrong. left column
I want to add three topic which are popular editions, comments and categories on top of the right column.
And can we change the codes.
Can you please help me about this issues ?

Hi Baris, You can remove below URLs only.

<div class='drop-menu'>
<div><div class='menuitem'><a class='itemexpend' href='#'>
KATEGORİLER
</a>
<div class='hidden' id='droplabel'></div>
</div>
</div>

Thank you very much bro.:sl :yeh
categories. Removed smoothly :go
There is only one problem. brother
Are you going to help me in the right column?

Hi Baris This is little bit tough job for you. I am not sure that you can implement the code or not. Take a backup first. otherwise template may break.

now Edit your template and find the below code

#sidebar-middle .navtab li{width:50%;}

now replace it by below code..

#sidebar-middle .navtab li{width:33.33%;}

Now again find below code

<li class='nav-two'><a href='#commenttabs'>Yorumlar</a></li>

and add the below code after above code

<li class='nav-three'><a href='#archivetab'><i class='fa fa-star-o fa-lg'></i></a></li>

Now again find the below code

<div class='hide sidebarmiddle-widget' id='commenttabs'>
...................................
...................................
...................................
...................................
</div>


and after above code add the below code block

<div class='hide sidebarmiddle-widget' id='archivetab'>
<div class='sidebar tabct section section' id='sidebar-archivetab1'><div class='widget BlogArchive' data-version='1' id='BlogArchive1'>
<div class='widget-content'>
</div>


:ex

Theme gives an error.
I take a video which you can see the error.
can watch it here
watch 7.20p for a clear view
https://www.youtube.com/watch?v=yV04DIbjfo4

Brother Baris, You didn't understand the last part. You have to add script after below code. Don't add this with dot dot dot.

<div class='hide sidebarmiddle-widget' id='commenttabs'>
...................................
...................................
...................................
...................................
</div>


It's better download "Smooth Mag Full Width Template" from below URL and check how third tab code I have added. just copy the code from that template.

http://www.bloggerspice.com/2015/05/download-smooth-mag-full-width-responsive-template.html

Thank you very much bro. I finally managed
but there is a small problem.
Tittles are not regular how can i fix them?

Brother Baris.. just locate code block like below

<li class='nav-one'><a class='current' href='#populartab'>Populer</a></li>
<li class='nav-three'><a href='#archivetab'><i class='fa fa-star-o fa-lg'></i></a></li>
<li class='nav-two'><a href='#commenttabs'>Yorumlar</a></li>


Now change it like below

<li class='nav-one'><a class='current' href='#populartab'>Populer</a></li>
<li class='nav-two'><a href='#commenttabs'>Yorumlar</a></li>
<li class='nav-three'><a href='#archivetab'>Categories</a></li>


after that, go to your Blogger Layout section and change the widget. add comment widget under comment tab and add Label widget under Categories tab.

I hope it will work now. :dn

Thank you very much bro
but I ask you something
Why does not the icon title
There are popular titles and icons
but no icon category and reviews
How do I make visible
Allah Senden Razı Olsun Kardeşim

Brother you have to use Font awesome icon code. You will get it from below URL

http://www.bloggerspice.com/p/font-awesome-cheatsheet.html


and add the code like below before tab title.

<i class='fa fa-star-o fa-lg'></i>

for adding different icon just change "fa-star-o" from above code. :up

hello sir, google structruldata tool show many errors as shown in following link : http://i66.tinypic.com/2crmwle.jpg

Plaese give me improved code for this error, i fien d on many balgs but not correct still, so plz help me, my blog is www.utkarshclasses.com/

hello sir, google structruldata tool show many errors as shown in following link : http://i66.tinypic.com/2crmwle.jpg

Plaese give me improved code for this error, i fien d on many balgs but not correct still, so plz help me, my blog is www.utkarshclasses.com/

Hi UTkar classes,
I have designed this template before. You have to fix it by following my couple of tutorial on SEO article section. in updated version I will fix it.

http://www.bloggerspice.com/search/label/SEO?&max-results=5

Thank you. :)

Hi, I was tryiing to explore this template but having one issue in comment box loading.
That Comment box iframe is not loading unless I'm signed-in in.

Hi Raj Beniwal, Have you got the problem in Post page or static page comment box? Comment box iframe script is below.. If script has broken then you can replace the comment iframe script.


<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>


:up

This comment has been removed by the author.

sir, in search engine "text to search" i added all code but if we try to search anything then on search result page no google ad come, what can i do?

This template containing Json search feature. Not any ad will display. This is advance search system.

remove <meta content='90' http-equiv='refresh'/> code from your tempalte. Because your AdSense maybe disable for this tag. auto refresh violate adsense's terms and conditions.
^_^

Thanks Dear Friend Rabbi

I want to try this on my site. Amazing Theme. Awesome responsive on all gadgets. But a small query, Is it help to remove structed data authors and post id error

Thanks a ton

Hi Sumit Kumar,
Please follow my all tutorial about schema.org to solve all template error.


http://www.bloggerspice.com/2016/01/fix-image-AMP-error-from-your-blogger-template.html
http://www.bloggerspice.com/2015/12/trick-to-fix-missing-author-error-from-Blogger-template.html
http://www.bloggerspice.com/2016/02/how-to-fix-all-AMP-error-from-Blogger-static-pages.html
http://www.bloggerspice.com/2015/12/how-to-include-my-blog-social-profiles-in-Google-search-results-by-Schema.org-markup.html
http://www.bloggerspice.com/2015/12/how-to-fix-dateModified-missing-and-recommended-error-from-blogger-template.html
http://www.bloggerspice.com/2016/01/how-to-solve-publisher-missing-and-required-error.html
http://www.bloggerspice.com/2016/01/fix-image-AMP-error-from-your-blogger-template.html
http://www.bloggerspice.com/2016/02/data-vocabulary.org.markup.for.blogger.breadcrumbs.html
http://www.bloggerspice.com/2015/11/remove-and-Fix-imageURL-postId-and-blogId-error-from-Blogger-template.html

Thank you. :)

Thanks a ton again rabbi

Great work done by you always. Now i will clear all structed data error on my blog.

Thanks Again

I have apply this template on tallyssolution.blogspot. com but I am unable to configure multi tab widget of popular post and comment. How to configure comment tab in side bar widget. Please reply

Thanks in advance rabbi.

I want to hire your services. Please send quotations

Hi Sumit Kumar,
I think widget container has become hidden in your site.

Regarding your design order please send me your requirement. Then I can tell you the price. Recently I'm working on a RTL version of AMP blogger theme design. So after completing this design I can start your work. Hopefully within 1 week I will be free.

Thank you. :)

Dear Rabbi

How to activate hidden widget container in this template. Please reply

In my Demo site Layout is ok. And comment container widget is displaying. For making the layout more clearly just update the layout script by 'Edit HTML' like below.



body#layout #header-wrapper {margin-top: 40px;width: 100%;}
body#layout #headerads{width:60%;}
body#layout #header{width:30%;}

body#layout #sidebar-wrapper {overflow: visible;width: 50%;}
body#layout #post-wrapper {overflow: visible; width: 50%;}


hopefully widget would be visible now. :)

Where to post above code. Please help

Also please suggest how to make drop down menu sticky. Please help

Hi Sumit Kumar :)
To make sticky menu please find the below 2 CSS script


#nav {
height: 46px;
background-color: #3A4249;
position: relative;
font-family: 'Montserrat', Open Sans,sans-serif;
}


and


#main-wrapper {
padding: 10px 0px;
padding-top: 15px;
background-color: #FFFFFF;
}


replace the above script by below code block.


#nav {
height: 46px;
background-color: #3A4249;
position: fixed;
width: 100%;
font-family: 'Montserrat', Open Sans,sans-serif;
z-index: 999;
}


and


#main-wrapper {
padding: 10px 0px;
padding-top: 55px;
background-color: #FFFFFF;
position: relative;
}


Thank you.

Thanks Rabbi

Sticky Dropdown works now,but it is looking some odd because when scroll down it appear on a fix stage not on top of the screen. How to fix it on top of the screen and remove space above the navigation bar. Please help

Hi Sumit, to make it smooth you have to use Jquery script. But it requires time for coding.

I just shown you the simple way to make the menu sticky without any JavaScript and jquery script. And it doesn't affect theme loading speed.

Thanks rabbi.
Now comment section appear on my site.

I need your help on a very small matter. Please reply if you are available

Thanks in advance

Hi Sumit,
My request is to make comment on relevant article's comment section. For widget related help make comment on widget related article and for Blogger theme drop comment under theme related posts.

Thank you. :-bd

Hi Rabbi

Thank you so much for the wonderful template, you are doing great bro..
Meanwhile could you please help me on a issue i am facing with the template :
On my home page, the list of posts are being displayed along with author,time etc etc but the date of posting that article is not being displayed.....please help me out on the same

Thankss !!!

Hi Suraj :)
Simply you have to set the date from Blogger Dashboard. Please follow the tutorial from below URL.

http://www.bloggerspice.com/2016/05/blogger-comment-timestamp.html

Thank you :up

Hi Rabbi

Thanks for the quick reply !!!
I am having issues with my posts time stamping ....on my home page the different dates on which i posted my articles is not being displayed .... comment section is working properly... so kindly help me onto the post timestamping.... meanwhile i have checked all the blogger setting... they are fine ....maybe i have to edit something in my html .... my blog address is http://theequitybull.blogspot.in/

Thanks Again !!!

You have to set all the timeformat similarly. Just follow the below instruction


Settings -> Language and formatting -> Formatting then set

Date Header Format 5/22/2017

Timestamp Format 5/22/2017

Comment Timestamp Format 5/22/2017

Thank you :up

Awesome bro... thank you so much !!!

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *