Easy HTML Tricks for Blogging

Arange Blog Posts in Gallery

Gallery view means arranging the blog posts one after another side wise as in a magazine. This is also referred to as magazine view. Unlike usual blogs, you can change your blog from the monotonous old look into a magazine side-by-side view.
This image shows how post will be arranged side by side.

This is how to do it

Steps :

Go to Blogger Dashboard => Design => Edit HTML
Look for the piece of code ]]></b:skin>
Add the following piece of code after this line
Save your template

Code Starts ->

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

#main-wrapper {
margin:0px 0px 0px 8px;
float:left;
border:0;
padding:0px;
background:none;
overflow:hidden;
width:760px;
}

.post{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdd_2M8zBPmvWW-9meil-EJj5O3aAWWbVBDI8HMNX1edXEtC2ABXFS2BDWq1xdOwdA7iJRlWMovw2Wfaqw13iBR-G5H-XZJ83b3QsCvAu-JM8VGJLI3HgctPajODA3vK24SZIXV9CvFE30/s1600/post.jpg);
background-repeat:no-repeat;width:227px;height:195px;
margin:0px 15px 20px 0px;
padding:10px 0px 0px 10px;border:0;
display:inline;float:left;overflow:hidden;position:relative;}

.post img {max-height:151px;max-width:217px;padding-top:8px;}
.post h3{font-size:11px;padding-top:5px;margin:0;line-height:6px;}
.post-labels{display:none;}.post-author{display:none;}
.post-body{padding:0px;}
</style>
</b:if>

Code End

Suggestions :

Edit width:227px;height:195px in above code to resize the size of each block
~~This piece of code shows bugs when used for formatting individual pages in blog, I'm trying to fix it. If you find any solution do let me know. Works perfectly otherwise~~ "EDIT - Fixed"
If you dont want the background image remove the line background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdd_2M8zBPmvWW-9meil-EJj5O3aAWWbVBDI8HMNX1edXEtC2ABXFS2BDWq1xdOwdA7iJRlWMovw2Wfaqw13iBR-G5H-XZJ83b3QsCvAu-JM8VGJLI3HgctPajODA3vK24SZIXV9CvFE30/s1600/post.jpg);

Take From here

Under Construction Template Blogger

With 7 different under construction Image Options !

Home » web feel templates » Under Construction blogger template

Under Construction blogger template

With 7 different under construction Image Options !

here you can learn the code
http://www.anandz.co.in/2011/08/under-construction-blogger-template.html

Hide Blog Posts From Blogger

Here I'll teach you how to create a STATIC BLOGGER HOME PAGE or LANDING PAGE ! The default blog-posts which used to appear on the home screen in any blogger blogspot blog is not present on this blogger blog of mine.

This is how you do it. You may see tutorials saying remove the following code from html editor window.

But,if you delete this piece of code ,it deletes the blog post widget . i.e, it removes the blog post widgte as such and you will never be able to show your blog posts. It deletes the widget from the blog totally. Here's a new trick

So to remove the blog posts from the home page alone.

First go to Dashborad => Design =>Edit HTML (Edit Template HTML)
The style sheet declarations end after the "]]></b:skin>" . So just search for the "]]></b:skin>" and add the code that comes after the red color ,as shown.

Note that you are hidin both side bar and your posts here. To hide your posts alone and keep you sidebar intact remove the .sidebar from .post, .sidebar from above piece of code in first block.

Now save the template. Now go do Design => Page elements and rearrange your widgets and add whatever you want as aove or below the blog post widget . Now you have your blog pos hidden on home page and they will appear when you click on an individual post link !!
It worked good for me. This is relatively new from me and if there are any bugs do let me know.

From original tutorial here

Display Your FeedBurner

Almost every blogger now is using FeedBurner to publish their feed. The most obvious benefits of using FeedBurner are the statistics and the subscriber count, but there are plenty of other free options that you can use or customize to enhance your blog. One of these options is called BuzzBoost, and essentially it republishes your feed as HTML so that it can be used anywhere.

One of the most productive ways to use BuzzBoost is to publish links to your blog posts from somewhere outside of your blog.

If you’ve looked around the portfolios of other designers you have probably seen the same thing in action. A growing number of designers are including a blog as a part of their portfolio sites, so it makes sense to promote the most recent posts from the home page. In this tutorial I’ll quickly take you through the process of getting the links from your feed displayed on a static HTML page.

Step 1 – Login to FeedBurner

If you already have a FeedBurner account set up, login and click on your feed.

Step 2 – Activate BuzzBoost

Click on the “Publicize” tab, and then click on “BuzzBoost” in the list at the left side of the screen (see image below). At this point BuzzBoost will give you a number of different options. You can choose how many items (posts) you want to be displayed, if you want the links to open in the same window or a new window, displaying the feed title, displaying the date, and several others. One of the options is “display item content.” If this box is not checked all that will be displayed is the title of the blog post (which is what I will be using), and if that box is checked you can choose to display the entire post or a brief excerpt in plain text or HTML. For my purposes I have chosen to show 5 posts, have them open in the same window, and everything is left unchecked. Once you have everything set the way you want it, click “Activate” at the bottom of the page (you can easily change these settings later). If you’ve already activated BuzzBoost you’ll see the option to save instead of activate.

Setting Up BuzzBoost

Step 3 – Copy and Paste the Code

Once you choose your settings and activate BuzzBoost you will be provided with the piece of code. Copy the code provided by FeedBurner and paste it into your page wherever you want it to be displayed.

Step 4 – Customize

Now that you have pasted the code into your page, BuzzBoost should be completely functional. Most likely though, you’ll want to make some customizations to the appearance of the output to fit with the rest of your page.

Earlier I said that I left all of the boxes unchecked in the BuzzBoost settings, including the option to display the feed title. Instead of displaying the feed title I simply inserted a link directly above the BuzzBoost code that says “From Our Blog”, which serves as the title. You can do it either way, use BuzzBoost to include the title, or simply enter it yourself.

FeedBurner uses divs and classes for everything produced by BuzzBoost, so it’s pretty simple to style it however you like. The CSS code that I am using is shown below.

.feedburnerFeedBlock ul {
margin-left:0;
padding-left:0;
list-style-type: none;
}

.feedburnerFeedBlock ul li {
padding: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #E0E0E0;
}

.feedburnerFeedBlock ul li span.headline a {
color: #990000;
text-decoration: none;
display: block;
}

.feedburnerFeedBlock ul li span.headline a:hover {
color: #535353;
}

#creditfooter {
display: none;
}

And this is what the finished product looks like.

Original article here

Twitter Updates Time Line Show on Blogger

1.Log in to your dashboard--> layout- ->Page Elements

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the code given below and click save.

NOTE : Remember to replace TWITTER-USERNAME with your real twitter username.Look at the example below.

Now you are done.

Create Scroll to Archieve List or Blog Archieve Widget

Go To Template > Edit HTML > Expand widget >
find <div id='archivelist' add the following code
just like this

<div id='ArchiveList' style='border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 200px; background-color: transpartent;'>

very simple !!!