Southern Listeners

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

Saturday, January 4, 2014

Show Description Text in Full in Blogger Dynamic View Templates

Before
After

Happy 2014 folks! Enough with New Year greetings, and back to this week's post. Blog Reader Jerry De Luca was wondering if there is a way to make the description text in Dynamic View blogs to show in full. Yes, it can be done, and here's how.

Step 1:

First, you need to increase the size of your header. If you have implemented my other tweak on applying a header image on your DV blog, you could skip this step. Otherwise, go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
#header .header-drawer.sticky, #header .header-drawer  {
top: 59px;
}
  
#header .header-bar{
height: 90px;
}
  
#header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
top: 90px;
}
  
#header-container {
height: 130px;
}
  
.viewitem-panel .viewitem-inner {
top: 25px;
padding-bottom: 45px !important;
height: auto !important;
}
  
#header-container #header.header .header-bar span.title{
height: 90px;
}

Step 2:

Now that you have enough space in your header to add a new line for your description, go ahead and add the following to your CSS. Again, go to Template Designer - Advanced - Add CSS - paste the following code towards the bottom of the box (as in the code in Step 1 should appear on top of this code) - Press enter after the last character of the last line } - Apply to Blog.
#header.header div.header-bar span.title h3{
display: block !important;
}

#header .header-bar .title{
padding-top: 14px;
line-height: 30px !important;
margin-right: 0px !important;
}

Extra:

If you've got a really long line, use the following to force your description into a new line
#header.header div.header-bar span.title h3{
white-space: normal !important;
}

