Johny DemoSite

Love this
  • Layout
  • 2 Column with Right Sidebar
  • Colors
  • Johny DemoSite template color schemes:
About this template
  • Date Released:   Feb, 2013
  • Designer:   Mas Template
  • Price:   FREE
  • Creative Commons Attribution: You are free to use for personal/commercial use. But, you must attribute the work to the author. Should not remove credit links.
  • Downloads:   7205
  • Demo views:   10713
  • 41 people love this template
Shortlist this Blogger template
Lovely Template Editor's Choice award winning template
Design Features
  • Responsive design
  • Designed to provide optimal viewing experience across wide range of devices from Desktop to mobile phones
  • Post Thumbnails
  • Show a thumbnail image (small image) for every post using this template
  • Custom web fonts
  • Johny DemoSite template uses Web fonts like Google Fonts. Improve your website typography by using custom fonts
Customization Features
  • HTML Menu
  • Navigation menu for this template is customizable in HTML. Edit the HTML to add your menu links
  • Widget Ready
  • Johny DemoSite template comes with many widgetized area. Add your widgets easily using this template
  • Footer Widgets
  • Johny DemoSite template comes with footer widgets. Use your footer area effectively for engaging your users
More Features
  • SEO Ready
  • Johny DemoSite template is optimized for Search engines like Google. This template helps your website to rank higher in search engines
  • Related Posts
  • Johny DemoSite template shows related posts in the bottom of every post. This improves user engagement of your site
  • Ad Ready
  • Use this template to show Banner advertisement or Google ads easily. Make money using your site
  • Social Buttons
  • This template comes with social buttons like facebook, twitter etc., Let your users share your content easily
  • Search box
  • Johny DemoSite template has search box in it. Search box helps your user to find the content easily on your site
Open this template file (Johny Demosite.xml) in a text editor like Notepad or Notepad++ and do the following modifications.

Dropdown Navigation Menu

Find the following code in the template file. Update the href value and Menu text to your needs. This will be dropdown navigation menu for your site.

<ul class='sf-menu'>
<li><a href='/'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Drop Menu 1</a>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Drop Menu 3</a>
<li><a href='#'>Sub Drop Menu 3.1</a></li>
<li><a href='#'>Sub Drop Menu 3.2</a></li>
<li><a href='#'>Drop Menu 2</a>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>

Ad Banner areas

This template comes with many widgetized areas which can be used to put your Google ads or other banner ads. For example, you can add a 728x90 banner ad in the HTML/Javascript widget next to (Header) widget. You can also place 300x250 banner ads in sidebar and footer areas.

Comments widget

Go to Layout page -- Click Edit on Comment widget. Place the following code in the content box.

<style type="text/css">
.tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
<script type="text/javascript">
// Recent Comments Settings
numComments = 5,
showAvatar = true,
avatarSize = 30,
characters = 60,
defaultAvatar = "",
hideCredits = true;
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>

Random Post widget

