Graphic Web Design, Computer Network, Balinese Culture

Fix Responsive Blog Template Artisteer
In the process of making a blog or website template we have to consider dimensions of the pixel on the screen of the user that may used, in order to display the content of your blog or websites as well whatever the resolution of that may used by user. The screen size of the user is very diverse. The bloggers team themselves have considered it and provide of many templates that designed with excellent and flexibility of the system, and consider to the mobile screen that may used to access our blog. It is possible sometimes you want make the template as your own use to make fit with our desire. For that we have to edit even if the need to create the template from the beginning, new, and different.

If you have skills and experience are excellent in the making of your blog template complete with the responsive style for the various of screen size, I think you do not need to read this writing. However, if you wish forward, please! In this case I will take the example of a blog template which are created using Artisteer.

To create a blog template as you desired, you must understand and consider about blogger system completely, to produce a template that does not seem amateur. I think it depends on how deep of your knowledge and experience to design a template such a blogger. For those of you that want to make a professional blog template quickly, perhaps Artisteer be a pretty wise choice, don't you? Nevertheless template that originally with Artisteer still looks stiff in my opinion, require any change in some other parts of the template that we have used.

As the generator blog template, template by artisteer have created under the automatic programmed of artisteer software that depends on programmer knowledge about blogger system. Artisteer makes a template, complete with css responsive style. There are some parts of widgets the sidebar in less convenient for the responsive display, especially when you make adds and you have do any changes on the template. Personally i feel tired every time I added or changed a section on the template that must also define its position consider with overall of css responsive style to avoid no something cluttered. If you not define the responsive style every you add div tag on the template, it is possible making responsive display is cluttered. It is most severe in the display of the responsive for adsense ads. Artisteer on the latest i known makes adsense ads on my template blog in the responsive display is not appear or just a half displayed. It is something that you must repaired to keep in safe your adsense ads.

Below is the view of flexibility of the responsive template blog by Artisteer that i have change on the logo, by default is hide. Adsense ads is not looks good, some widgets on the sidebar is cluttered. have you found the same thing with me?

In order to fix the responsive display of the template by artisteer, you must add the CSS media query by adsense script below! This script code will keep the display all part of the template, especially for adsense ads on the screen to keep it performed well.

CSS Media Query by Adsense :
.adslot_1 {
width: 320px; height: 50px;
@media (min-width:500px) { .adslot_1 {
  width: 468px; height: 60px;
@media (min-width:800px) { .adslot_1 {
  width: 728px; height: 90px;

If you have used a template that created by artisteer, as usual go to your dashboard of your blog, and click template>edit html. On the script of your template, find css media queries by Artisteer that is usually already included in the second group of the style code that consist with many responsive class inside and find the following code:

CSS Media Query Artisteer Default :

@media all and (max-width: 959px)
    #art-resp, #art-resp-t { display: block; }
    #art-resp-m { display: none; }
@media all and (max-width: 480px)
    #art-resp, #art-resp-m { display: block; }
    #art-resp-t { display: none; }

Replace CSS Media Query Artisteer with CSS Media Query by Adsense on your template that created by artisteer. If you do is right, the display of the template in "live on blog" on your dashboard will be shown complete with sidebar like the picture on the very top. If you make smaller on your browser window, All part of the template is not cluttered like before. For more details, let’s see the article video! Good Luck!
Share This Article :
Related Articles


  1. This blog information is very useful to make the blog with responsive design and display on all kind of mobile devices without fail.
    Web Designing Companies | Website Design Companies

  2. Responsive blog template is the way to get more impression with all devices search results.

    Web Design Bangalore | Website Designing Bangalore

  3. Thanks for sharing such beneficial information with us. Your article is really very enjoyable while reading and please keep sharing more.

    Web Application Development | JavaScript Error Fix | Website Fix

  4. This comment has been removed by the author.

  5. hermano me descargue unas cuantas plantillas html, boostrap, html 5 pero no se como instalarlas en blogger saben como hacerlo o sencillamente perdi mi tiempo y no son compatibles atento a las respuestas, por favor ayudaaaa creo que perdi un dia y parte de otroo, las plantillas no traen una extension xml

  6. In the afternoon I go play ball, took off her jacket to give you that, you stood on the edge of the field, taking clothes, naturally folded it neatly and then hugged to his chest, then smiled stood there cheering for me
    baixar musicas , baixar musicas gratis, musicas baixar , download musicas , musicas download

  7. A bright smile and a greeting no attempt will be good impression, also will cause him to have feelings for your area. Smile more important than anything else, a smile will feel like the world is joy everywhere.
    snapchat , baixar snapchat , snapchat baixar , snapchat download , download snapchat