Online Money Xtreme

Scroll Bar for Blog Post Body

Thursday, February 19, 2009 at 9:10 PM Posted by Souras

Adding Scrollbar to Blog Post body
once you are logged into Blogger account, go to Template -> Edit HTML and scroll to this code. Add the portion shown in red:-

Step 1 : Open your Blogger Account and Edit Html Under Layouts Tab;

Set 2 : Search for .post ( by browser Search) and Put the Red Portion in Curly Bracket. { }

.post {
height:200px;
overflow:auto;

}

This will give you scrollbars to every post:-

Scrollbars within Blog Post
Sometimes, you may not want to have the scrollbars to all the [...]

This will give you scrollbars to every post:-

Scrollbars within Blog Post

This setting, scrollbars will automatically appear according to your need:-

Sometimes, you may not want to have the scrollbars to all the blog posts, but only for several paragraphs within a post. Assuming you are writing an article and you wish to enclose some long text within a scrollbox, you have to first define a class within the stylesheet.

For example, we can insert in the stylesheet this code to specify the maximum height and width of the scrollbox. Once the text overflows

Step 1 : Open your Blogger Account and Edit Html Under Layouts Tab;

Set 2 : Search for </b:link> by Browser search place the below code before it.

.scrollbox {

height:100px;

width:400px;

overflow:auto;

}

Step 3: Save the template.

Next, when you are writing a post, switch from the “Compose” mode to the “Edit HTML” mode and put the below code where your want to appear scrolling bar.

<div class=”scrollbox”>TEXT TO BE INCLUDED IN THE SCROLLBOX.</div>

You can continue typing the post by switching back to the “Compose” mode.

After you are done, when you publish your post, you will see that only the part of the text comprised with the tags will be in a scrollbox, like this:-

Adding Background Image to Post Titles

Tuesday, February 17, 2009 at 11:13 PM Posted by Souras

Dcloud Of Dcblog brought this fantastic thing to us.By this we can put a Image Just behing the Post Title like on his blog.It’s Very Simple,the only thing is that you need to have a superb image to put on their.

You will have to just check hard for the codes to implement as different blogger have different type of coding.

To locate the code which controls the post titles go to your Layout Tab (located in your Customize window) and click the Edit HTML sub tab. The code you are searching for is “.post h6″ (it can be something else also,So try searching) which looks like this

Now to get the background image in there you have to add the code “background: url()” like this:

.post h6
{
font-size:22px;
color:#000000;
font-weight:normal;
border-top:1px dotted #000000;
padding:4px 0 0 0;
width:599px;
no-repeat;
background: url(http://www.yourserver.com/yourimage.gif) no-repeat;
}

Now Check your blog the image might be partially visible only so add the height attribute(equivalent to the height of the image).

Now Checkout your blog,now you have to add/change the padding codes as you thinkl according to your blog to properly align the title within the image.

Add an Image Beside Post Title

Monday, February 16, 2009 at 10:38 PM Posted by Souras

Don’t you want your blog look beauty? Maybe you can add several accessories. One of them is adding a small image beside post title, for example : please take a look the image below :

How to adding a small image at the post title? here is the steps.

Step #1
You must have a small image image, for example like this :

Step #2
Upload your small image to image hosting. For example : you can upload your image to blogger, Yahoo geocities, Google pages, or another free image hosting. If you has been uploading your image, please get the image code. for example : I'm has been upload an image to Blogger and the image code is :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCvllqAsakfWdUI1-ktBLNllwDgwjfiQSpXoZRsfxSjdP5zVSKMRgGrOGa4UyBsKO6AYf987rAaKQyjb-sv86EOE40eBlzAlyf7z6LJEySwYvYp6wE2KB_eULyiLphiuuEH19FxJnjv4M/s400/mypencil.jpg

So that the picture can appear at your blog, you must create the code like this :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCvllqAsakfWdUI1-ktBLNllwDgwjfiQSpXoZRsfxSjdP5zVSKMRgGrOGa4UyBsKO6AYf987rAaKQyjb-sv86EOE40eBlzAlyf7z6LJEySwYvYp6wE2KB_eULyiLphiuuEH19FxJnjv4M/s400/mypencil.jpg"/>

And the image will appear like this :

Step #3
Add the image code to your template code. Here are the steps to add image code to your blog.

Or, do you still using old (classic) template? Never mind, bellow is the steps adding image code to classic template :

Login to blogger with your ID.
At the dashboard page, click Template.
Click Edit HTML.
Back up your template code (important!).
Find this code :
<BlogItemTitle$>
Replace your image code beside above code :
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCvllqAsakfWdUI1-ktBLNllwDgwjfiQSpXoZRsfxSjdP5zVSKMRgGrOGa4UyBsKO6AYf987rAaKQyjb-sv86EOE40eBlzAlyf7z6LJEySwYvYp6wE2KB_eULyiLphiuuEH19FxJnjv4M/s400/mypencil.jpg"/>   <BlogItemTitle$>
Click Save Settings button.
Done. Now your every post title will appear with your small image.

This is for new blogger template (beta template) :

Login to Blogger with your ID.
At the dashboard page, click Layout.
Click Edit HTML.
Back Up your template code (important!).
Please mark the little box beside Expand Widget Template. Wait for a moment
Go to your template code, and find the code like this :
<a expr:href='data:post.url'><data:post.title/></a>
Add your image code like this :
<a expr:href='data:post.url'> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCvllqAsakfWdUI1-ktBLNllwDgwjfiQSpXoZRsfxSjdP5zVSKMRgGrOGa4UyBsKO6AYf987rAaKQyjb-sv86EOE40eBlzAlyf7z6LJEySwYvYp6wE2KB_eULyiLphiuuEH19FxJnjv4M/s400/mypencil.jpg"/>   <data:post.title/></a>
Click SAVE TEMPLATE button.
Done. Now your every post title will appear with your small image.