Southern Listeners

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

Sunday, July 22, 2012

Show Date Ribbon in Blogger Sidebar Dynamic View

Before
After
Hey, sorry for the delayed post. So, all dynamic view templates have date ribbons on their posts - except Sidebar. I'm not quite sure what the reason is, but there's an easy way to get it back. And here's how..

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 .article .article-header .date, .ss {
display: block !important;
}

81 comments:

  1. I like it Yoboy! Any way to widen the post section in the Sidebar view to the same width used for the Classic view? Thanks!

    ReplyDelete
    Replies
    1. Thanks Bob, appreciate it, as always! :)

      As for the post section width in Sidebar, I think the post content automatically fit to the viewer's screen. Is this not the case in your blog?

      Delete
    2. Seems to stay narrow no matter how wide the screen is.

      Delete
    3. I'm using a temporary external monitor, perhaps that's why I'm not seeing it.. Send me the URL.. I'll figure something out :)

      Delete
    4. Thanks! Here is the link:

      http://www.kansasbob.com/view/sidebar

      Delete
    5. Hi Bob,

      Give this a try:



      Let me know how it goes :)

      Delete
    6. Invisible ink? I do not see anything in your comment to try.

      Delete
  2. Thanks for the great tip! Is it possible to add year (like 2012) to the date ribbon?

    ReplyDelete
    Replies
    1. Hi Vera,

      Nope, it is not possible to dynamically add a post's year to the ribbon..

      Delete
  3. Dude Im a regular but please stop posting about Dynamic View. More interesting widgets, social media tips, SEO posts, etc.

    ReplyDelete
    Replies
    1. Dude, it's my blog, and it's my wish what I wanna post here. There are hundreds of other blogs that post the bunch of stuffs that you're asking for, repetitively.. If you don't like the content here, please leave. Simple ain't it?

      Delete
    2. THANK YOU for posting about Dynamic Views. Finding out how to make changes to it is near impossible anywhere online. Really appreciate your posts!

      Delete
    3. You are being a great help to customize my blog... THANK YOU!

      Delete
  4. I AGREE! LOL I GOT A QUESTION FOR YOU YOGA, HOW DO U DISABLE THE RIGHT CLICK FUNTION OFF THE TIMELINE TEMP? ALSO, IS THERE A WAY TO ADD A FLASH HEADER OR A MAPPED HEADER? WHAT ABOUT MUSIC?? LOL SORRY I KNOW ITS ALOT, BUT UR A GENIUS AT THIS, SO I FOLLOW EVERYTHING U SAY :) THANK YOU

    ReplyDelete
  5. Replies
    1. I hate to sound so useless, but unfortunately, none of what you've asked is possible at the moment.. Disabling right click needs a special script and adding a flash header/image map needs access to template's HTML, both which aren't possible at the moment. As for music, perhaps you can add a music in one of your post's HTML. Have you tried giving it a go?

      Delete
  6. thank you!! very much appreciated
    grazie!!
    ;-))

    ReplyDelete
  7. Hey Yoga, just to let you know I submitted a question on your contact page (form field). Awaiting a reply. Thank you dearly.

    ReplyDelete
    Replies
    1. Hi Nick.. Did you type your question directly onto the form? Because forms with no valid question link will be rejected.. I've only gotten one properly constructed form today from Tsanson..

      Delete
    2. Thanks for replying bud. No I didn't use the Google forum, I wanted you to reply to the email that I submitted (I didn't want to paste a lengthy code here). I usually ask for your help in the comments and you always find a fix. Let me just continue my question here.

      I have a pure CSS navigation bar, it's great in all browsers expect Internet Explorer. When you hover over the menu and the drop down appears, it appears BEHIND my header. May you please take a look Yoga?

      Link: http://tcpctestsite4.blogspot.com/

      Thank you!

      Delete
    3. Hi Nick,

      Try this..

      #HTML8{
      position: relative !important;
      z-index: 10000 !important;
      }

      If it doesnt work, leave it as it is. I'll have a look. Cheers :)

      Delete
    4. Yoga you are a genius! Thank you so much!

      I really don't like to bother you again, but I had this on my mind as well... how would I add rounded corners to the menu bar? (I tried to do this fix by myself, I succeeded little, but it also rounded the hover-over effects, drop down bar, etc). Thank you so much man.

      Delete
    5. Took me awhile to come up with this, but it should work. Here:

      #HTML8 .menu {
      background: #333333 !important;
      -moz-border-radius: 10px !important;
      -webkit-border-radius: 10px !important;
      -goog-ms-border-radius: 10px !important;
      border-radius: 10px !important;
      }

      #HTML8 .menu ul{
      background: transparent !important;
      }

      .menu ul li ul a{
      background: #333333 !important;
      -moz-border-radius: 0px !important;
      -webkit-border-radius: 0px !important;
      -goog-ms-border-radius: 0px !important;
      border-radius: 0px !important;
      }

      Cheers :)

      Delete
    6. Sorry for the late reply, I was out for a few days.

      Anyways, that code for cornering doesn't seem to have worked out right. It's okay, thanks though.

      My concern is still on my first comment, how the drop down menus where falling behind the header (IE issue only). We managed to fix it to this code:

      #HTML8{
      position: relative !important;
      z-index: 10000 !important;
      }

      Now I also on noticed http://tcpctestsite4.blogspot.com/ that if the drop down menu is long enough, which it is, and go down to the sidebar or post column, then they appear behind the sidebar and post column as well. Is there a fix for this (this bug is only in IE too)? Thanks Yoga.

      ALSO YOGA, when you view the site in I.E., you can also notice that if I put a widget in the posts column, it seems to be appear unusually high. Why and is there a fix for this as well?

      Thank you and please answer these two questions. Sorry if it's too much, blame I.E., lol. Thanks man!

      Delete
    7. Hi Nick,

      Use this for the first problem:

      .menu li ul{
      z-index: 10000 !important;
      }

      As for the Sidebar positioning, it appears like there are lots and lots of CSS code defined for per-level elements in your template.. There are conflicting attributes assigned to child and parent level elements.. Some browsers give priority to parent elements, and some browsers like IE give priorities to child elements.. Thus the reason they look different.. The bottom line is, you should not assign conflicting CSS attributes to child and parent elements.. For example.. Say you have a Div tag with class "parent".. and say that div tag has another div tag in it, with class "child".. Avoid assigning CSS attributes to the 'child' class, and always go for the 'parent' one.. In your case, it appears line the parent one is in correct position, but the child one is somewhere else.. This is to put simply.. The actual code looks like a mess, and it isn't as simple as applying a fix.. I suggest you to remove all custom CSS code that you've added for the sidebar child elements, and start over again..

      Delete
    8. Thanks so much for the speedy reply Yoga.

      For some reason the CSS solution for the drop down menu appearing behind the sidebar and posts did not work... is there anything else you can think of?

      Also, I'm sure the sidebar position issue is not caused by me. I did remove all custom CSS, and the problem remains. Plus I use the "Awesome Inc." template on other blogs, some which I've never added CSS or altered the HTML, and I have the same issue... ANY help is very very much appreciated Yoga. Thank you dearly.

      Delete
    9. Hi Nick,

      Not being able to reproduce your issue has forced me to take shots in the dark, thus the code-guessing.. I think it is time for us to bring this conversion to the Help Forum. Create a question thread, and get back to me with its link. Once I join you in the forum, you can then help me to reproduce your issue, so that I can give suggest you accurate fixes.

      See you there :)

      Delete
  8. Hello friend.
    Can you relocate the gadgets? From right to left. How do you do?

    Sorry, my English is terrible.

    Thank you.

    ReplyDelete
    Replies
    1. Hi Richard, cosmetically yes, it is possible. But it'll be pretty much useless as the gadget's content won't pop-out, since it is programmed to pop to the left of the gadget's dock.. If you wanna see what I mean, add this to your css:

      #gadget-dock{
      left: 0px !important;
      }

      Cheers..

      Delete
    2. I see.

      This is what I did:
      #gadget-dock {
      left: 0px !important;
      }
      .gadget-title {
      position:fixed !important;
      margin-left:48px !important;
      }

      I need to do some fixes on ".gadget-container". I guess...

      Thank you very much anyway! :)

      Delete
  9. Another awesome tip! Thx for that ;)

    ReplyDelete
  10. Replies
    1. Hi El Extranjero,

      The date ribbon is readily available in timeslide view. No tweak needed. See screenshot below:

      Your Blog

      Delete
    2. haha I was wrong, my question was: Is it possible to remove in ttimeslide?

      Delete
    3. Oh yes.. Here, add this to your CSS:

      .timeslide .ribbon{
      display: none !important;
      }

      Cheers :)

      Delete
    4. I was also wondering how you remove the date ribbon from all views, particularly magazine view, and from all the posts. When I'm posting about future dated events, people get confused if the post date is the event date.

      Also, totally off topic, but I can't get my logo to be visible in dynamic views.. is it not possible? It shows up fine on the mobile app.

      PS - SO GLAD I FOUND THIS BLOG! Finding info on Dynamic views feels impossible sometimes!

      Delete
    5. Hi Dave,

      Thanks for your kind words, appreciate it! As for your date ribbons, add this to your CSS - this code should get rid of it:

      .ribbon{
      display: none !important;
      }

      As for your header, lets just say the default way of uploading a header to a Dynamic View template sucks. Try this instead:

      http://www.southernspeakers.net/2011/10/add-header-in-blogger-dynamic-view.html

      Good luck! :)

      Delete
  11. Hey Yoga, thanks so much! It worked like a charm,.. buuut it seems like the CSS for the header created a new problem :/

    When I add the header code none of my pages load except the primary one. If I take the code out, they load again. I tweaked some of the numbers to get the size I wanted.. think I screwed something up?

    Here's what I added:

    #header .header-drawer.sticky, #header .header-drawer {
    top: 134px;
    }

    #header .header-bar{
    height: 165px;
    }

    #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
    top: 165px;
    }

    #header-container {
    height: 205px;
    }

    .viewitem-panel .viewitem-inner {
    top: 800px;
    padding-bottom: 120px !important;
    height: auto !important;
    }

    #header-container #header.header .header-bar span.title{
    background: url(http://2.bp.blogspot.com/-zIks4u-z7HY/UDGaOihGZnI/AAAAAAAABg8/OlCcf8v663Y/s1060/GGLAHeader.jpg)
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 165px;
    }
    #header.header .title a h1, #header.header .title h3{
    display: none;
    }

    ReplyDelete
    Replies
    1. Hi Dave,

      This isn't right:

      .viewitem-panel .viewitem-inner {
      top: 800px;
      padding-bottom: 120px !important;
      height: auto !important;
      }

      Change the 800px to 100px and see if it fixes the issue :)

      Delete
  12. Another question:
    How do I hide all the dynamic view switcher.

    ReplyDelete
  13. how would i put the date under the post title?

    ReplyDelete
  14. Thank you for your posts!
    And what should i do to remove that ribbon from my blog?

    ReplyDelete
    Replies
    1. Hi Maxim,

      Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .ribbon.date {
      display: none !important;
      }

      Cheers :)

      Delete
  15. Hi Yoga,

    I like the look of the date ribbon on my blog posts, however it also appears on other static pages such as About and Contacts when viewed on the iPad. Is there a way to change this?

    ReplyDelete
    Replies
    1. Hi Alan,

      Have you got it sorted? Coz I can't see see the date ribbon in your static pages any longer.. What am I missing?

      Cheers..

      Delete
    2. Hi Yoga, are you viewing from an iPad? This is the only device I know where there is a problem. Otherwise I am really happy with the site design now.

      Delete
    3. Right.. But I don't have an iPad, and I'm gonna have to inspect the element if I were to suggest something useful. Do you think you can send me a screenshot of what you're seeing?

      Delete
  16. Hey Yoga, you look like you may be the man to help me out :) Trying to find the answer in this thread, but I seem to be missing it. My issue is as follows:

    I am using a customized dynamic views template, and yet don't seem to have the option to use a date ribbon. I'd love to have one for my blog instead of just a text date. What am I missing? The strange part is, even before I started customizations I seemed to not have a ribbon date option?? Please advise - thanks!

    ReplyDelete
    Replies
    1. Hi Keltie,

      Dynamic Templates have the date ribbons by default. In non-dynamic templates, the date ribbons can be added with some third party code (just google 'Date Ribbon in Blogger'). I went over to your profile to get your blog's link (wasn't stalking!) and I found this --> http://keltieleannedesigns.blogspot.com/

      But I must have gotten the wrong address as the blog in the link above seems to be running on a non-dynamic template, or more specifically the 'Simple' template. What's your dynamic view blog's address? I'll see if I can find an explanation why you aren't seeing your date ribbons (and possibly a way around it).

      Cheers.

      Delete
  17. Well, it's weird, because I thought I was using a "Simple" template, except when I look under the blogger template designer, it says that I've customized Dynamic Views?? In either case, I suppose if my template is Simple, then the problem I'm having embedding my link in my logo should work, and if it's Dynamic, I should be able to see date ribbons, no?

    My blog is www.keltieleannedesigns.blogspot.ca, but believe the .com ending still goes to the same site.

    ReplyDelete
    Replies
    1. Well, you're definitely using a Simple template. It says so in your blog's source code.

      I must have missed something. Do you have problem embedding your link in your logo? Your logo seems to be already linked. What am I missing?

      Delete
  18. Hi Yoga - You're right, it is linked I've realized - just not to where I'd like it to go :) How can I change the link to be my website, keltieleannedesigns.com, rather than my blog site?

    ReplyDelete
  19. Hello,
    it's been brilliant reading your blog - used a couple of tweeks already - thank you.
    I read that it's not possible to put the year onto the date ribbon. If that's the case I will probably use your code to get rid of it.
    But another question: is it possible to put the year into the date which is displayed on the back of the flipcard? I am using the blog date as the event date in an archiving project so the year is really important.
    www.dundeeandart.blogspot.com
    thanks in advance for your help

    ReplyDelete
    Replies
    1. Hi Karen,

      There are two types of date data for each post - dynamic and static. Static is when you pre-fix a date, regardless of the date the post is actually published. Whereas dynamic data uses the actual published date as its data. Now, here's the thing. The engineers at Blogger didn't think it was necessary to include the year part in Dynamic View template's date data. In other words, in Dynamic View template, dynamic date data for the year part is missing.

      If this is a non-dynamic template, we could have easily added one. But Dynamic View templates offer very few customization options, which means we only have static date date at our disposal. You might be wondering what it actually translates to --> we can add a year, but a fixed one. For example, '2012'.. All your posts will have '2012' even if the post was published in 2011, or 2013. This definitely defeats the purpose in my opinion. But this is all we could go for. Do you wanna go ahead with it?

      Delete
  20. Hi I followed your advice exactly and followed all the instructions closely, but the sidebar thumbnails still aren't all there, also some of the thumbnails have stills of videos rather than images, is there anyway I can change this? Please Help? Here is the link so you can have a better idea of my dilemma.

    http://memusingonmusic.blogspot.co.uk

    ReplyDelete
    Replies
    1. Hi Stefan,

      I think you've mistaken the tutorial in this page for another. The tweak above is meant to bring back the date-ribbon to your sidebar view (which is showing fine now in your blog btw). I did have a look at your issue, and the reason you're not seeing some thumbnails in your sidebar is because the picture that you've uploaded in your post is not hosted at Blogger/Picasa. The template can only fetch pictures from Blogger, Picasa Web Album and Youtube videos (some has reported success with Flickr although this remain unconfirmed).. Re-upload your pictures to Blogger using the image upload tool while composing your post, and your thumbnail shall appear fine. Here's a brief walkthrough on it:

      http://www.southernspeakers.net/2011/10/change-blogger-dynamic-views-thumbnail.html

      Cheers :)

      Delete
  21. how can i add this ribbon in description..here some example of my problems..

    http://i.imgur.com/vy1nX.png

    This is my blog http://droidscene.blogspot.com/ @ droidscene.net

    ReplyDelete
    Replies
    1. Hi there,

      Sorry for my late reply. Looks like you're using a third party template, and I'm not familiar with the structure of your template. It'd be best if you could contact the maker of your template.

      Cheers :)

      Delete
  22. I have not notice that the gadget dock disappears in the sidebar view Yoboy. Is there a way to get it to show? -Thanks, Bob

    ReplyDelete
    Replies
    1. Hi Bob,

      It seems to be showing fine in one your blogs:
      http://fonefotos.kansasbob.com/?view=sidebar

      Could you gimme the link of the blog where this is happening?

      Delete
    2. Thanks Yoboy! I mistakenly used http://fonefotos.kansasbob.com/view/sidebar

      Hope you had a great weekend!

      Delete
    3. Oh yes, the '/view/sidebar' URL addressing does seem to leave out the gadget dock.

      Cheers Bob! :)

      Delete
  23. Thanks Yoga !! This was the most useful trick for which I searched for months.
    Best regards
    Akash ("www.techtocore.vze.com")

    ReplyDelete
  24. Thanks Dude!! so happy to found this blog

    ReplyDelete
  25. Hi, Yoboy. The Blogger "Dynamic Views" template shows in the footer how long the post was published. Is there any way that the complete date appears instead? Thank you very much for the help you provide us with this blog.

    ReplyDelete
    Replies
    1. I find this annoying as well - but I still haven't found any workaround to show the actual date of post. But it does show the actual date for older posts.

      Delete
    2. Hello !
      First of all, the helping informations you provide are making my blogger life so much easier and happier. Thank you for being here.
      Second, I have a question, of course, which is related to the one above. I want to remove the entire line showing at the bottom of the post, the one with the date and the author. Is this possible ?
      Thank you !

      Delete
  26. There is no need anymore. I found the answer here:
    http://www.southernspeakers.net/2012/05/raname-recent-date-lebel-author-in.html?showComment=1338204167424#c8391575253747377266

    Thank you.

    ReplyDelete

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