Remove shadows from content outer in Blogger Default Template

If you are using the simple template or default template provided by Blogger, you will see shadows on content outer, some people likes it and some wants to remove it, so this tutorial is for those who don't want the shadows. 

You will see the shadows on default template by Blogger, if you are using some light and clean background then the shadows will look awkward and you will want to remove it. For your ease i am posting this tutorial.

See the difference between template with shadow and without.

Before

After

There are two ways to remove the shadows, one is to write/add a CSS to your template that will overwrite the existing codes that is rendering the shadows and other is removing the code directly. I prefer removing the code directly, if you overwrite (as found on much tutorials) , you won't be able to style it again. 

This tutorial will require you to make changes to your template, so before your proceed please backup your template.

Let's start, go to your Blogger Dashboard > Template > Edit HTML > Proceed > Now hit CTRL+F and search for this line in the template code. Inserting the first line will bring up the whole CSS code block.

.content-outer {
  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  margin-bottom: 1px;
}

Once you find the line, select it 

Delete the line and hit on Save Template

Hope it helps you but remember that it's now important for this trick to work on your own custom template, if you want to get solution for your own template then please comment with your blog address. 

Post Customization is back in Blogger Help forum

The new Blogger help forum first gave a full customization options for members to customize their reply, but after few days, they discontinued it, don't know why. But it's back now.

I am happy that the customization options are back for all, because in Blogger Help forum we need more than just plain text, without the Code option in customization it's very difficult to highlight any codes posted.

Hope that these options will remain there for everyone so that we can communicate in the forum more efficiently. 



 
Now it will be fun to work in the forum to help blogger users with their problems.

- Thank you

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

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

Earn money online by writing

Today internet is a huge medium for many people to earn money online, and today i will highlight one of the easiest way to earn money online, writing!

Many people today earn money online and everyone is allowed to earn money online if they have talent and knowledge. There are yet many other ways to earn money online other than writing such as cyber-squatting (crime) and other spamming ideas, which is not good, earning money with your talent is always good and you gain reputation.

Most people with good knowledge of their fields writes about it on their blog, people with similar interest reads it and enjoys, and the advertisement displayed on their blogs/website make them earn money. If you are good in something, then you might write blogs on it.

But the problem is you have to wait and keep patience as it needs contents on your blog to be able to earn more online, it would take time for you and your blog attract readers, so it's good way but not suitable for people who want fast money.

iWriter.com is a something that you are looking for, it's based on content writing. iWriter will let you make money just for writing about a specific topic, you are not free to write content on your own topic, other people who wants articles for their blog or website offer other writers on iWriter to write for them, if you write something that the Client loved and want it on their website or blog etc. you will be paid money for it, even if you write 10 articles perday and 5 got approved then you are in good profit. Along with this you can earn money also by starting a blog on side and also write on iWriter. 

The art of writing in very precious and even if you have full knowledge about something but you will need the art of writing, so you have to work hard on it also. If you think you are good then don't just let you talent go wasted, use it.

You get paid only for what you deserve so hardwork is the most important thing, people won't just give money to someone for what they don't deserve even you, yet many people ask me 'how to earn money' online and i answer them 'with hardwork and patience' whatever you do or write like a fashion blog, tech blog or etc. you have to put your hardwork into it to get the fruit. You have to take time to learn about it and then write something.

 

Place an Admin tag next to your disqus comments

Disqus is the best comment service for blogs and websites, it's free and anyone can use it, today I am going to show you how to create an Admin tag on your comments on your website to make your comments different from others. 

It's great to highlight yourself in comments forum, that you are the admin of this blog or website, then people can easily understand that you are the admin. So this tutorial is for them who wants this Admin tag.


Don't worry, to achieve this you don't need to be an expert, all you need is active disqus comment form on your blog or website. Fortunately, moderator's comments are classed little different in disqus, so it was not difficult to create a effect like this.


See the difference between, with the style and the normal one.

Before

After

Now you can see the difference, now the comment is looking unique and visitors would sure read the comment as the comment is highlighted , so let's do it.

I have prepared two styles that you will like, although you don't need to change the styles as it's looking great with what it is, simple is better, but if you prefer you can make changes as per your needs.

We have used CSS :after selector to put string into it, so we don't have to do anything with the HTML, CSS will do it all on it's own. Here's the CSS code for the effect shown in picture above.

.dsq-moderator .dsq-commenter-name:after
{
    /******************************
       From Stramaxon.blogspot.com 
       Designed by Deepak Kamat
    *******************************/
    content:" Admin";
    font-size:10px;
    bottom:5px;
    position:relative;
    font-weight:normal;
    padding-right:5px;
    text-transform:uppercase;
    color:black;
}
.dsq-moderator .dsq-comment-header {
    /********************************
     This CSS is for color highlight
     of your comment header
    *********************************/    
    background-color: aliceBlue; /* Change the color to fir your needs */
    border: 1px solid grey; /* You can change the values here too */
}

