File Apps

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, dont 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.

.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:

@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!