Customization Of B-responsive Blogger Template by Spicy tricks


#1

Hi Guys! Today i was searching for templates and found a great lightweight template and I liked that alot. But I am facing much problem in it’s customization. Have a look at screenshots below. The areas which i want to customize are marked red in the screenshots and numbered.







What I want to Customize is :

0 . I want a submenu like this. (Show in figure 1)
1 . Want to remove this slider (Figure 1)
2 . 3 4 5 & 6 ( Marked red in figures 1 2 3 and 4 ) I want to remove these grids and want to replace it with minimal ( Bloglist ) style.
the numbers marked in figures 7 . 8. 9. : In these areas I am not able to place my own widget except the area marked 10 in blue color. ( I can only add widget in area 10 while I want to place my widget in whole of the footer)
11 . Want to customize tabbed menu
12 . Want to remove this from sidebar.

Waiting for help Bresponsive demo blog URL : http://bresponsive-spicytricks.blogspot.com/


#2

@usamafayyaz, I will give you answers one by one. :smile:

Solution 0-

Add this CSS in your template above ]]></b:skin>

#submenu ul li ul li a:hover {
  color: #FFC600!important;
}

Now, whenever you want to add submenu, use this code:

<li><a href="#" title="View all posts filed under Web Design">Web Design</a><ul>
  <li><a href="#">Sub Menu</a></li>
  <li><a href="#">Sub Menu</a></li>
</ul>
</li>

Solution 1,2 -

Search this code in your template:

<div id='featured-content'>
<div class='heading'>				
	Featured Articles
	</div>
<div class='flexslider'>
<script type='text/javaScript'>
   		 document.write("<script src=\"/feeds/posts/default/-/"+featured_slider+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
				</script>
</div>
</div>
<div id='col1'>
<div class='homepage-widget'>
<!-- START WIDGET -->
<div class='block half'>
<div class='grids_box'>
<h3>
<a href='YOUR-URL'>Fashion</a></h3>
</div>
<script type='text/javaScript'>
   		 document.write("<script src=\"/feeds/posts/default/-/"+hom_cat1+"?max-results=1&orderby=published&alt=json-in-script&callback=showhomeposts1\"><\/script>");
				</script>
</div>
<div class='block half last'>
<div class='grids_box'>
<h3>
<a href='YOUR-URL'>Technology</a></h3>
</div>
<script type='text/javaScript'>
   		 document.write("<script src=\"/feeds/posts/default/-/"+hom_cat2+"?max-results=1&orderby=published&alt=json-in-script&callback=showhomeposts1\"><\/script>");
				</script>
</div>
<!-- -->
<div class='block half'>
<div class='grids_box'>
<h3>
<a href='YOUR-URL'>Movies</a></h3>
</div>
<script type='text/javaScript'>
   		 document.write("<script src=\"/feeds/posts/default/-/"+hom_cat3+"?max-results=1&orderby=published&alt=json-in-script&callback=showhomeposts1\"><\/script>");
				</script>
</div>
<div class='block half last'>
<div class='grids_box'>
<h3>
<a href='YOUR-URL'>Nature</a></h3>
</div>
<script type='text/javaScript'>
   		 document.write("<script src=\"/feeds/posts/default/-/"+hom_cat4+"?max-results=1&orderby=published&alt=json-in-script&callback=showhomeposts1\"><\/script>");
				</script>
</div>
<div id='featured-content'>
<div class='heading'>				
	Gallery Carousel Slider
	</div>
<div class='flexslider slider'>
<script type='text/javaScript'>
   		 document.write("<script src=\"/feeds/posts/default/-/"+featured_slider+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
				</script>
</div>
</div>
<!-- ******************END LINKS SECOND ******************* -->
<!-- END WIDGET -->
</div>

and remove it.

Typing other solutions because the editor is running slow. :frowning:


#3

Solution 12-

Search this:

<!-- /tabber-->
<div class='widget  rece_cat_spicytricks'>
<div class='widget-title'><script type='text/javascript'>
    document.write(" <h3>"+side_cat1_title+"</h3> ");
										 </script></div>
<ul class='widget-content'>
<script type='text/javaScript'>
   		 document.write("<script src=\"/feeds/posts/default/-/"+side_cat1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
				</script>
</ul>
<div class='clear'></div>
</div>

Remove it And save changes. :smile:

Solution: Not numbered. 7,8,9 & 10:

Search this in your template:

#footer .widget {
  margin: 0 0 15px 0;
}

Replace it with this:

#footer .widget {
  margin: 0 0 15px 0;
  width: 264px;
}

Now to edit them:

Search:

id='lowerbar1'>

now go inside it and see what is their. You will find some <ul> tags. Replace all the ul and also the code inside it with the widget code you wanna display instead of that widget or say unordered list.


#4

@Shivansh Thanks for the code you have provided. But what about the bloglist design. I hate these grids so can you provide me the bloglist (minimal) Design for recent posts?


#5

I can’t give it here because for creating a bloglist style, time is required.

You can search it on Internet through Google. I guess… Bloglist style steps are already posted by a blog. :smile: