StramaXon 2021

Showing posts with label HTML. Show all posts

Sunday, July 2, 2017

Trouble Adding AdSense Code for Page-Level Ads? Learn how to fix it.

Post written by Deepak Kamat

In order to add the Page-Level ads functionality from AdSense on your Blogger blog you are required to place a code that AdSense provides which is :

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"/>

Unfortunately if you have tried placing the code in your theme you may have run into this error that states:

Error parsing XML, line n, column n: Attribute name "async" associated with an element type "script" must be followed by the ' = ' character.

That's a bit annoying - What could be going wrong with the code that AdSense (a Google product) has provided is causing error on Blogger (another Google product).

The problem is highlighted in the error message itself "Attribute name "async" associated with an element type "script" must be followed by the ' = ' character."

Attribute name "async" in the code we got must be followed by a '=' character. But the code we got simply has <script async ... />

So what can be done? Modify the code to be parsed by Blogger's theme parser correctly. Here's the code with a little change, we replaced async with async="async" to make the code a valid XHTML markup.

<script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Place this code in your Blogger theme code and save. It should work properly now.

Why do we have to use this "hack"?

This shouldn't even be considered as a hack. This is plainly a case where a valud HTML5 markup is not parsed as a valid XML / XHTML markup.

Yes, our blogs are HTML5 in the end when it gets loaded on a web browser, but the code that runs in the background is XHTML, and the thing with XHTML is that it is very strict about the markup language. In HTML5 you can simply leave out a value from a attribute or leave an HTML element unclosed and it will still work.

But XHTML won't. What's valid in XHTML is also valid in HTML5, so this don't need to be considered a hack or even a workaround. AdSense provides the code that is totally HTML5 compliant only it didn't anticipate the case where users may want to add the code to XHTML templates.

Will it have any impact on the way this code is supposed to work?

Other than having a few extra characters in the code you had to add, no. This change wouldn't affect anything how AdSense is supposed to work. We just made the code compliant with XHTML to be taken in by Blogger.

Tuesday, December 8, 2015

Adding AdSense Ad Inline With Post in Blogger

Post written by Deepak Kamat

There are numerous tutorials and tips on increasing revenue on AdSense by using different ad placement techniques and practices, many of them work great, but Ads in the main body content is one of the most vital place.

Ads placed in post body can make a significant difference in the revenue but you have to do it wisely, it is where the main focus of a site's visitor is for most of the time during their visit so it is important to make sure the experience is not obstructed for the visitor due to the ads.

In this tutorial you will learn a simple way to add AdSense ad in your post and have it display in a good manner that is by floating the ad to a direction and have the paragraphs wrap around it.

Set Things Up

You can simply paste an Ad code in the post editor and the ads will appear but that isn't always what you need. How about floating it to the left or the right so the text wraps around it? We are going to learn just that by using simple markup and CSS so you can selectively add the Ads to any post at the best position you like.

Add The CSS Styles

We will get onto the main part where you have to work with the ad codes later before that let's set a few lines of CSS that is going to complement the box which is going to contain your Ad. This tutorial is meant for square ads only.

/* By default it floats to left */
.ad-container {
    float: left;
    padding: 10px 0;
    padding-right: 10px;
}

/* For ads floating to the right */
.ad-container.right {
   float: right;
   padding-left: 10px;
   padding-right: 0;
}

/* Centered Box */
.ad-container.center {
    float: none;
    padding: 10px 10px;
    text-align: center;
}

/* Clearing floats */
.ad-container br {display: none;}
.ad-container:after, .ad-container:before {
    content: "";
    display: block;
    clear: both;
}

If you are not sure where to add this CSS code please check the guide on adding CSS to a Blogger blog

The HTML Container

What does this do? Well, you can, as I already mentioned, paste the Ad Unit's code provided by AdSense in the HTML mode in the post and the ad will start appearing but you get a very little and not-an-easy option to position the ad as you like. With this you can.

Copy the following code and have it saved in your favorite text editor so you can use it in the next steps easily.

<div class="ad-container">
  <!-- Paste your code here -->
</div>

The HTML markup is simple, just put your AdSense code between the first and the last line i.e where  is and that is it.

You need to know a small thing if you want to have the ad centered to floated to the right as by default it floats to the left. Check the following line of codes trimmed from the HTML markup provided above.

<div class="ad-container center">

We added the keyword "center" in side the class="" attribute. If you want the ad to appear centered then you have to add it too to your markup.

<div class="ad-container right">

In case you need it on the right just add "right" in there and that's it. Simple!

Once you have this markup ready with your AdSense Ad code you may proceed to the new steps that guides you through adding it to the post through post editor.

Put The Final Code In Post

By now we assume that you have finalized the code i.e edited the markup and included your ad unit code where described.

To put it into your post click on the "HTML" button when you are in the post editor

After switching to the HTML mode paste your code around the text where you want it to appear. Mostly ads are put at the start of the blog post but if you wish you can put anywhere for example at a position where you know the readers are going to spend most time reading or focusing.

Make sure that when you paste the code anywhere in the post in HTML mode you paste it outside a <span> or <div> tag that may be there to contain some other text or paragraph/image.

For any further help on this you may use the comment box below to let me know.

Sunday, August 26, 2012

