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

Spoken by at 8:39 PM
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;
}
Labels: ,

80 comments:

  1. kc bobJuly 23, 2012 at 2:36 AM

    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. YoboyJuly 23, 2012 at 5:23 AM

      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. kc bobJuly 23, 2012 at 5:34 AM

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

      Delete
    3. YoboyJuly 23, 2012 at 5:37 AM

      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. kc bobJuly 23, 2012 at 6:24 AM

      Thanks! Here is the link:

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

      Delete
    5. YoboyJuly 24, 2012 at 3:10 AM

      Hi Bob,

      Give this a try:



      Let me know how it goes :)

      Delete
    6. kc bobJuly 24, 2012 at 4:39 AM

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

      Delete
    7. YoboyJuly 24, 2012 at 9:00 PM

      Oopsie.. Here:

      http://www.southernspeakers.net/2012/02/maximize-post-width-in-blogger-dynamic.html

      Delete
  2. Vera 선용July 23, 2012 at 3:30 AM

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

    ReplyDelete
    Replies
    1. YoboyJuly 23, 2012 at 5:04 AM

      Hi Vera,

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

      Delete
  3. AnonymousJuly 23, 2012 at 4:44 AM

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

    ReplyDelete
    Replies
    1. YoboyJuly 23, 2012 at 4:54 AM

      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. DaveAugust 18, 2012 at 12:38 AM

      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. AnonymousJuly 23, 2013 at 7:27 PM

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

      Delete
    4. YoboyJuly 25, 2013 at 11:35 PM

      Don't mention it :)

      Delete
  4. AnonymousJuly 23, 2012 at 4:58 AM

    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. AnonymousJuly 23, 2012 at 5:00 AM

    sorry, i am using timeslide temp...

    ReplyDelete
    Replies
    1. YoboyJuly 23, 2012 at 5:51 AM

      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. Edoardo ValentiniJuly 23, 2012 at 11:12 PM

    thank you!! very much appreciated
    grazie!!
    ;-))

    ReplyDelete
  7. NickJuly 28, 2012 at 1:20 AM

    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. YoboyJuly 28, 2012 at 2:02 AM

      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. NickJuly 28, 2012 at 10:02 PM

      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. YoboyJuly 29, 2012 at 12:53 AM

      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. NickJuly 29, 2012 at 4:42 AM

      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. YoboyJuly 29, 2012 at 5:06 AM

      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. NickAugust 5, 2012 at 8:58 PM

      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. YoboyAugust 5, 2012 at 11:38 PM

      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. NickAugust 6, 2012 at 12:47 AM

      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. YoboyAugust 7, 2012 at 12:03 AM

      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. RichardJuly 28, 2012 at 8:29 AM

    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. YoboyJuly 28, 2012 at 7:20 PM

      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. RichardJuly 29, 2012 at 12:28 AM

      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
    3. YoboyJuly 30, 2012 at 9:14 PM

      Hi Richard,

      Published a post for you :)

      Here:
      Repositioning Gadget-dock from Right to Left in Blogger Dynamic Views

      Delete
  9. BadAim No.2July 29, 2012 at 8:41 PM

    Another awesome tip! Thx for that ;)

    ReplyDelete
  10. AnonymousAugust 1, 2012 at 10:36 AM

    Hi, in timeslide is possible?

    ReplyDelete
    Replies
    1. YoboyAugust 2, 2012 at 3:44 AM

      Hi El Extranjero,

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

      Your Blog

      Delete
    2. AnonymousAugust 2, 2012 at 5:25 AM

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

      Delete
    3. YoboyAugust 2, 2012 at 3:16 PM

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

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

      Cheers :)

      Delete
    4. DaveAugust 18, 2012 at 12:51 AM

      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. YoboyAugust 19, 2012 at 2:00 AM

      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. DaveAugust 20, 2012 at 2:35 PM

    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. YoboyAugust 20, 2012 at 2:39 PM

      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. DaveAugust 20, 2012 at 3:18 PM

    PERFECT! YOU ROCK!

    ReplyDelete
  13. UnknownSeptember 25, 2012 at 10:20 AM

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

    ReplyDelete
  14. UnknownSeptember 25, 2012 at 2:48 PM

    how would i put the date under the post title?

    ReplyDelete
  15. maxdworkSeptember 25, 2012 at 7:37 PM

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

    ReplyDelete
    Replies
    1. YoboySeptember 26, 2012 at 4:21 AM

      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
    2. maxdworkSeptember 26, 2012 at 4:39 AM

      Thank you! Thank you!-)

      Delete
    3. YoboySeptember 26, 2012 at 4:58 AM

      No biggie :)

      Delete
  16. AnonymousOctober 6, 2012 at 2:53 PM

    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. YoboyOctober 7, 2012 at 12:24 AM

      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. AnonymousOctober 7, 2012 at 3:58 PM

      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. YoboyOctober 7, 2012 at 6:27 PM

      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
  17. Keltie Leanne DesignsNovember 1, 2012 at 7:04 AM

    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. YoboyNovember 2, 2012 at 2:44 AM

      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
  18. Keltie Leanne DesignsNovember 2, 2012 at 9:49 AM

    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. YoboyNovember 3, 2012 at 12:51 AM

      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
  19. Keltie Leanne DesignsNovember 7, 2012 at 2:00 AM

    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
  20. Karen Eliot DundeeNovember 8, 2012 at 5:28 AM

    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. YoboyNovember 10, 2012 at 12:37 AM

      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
  21. UnknownNovember 11, 2012 at 3:12 AM

    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. YoboyNovember 12, 2012 at 3:05 AM

      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
  22. UnknownNovember 12, 2012 at 2:29 PM

    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. YoboyNovember 15, 2012 at 4:38 PM

      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
  23. kc bobFebruary 17, 2013 at 8:04 AM

    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. YoboyFebruary 17, 2013 at 3:41 PM

      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. kc bobFebruary 18, 2013 at 1:26 AM

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

      Hope you had a great weekend!

      Delete
    3. YoboyFebruary 18, 2013 at 1:58 PM

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

      Cheers Bob! :)

      Delete
  24. Akash RaviFebruary 18, 2013 at 6:35 PM

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

    ReplyDelete
  25. UnknownAugust 27, 2014 at 5:33 PM

    Thanks Dude!! so happy to found this blog

    ReplyDelete
  26. AnonymousJanuary 12, 2015 at 1:04 AM

    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. YoboyJanuary 15, 2015 at 3:31 AM

      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. AnonymousJune 8, 2015 at 9:20 PM

      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
  27. AnonymousJune 9, 2015 at 4:25 AM

    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.

Subscribe to: Post Comments (Atom)