You can place this CSS at two places, there's two options for you, one is to put in your Blogger's CSS or other is to apply it on disqus settings. 


To add the code in blogger CSS : Blogger Dashboard > Template > Customize > Advanced > Add CSS > In the right input area, paste the CSS and Apply to blog.
- How to add CSS to blogger blogs

Add on disqus site : Log in to your Disqus account, when you are on Dashboard, select your website on the left pane > Now click on Settings tab on top right corner > Select the Appearance tab > Scroll down and at bottom end you will see Custom CSS you can paste the CSS there also. > Save Changes.


More style

If you want a little different style and want to highlight the admin tag more then you might use this CSS, this is also very simple looking and that's good, keep it as simple as possible. Fancy colors will ruin the style.

So here's the CSS for your new style.If you add this style, remember to discard the style i have given above or it will create problems and will look buggy.
  

.dsq-moderator .dsq-commenter-bio:after
{

    /******************************
       From Stramaxon.blogspot.com 
       Designed by Deepak Kamat
    *******************************/
    content:" {Admin}";
    font-size:20px;
    position:relative;
    font-weight:normal;
    padding-right:5px;
    text-transform:uppercase;
    color:black;
    left:140px;
    letter-spacing:15px;
    font-family:"Sorts Mill Goudy";
    text-shadow:1px 2px 1px white;
}
.dsq-moderator .dsq-comment-header {

    /********************************
     This CSS is for color highlight
     of your comment header
    *********************************/    
    background-color: aliceBlue; /* Change the color to fir your needs */
    border: 1px solid grey; /* You can change the values here too */
}

This CSS will render this :

Hope you liked this post, for free subscription to our blog click here 

More for you to read :

• How to add CSS to your blog
• Select all friends at once to invite on Facebook
• Posts on CSS [Topic]
• How to backup your template on blogger 

Using small picture background for better Experience

Most of new bloggers use big pictures for their thumbnail to illustrate their blog, the blog looks quite good but the main problem is loading time, even delay of micro seconds may cause low pagrank, speed matters alot in Pagerank. So read this to know how to prevent this.  

Many new bloggers don't know the value of fast load speed of their blog, and without knowing anything about it they use big pictures for their blog background, i know design is important, but having pictures as background that will take time to load might make your load slow and also make it look unprofessional.


Blogger's custom option gives you option for a large variety of pics that you can set as your background at the spot, but there's also option for you to upload your own picture for the blog background. If you use pictures from blogger's gallery then you and your visitors have to suffer  
slow loading time, that no one likes. If you see my background picture on this blog, you can see that i have only used a 127*127 picture that's only 8kb in size, which will load in seconds, but if i choose a big picture it would have taken some time to first load the background. 


For this post i have prepared some good background pictures that you would like to apply on your blog or website. 

These photos are all for you, if you request me to make a background to fit your needs please feel free to drop your comments. I would like to design a background for you. 


To tell the world that we are with you, use our 'Link to us' code on the right sidebar to connect with us publicly. 

Making Custom Templates for Bloggers

There are many peoples who ask me to post a guide on making Custom Templates for blogger, but i never answered them, so this is the post that will help them through it.

Is it easy ? Can i make ?

It's not easy at all, if you don't have knowledge about HTML,XML,JavaScript and CSS then it's next to impossible for you to make a custom template. It needs a lot of hardwork and you have to put your day in it to achieve it, if you don't know those web languages then first you have to learn about it,even if you learn basic of these languages you can achieve what you want. You will find million of resources from where you can learn HTML, JavaScript, CSS etc. but all you have to do is keep patience, because you can't learn these in 1 day, do a part every day and in month you can make your own CSS designs etc.

Using Inspect Element : Whenever applying CSS to your blog or website remember to test it once in Inspect Element, inspect element is not a external plugin, you will find it in chrome easily, right click on a blank area on your browser window and then select Inspect element from the list.


W3Schools : If you just want to learn the basics of CSS and HTML, you can get to learn and know more about it in W3schools.com, they provide good tutorials with examples of each feature of any language. 

Learn what other websites do : With the inspect element feature, you can also check what other websites are using, what CSS and HTML are they using to make particular element on their site, this might help you to learn more and apply it to your blog also. Wherever you get knowledge, don't let it go.

There are many things you will learn with experience, experiment with blogger and websites and you will find yourself as a rising web designer.

*Most blogger's can't afford that much time designing their website, but want to make their blog as they want, so if you want to design your blog or website, just hire me.