This is our Blogger FAQ and Help guide on the questions and issues that are commonly raised by Bloggers as well as the readers of our Blog at Tips for New Bloggers. Here, we shall elaborate on the finer details of the customization tips for your Blog template, give further examples, and answer specific queries. For detailed write-ups and discussions on the topics, please refer to the articles in our main Blog. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change.
Blogger FAQ and Help

Header
  • Insert an image to the left of Blog Title and Description [read]
  • Add a Horizontal Navigation Bar in Header Image [read]
  • Unable to remove Header Image [read]

Blog Posts
  • Arrange, customize and shift the Blog Posts and Footer elements [read]
  • Insert a picture or image beside the Blog Post Title [read]
  • How to have standard or pre-formatted text in Blog Posts [read]
  • Add Highlighting to Text and Background Color in Text Box [read]
  • Change Blogger Post URL - SEO Tip [read]
  • Change the Post a Comment Link [read]
  • Add scrollbars to text within Blog Posts [read]

Sidebar
  • Add Background color and image to Sidebar Titles [read]
  • Have different Background colors for each widget [read]
  • Style and Position Sidebar Images [read]

Footer
  • How to align Blog Post Footer elements to the left [read]
  • Move Comments Label to below Post Title [read]

Links and Labels
  • How to add Hover, Mouseover and Rollover effects for links [read]
  • Remove automatic number count in Labels widget [read]
  • Remove link underlines in Blog Posts and/or sidebar [read]
  • Be notified by Blogger when there is a Backlink [read]
  • Change and Edit Labels in Multiple Posts [read]

General
  • How to change Background Colour of TicTac Template [read]
  • How to remove the Pencil or Screwdriver and Wrench icons [read]
  • How to add animated graphics in Blogger Post and Sidebar [read]
  • Add Text Box or HTML textarea code in Blogs [read]
  • Know the limits on our Blogger account [read]
  • How to take Screenshots or Screen captures [read]
  • How to change and transfer Blog ownership [read]
  • Change font size and font styles in template [read]
  • How to center align Page Elements [read]
  • How to insert a separator line between each comment [read]

Search Tricks for New Bloggers

banner
We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Oct 6, 2007

Digg This Story

Add Scrollbars to Blog Posts

If you have followed our main article Add Scrollbars to Blog Widgets, you would be able to introduce horizontal and vertical scrollbars to all or any of the widgets in the Blogger template. These scrollbars can be made to automatically appear when the contents overflow a certain specified width or height setting. We have also talked about how scrollbars can be added to the Blog Post body. We shall in this tutorial elaborate on that and let you know how to add the scrollbars within each Blog Post.

Scrollbars to Blog Post body

As we had mentioned in our article, to have the scrollbars to each of the blog posts, once you are logged into Blogger account, go to Template -> Edit HTML and scroll to this code. Add the portion shown in red:-

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


This will give you scrollbars to every post:-

Add Scrollbars to Blog Posts

Scrollbars within Blog Post

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 this setting, scrollbars will automatically appear:-

.scrollbox {
height:100px;
width:400px;
overflow:auto;
}


Save the template. Next, when you are writing a post, switch from the “Compose” mode to the “Edit HTML” mode.



Add these tags (shown in red) before and after the part of the text that you want to enclose within the scrollbox.

<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:-

Add Scrollbars to Blog Posts

Adjust the size of the scrollbox in the stylesheet accordingly. You can also consider having a HTML text box to enclose certain text.

© Tricks for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

28 comments:

Murat Altinbasak said...

I LOVE this scrollbar tip. Thank you!

Rampantheart said...

thanks a lot for sharing this tip!i was looking for this particular one for long!

Jos said...

Great Tips. Thanks! Especially the bit about pre-defining a scroll bar that can then be 'called' in any blog post with the div class=scrollbox -- that is great (and it also made me understand a whole lot more about how the template works!)
Thank you!
-Jos:)

David Reber said...

The post scrollbar is cool and helps with the longer posts. Thanks!

I have set my height to 600px so that any post larger gets the scrollbar. My question is on posts smaller than 600px...how do I default the height to be the post size or 600px whichever is smaller?

With the height set at 600px a post of 300px has space between the posts.

Thanks!

napaboaniya said...

Thanks for all the tips given!!
I've just inserted this scrollbar into my sidebar and blog entries. Really an awesome tip making my blog look less messy :)

Sheena Pimentel said...

How do I place a scroll bar for my comments?

Anu Sonia Risun said...

Hello,

My name is Anu Risun and I work for Packt, a UK based publishing company specializing in focused IT books. You can read more about us at www.packtpub.com.