Go to Layout page -- Click Edit on Random Post widget. Paste the following code in the content box.

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k <; k++){if([k].rel=='alternate'){var item = "<li>" + "<a href=" +[k].href + ">" + entry.title.$t + "</a> </li>";
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

SEO Stuff

Find following code in your template file and update meta values with appropriate text
<meta content='Your Blog Description here!' name='description'/>
<meta content='Your Keywords here!' name='keywords'/>
<meta content='Author Name here!' name='Author'/>
<meta content='general' name='rating'/>
<meta content='all' name='robots'/>
<meta content='index, follow' name='robots'/>
<meta content='id' name=''/>
<meta content='1 days' name='revisit-after'/>
<meta content='Indonesia' name='geo.placename'/>

Layout for Johny DemoSite Blogger Template

  • Dhrumit

    I am really really thankful to u bro… your template is working fabulously
    Thank u so much

    • lovelytemplates

      Thanks a lot for your nice words…

  • Uliana

    How tdisplay more posts on the home page?

    • lovelytemplates

      Go to Settings — Posts and Comments page. Change the Show at most textbox value to whatever number of posts you want to display per page.

  • Romulo

    How can I take off the banner ad in the title ?

    • lovelytemplates

      Go to the Layout page in your blogger account. Remove HTML/Javascript widget which is located just above the Blog Posts widget (right to Header widget).

  • mehdi

    its not displaying all the 12 post i want in the home page, i had already changed the number of post to display to 12.. still its not working fine, help me please.

    • lovelytemplates

      This template controls Number of posts per page in template code. If you change this in Blogger then it won't work. Look for the following code in the template HTML. Update this to 12

      var postperpage=9;

  • Admin

    İ deleted my pages part, by mistake. Actually i didnt delete i only changed pages part on widgets and when i turn it back its own status it didnt change. Please help me, just show me how can i take it back?

    Thank you!

    • lovelytemplates

      Re-install this template. That should fix it

      • Harun Tepe

        I know that it's a solutıon can you show me the part of the pages in the .xml document or fixed codes.

        • lovelytemplates

          Harun Tepe, It is difficult and takes more time to fix. Just re-install the template.

  • Harun Tepe

    How can i change the title's fonts character on codes because my language is turkish and when i create the content titles seem big and small character…

    • lovelytemplates

      Find the following code in the template XML. Update the font: 30px Oswald with your font and font-size

      #header h1, #header p {
      font: 30px Oswald;
      line-height: 30px;
      color: #333;
      text-shadow: 0px 1px 2px #fff;
      padding-bottom: 10px;
      margin: 0;

  • Hassan Al Mehdi

    Sir, i tried to create 404 page for this but its not supporting(i guess) eventually i failed to create the 404 error page.
    And 2nd problem i am facing with this templete is :
    Google "feedburner" is showing an error : "The URL does not appear to reference a valid XML file. We encountered the following problem: Error on line 18: The reference to entity "zx" must end with the ';' delimiter"

    Please Help Sir..

    • lovelytemplates

      Sorry, I can't help on customization. You have to hire a developer or designer to do this for you

  • orb

    How I edit the navigator bar ( Home | Menu1 | Drop Menu1 | ……) ?

  • orb

    My article title is long. It makes the view button on the right box disappear. I want it shows my title and the view button (description is unnecessary). Please Help!!

    • lovelytemplates

      I don't see this problem on your site. I see the Article title and view button displaying properly

      • orb

        thank you so much. Now, I tried to cut my title not more than 2 lines that make it display properly.
        love you template. thx again <3

  • orb

    Another question… Is it possible to make "category" on the navigator menu such as land, house,… . Then, when clicking on Land category, it will retrieve only articles tagging "land" showing on boxes like homepage.
    Thank you in advance :)

    • lovelytemplates

      Navigation menu is a static menu. Go to Documentation and refer to section "Dropdown Navigation Menu". Follow the instructions in that section. You have to manually change the Link name and Link URL to the tags you need.

      For example, to display all posts tagged with "Apartment", use the URL ";

  • Houssam

    hi how fix the large comme le demo ?

  • jenny

    how can add j'aime like this template ?

  • lovelytemplates

    I am sorry, I don’t have your website url. Can you post it again if you have already posted?

    • Mehdi Ruby

      Sir the problem is solved automatically both in your live demo and my site. Cheers.

  • lovelytemplates

    You should set the Post count in Settings. Go to Settings — Posts and Comments. Then, set Show at most as 12 to show only 12 posts per page.

  • Mehdi Ruby

    i use this template for my blog, now i had created 404 page but its not Showing the 404 error page, How to create 404 error page in this blogger template. or this template do not support 404 error page only. Please Help..

    • lovelytemplates

      I see the 404 page working in your site. But, after few seconds it is getting redirected to your home page. Sorry, we can’t help on customization. This may be due to some external scripts you have.

  • Saqib

    awesome template, it has everything that a good blogger want, but the only drawback is that it does not show the thumbnail images if it is copied in the post it only shows when it is uploaded, except this thing it is very very nice and it also has mobile view so that visitor don`t have to wait much !!!!!!!!

  • Saqib

    i want to ask that i have added the ad code after the post title but tell me how to put it in between the post and when i open in mobile in desktop view then the site which opens in computer does not open in desktop view !

  • lovelytemplates

    I see thumbnails are visible in your site now

  • Graduation Party Ideas

    How do I view 4 threads in a single line and not as e exists only 3