41 comments:

  1. Yoga:
    Thanks for the help. I applied the code, the header was enlarged, but there is still a problem:
    http://pitbullmedia.blogspot.ca/
    As you can see, there was a slight increase in words, but the words still only stay on one line. They do not continue to the second line. Only half the words are showing.
    In the Settings Description I also pressed Enter to skip a line so as to go to a second line, but still did not work. There needs to be a way for the text to continue to a second line. Thanks!

    ReplyDelete
    Replies
    1. That is one long description Jerry. Anyways, increase the height of your description box using step 1, and use the following to force a new line:

      #header.header div.header-bar span.title h3{
      white-space: normal !important;
      }

      Delete
  2. Dear Yoga:
    Thank you for your nice post. It's really helpful.
    I have two questions. please help me if you know the answer.
    No. 1: I need to setup 3 big(370px X 280px) images in feature area instead of 4 images in magazine blogger dynamic view.
    No. 2: I need to setup my Homepage width 1150 in magazine blogger dynamic view.

    ReplyDelete
    Replies
    1. Hi there,

      1) I'm not sure if this can be done, but it could definitely break your template. DV templates are not made to be tweaked, actually.

      2) Not advisable, but check out this post, it might help:
      http://www.southernspeakers.net/2012/02/maximize-post-width-in-blogger-dynamic.html

      Delete
  3. Hey Yoga,

    Another quick question.. All of a sudden on all three of my dynamic view blogs, the header links aren't appearing (instead it just says classic, flipcard...and so on) and the gadget bar isn't showing most of the gadgets either..

    Any idea on how to fix this?

    here are the links:
    http://a-shared-thought.blogspot.ca/
    http://whimsicalserenade.blogspot.ca/
    http://story--time.blogspot.ca/

    ReplyDelete
    Replies
    1. Hi Wanderer,

      Is this still an issue? I can't quite replicate it. I see your links and gadgets loading just fine.

      Delete
    2. It seems to have fixed itself.. thank you anyhow :)

      Delete
    3. on
        http://story - time.blogspot.ca/
        I saw the background of the responses of a different color. How can I make it on my blog?
      thanks

      Delete
    4. Hi..

      See this: http://www.southernspeakers.net/2013/02/change-comment-text-color-and.html

      Delete
  4. can u help me please. i just opened a blog and i dont find the description slot anywhere in the create post section to describe about my post.

    ReplyDelete
    Replies
    1. The description in the tutorial above refers to blog's description. If you're referring to individual's search description, you need to get them enabled first, by going to Dashboard - Settings - Search Preferences - Edit next to Description - Enable search description - Yes - Save Changes.

      Delete
  5. Hi Yoga,

    Thank you for all the help.
    I already posted this but I'm not sure which post it was among all the DV posts so I would like to post again and ask the three questions.

    1. Is it possible to have social buttons on posts like we see on 16 quotes dot com on the home page of the blog in magazine DV.

    2. I went into the posts of irkitated dot com and in that dynamic view I saw that within the posts at the bottom there is a related articles list. How do I get one?

    3. The bottom adsense ad in every post. Can it be brought up before the comments to increase visibility?

    Thank you very much.
    Wolston.

    ReplyDelete
    Replies
    1. Hi Wolston,

      Here's my reply earlier:
      http://www.southernspeakers.net/2012/12/adding-pinterest-pin-it-button-to.html?showComment=1391637006884#c2210010977063805567

      Delete
  6. Thank you, Yoga!! Great help. It worked on mine!
    http://marianozlatkes.blogspot.com.ar/
    Any idea why some of the small preview pictures are not seen on dynamic view?

    ReplyDelete
    Replies
    1. Like the one in this page? --> http://marianozlatkes.blogspot.com.ar/2013/12/poema-en-i.html

      Doesn't look like it is uploaded to Blogger.

      Delete
  7. thanks for all your wonderful work!!
    can i ask you one more thing?
    can you provide a way to add relative posts widget and facebook (page) like box to dynamic views template?
    thank you very much!

    ReplyDelete
    Replies
    1. Unfortunately adding third party widgets just isn't possible.

      Delete
  8. Hello Yoga !

    I discovered your blog a couple of days ago and I want to tell you that you are doing a great job. I'm so grateful to you, since I've been learning a lot of things about Blogger's Dynamic View.

    I have a question (I can't find any answer to it in your archives) :

    Do you think I can remove the Dynamic View suggestions on the left of the header (where we can choose between Classic, Magazine, Flipcard, etc.) ?

    Thanks for everthing, and for answering :)

    ReplyDelete
    Replies
    1. Hi Zaw,

      Yeap it is possible. Check out the link below :)

      http://www.southernspeakers.net/2011/09/disable-certain-dynamic-views-in.html

      Delete
    2. Thank you man. Actually, I ended by finding it myself :D

      You're awesome ! Keep rockin' !

      Delete
  9. Hi Yoga first I want to say thanks to you for all important update which really help bloggers I am a blogger my blog is http://guruofmovie.blogspot.in/
    and I got so many update from your side and updated in my blog and got super response once again thanks to you dear and keep writing.

    ReplyDelete
  10. Hi Yo Boy!

    Your articles are really helpful, I got many codes of my interest through your blogs, comments and replies. I am thankful to you. I am looking for the one, googled so many times but dint get. I want header at my blog with search box, i don't want description to show. Now i am showing blog title and search bar, rt! my blog description is empty, i want to meta tag it but dont want to show in header bar. You got it na? I am okey with search description. I want to fill blog description with meta tagging but dont want to show in header bar, title and search box should be there.

    Please reply if it is possible i tried many treaks, but no happening.. please try for me

    jiteish@gmail.com

    ReplyDelete
    Replies
    1. Hi there,

      I guess it depends to the template you're using. If you're using Dynamic template, don't even think about it. Perhaps it can be done in a non-dynamic template, but it also depends to the kind of meta data you're having. Is it HTML based?

      Delete
  11. Hello! Tell me please, how do I remove balloon tips, and how to increase the speed of surfacing the message window?

    ReplyDelete
    Replies
    1. Hello Michael,

      I'm not quite certain what balloon tips you're referring to. Do you have a link I could look at?

      Delete
  12. http://www.beautiful-girls.biz/
    Popups on arrows. And how to increase the speed of surfacing the message window?

    ReplyDelete
    Replies
    1. Still not certain. Could you grab a screenshot for me?

      Delete
  13. really thankful for your help... it was really easy to understand and it works...!
    just wondering, is anyone face this problem, whenever i re-size the header, the menu bar will get like un-stabble, it will keep filckering when my mouse hit some point..

    ReplyDelete
    Replies
    1. Hello Helwa,

      In order to successfully change your header in DV templates, there are a total of 7 values that need to be changed accordingly. See it here:
      http://www.southernspeakers.net/2011/10/add-header-in-blogger-dynamic-view.html

      Delete
  14. Hello Yoga,
    Thank you for this great blog! I didn't see an answer for this anywhere, I apologize if I overlooked it. On my site, my "pages" have disappeared from the header. Any idea how to get them back?

    Also, is there anyway to remove the "recent, date, label, author" tabs?

    Thank you so much!

    ReplyDelete
  15. Ooops, forgot to add my site! www.thetinypaintingproject.com. Thanks!

    ReplyDelete
    Replies
    1. Hi Sharon,

      The following should remove the group bar.

      .flipcard #groups{
      display: none !important;
      }

      As for your pages bar, could you revisit your Layout page (Dashboard - Layout) and see if the Pages gadget is still there? It looks like the gadget might have been removed as it is no longer showing in your source.

      Delete
  16. Hey Yogaratnam, I hope you are doing good. I wanted to ask you if you could plz tell me how to add pages to my DV blog template and sub categorise them. I added pages but they just show one post per page n if i have to add more i have to add it as external links. I want to add categories to my pages like if a page is titled Fashion then i want to further add Shoes, Clothes, Accessories etc as sub categories. And have them open as separate pages like it happens on websites. Can it be done? :/

    ReplyDelete
    Replies
    1. Hi Tamkenat,

      You're referring to a drop-down menu. Unfortunately this is not possible in a Dynamic template.

      Delete
  17. Hi Yoga,
    Could you help me?
    I would like the description to be in the bottom of the header as it is, for me, too close to the title of the blog, is there any way?
    And too, I wrote it with "dot, go to the line" but it shows up in the same line.
    http://recette-machinette.blogspot.fr/

    I thank you again for all your help as without it I would not have gone ahead. (Does it sound English?)

    Cheers

    ReplyDelete
  18. Again,
    With your tuto here
    http://www.southernspeakers.net/2012/06/use-entire-header-as-home-button-in.html#more
    I think I can fix part of the description (as soon as I figure out how many px I will need) but I would like to know how to get "dot, go to the line".

    Thank you Yoga.

    ReplyDelete
    Replies
    1. Hello Machinette,

      Use only the first line for your description. It should look something like this: VK, conseillère Thermomix autorisée.

      For the second line, add the following to your CSS box :)

      #header.header div.header-bar span.title h3:after{
      display: block !important;
      content: "Vous vivez dans le Sud-Cevennes et vous aimeriez organiser une dégustation culinaire avec Thermomix, contactez-moi.";
      }

      Delete
  19. Thank you so much Yoga, you are fantastic.

    ReplyDelete
  20. Hi Yoga,

    Just wondering, my description fits fine on the space available, but it is too long for mobile browsers. Do you know how to break it in lines, accordingly to the space available?

    ReplyDelete
    Replies
    1. Hello Marcelo,

      I'm afraid there isn't any way to influence the mobile template using CSS - what you see if what you get. Turning off the mobile template is an option here.

      Delete

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