Social Share Count Fluctuated After Custom Domain Change

Post written by Deepak Kamat

If your are on Blogger or any other website being run on a sub-domain for example .blogspot.com or .wordpress.com you have the option to have your own purchased domain on it but if you have did it already then you would have noticed the share count on post are all reset.

Are you using social share plugins from AddThis or a self made code that works for blogger automatically in the template ? Let's say you have 100s of +1, Tweets or Like on one of your post and all the shares were made when your blog was on the sub-domain (eg. .blogspot.com, .wordpress.com) but when you changed the domain to your own purchased domain what you see is all shares have been reset.

If you don't have much information about these then at first you will shocked because all the shares on your hard work are not there anymore but is that true, should it be called an issue ?

What's the reason

If you know how the share buttons work and how the web works then you don't need to read this but many people who don't have the knowledge about it would be tensed about it. The reason is that the shares were made when your blog was on blogspot domain eg.
http://yourblog.blogspot.com/2012/03/some-post.html
And the social sites will send data to the share counters that redirects to this URL but when the URL is changed the counters are redirected to other URL (your new domain) and it then count shares for
http://yourblog.com/2012/03/some-post.html
If you try to add a code that will redirect to your old domain then you will see back the counters to normal as it fetches the count for the old URL but you shouldn't do it.

What to do ?

If you ask me I would just sit back and relax, it won't have any bad effect on your blog. If the redirection of your old blog domain to the new custom domain is working then you don't need to worry at all because the old shares for the sub-domain are yet on the social sharing sites.

You need to remember that social sharing widget don't see your blog it sees the URL.

Sunday, July 29, 2012

Add Syntax Highlighter into Blogger to display codes

Post written by Deepak Kamat

Syntax Highlighter is a widely used code highlighter on websites and blogs, almost every web developer, web designers or any people who want display codes on their pages. In this tutorial you will learn how to add it on your blog on blogger.

Use the PrismJS,a simple and lightweight opensource syntax highlighting plugin
Syntax Highlighter is a tool by Alex Gorbatchev and thanks to him for developing such useful tool. In order to the add the Syntax highlighter scripts and make it work on your blog follow the steps.

Add the scripts

The script files i will be giving links to in the script tag is hosted on the developer's server, if you want to download it to host on your own server then click here to download Syntax Highlighter files.

<!-- SyntaxHighlighter starts -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreMDUltra.css' rel='stylesheet' type='text/css'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.defaults[&#39;auto-links&#39;] = false;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
 
</script>
<!-- SyntaxHighlighter ends -->

Looks very heavy but all you have to with is to add it into your Template.

Add it to your blog's Template

And to do that Go to Blogger Dashboard -> Template -> Edit HTML -> Proceed -> Use CTRL+F to find </body> in the template and paste the codes above </body>

Tip : The codes can differ in your page loading time, if you don't display codes on your homepage then use this script, which is same to above scripts but only added blogger conditional tag around it to load it only on post pages.

<b:if cond='data:blog.pageType == "item"'>
<!-- SyntaxHighlighter starts -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreMDUltra.css' rel='stylesheet' type='text/css'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.defaults[&#39;auto-links&#39;] = false;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
 
</script>
<!-- SyntaxHighlighter ends -->
</b:if>

The adding process is same as the above

Highlighting the codes in posts

Once you have added the code in your template, now you have to make the your code display in the Syntax highlighter and to do that you have to wrap your display codes into <pre> tag with special attributes into it to define what language you are displaying the code in.

Displaying the code if it's HTML

This is an example of how you have to markup the codes if you are display HTML codes.

<pre class='brush:xml'>
// HTML Code here
</pre>

The HTML code is wrapped into <pre> tag and with class='brush:xml' and it's what tells SyntaxHighlighter that it's an HTML code (HTML and XML both looks similar)

Brushes : There are more languages SyntaxHighlighter supports and here's the list of values you can put in the brush value. Following are the brushes you can apply on your codes

as3, bash, csharp, coldfusion, cpp, css, diff, erlang, groovy, jscript, java, javafx, perl, php, plain, powershell, phython, ruby, scala, sql, vb, xml

Add it to your post

Let's say you want to display a HTML code, the whole code with the wrapping <pre> tag will be this

<pre class="brush:xml">
<ul class='make-tea'>
<li>Tea</li>
<li>Water</li>
<li>Sugar</li>
<li>Milk</li>
</ul> 
</pre>

To add it open your Post Editor, switch to the HTML mode and paste the your HTML code between the <pre> tags.

Note : If you paste your display HTML raw, it will interpret itself and then it can't be displayed as HTML, to prevent it you must first convert your raw HTML into escaped characters. Use Quick Escape to convert your HTML to escape characters.
Example -
This is the Raw HTML before conversion

<ul class='maketea'>
<li>Tea</li>
<li>Water</li>
<li>Sugar</li>
<li>Milk</li> 
</ul>

This is the converted HTML codes.

&lt;ul class='maketea'&gt;
&lt;li&gt;Tea&lt;/li&gt;
&lt;li&gt;Water&lt;/li&gt;
&lt;li&gt;Sugar&lt;/li&gt;
&lt;li&gt;Milk&lt;/li&gt; 
&lt;/ul&gt;

