Floating ads using CSS

In the events that you wanted to have a floating ads on your blogspot website, the use of CSS most probably will help a lot. You may refer to the screenshot below, or the live demo of it at this site.
Pretty simple actually.
  1. Click [Add a gadget] from your blogger layout page. In does not matter where it is located.
  2. Choose [HTML/Javascript] from the list of gadget available.
  3. Paste the code given below.
<style type=”text/css”>
.advt {
color:black;
font-size:10px;
position:fixed;
left:25px;
margin-bottom:25px;
bottom:0;
}
</style>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.8.3.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(“#advt”).click(function() {
});
$(“#closeadvt”).click(function(event) {
event.stopPropagation();
$(“#advt”).fadeOut();
})
});
</script>
<div align=”center” id=”advt” class=”advt”><span id=”closeadvt” style=”cursor:pointer;”>Close X</span>
<p></p>
<a href=”http://etoro.tw/1D3PSrW”>    
<img src=”http://3.bp.blogspot.com/-7dJNg81KFiA/VMRKMJ8QIEI/AAAAAAAAAt4/1j3wk2nXqVw/s1600/etoro_copy_trader1.png” />
</a>
</div>
The reason why it is does not matter is because the floating ads will be sitting at the bottom left of your blogspot website. (It also can be use other then blogspot as well if your know how to code it)
Please change these parameter accordingly:
1. To change your preferred link –> please find code <a href=”http://etoro.tw/1D3PSrW”>
2. To change the image –> please find code <img src=”http://3.bp.blogspot.com/-7dJNg81KFiA/VMRKMJ8QIEI/AAAAAAAAAt4/1j3wk2nXqVw/s1600/etoro_copy_trader1.png” />
3. To change the wording –> please find “Close X”
4. To move the floating ads to top-left –> please find code [bottom:0;], change to [top:0;]
Please change the CSS if you know what you doing. Nothing harm to playing around with the CSS. Have fun!

Stylish Blogger Label using CSS

There are so much interesting you can do if you know much about CSS. For example for my current website design, I am using customize CSS to manage how the listing will behave. You can see a sample of it at my site now or at below image.

I am going to share you all the CSS here. Check out this CSS line:

