Excessive Use Of Dynamic Coding & Variables
Blogger Templates are designed using CSS and HTML and programmed with XML and JavaScript. All unofficial templates use these basic languages to create a blogger template. These coding can easily be edited, understood and played with. All MBT tools and tutorials are based on these basic coding. The new Blogger templates however is using a more difficult and complex dynamic language which is responsible for providing the users with easy software editing option. i.e. The users can edit the font colors, sizes, link colors, background colors etc using the Template Designer Tool. Though it may sound good but the drawback of these auto options is that your entire template style sheet properties are declared using variables.
- In easy words a variable links several part of your CSS together and if you change the variable value the effect will be applied to each and every CSS class. In short for Newbie bloggers and even for us, editing the template becomes tough as you don't see constant values rather weird symbols like these:
/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;
_background-image: none;color: $(header.text.color);-moz-border-radius: $(header.border.radius);
-webkit-border-radius: $(header.border.radius);
-goog-ms-border-radius: $(header.border.radius);
border-radius: $(header.border.radius);
}.Header img, .Header #header-inner {
-moz-border-radius: $(header.border.radius);
-webkit-border-radius: $(header.border.radius);
-goog-ms-border-radius: $(header.border.radius);
border-radius: $(header.border.radius);
}.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
padding-left: $(header.padding);
padding-right: $(header.padding);
}.Header h1 {
font: $(header.font);
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}.Header h1 a {
color: $(header.text.color);
}.Header .description {
font-size: 130%;
}
The above class is the CSS code for styling the Header. You can clearly see the variables indicated by the dollar sign ($) Now suppose if you wish to edit the background image of your header or change the border colours, font style etc. then how can you set the values when everything is in variables? Of course you can do that if you have some prior knowledge of web languages but this would be difficult to new bloggers.
- The widget code is also programmed differently using Macro:param tags. See this code,
<aside>
<macro:include id='main-column-left-sections' name='sections'>
<macro:param default='0' name='num' value='0'/>
<macro:param default='sidebar-left' name='idPrefix'/>
<macro:param default='sidebar' name='class'/>
<macro:param default='true' name='includeBottom'/>
</macro:include>
</aside>
This is the new way of adding dynamic tags to your widgets so that they could be edited directly using "Template designer". Previously the widget <b:section> tags were used which was easy to understand and replace as compared to this.
- Further simple tags like <body> has been messed up into something like this,
<body expr:class='"loading" + data:blog.mobileClass'>
In all blogger tutorials we always mention <body> tag and it will now turn a headache for new bloggers to find the same <body> tag in the new template designs.
In a nut shell as a web designer myself I can only advise you all to kindly stick to custom templates which are far better coded and optimized compared to blogger templates. With custom templates you have complete command over your layout coding and doesn't have to reply on the template Designer tool. You can apply all blogger tutorial tricks to your custom templates easily and can better implement them. I felt it important to discuss this topic as most of you were facing problems in applying the tuts and tricks. Hope this make things clear.
.gif)
.gif)
ala yar
ReplyDeleteCan this make div class='post-footer' disappear on my blog?
ReplyDeletevery informative articular, Thanks for sharing this
ReplyDeletehttp://www.mybloggertools.com/