 |
| 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;
}
Here is another css edit to change the scrollbar style :)
ReplyDeleteForgot 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;
}
This is Cool!
DeleteThanks pal :)
yur welcome :)
DeleteIs there a way for me to change just the color of the scroll so it would be more visible without changing the style?
Deleteby the way... thanks Yoga for the tips
Hi John,
DeleteI 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.
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?
DeleteHi there.. Mind if I take a look at your blog? I'll see if I can come up with a fix.
DeleteI have the same problem :(
DeleteHello.. What's your blog's address?
DeleteA little late, but I'm also having the same problem. You can test drive it in my dev environment here: http://evtvindextestsite.blogspot.ca
DeleteHere'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?
Hello Jason,
DeleteI'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.
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!
DeleteUnfortunately, 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 :(
Hi Jason,
DeleteThat 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.
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.
ReplyDeleterkg21.blogspot.com
Thanks
Ravi
I'd say you have a nice blog going, though you should post more often if you wanna increase your blog's traffic.
DeleteAnd 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 :)
Is there a way to add scrollbar to a single page?
ReplyDeleteI mean pop-up posts have scrollbar by default but pages haven't...
Thanks...
Morrison,
DeleteYour 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.
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...
ReplyDeleteAnyway,thanks for the hepl...:)
And something else. Is there any possibility to replace the default comment form with another?
ReplyDeleteThanks,again...
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:
Delete.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 :)
Where i have to put this code? It's a dynamic view blog...:)
DeleteOops.. 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.
DeleteLet me know how it goes. Cheers :)
Hi Yoboy,
ReplyDeleteHow 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!
Hi Nene,
DeleteHere'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 :)
It works great man...Thank u again...
ReplyDeleteNo prob :)
DeleteCheck now..nenealoka.com. All transparent. I don't know how to do screen shot. Amateur.Lol
ReplyDeleteI'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
ReplyDeleteHi Nene..
DeleteThis 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?
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..
DeleteHey Yoga,
ReplyDeleteI 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!
Hi Alex,
DeleteThere 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..
No Problem Yoga! Thanks for your time for sure!
DeleteDon't mention it :)
DeleteHey Yoga! I have some problems with my new webpage/blog, hope you fix them. http://mcgrogans.blogspot.com.es/
ReplyDelete1. 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!
Hi McgCamps,
DeleteHere you go, 3 in 1. Add it to your CSS:
#gadget-dock, .feedback, .publish-info{
display: none !important;
}
Cheers :)
Thanks a lot Yoga! It worked perfectly! ^^
DeleteI 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 ;)
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
DeleteIf 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;
}
It helped me a lot, really thank you Yoga, take care!! :D
DeleteHi 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?
ReplyDeleteAlso, 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?
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.
Deletehttps://productforums.google.com/forum/#!categories/blogger/something-is-broken
Get back to me with your thread link once you've created a thread.
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?
ReplyDeleteHi Jason,
DeleteI'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?
Hello, the CSS does not work?
ReplyDeleteHi Adnan,
DeleteIt's still working. Let me have a look at your blog. What's your blog's address?
hi yoga,
ReplyDeleteThanks for the post. I have added the CSS. But the scroll bar is not working.
http://allawesomead.blogspot.ca/
Hi there,
DeleteIt 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?
No the code is not there. I added it several times. But it's not got saved, I think. :(
DeleteThere'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:
Deletehttps://productforums.google.com/forum/#!topic/blogger/S_uVwRQQrOY
Cheers..
Hey , thanks a lot for all the tutorials. :)
ReplyDeleteI 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/
Hi there,
DeleteBlogger 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.
bro hw to approov gugle ad sens
ReplyDeleteApproval for an Adsense application lies within the hands of the Adsense team, not ours.
DeleteHi Yoga,
ReplyDeleteMy 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.
I can see all of your posts, with your oldest post being "Sketch : हम आपके है कौन?". Have you tried clearing your browser's cache/cookies?
DeleteHey 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?
DeleteAlso, 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?
ReplyDeleteHi Jeetendra,
DeleteOnly 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.
Hi Yoga,
ReplyDeleteI 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.
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:
Delete1) 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
Sorry.. wrong link for Picture 2:
Deletehttp://img801.imageshack.us/img801/2438/20130423235738capture.png
Thanks Yoga for your valuable support and prompt co-operation; truly appreciated.
ReplyDeleteThanks,
Jeetendra.
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?
ReplyDeleteIf 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.
DeleteHi,
ReplyDeletethank 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 :)
Hi TShooter,
DeleteCan 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.
Hi, I have thought that maybe you can help me with my problem.
ReplyDeleteWhen 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???
Hi Malvi,
DeleteCould 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?
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?
ReplyDeleteThnks man!
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).
DeleteHi 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?
ReplyDeleteIf you're using a Dynamic template, I'm gonna have to stop you at 'another sidebar' - it just isn't possible.
DeleteYour blog is really awesome and useful! Thank you for your effort!
ReplyDeleteSince 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 :)
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.
DeleteI tried replicating this but I wasn't able to. Could you remove the sidebar code and get back to me?
Deletehi and thank you sooooii much for everything firstly !
ReplyDeleteok 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!
Montronix.. Looks like this will be a lengthy discussion. Let's bring it to the forum (use the 'Ask a Question' link above).
DeleteI want to set fixed sidebar while scrolling down also for my blog www.saudi-expatriates.com
ReplyDeleteYour 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