We have published a new book Blogger: Beyond the Basics which will help users to take full advantage of the rich and powerful features of Blogger to transform their blog into a fresh and state-of-the-art blog as quickly and painlessly as possible.

I came across your website http://tips-for-new-bloggers.blogspot.com/via Google search, I think it acts as an excellent resource to bloggers interested in Software development.

I was wondering if you would be interested in joining our partnership program? All you have to do is place Blogger book image with a unique link that will track all the visits from your website to our book page. I will be happy to register your website with us and set a referral commission of 15% for every book sold through that link.

In case you do not wish to join the partnership program, I would be happy to send you a sample chapter from this book. You can publish it on your blog; it will be relevant information for your audience.


I am also looking for people for people to review this book and with your experience and knowledge in blogging, you would be an excellent person to write a review. Is this something you would be interested in?

Please let me know your response along with your shipping details and I would be happy to send a copy of the book if you plan to write a review, at absolutely no cost to you.

For more information about the book, visit our site.

If you have any other ideas or think this is something you wish to do, please feel free to contact me.

Thank you

Anu

Anu Sonia Risun
Marketing Research Executive| Packt Publishing
MSN: anusonia_packt@hotmail.com|
anusoniar@packtpub.com

http://www.packtpub.com/blogger-beyond-the-basics/book

dishant said...

i got the scrollbar but only one postdisplys on my blog......can u pls have a look....
www.animateindia.blogspot.com

Muhammad Afandi said...

how come there's no post for some time?

Wake Up!

smiles.

señor freud said...

i have a question about an extremely annoying comma. in my post footer, it reads:

Posted by señor freud at 10:43 AM , 0 comments

i have searched high and low for this insidious comma but it is elusive indeed. i would very much like to delete it. would you mind pointing me to the proper location in the html so i can eradicate my silent adversary? thank you.

my blog is located here:
http://flyinglibido.blogspot.com/

Anonymous said...

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

I kinda lost.. where to put? where are the stylesheet? is it in the content, #content?

Pankaj Singla (Adv.) said...

hi
i am really like ur blog. but you have no post regarding seo for blogger specially for blogspot blogger. actually i am in trouble plz help me hot. My post title is not shown in google only show blog title.

ANJJAEJOONG~ said...

thanks so much, this blog really helps me with the lay-out of my blog

but i would like to ask, how do i put my whole layout 'body' in a scroll box? so all my entries and not my sidebars?
sorry, idk the terms <__<``

anyway, keep up the good work, i really love your blog :D

Articles and information said...

thanks for this great tip on adding scroll bar to blogger..

keep it up

Miles Sports said...

good tip! Thanks a lot!!

Web Design Quote said...

Hi.. Great tip for scrollbar to add in the blog post. You explain all the step in detail that was quite good thing. Keep it up.

Sathish said...

Hi i have a doubt. when we click labels in this blog http://directdownloadsworld.blogspot.com/ the results coming are only the post titles without any summary. For example when i click HD label in that blog the results shown page is http://directdownloadsworld.blogspot.com/search/label/HD?max-results=2000. I want a similiar widget for my blog. Please help!

stealourideas said...

Very informative tips and tricks,..thanks a lot for sharing this tip!i was looking for this particular one for long!

mc4tur said...

Another great tips.. Thanks..

Blue Ocean said...

Hi,

Nice post for this scrollbar option in a post.

I am a regular reader of your blog.
I am also having a blog which deals with the same topic, Blogger Tips and Tricks.
Please have a look at it.

http://diy-blogspot.blogspot.com

B.O.

Anonymous said...

super cooool

Green Tea said...

Nice post, thanks for sharing this wonderful and useful information with us.

Green Tea Weight Loss

Sankalp Bohra. said...

Dear thanks for this post. But I want trick to add scroll bar to selected post N selected text only. If I am applying trick that you have mentioned, it is going to attach to all post where overflow condition occurs. I want scroll bar but don't want to apply this with overflow condition.

Sankalp Bohra. said...

I want scroll bar but don't want to make it available with overflow condition. I want it for selected post N selected text other than overflow. Please specify method for my doubt also. Hope you help N reply.

Anup@ Hack Tutors said...

Your blog is really col! I came across from Google. Your blog is Page Ranked 4. So, why don't your optimize some sponsor ads? Just giving you suggestion ad your supporter :) Thanks!

Adam and Nicole said...

I am trying to put a scroll bar in my sidebar..not on each widget, but as a whole...can you help
www.theseoulsurvivors.blogspot.com

spitfirelina said...

Thanks for the tip lots!!! :o) Really helpful since I'm a beginner at this!!
Love the scrollbar tip and the explanations given!

Bharath said...

cool tips and tricks .thanks a lot.....http://topblogger1.blogspot.com/