.Label {  padding:4px 0;  width: 100%;  }
.Label ul{  padding:0;  margin: 0;  }
.Label ul li{ font-size:12px;clear: both;  display: inline;  float: right;  margin: 0 0 8px;  padding: 0; text-align:right; color: #00000;}
.Label ul li a{  background: #ff9900;  color: #FFFFFF;  display: block;  font-family:Verdana,serif;  padding: 4px 12px; font-size:11px;  }
.Label ul li a:hover{  background: #FFEF66;  color: #222222;  text-decoration: none;  }

 Just go Blogger Template Designer > Advance > Add CSS . This the location where you should paste. But remember to add the Label widget before or after you complete above step.

Need help? Post a comment below. 🙂

Free hosting for blogging–Blogspot (Blogger)

Like many other free blogging platform available like Blogger, WordPress.com, TypePad, and Weebly, they certainly will set limitation of their services.

Since I am a Blogger user, I will talk about blog limitation on Blogger.

Actually, first thing came across my mind is, How Many Blog can I have in Blogger?. Some of internet user created their blog account for some various reason. It can be for personal blog, just for fun, even to make some money from affiliate program and advertising program like Adsense. For me, I have multiple various reason creating an account for Blogger. For example like my site here purposely to put a notes on my journey of exploring internet and IT knowledge.

Well, the answer of my first thought is in Blogger you may have up to 100 blogs per account. Pretty much right? And there is no limit of storage size per account in Blogger. Actually, Blogger "limits" here aren’t really very limiting. Below are the important “limits” as in Blogger support page. You can read it below or simply go to their original page here.

Number of Blogs: You can have up to 100 blogs per account.

Number of Posts: There is no limit on the number of posts you can have on one blog. They will all be saved on your account (unless you manually delete them) regardless of whether you are publishing archives or not.

Size of Posts: Individual posts do not have a specific size limit, but very large posts may run you up against the page size limit. (See the next item.)

Size of Pages: Individual pages (the main page of your blog, or your archive pages) are limited to 1 MB in size. This will allow for a few hundred pages of text, but it may be a problem if you are listing hundreds of posts on the front page of your blog. If you hit this limit, you will see an error message saying "006 Please contact Blogger Support." You can get around this error by lowering the number of posts on your main page, which will have the added benefit of making your page load faster as well.

Number of Comments: A post can have any number of comments. As with archived posts, if you choose to hide comments on your blog, all pre-existing comments will remain saved on your account.

Number of Pictures: Up to 1 GB of total storage, shared with Picasa Web

Size of Pictures: If you are posting pictures through Blogger Mobile there is a limit of 250K per picture.

Team Members: There is a limit of 100 members per blog.

Number of Labels: Up to 2000 unique labels per blog and 20 per post.

Blog Description: Limited to 500 characters, with no HTML. Adding additional characters or HTML may cause it to revert to a previous setting.

"About Me" Profile Information: Maximum of 1,200 characters.

Profile Interests and Favorites: Maximum of 2,000 characters in each field.

How to align to left for Blogger Simple Template

All Simple Template inside Blogger was designed with centered align for the the whole page. However we can align the page according to your customization needs. It can be either left, center or right.

First thing first

It is important to identify the DIV element in your blog template. As per provided in Simple Template, the body layout can be customize to 1 column, 2 columns and even 3 columns. Identify the DIV element of it, so that later we are modifying the correct element to make it align as per our needs.

How to identify it easily?

In this post I will talk particularly on Chrome browser. Chrome provided a very useful, wonderful tools to check the element inside the webpage.

1. Open your blog page on new tab if you not yet opened it. Right Click at anywhere at the page. Look for ‘Inspect Element’
2. You now will see a new page divider below it. Here you will see all the html code, DIV element, CSS and also a script associate to the page.

3. From above image, I have identify the correct element for me to alter. This will be use to align my page to left (I wanted to make it left)
4. Go Blogger Template Designer > Advance > Add CSS . Enter the code below: (If you do know where Blogger Template Designer, click on this post here )

.content {float:left}


5. Click ‘Apply to Blog’Now your blog successfully aligned to left. Happy editing.

Remove Blogger Navigation Bar on top of the blog

On some some reason that you wanted to remove the navigation bar for blogger blog, that was a piece of cake. But this is only applicable if you are using Blogger Simple Template for your blog.

1. Go to Layout. You will see a page as in Image below. Look for ‘Navbar’ and click ‘Edit’.
2. On Navbar Configuration > Select ‘Off”
3. Click ‘Save’

You will not see the navbar after you have perform above step.


How to control Image display and properties in Simple Blogger Template

If you are using a Simple Blogger Template as your blog theme, you may notice that the image inside the post body will be display as maximum resolution if you select the image to full size when you attaching the image.

To take full control over it, you can customize it using CSS. This setting can be done in Blogger Template Designer. Just follow these below steps:
1. Go To Template > Live on Blog : Customize
2. Advance > Add CSS
3. Add code below:

.post-body img{box-shadow:none;max-width:100%;}

4. Click ‘Apply to Blog’

*max-width:100% tells the browser to shrink or shrank the image to follow 100% of post-body width.
*box-shadow:none; I do not like shadow all around the image. So I set it to none.

Optimize Your Blogger Blog Titles For SEO Friendly

There are so many blogger template available over the internet for you to download. However, if you would like to use template which has provided default by Google, some of blogger say it may be useful to alter the blog title instead using default by Google.

What will this alteration do? Basically if you look into your blog post title on the top of the browser, it will normally display as YourBlogName: BlogTitle. Well, after we alter some coding in the file, the blog post title will change to just BlogTitle, which the YourBlogName will disappear. In Search Engine Optimization perspective, this changes will helps to improve SEO merit.

How to Change Blog Titles for SEO

1. Log in to your Blogger Dashboard and go to Template > Edit HTML
2. Find (CTRL + F) this code:

<title><data:blog.pageTitle/></title>

3. Replace the code above with this one:

<b:if cond=’data:blog.pageType == “item”‘>
<title><data:blog.pageName/> |<data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title> </b:if>

4.Click Save Template and you are done.