Just put the converted Raw HTML code into the <pre> tag and you are ready to paste it into your post, just switch to HTML mode and paste it at the right place.

Customizing the SH skins

You can use different skins and colors for your SyntaxHighlighter, to make changes to the skins you just have to change the 2nd<link> tag in the SyntaxHighlighter scripts HTML. This is the link tag you have currently
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreMDUltra.css' rel='stylesheet' type='text/css'/>
You can use any of the following styles, just replace the yellow highlighted text with any style below (each style is separated by a comma).

shThemeRDark, shThemeMidnight, shThemeMDUltra, shThemeFadeToGrey, shThemeEmacs, shThemeEclipse, shThemeDjango, shThemeDefault, shCoreRDark, shCoreMidnight, shCoreMDUltra, shCoreFadeToGrey, shCoreEmacs, shCoreEclipse, shCoreDjango, shCoreDefault

For examply if you want to use shCoreEmacs skin then the href value in link tag will be this
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreEmacs.css' rel='stylesheet' type='text/css'/>
Simple as that.. Now choose whatever skin or theme you want and apply it.

Your feedback

I tried my best to keep this tutorial as easy as possible, but if there's something you can't understand or wrong then you can contact me. If you have successfully implemented SH in your blog using this tutorial then you can thank us by dropping your comments.

Subscribe to our blog for more blogger tricks updates.

Friday, July 27, 2012

Listverse like Number Listing design for Blogger and Websites

Post written by Deepak Kamat

Listverse, one of the most interesting site with collection of top 10 list on different topic. If you are also a regular reader of Listverse like me then you may know about it's list numbering design, it is what led me to create this tutorial.
If you want Listverse like template for your blog then check this post, we recently published the template details http://stramaxon.blogspot.com/2012/07/listverse-template-blogger-seo-friendly.html

For a direct demonstration of what you will be learning to create in this tutorial can be seen on the listverse.com itself. Below is the demo by me on a blogger blog.

Demo

The first time i saw it, i felt that it was made with HTML tables but then i inspected it and found that it was with simple HTML div elements and CSS was used to give it a grid view.

You can implement this into any website if you can edit it in HTML. Follow the steps below to scornfully add it into your blog post or website.

The HTML we need

The trick is simple, first we will use the HTML which is very important and then simply we will apply the CSS onto it but we will talk more about CSS in next section, see the structure of this HTML to know more about it. (Copy this HTML)

<div class="itemheading"><span class="itemnumber">10</span>
<div class="itemtitle">This is an Item</div>
<div class="itemmore">Description</div>
<div class="cl"></div>
</div>

Now before we implement the codes, read what each HTML line means

Line 1 : The first div element is parent of all div elements in it. As for the span element , it's what displays as the number on the list and you can edit it to your needs, for example change the 10 to 9,8 etc. or even letters.
Line 2 : This div element is for the title of the list item, you can change the text in it
Line 3 : This is for the description of the list item. It's optional you can also keep it's value empty.
Line 4 : Just clear:both for clean look

Guidelines to add into Blogger Post

To add this HTML into your Blogger post, then read the steps below

First open the post in Post Editor
Now switch to HTML mode, you can switch to HTML mode by clicking the button next to 'Compose' in the post editor which says HTML. When you are in the HTML view of your Post Editor , now place your cursor at where you want the numbering to be and then copy-paste the HTML shown above .

That's it, now you can continue writing your post. But there are some things you must remember

Never style the text into the HTML with the customization option in Blogger Post Editor
Delete any BR tag into the numbering HTML or it will look cluttered (The br issue is already solved with the CSS, but you may make it a habbit)
Put text out of the closing div tag in the HTML
For every numbering item you have to put this HTML separately.

If you keep these things in mind, you will successfully finish the first step of adding this list design.

CSS styling

The HTML bone structure is ready but we still have to make it look like the numbering items on Listverse, to do that, a few lines of CSS is needed. Below is the CSS needed to design the numbering items like Listverse.

