Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Sunday, September 23, 2012

Scrollbar for Sidebar Posts in Blogger Dynamic Views

Before
After
Yet another Dynamic View template tweak. Sidebar view is one of my favourite templates in Dynamic View. It is the only template in Dynamic View that allows you to view the content of a post while still maintaining the complete list of posts in the sidebar - making blog-post navigation a delightful experience. However, you'd have to use your mouse to scroll up and down to navigate within the sidebar posts. In this tutorial, I'll show you how you can add a scrollbar to conveniently access all your sidebar posts.

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog.
.sidebar #sidebar, .ss{
margin-top: 12px !important;
overflow-y: scroll !important;
}

79 comments:

  1. Here is another css edit to change the scrollbar style :)
    Forgot the source :(

    ::-webkit-scrollbar {
    margin-right: 5px;
    background-color: #EEE;
    width: 7px;
    }

    ::-webkit-scrollbar:horizontal {
    margin-right: 5px;
    background-color: #EEE;
    height: 7px;
    }

    ::-webkit-scrollbar-thumb {
    border: 1px #EEE solid;
    border-radius: 12px;
    background: #777;
    -webit-box-shadow: 0 0 8px #555 inset;
    box-shadow: 0 0 8px #555 inset;
    -webit-transition: all .3s ease-out;
    transition: all .3s ease-out;
    }

    ::-webkit-scrollbar-track {
    -webit-box-shadow: 0 0 2px #ccc;
    box-shadow: 0 0 2px #ccc;
    }

    ReplyDelete
    Replies
    1. This is Cool!
      Thanks pal :)

      Delete
    2. Is there a way for me to change just the color of the scroll so it would be more visible without changing the style?

      by the way... thanks Yoga for the tips

      Delete
    3. Hi John,

      I have not come across an easy way to change the color of the scrollbar. By easy, I was referring to CSS. As we all know, CSS is the only feasible way to make tweaks in DV templates.

      Delete
    4. Scrolling side bar works but I am having one problem with it. I have about 100 posts on the page. It works great until I select an item in the side bar. Once I do that, the sidebar scrolls to selected location and I can then no longer scroll all the way to the top of the blog. Any suggestions?

      Delete
    5. Hi there.. Mind if I take a look at your blog? I'll see if I can come up with a fix.

      Delete
    6. Hello.. What's your blog's address?

      Delete
    7. A little late, but I'm also having the same problem. You can test drive it in my dev environment here: http://evtvindextestsite.blogspot.ca

      Here's where it breaks: use the scrollbar to go all the way down to the bottom of the list and click 'Test post'. You'll notice the post becomes highlighted and scoots up a bit. What also happens is that the slider in the scrollbar disappears... so how do you get back up to the top of the list?

      Delete
    8. Hello Jason,

      I've just had the chance to look into this, but I'm afraid I don't have any good news. We can make the scrollbar appear when the blog loads, but when the bottom posts are viewed, the 'overflow' condition is no-longer met, and thus the scrollbar wont load.

      Delete
    9. Thanks for taking the time to look into the issue. Incidentally, I owe many of the tweaks you saw on my blog to this excellent site. so, if you say that's how it is, I believe you!

      Unfortunately, I found this tweak is broken in another way: if you scroll the sidebar with the regular hover action, the hover-generated scrollbar doesn't stay in sync with the position and a similar "can't go back to the top using the scrollbar" situation arises :(

      Delete
    10. Hi Jason,

      That I have noticed before. It doesn't work well when you use with hover :( At this point I'm afraid the scrollbar better suit as a cosmetic blog element - not so much for the functionality.

      Delete
  2. How to adjust the orientation of the image on my blog. ie how to bring the image to more centre.. Also tell me how do you feel after seeing the blog. The theme of the blog is to share knowledge and awareness on Indian policy and Services.
    rkg21.blogspot.com
    Thanks
    Ravi

    ReplyDelete
    Replies
    1. I'd say you have a nice blog going, though you should post more often if you wanna increase your blog's traffic.

      And here's how you can center your header image. Go to Dashboard - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      #header-inner{
      display: block !important;
      margin-left: auto !important;
      margin-right: auto !important;
      }

      Cheers :)

      Delete
  3. Is there a way to add scrollbar to a single page?
    I mean pop-up posts have scrollbar by default but pages haven't...
    Thanks...

    ReplyDelete
    Replies
    1. Morrison,

      Your pages do have scrollbars, but they are obstructed by your gadget dock. This is how your page would look like without the gadget dock --> http://img100.imageshack.us/img100/5666/82964481.png


      You might wanna consider placing your gadget dock on the left, instead of the default right position.

      Delete
  4. Yes, i knew that about placing the gadget dock on the other side, but i meant something like the pop-up post scrollbar. Scrollbar inside the page in other words...

    Anyway,thanks for the hepl...:)

    ReplyDelete
  5. And something else. Is there any possibility to replace the default comment form with another?

    Thanks,again...

    ReplyDelete
    Replies
    1. I got what you mean now. We can introduce scrollbar to static pages if we fix the height of the pages. Use the following code:

      .viewitem-panel .viewitem-content{
      height: 500px !important;
      overflow-y: scroll !important;
      }

      As for the default comment, unfortunately, there isnt a way to change it at the moment.

      Cheers :)

      Delete
    2. Where i have to put this code? It's a dynamic view blog...:)

      Delete
    3. Oops.. Sorry for not including the instructions. Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the code --> Press enter after the last character of the last line } --> Apply to Blog.

      Let me know how it goes. Cheers :)

      Delete
  6. Hi Yoboy,
    How do I increase the width of the sidebar so pictures and texts will be clearer. Also, I applied your valuable Instructions on how to show the background of my template which I customized myself, it worked but I noticed texts on main page were off the page and invisible in the background. Any tips of getting it sorted? Yoboy for President!

    ReplyDelete
    Replies
    1. Hi Nene,

      Here's how you can increase the width of your sidebar:
      Adjust Sidebar Width in Blogger Dynamic View

      I looked at your blog and tried searching for the main page text problem but I couldnt find what you're describing - probably I'm looking at the wrong place. Could you provide me a annotated screenshot of the issue?

      Lol..

      Cheers :)

      Delete
  7. It works great man...Thank u again...

    ReplyDelete
  8. Check now..nenealoka.com. All transparent. I don't know how to do screen shot. Amateur.Lol

    ReplyDelete
  9. I'm not sure i'm describing it well. You know the texts on my main post are now transparent in the background. This may confuse readers especially those with bad eye sight. I saw a follower you helped in this forum, configure theirs properly. any code to get the texts on a white background? check and let me know

    ReplyDelete
    Replies
    1. Hi Nene..

      This is what I'm seeing --> http://img19.imageshack.us/img19/523/12831767.png

      I can't see anything transparent in your post, and your text is perfectly readable. What am I missing?

      Delete
    2. Do you think you can get in touch with me via email? Go to my Google+ page and send me an email via the link on the right hand column..

      Delete
  10. Hey Yoga,

    I had a question, is there a way to reverse the order of posts in the sidebar view? IE list the oldest first and the newest last?

    Thanks!

    ReplyDelete
    Replies
    1. Hi Alex,

      There isn't a feasible way of doing so at the moment. The only way I can think of is by editing your posts one at a time, and changing its publish date so that the older posts have a date far to the future, and the newer posts towards the past.. Gotta do it manually, and the original publish date won't be present anymore..

      Delete
    2. No Problem Yoga! Thanks for your time for sure!

      Delete
  11. Hey Yoga! I have some problems with my new webpage/blog, hope you fix them. http://mcgrogans.blogspot.com.es/

    1. I want to delete the new sidebar on the right.
    2. I want to delete the "send feedback" button down left.
    3. I want to delete the Posted By & Author in each post.

    Hope you can help, really appreciate your help mate. You're awesome :)

    Cheers!

    ReplyDelete
    Replies
    1. Hi McgCamps,

      Here you go, 3 in 1. Add it to your CSS:

      #gadget-dock, .feedback, .publish-info{
      display: none !important;
      }

      Cheers :)

      Delete
    2. Thanks a lot Yoga! It worked perfectly! ^^
      I have one last question: do you know how to center the snapshots (of the new dinamic views) in the middle of the webpage? They're aligned defaultly to the left, & that's very annoying...

      Peace & Respect ;)

      Delete
    3. The template loads automatically depending on reader's screen size - which means what you're seeing most likely isn't what your readers might be seeing. Trying to adjust the position of the contents based on what it looks like on your screen will affect how your blog looks like in your reader's screen. Setting a static value for a dynamic attribute could be disastrous. In any case, this is how it looks in my blog, and honestly, it looks just fine --> http://i.imgur.com/r8DAe.jpg

      If you still wanna proceed by moving the content to the right, use the following code:

      .snapshot div#main div#content.items{
      margin-left: 30px !important;
      }

      Delete
    4. It helped me a lot, really thank you Yoga, take care!! :D

      Delete
  12. Hi Yoga, I've been finding your tips very helpful lately for my iPad game review site (www.ipadgameratings.com). I ended up switching to the Sidebar view and adding the scrollbar like you instructed, however for some reason the scrollbar doesn't show up when viewed from an iPad. Any fix for this?

    Also, while we're on the topic, I've noticed that Blogger's Dynamic Views really don't scroll well at all on the iPad. Have you explored this issue at all? Is there a way to force the mobile version of one's site when viewed from an iPad?

    ReplyDelete
    Replies
    1. I'd take a look but I don't have an iPad.. Have you tried approaching the Blogger Help Forum? Create a thread there, and I will forward it to the Blogger's team on your behalf.

      https://productforums.google.com/forum/#!categories/blogger/something-is-broken

      Get back to me with your thread link once you've created a thread.

      Delete
  13. Yoga, I have a question for you. On my photo blog at www.rotatingstills.com I'm using the Dynamic View Sidebar Template. As mentioned above, some photos are loading to the left. On my 13" MacBook Pro it looks great, nice and centered. On a 21" iMac, the appearance is on the left. How do you remedy that?

    ReplyDelete
    Replies
    1. Hi Jason,

      I've only got a single screen here so I cant quite picture the differences that you're seeing. Could you send me two screenshots, one from each machine?

      Delete
  14. Replies
    1. Hi Adnan,

      It's still working. Let me have a look at your blog. What's your blog's address?

      Delete
  15. hi yoga,
    Thanks for the post. I have added the CSS. But the scroll bar is not working.
    http://allawesomead.blogspot.ca/

    ReplyDelete
    Replies
    1. Hi there,

      It doesn't seem like the code got saved. Could you double check your 'Add CSS' box and make sure your code is there, even when you close and reopen your browser?

      Delete
    2. No the code is not there. I added it several times. But it's not got saved, I think. :(

      Delete
    3. There's a bug lurking in the Blogosphere that isn't letting users to save their config in the 'Add CSS' box. See this forum and leave your information there:

      https://productforums.google.com/forum/#!topic/blogger/S_uVwRQQrOY

      Cheers..

      Delete
  16. Hey , thanks a lot for all the tutorials. :)
    I am having a problem with the sidebar scrollbar though.It's like you can scroll though only a limited number of posts and then you have to select the last post for the succeeding posts to appear and the scrollbar to work again.Any remedies ? My site: http://techtcsitwiz.blogspot.in/

    ReplyDelete
    Replies
    1. Hi there,

      Blogger has incorporated an invisible feature that allows the posts to be scrolled through on the sidebar. When this is used (that is, when you point your cursor on the sidebar posts and start to scroll), the scrollbar that you've added from the tweak above will still stay at top. Unfortunately, this built-in feature is so invisible, that it is not possible to disable it. The only way to make full use of the scroll bar is by clicking and dragging it.

      Delete
  17. bro hw to approov gugle ad sens

    ReplyDelete
    Replies
    1. Approval for an Adsense application lies within the hands of the Adsense team, not ours.

      Delete
  18. Hi Yoga,

    My Blog displays only 25 posts in the Dynamic Sidebar View; where actually i have more than 50 posts which were displaying properly till last week.

    Could you please help me out to display all the blog posts in my blog?

    http://bankapure.blogspot.com


    Thanks,
    Jeetendra.

    ReplyDelete
    Replies
    1. I can see all of your posts, with your oldest post being "Sketch : हम आपके है कौन?". Have you tried clearing your browser's cache/cookies?

      Delete
    2. Hey Thanks Yoga, but now when i cleared the Cache/cookies and opened a fresh new browser session; still i can see only 25 posts? Can you please help me out?

      Delete
  19. Also, if you clear the cache, restart the machine; and re-open the blog; you'll see the scroll-bar vanished and all the posts being displayed; but then if you close that browser and re-open the same link(my blog); the scroll-bar comes with only 25 posts being displayed. Could you please help me out in this case?

    ReplyDelete
    Replies
    1. Hi Jeetendra,

      Only 25 of your posts will be loaded when your blog loads. To see the rest of your posts, scroll down till the 25th posts, and after some time, the list will re-load itself and you'd be able to the rest of your posts.

      Delete
  20. Hi Yoga,

    I scrolled down till 25th post and still i was Not able to see the remaining posts; do i need to make any configurable changes?


    Thanks,
    Jeetendra.

    ReplyDelete
    Replies
    1. No changes necessary, as long as your browser is not broken. It's pretty straight forward, so I'm not quite sure how I could demonstrate this to you over the net. I hope these screenshots will help:

      1) Your blog, freshly loaded
      http://img201.imageshack.us/img201/1935/20130423235454capture.jpg

      2) When I scrolled down through your posts, I came to the 25th post, and I see nothing below it. But note the loading box (it was very fast, I had to try several time to get the shot)
      http://img201.imageshack.us/img201/1935/20130423235454capture.jpg

      3) Once the loading box dissapears, you'll see the rest of your post. You can see the end of it here
      http://img51.imageshack.us/img51/1254/20130423235824capture.png

      Delete
    2. Sorry.. wrong link for Picture 2:
      http://img801.imageshack.us/img801/2438/20130423235738capture.png

      Delete
  21. Thanks Yoga for your valuable support and prompt co-operation; truly appreciated.

    Thanks,
    Jeetendra.

    ReplyDelete
  22. My static pages have scrollbars by default, even when the text doesn't go past the bottom of the page. Is there any way to hide the scrollbar when the page isn't long enough to use it?

    ReplyDelete
    Replies
    1. If we disable the scroll bar for a page, it'll be disabled for all pages, even if the page is long. We can't dynamically determine if a page is long enough for a scroll bar or not, unfortunately.

      Delete
  23. Hi,

    thank you for your tuning tricks

    Can you help me to change "background color, text color and text size & font" of the SIDEBAR in dynamic sidebar view ? ie, changes for sidebar alone?

    Also, can we change colour, size, font of gadget dock? And can we prevent autohiding of the gadget dock?

    Sorry for bothering you. I have zero programming knowledge, that's why :)

    ReplyDelete
    Replies
    1. Hi TShooter,

      Can we bring these discussions to the forum? It'll be easier for me to help your there. Go to Blogger Help Forum and create a discussion there, and let me know its link once it's published.

      Delete
  24. Hi, I have thought that maybe you can help me with my problem.
    When I am on my blog I can scroll down the page normally when I am on my "Home" site, however, when I am on my other sites I have a problem... I cannot go down the page, scroll it down.. and this creates a lot of fuss for me cause I cannot post new things on other sites which I categorised cause the reader will be unable to read the content, scroll down bar is simply invisible, and when I try to click it it takes me back to my Home page, is it a general dynamic view problem???

    ReplyDelete
    Replies
    1. Hi Malvi,

      Could you point me to one of your other sites that you're referring to, so that I can have a look at what's wrong with your page?

      Delete
  25. Hi Yoga! At the sidebar the posts appear from the new to the older one, can I twist it? So the older one appears at the top?
    Thnks man!

    ReplyDelete
    Replies
    1. This is a classic one, but unfortunately, there isn't a way to do so (except to edit your posts one by one and manipulate the dates so that the older posts will show at top, which is a pain in the neck as you can tell).

      Delete
  26. Hi if i want another sidebar then the one i have now i want a bigger one and so u can see my profil pic on the site like in other templates how do i do that?

    ReplyDelete
    Replies
    1. If you're using a Dynamic template, I'm gonna have to stop you at 'another sidebar' - it just isn't possible.

      Delete
  27. Your blog is really awesome and useful! Thank you for your effort!

    Since you know infinitely more than me (and I'm sorry if my question is dumb), but even with the scrollbar (also without), the posts start to overlap each other in the sidebar. This especially happens with posts that have comments on them (mostly from 2011). So post titles from Nov 2014 are in the same space as posts from Nov 2011 and it's impossible to decipher them. I've no idea why this is.

    Just to give you an idea: lenasilk.blogspot.com (after the first 20 or so it starts doing this), any ideas? If not, thanks anyway :)

    ReplyDelete
    Replies
    1. Looks like a bug to me. Have you posted this in Blogger Help Forum? This may need an escalation. Do provide me a link to your discussion in the help forum if you've already posted there.

      Delete
    2. I tried replicating this but I wasn't able to. Could you remove the sidebar code and get back to me?

      Delete
  28. hi and thank you sooooii much for everything firstly !
    ok so I'm looking and must be here somewhere but I'm looking to reduce the space between the post titles in my sidebar I think is dynamic view

    also in some browsers my header bs kg round looks a different color even its the same code
    I mean different than the rest of the blog

    I would also love the right border for my posts to be the same have some space


    thank you!

    ReplyDelete
    Replies
    1. Montronix.. Looks like this will be a lengthy discussion. Let's bring it to the forum (use the 'Ask a Question' link above).

      Delete
  29. I want to set fixed sidebar while scrolling down also for my blog www.saudi-expatriates.com

    ReplyDelete
    Replies
    1. Your sidebar extends all the way to the bottom of your blog. If you set it on a fixed position, you will essentially clip off the bottom part of your sidebar.

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.