/* LISTVERSE ITEM LIST DESIGN CSS BY DEEPAK KAMAT */
/* Chunk Font */
@font-face {
  font-family: 'ChunkFiveRegular';
  font-style: normal;
  font-weight: 700;
  src: url(http://s0.wp.com/wp-content/themes/vip/listverse2/extras/Chunkfive-webfont.woff) format('woff');
}
.itemheading {
border-top: 1px solid #C5DDD8;
margin-bottom: 20px;
margin-top: 31px;
}
.itemheading .itemnumber {
border-right: 1px solid #C5DDD8;
border-top: 1px solid #C5DDD8;
color: #2C2C2A;
float: left;
font-family: 'ChunkFiveRegular',Arial,serif;
font-size: 37px;
font-weight: bold;
line-height: 37px;
margin-right: 10px;
margin-top: 3px;
min-width: 45px;
overflow: hidden;
padding: 17px 10px 10px 0px;
text-align: center;
}
.itemheading .itemtitle, p .exclusions {
border-top: 1px solid #C5DDD8;
color: #2C2C2A;
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 24px;
line-height: 24px;
margin-top: 3px;
padding: 17px 12px 0 31px;
}
.itemheading .itemmore {
font-size: 16px;
line-height: 16px;
color: #6D6D6A;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
}
.itemheading br {display:none;}
.cl {
clear: both;
height: 0;
font-size: 0;
line-height: 0;
overflow: hidden;
}

Yaa, this is the few lines of CSS which you need. Learn, how to implement it into your blogger blog.

Adding CSS in Blogger

On Blogger platform, adding the CSS is very simple. Just follow the steps below to quickly add the CSS into your blogger template. (Click here for tutorial)

Go to Blogger Dashboard
Now select the Template tab
Click on the Customize button in the Template tab
You will be taken to the Template Designer, select the Advanced tab
From the Advance menu you will see Add CSS
Click on the Add CSS and paste the CSS in the custom CSS box and hit Apply.

That's it ! You are done with adding the numbering list design on your blog. Thanks to listverse.con for being an inspiration for this design.

Your suggestions

Thanks for reading this. If you have any suggestion or just want to say thanks to us then drop your comments below. Your comments are very important for us to improve our post and tutorials. Check more blogger tutorials on our blog.

Buy the ListVerse like Blogger Template for Blogger

We have published the details of the template here to buy it [Click here]. You can see it in action at this link. We will soon write about the template on our blog but if you want to buy it now, see below

The Template is premium and you have buy it. The template is only for $30. For information contact us on
depy45631@gmail.com

Saturday, July 14, 2012

Adding any thing under every post

Post written by Deepak Kamat

Bloggers with less experience with some advance feature of HTML and Blogger will always end up adding 'Thank for reading this post' under every blog they post, but there is much easier way to add any thing, from normal text to good looking HTML elements below the post.
In this tutorial you will get to learn about adding anything you want under each and every post without adding it. It will automatically appear below your post, take my sharing buttons, previous post and subscribe box. I don't add them in individual posts, they all render automatically.

You maybe thinking what's the big deal ? You can add the gadget from Layout, but note that gadgets added under Blog posts gadget actually appear under the comments section which is again under the post. So the gadget gets in little distance from the post, ain't it ?

I don't think that i must stretch this post to add extra information, i am sure you have understand what i am trying to say.

The trick is to add the element directly in Template's HTML, but you need to have an idea about where you exactly need add the HTML. The obvious way for the edit HTML is
Blogger Dashboard -> Template -> Edit HTML -> Proceed -> Check mark the 'Expand widget template'. The next step is to use CTRL+F to find this line

<div class='post-footer'>

Once you find it, but any HTML you want just above the div element. See the image below.

All you need is to paste any HTML or JavaScript code above it to render the code under post. But if you want to control where should the HTML appear then see this tutorial on using blogger conditional tags.

Now you can make your weblog more attractive and dynamic with this simple but useful trick.

Thursday, June 28, 2012

Text background appearing white when published post - Fix it

Post written by Deepak Kamat

There are thousands of people out there using blogger templates with black post background and post editor we have got at blogger uses inline CSS style for applying styles to text or any elements, let's try to find why these makes the text background white sometimes which usually looks like a white bar.
That's a problem to many people, often to those who use post background color other than white. And it doesn't mean that having black or other color background causes this, but the problem list is multiple and solutions are also different.
So read through the whole post to get it fixed correctly, the reasons of this problem has been divided into different section with their solution, so far i have found only two reasons of this problem, but i am sure that there are not more.

Copying text from other sites or Word Processing software

This is one of the most common issue, many Blogger don't understand what it can cause when copying from other site or a word processing application like MS Word. The cause of the white background is usually because when you copy the text from other website page, the background format of that webpage will be also copied along with the text and will be applied when you paste it in Blogger Post editor or any WYSIWYG editor.It's the same when you copy text from a rich text editor like MS Word or Wordpad, but along with the display format it also copies the excessive coding of the MS Word text, which is not compatible with ideal web page.
Fixing it : There's only one way to stop this, suppose if you have some text on other site that you need to post it on your blog, when you copy the text, it also carries the customization with it. To prevent it from being carried you have to first copy the Text from the website or MS Word. Now open a plain text editor, Notepad is a common one, paste the text into it now copy the text from Notepad (plain text editor) and then paste the Text into Blogger post editor, that will prevent the system from carrying the customization.
It's like Copy from Website - Paste into Notepad - Copy from Notepad - Paste into Blogger Post Editor. Notepad here works like a filter, which turns the rich text into plain text.

Putting white background on text in Post Editor

This is much a confusion, when editing the post in the Post Editor you are distracted by the Post editor interface and you assume that the blog post background is white as in the post editor. When in the post editor you get lots of customization options in which 'text background color' is one. Imagine, you want to change the text color and instead of selecting the text color option from customization bar you select the text background option by mistake and then what you see is background color on your text, then to remove the background color you select white from the text background option. And that's where you make the mistake, you didn't remember that you had black background on post in your blog and the text are going to be white but you have set the text background in the post editor to white !
So, now you may have understand what's that causing it, i am also going to list the fixes for it so you can make it like the way it should be.

Fixing it : The text or any element in the post editor is styled with inline CSS styles, so you have to delete the inline CSS styles which has white background, you can easily detect which text is having white background. You can find it by switching to HTML mode and there you will see the HTML of your post body. For example this is the HTML
<span style="background-color: white;">I AM A BLOGGER</span>
You can clearly see the inline CSS (highlighted in yellow), removing it will fix the white background problem or so called white bar problem.
Preventing it : This usually happens when you mistakenly give select the text background color instead of the text color and to revert the text background color to it's previous state you select the white from the option, but that's not clean at all. You must use CTRL+Z or the Undo option on the customization bar in Blogger Post Editor.
Hope you will keep this mind and next time you have the solution. Best of luck with Blogging.

Tuesday, June 19, 2012

Advanced Feedburner Subscription gadget for Blogger

Post written by Deepak Kamat

Previously i posted a tutorial on adding a shiny Feedburner subscription widget. This widget is the 2nd version of that subscription gadget. This time it's very classic and looks clean.

This subscription widget is one of the best Blogger Gadget i have designed, the work of this gadget is simple but the looks it has got with CSS3 makes it professional.

Demo

Activate Email Subscription for your Feed

First of all you have to enable Email subscription for your Feed profile by going on http://feedburner.google.com/, now click on your Feed name. You will see Publicize tab, click on it and one left there will be 'Email Subscriptions' and if you don't have it active you will see 'Activate' button. Just click on it.

But be there, you will need the code you get after you 'Activate' actually you only need the name for your Feed. Your code would look like this.

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Stramaxon', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>Enter your email address:</p>
<p><input type="text" style="width:140px" name="email"/>
</p>
<input type="hidden" value="Stramaxon" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe" />
<p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a>
</p>
</form>

On first line you can see this http://feedburner.google.com/fb/a/mailverify?uri=Stramaxon , you can see i have highlighted the word after = in the address, 'Stramaxon' it's the name of my feed. You will also need your feedname. So copy it on a text editor for quick use.

The HTML

For the subscription gadget, HTML is the most important part. The HTML code which you will need is as follows.

<div class='subscribe-stx'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='frm-stx-btm' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Stramaxon&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<p id='email-ui'>Subscribe with Email for updates</p>
<div class='inl-9005'>
<p>
<input class='nam-subeml' name='email' style='width:140px' type='text'/>
</p>
<input id='ui015424' name='uri' type='hidden' value='Stramaxon'/>
<input id='ui03994' name='loc' type='hidden' value='en_US'/>
<input id='ui63494' type='submit' value='Subscribe'/>
</div>
<p id='ui43524'>Get updates from <a href='http://feeds.feedburner.com/Stramaxon' target='_blank'>YOUR_BLOG_NAME</a></p>
<div class='attr-stx'>
<a href='http://stramaxon.blogspot.com/2012/06/advanced-feedburner-subscription-gadget.html' target='blank'>Get this Gadget</a>
</div> 
</form>
</div>

See these edits you have to make

Line 3 : Line 2 is little lengthy, so you have to scroll to side. In the last section, remember we took a the feed name, in my case it was 'Stramaxon'. You can see this URL in line 2 http://feedburner.google.com/fb/a/mailverify?uri=Stramaxon You just need to replace the uri with your feed name, check the 'Activate Email Subscription for your Feed' section to know what's your feed name.

Line 8 : You need to do the same changes, in the Value field just put your feed name.
<input id='ui015424' name='uri' type='hidden' value='Stramaxon'/>

Line 12 : Again the same, just have to replace 'Stramaxon' with your feed name and replace YOUR_BLOG_NAME with your Blog name, you can write any thing there.
<p id='ui43524'>Get updates from <a href='http://feeds.feedburner.com/Stramaxon' target='_blank'>YOUR_BLOG_NAME</a></p>

You just need to make these three changes and the HTML is ready to be applied on your Template.

Where to add the HTML : After you have your HTML ready, put it on a plain text editor such as Notepad.

Go to your Blogger Dashboard | Template
Click on Edit HTML | Proceed (not available if you are using Dynamic Views)
Check mark on 'Expand Widget Template'
Use CTRL+F or F3 to open default on-page search in your Browser
You need to find the following code <div class="post-footer">
And paste the subscription box HTML code above <div class="post-footer">, after you place the code hit Save.

That's the part with HTML, check any of your Post page and see if the subscription box is appearing or not.

Don't worry if it's not styled, we still have to play with the CSS

Show only on Post Page

You may only want this subscribe box to be shown on the index page i.e the Post page. The HTML above will render the subscribe buttons on all types of page but wrapping the subscribe box HTML around Blogger conditional tag you can tell the server to load it only while the page is a Post Page.

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
//HTML CODE HERE
</b:if>

The CSS

The CSS is the main stuff that makes the gadget looks so professional and makes it an eye candy. But writing this CSS took me about 2 minutes.
To add this CSS go to Blogger Dashboard -> Template -> Customize -> Advanced -> Add CSS -> Paste the CSS in the custom CSS box, press enter after the last line and hit Apply to Blog.

Here's the Full CSS we will use to design the subscription box.

.frm-stx-btm 
{
    
    border:1px solid gainsboro ;
    padding-left:10px;
    border-left:25px solid #62C7FF;
    background:linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 720px 70px;
    background:-webkit-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 720px 70px;
    background:-ms-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 720px 70px;
    background:-moz-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 720px 70px;
    background:-o-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 720px 70px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;    
}


.frm-stx-btm:hover
{
    background:-webkit-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 520px 20px;
    background:-moz-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 520px 20px;
    background:-ms-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 520px 20px;
    background:-o-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 520px 20px;
}   

.frm-stx-btm ::selection
{
    background:#3F6083;
    color:white;
} 

.nam-subeml
{
    display:inline;
    border:1px solid lightgrey;
    width:300px !important;
    height:30px;
    padding-left:10px !important;
    font-size:25px;
    color:grey;
    font-family:Arial, Helvetica, sans-serif;
    padding-bottom:5px;
    padding-top:2px;
    
}

.nam-subeml:focus
{
color:black;
}

.inl-9005 p 
{display:inline !important;}

#ui63494
{
    width:100px;
    height:38px;
    top:-2px;
    position:relative;
    border:1px solid darkblue;
    font-family:verdana;
    color:white;
    background:-webkit-linear-gradient(45deg,#5FA3FA,#5494E6);
    background:-moz-linear-gradient(45deg,#5FA3FA,#5494E6);
    background:-ms-linear-gradient(45deg,#5FA3FA,#5494E6);
    background:-o-linear-gradient(45deg,#5FA3FA,#5494E6);
    font-weight:bold;
    font-size:14px;
}

#email-ui
{
    font-size:20px;
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    margin-bottom:10px;
    word-spacing:2px;
    letter-spacing:1px;
}
.attr-stx
{
    display:block !important;
    visibility:visible !important;
    text-align:right;
    padding:10px;
    font-family:'tahoma';
    font-size:14px;
}    
.attr-stx a
{ 
    display:inline-block !important;
    visibility:visible !important;
    text-decoration:none;
    border-bottom:1px dotted grey;
} 
.attr-stx a:hover
{
    display:inline-block !important;
    visibility:visible !important;
    text-decoration:none;
    border-bottom:1px dotted grey;
    background-color:aliceblue;
}

Copy and add this CSS to your Blog. Now check your blog page (should be a post page). If you did it all correct then you will see the subscription box clear and shiny.

This can be used on websites or other blogging platform also, just remember that you have to place the HTML and CSS at the right place for it to display correctly.

Tuesday, May 15, 2012

Apply CSS only on Post Page, Archive page or only a specific page on Blogger

Post written by Deepak Kamat

This tutorial will help you learn how to render a CSS only on post pages or homepage, this is helpful if you want different design for home-page and post pages.

Blogger is a blogging platform that gives it users a simple and easy interface to work,but it's not simple as it looks, there are many things you can do with Blogger. Have you ever imagined having different designs on home page and post pages, that's possible.

There are many reasons you want to have different designs on homepage and post pages, like some of my stand alone page like 'About me' page don't show header, because I have add the CSS in page editor in HTML mode to hide it, this should be done when you want a CSS style only on one specific page.

But what if you want all post pages to render some CSS but not the homepage ? If you have ever searched for 'show gadgets on homepage only' etc. You might have found an way to display a gadget only on homepage or post pages, but what about CSS ? How to render it only a post page or homepage.

It's very easy we will use Blogger's conditional tags.
Not only HTML but you can also wrap CSS around these tags, so it only renders homepage or post-page, or anywhere you define.

Let's say if you want to hide header on the post pages, then we will do this. Go to Blogger Dashboard > Template > Edit HTML > Now find </head> and i will put this CSS.

<style type="text/css">
header
{display:none !important;}
</style>

Now this is not appropriate if you want it to only render on post pages, we haven't added the conditional tags yet. The following HTML and CSS will hide the header on post pages.

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
header
{display:none !important;}
</style>
</b:if>

You can see that I added the conditional around the CSS, this will render the CSS only on Post Page.

You just have to put those conditional tags around the CSS or you can also put it around a HTML to display it on post page or Homepage.

Display an element or CSS only on post pages

This conditional tag will show the HTML/CSS or any code only on post pages. The use of these conditional tag has been written above.

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
div {
width:10px;
height:10px;
color:black;
font-size:5px;
}
</style>
</b:if>

The first and the last line of this code is the condition tag which decides whether code should wrapped inside it should be loaded or not. Wrapping any code inside this particular condition tag will load the code only pages that are of type "item" i.e post pages.

Display an HTML or CSS only on HomePage

Now this tag will help you render a CSS code only on homepage. Just remember to wrap the CSS rules in a <style> tag before adding it inside the conditional tag.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
div {
width:10px;
height:10px;
color:black;
font-size:5px;
}
</style>
</b:if>

The only change in the conditional tag here is 'data:blog.url == data:blog.homepageUrl' this simply means if the blog URL (which is the current page URL) is equal to the homepage URL then load the stuff inside it.

What is you want it only for a specific link on blog ?

But sometimes you may want to load or render a code only on a specific page or a URL on your page. It can also be achieved with blogger's conditional tag, here the condition attribute is a bit different as it compares for the blog URL.

<b:if cond='data:blog.url == "POST-URL-GOES-HERE"> 
<style type='text/css'>
div {
width:10px;
height:10px;
color:black;
font-size:5px;
}
</style>
</b:if>

Replace PUT-THE-POST-URL-HERE with the URL of the page you want the code to render on. Example :

<b:if cond='data:blog.url == "stramaxon.blogspot.com/2012/05/earn-money-online-by-writing.html"> 
<style type='text/css'>
div {
width:10px;
height:10px;
color:black;
font-size:5px;
}
</style>
</b:if>

Or just on the Static Pages

Or if you plan to load a code on just static pages and then this conditional tag is for you.

<b:if cond='data:blog.pageType == "static_page"> 
<style type='text/css'>
div {
width:10px;
height:10px;
color:black;
font-size:5px;
}
</style>
</b:if>

How does this works?

These are nothing more than conditional statements that checks for a condition and if it is true then performs the task given to it and in our case it's just parsing code.

<b:if cond='data:blog.pageType == "static_page">

Understanding this is not necessary but it can be helpful if you plan to try out more conditional things in blogger (and it's fun to experiment with these designs). In the above code the snippet between the double quotes after cond is the thing that the parser on the server reads.

Each of the page on your blog holds data for itself, data like what type of page it is, what is its URL etc. So this variable data:blog.pageType will output the type of the page. And then using the comparision operator == we compare the value of data:blog.pageType with static_page and if it matches the parser simply includes the code inside that particular conditional tag and is sent to the client (browser).

Saturday, April 14, 2012

Blogger Page Title doesn't show correctly for Dynamic templates in Firefox

Post written by Deepak Kamat

Blogger's blog are facing problem to show the accurate Page Title on Firefox tab, instead of showing the Page Title, it's shows the Url

Blogger Blogs with Dynamic template aren't showing page title on Tab of Firefox, every blog with Dynamic template is affected and when opened in Firefox, it doesn't shows the Page title on tab, but shows the full Blog Address.

I am not sure what's causing it, is it the Firefox or the Blogger ? But this is really annoying, however it shows the Page title for post pages well but creates problem with Home page.

I am trying my best to figure it out what's the exact problem, i will update this post after i have some updates about this problem, hope Blogger will also try to fix this problem. I hope someone from Google sees my post and do something about this.

If you have any idea about this please reply in comments.

This is tested with Latest version of Firefox (11) and still the problem occurs. Someone need to fix it as soon as possible, i am trying my best.

Friday, April 13, 2012

White Blank box showing up on my Blog page - How to fix it?

Post written by Deepak Kamat

Are you seeing blank white box on your blog or website page, those box looks too weird on the our website or blog, so this tutorial post will show what it is and how to remove it.
It all started to happen today, if you ask me what it is, my answer will be that it's a bug from facebook plugins code, Facebook is having some problems with their scripts, and thus blog page are showing iFrame on blog pages. The White box is a iframe, which is executed from the Facebook plugins code.

I came to know about this on Blogger Help Forum, i thought this problem was only of that user, but similar posts were posted by the users, then it was sure that it was problem of the Facebook plugins code after i examined the HTML code of the pages. The iframes are being usually showerd on top of the page. See this screenshot, it's from a blog that was facing the problem.

The Exact code, that's creating the problem is Facebook's JavaScript SDK, which we need to add to our HTML to show Facebook plugins, not it's gone buggy and creating iframes on Blogger. Removing it may remove the boxes (iframe) from the page, but also disable all Facebook plugin such as Like buttons, comments etc on the Blog. So we will use different method to remove it.

After seeing more blogs, i saw that the iframe is only showing on which the Facebook like box is being displayed.

How to fix it?

Let's don't waste much time and get to the main point, how to hide it. To remove them permanently from template is little difficult, because it requires you to remove the code from your template which runs Facebook like button and other plugins, so we will hide it with CSS.

Fortunately, the two iframe have been classed, so we can easily hide it without any difficulties. Follow the Step-by-step instructions.

Log into your Blogger dashboard

Copy this small CSS code

#fb_xdm_frame_http, #fb_xdm_frame_https {
display:none !important;
}

We have to add this CSS, so go to Template tab

Click on Customize and then select Advanced tab

Scroll down, and click on Add CSS, you will then see a input area, just paste the CSS code there.

We only need the CSS code, the rest of the steps can be seen on my How to add CSS to your blogger tutorial

If you think, this is not working then please post your Blog address in comments below, we will tryour best to help you.

Wednesday, March 28, 2012

Access Edit HTML in Dynamic Views Template

Post written by Deepak Kamat

This short tutorial will show you how to access Edit HTML in dynamic views template

Editing HTML in Dynamic Views template in Blogger is not possible without this hack, the Edit HTML button is always disabled if you are using the Dynamic views template.

So let's start with the hack, first open your Blogger Dashboard >> Template >> now have a look at your address bar, it will look like this (the blog id is different)

http://www.blogger.com/blogger.g?blogID=8259823568185811984#template

Replace blogger.g part with html , now it should look like this

http://www.blogger.com/html?blogID=8259823568185811984#template

You will be taken to the HTML edit of your blogger template which is Dynamic views, now you can add or remove HTML elements from your Dynamic views to fit your needs.

I found this trick on Yogaratnam N. aka Yoboy's blog 'Southern Speaker', thanks to him for this trick.

Related Post : Good looking search bar for Blogs

Monday, March 12, 2012

How to add CSS to your blogger blog

Post written by Deepak Kamat

In this tutorial you will learn how to add custom styles to your blog with CSS on Blogger.

CSS is plays an important role in presentation of a blog or website. In Blogger users are allowed to style their blog, but if you are new to Blogger or just don't know about CSS and HTML you might find it difficult to find the right way to do it. So how do you add your custom CSS in Blogger? You will get the answer in this tutorial, for you to understand it better I have also included screenshots.

There are two ways to add CSS to your blog template. I prefer to use te hEdit HTML mode, it's good for professional web designer, and I suggest to use basic Add CSS option in blogger for peoples who are new to web.

There are two ways to add CSS codes to your blog template. One is using the HTML template editor where you can put the code according to your needs anywhere in the document. And other is to use 'Add CSS' GUI option provided in the visual template designer.

For general users I suggest the Add CSS option as it doesn't require code editing and all, but in some cases you might need more control on how you want that CSS to be loaded (for example, if you want to load a CSS only on item pages) in such cases using the HTML Template editor is the only choice.

Using Add CSS in Template Designer

Note: Since the recent Blogger UI update the "Template" section is now called "Theme"

Blogger have included an Add CSS option, where you can just copy and paste the CSS styles code and it will be applied to the template. Let's see where's that option.

Blogger has a rich set of template designing tool that you can use to change colors, fonts and layout of your blog without writing even a line of code. The template designer also allows you to define your own styles using CSS to apply on the blog. To access that option follow the instruction below :

Go to your Blogger dashboard at http://www.blogger.com/home
Now select the blog from the list (if you have multiple) and go the its "Theme" section on the left pane.
In the Theme section, click on the button that says "Customize" and you will be taken to the Template Designer page
Select the Advance tab from the list of options on left pane and from the sub-menu list select Add CSS, it's at very bottom.
Now in right pane, there will be an input area where you can paste your CSS styles

In this procedure you won't be able to edit the existing CSS code in your template, you will only be able to add new styles and can only edit the styles that you added using the template designer.

You don't need to add the HTML elements such as <style type="text/css"></style> , we can paste the CSS styles directly. Adding those elements may result in error.

Adding it using the HTML Template Editor

You can also directly add CSS syles in your template code, but working in the HTML template editor can be difficult for users who don't have much experience with HTML and CSS. As lot of markup codes are lying there already, a general user might feel a bit unformtable, but once you start working with codes you will find it interesting.

Go to your blogger dashboard at blogger.com/home
And from drop-down menu of the blog select Theme
After going to Template menu, click on Edit HTML button to open the template code editor on the page

Now using the default find-on-page function (by default CTRL+F ) and find </head> and paste your CSS code (inside <style>) and paste it above </head>. Do remember to include the first and last line in the following code around your CSS rule when adding it above the closing </head> tag d
```
<style type="text/css">
/* This is a comment, and follow is a CSS rule */
body
{
color:#999;
background-color:whiteSmoke;
font-family:"Georgia", Helvetica, sans-serif;
}
</style>
```
The CSS styles are just for example.

Other way
You can paste your CSS styles by putting the HTML markup (in green) above and below your raw CSS code and then paste it above </head> in the template

So now you have the idea where to paste the CSS codes in your blog. For more web designing help subscribe to our blog.

Remember to Backup your template before making any changes to it. To Backup your template Go to Blogger Dashboard >> Theme tab >> On top right corner there will be a Backup/Restore button and then download the template, if anything went wrong we can restore it to working template by uploading it there.

Wednesday, March 7, 2012

Facebook and other social media gadget for blogger

Post written by Deepak Kamat

This tutorial will teach you how to create a good looking social media gadget for blogs

Social media buttons for blogger are very useful for visitor to connect with you on various social networks like Facebook, Twitter , Google+ etc. There are already these types of gadget for blogger in Blogger gadget list, but some people found it very non-stylish.

To make the button i will use CSS and HTML . You may paste the HTML code anywhere in your blog in layout tab, to do this follow some simple step.

Go to Blogger Dashboard
Now click on Layout tab
There, you will see option to Add a Gadget, click on it
Now a pop-up will appear
Select the HTML/JavaScript gadget from the list
And paste this HTML code in it.

<div class="socialmedia-gadget">
<span><a href="YOUR-TWITTER-LINK" id="iconTwitter" target="_blank" title="Twitter">Twitter</a></span>
<span><a href="YOUR-FACEBOOK-LINK" id="iconFacebook" target="_blank" title="Facebook">Facebook</a></span>
<span><a href="YOUR-FEED-LINK" id="iconRSS" target="_blank" title="RSS Feed">RSS</a></span>
<span><a href="YOUR-YOUTUBE-LINK" id="iconYouTube" target="_blank" title="YouTube Channel">YouTube</a></span>
<span><a href="YOUR-GOOGLE+-LINK" id="iconGooglePlus" target="_blank" title="Google Plus">Google</a></span>
</div>

Remember to replace the link of Facebook,Youtube,Google+,Twitter and feed with your own profile links, save it and see your blog, the gadget is looking so simple, Isn't it ? So we will style it will the CSS.

You may paste the CSS code in template, follow these easy steps.

Go to Blogger Dashboard
Click on Template tab
Click on Edit HTML button, and proceed
Using Google Chrome default search feature (Ctrl+F) find </head>
And paste this CSS code above the </head>

Pretty long CSS code, but useful too, remember paste this code above </head> in template, preview it, if it looks great save it.