Southern Listeners

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

Monday, September 3, 2012

Show Full Post Title in Blogger Flipcard Dynamic View

Before
After
I like Flipcard view - I really do.. Having most of my posts appearing in a single browser page (with the added bonus of having a thumbnail for each one of my posts) gives my readers a quick overview of my entire blog. However, when one hovers over my posts, I am not particularly excited with the fact that most of my post titles are cropped.. Instead of the full post title, I'm presented with the publish date info and the number of comments - two things that I could do without in my flipcards.. I'd trade these two trivial info for a full title any day - Actually I have done so, and that's what I'm gonna show you in this week's post!

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.
.overlay .title, .ss{
height: 110px !important;
max-height: 110px !important;
font-size: 14px;
}

105 comments:

  1. Hello Yoga sir please help me
    http://www.samjhanakophool.blogspot.com/2012/09/how-to-add-number-in-blogger.html
    I share some HTML code for Blogger but not showing HTML code just shown Word

    ReplyDelete
    Replies
    1. Hi Jiban,

      You need to encode your HTML before posting it in Blogger..
      1) Go to this site, and encode your HTML:
      http://www.dan.co.jp/cases/javascript/encode_entities.html
      2) Encoded HTML looks something like this --> </b:skin>
      3) Paste the encoded HTML in the 'HTML mode' of your post, not the 'Compose mode'.
      4) Preview before publishing..

      Good luck :)

      Delete
  2. Just wondering if there is a way to not have the first picture from each post appear as the image in the flipcard option

    ReplyDelete
  3. Hi Yoga I want to put the date ribbon on the Flipcard Theme similar to how Timeslide separate the post by days. Is it possible?

    ReplyDelete
    Replies
    1. Hi KP,

      I've given it a try, but it isn't possible to place the ribbons on the main flipcard page. I'm sorry I couldn't be much more of a help.

      Cheers :)

      Delete
  4. Hi Yoga, your site is awesome! How do I configure older and newer post like you've got here on classic dynamic views? All my posts display on one single page. I've tried to change it to 7 posts on one, but it doesn't seem to work making by blog look heavy and unfriendly. ps help

    ReplyDelete
    Replies
    1. Hi Nene Aloka,

      I'm not using a Dynamic View template. I'm using an older non-dynamic template called Minima. You can't specify the number of posts that should appear in your homepage with Dynamic templates.

      Delete
  5. Ok, thank you for replying. I've now changed it to side bar which is a better template.

    ReplyDelete
    Replies
    1. I sent you a couple of emails Yo. I was on your site for a couple of hours today, copied all the codes that I needed. I got stuck when my post background turned all transparent leaving the texts invisible. I figured a way round it through the codes, but I still don't like the look. I saw your follower's site you helped in creating a transparent post background with a small white background for texts? Please I need the code to modify mine like that. I want my background to be prominent. Thank you so much, I will check every 1 hr for your response. I hope I made sense. My blog is only a week old. take a look and give me tips on how to make it better. nenealoka.com

      Delete
  6. hi yoga,

    Have used a lot of ur tutorials..u r a savior! :)
    well i have a pretty large no of posts now and my default view(magazine) isn't good when searching for a post..so i was wondering if its possible that on clicking the search option(to enter the text) it opens the flipcard view and then the text can be entered?

    ReplyDelete
    Replies
    1. Hi Ashneet,

      It isn't possible. But I can think of a way to present your results in Flipcard view and keep your homepage as Magazine.. Basically, the idea is to set Flipcard view as your default view (Backup all your custom CSS, then go to Template Designer - Templates - choose Flipcard template), and redirect your homepage to Magazine view (Go to Dashboard - Settings - Search Preferences - Custom redirect - point http://www.icravefortech.com/ to http://www.icravefortech.com/view/magazine )..

      It does come with a price, as your homepage URL will be seen as http://www.icravefortech.com/view/magazine

      Delete
  7. Hello Sir, is there a way that i can use the flipcard AS A template and not just only a dynamic view?

    ReplyDelete
    Replies
    1. Hi BBL,

      The dynamic views are indeed template on their own. The flipcard view is a template as well.

      Delete
  8. This is not Working for me...
    Applying This Code made it Blank.
    i.e. We cannot see neither date nor Title of the Post...
    Pls Help...
    I added the Read More code in that CSS Settings..

    ReplyDelete
    Replies
    1. Hi Rahul,

      Let me have a look. What's your blog's address?

      Delete
  9. http://cheeseledger.blogspot.com/

    I have Classic as my default. If I use codes for the other templates, will they work whenever a visitor changes the view?

    I ask this because, I would like to make the windows of Flipcard larger if it's possible.

    Is it possible? to make the flipcards larger?

    And one more: Is it possible to align the post title to the right?

    ReplyDelete
    Replies
    1. Hi Leo,

      1) Yeap, when you insert a tweak for your non-default view, it will take effect when the non-default view is chosen.

      2) We can't make the flipcards any larger without affecting the positioning of your cards (which looks very bad, if you're wondering)

      3) Use the following code to align your post title to the right:

      .article-header h1.title{
      text-align: right !important;
      }

      Cheers :)

      Delete
  10. This comment has been removed by the author.

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Hi Ajit,

      Glad you got it figured, good job!

      Cheers :)

      Delete
  14. my blog (http://www.artistsparadigm.com/) feature architecture books, when thumbnails flips i want the title to have a star rating feature below it so readers can see ratings of the book while it flips thru browsing....is it possible?? please help...thanks you

    ReplyDelete
    Replies
    1. That could be a very cool feature. Unfortunately, we can't add anything dynamic to Dynamic View templates (ironic isn't it).

      Cheers :)

      Delete
  15. Hi all!
    I have a question. I have a static version of blogger with some links to dynamic views of my blog. I would like to create a link to a dynamic version with a view/flipcard version which would already show a sub-page with labels.

    I tried *.*/view/flipcard/label but it is not working ...

    ReplyDelete
    Replies
    1. Hi Monika,

      As ridiculous as this may sound, there really isn't a way to directly access the label view (or any other sub-view) in Flipcard template at the moment. Let's keep our fingers crossed and hope they'll make this available soon.

      Delete
  16. hi yoga
    this is my page propertyfeel100.blogspot.com
    i want my page become like this
    www.gubbi.ind.in
    can you give me a hand teach me step by step, im a newbie. hope to heard froem you as soon as possible. thanks

    ReplyDelete
  17. Doesn't seem to work for my blog: sventaylorpaintings.blogspot.co.uk

    Any ideas?

    ReplyDelete
    Replies
    1. Hi Sven,

      All your titles are showing in full. They seem to be working as expected. What am I missing?

      Delete
  18. I would Love to have flipcard but not sure how to set it up...I am not Google home yet so maybe this is why I can't do it?
    Thanks
    Www.parisbreakfast.blogspot.com

    ReplyDelete
  19. Replies
    1. Hi Paris,

      You can use any browser to change your template (Google Chrome is a browser btw).. Simply head to your Dashboard (www.blogger.com) - Template. Then scroll down a little, and you should see a list of templates, with their respective thumbnails. Choose the second Template from the first row. Once you've got it highlighted, just press the 'Apply to Blog' button. Here's a screenshot for you --> Screenshot

      Let me know how it goes :)

      Delete
  20. I'm looking for how to put images automatically post after post title, maybe you can help me? thanks

    ReplyDelete
  21. Hey, Yoga. Thank you for this amazing site!
    Do you have a little trick? In DV Flipcard, can we just see the thumbnail when we are rolling with the mouse? It switches to see the date and/or title. I hide these, but I want to not switch, too see only the thumbnail. Thanks! :)

    ReplyDelete
    Replies
    1. Hi Ted Reid,

      Nice idea. Here, this should do it:

      .items .item .card .back{
      display: none !important;
      }
      .item:hover .card{
      transform: none !important;
      }

      Cheers :)

      Delete
  22. Hi Yoga

    Wondering if you can help me. I would like to have the 'flipcard' view but only in one of my pages on the blog, not on the entire blog. Right now I have four pages, I want to add a fifth page and want that 5th one to be be displayed in Flipcard view. Is it possible.
    Many Thanks in advance for your help.

    Cheers

    www.raktalk.com

    ReplyDelete
    Replies
    1. Hi there,

      See if this is what you're looking for. Go to Dashboard - Pages - New Page - Web Address - Add the following URL:

      www.raktalk.com/view/flipcard

      That should display a fifth menu, linking to the flipcard view of your blog.

      Cheers :)

      Delete
  23. Hi,

    Thank you so much for the great blog. I really enjoy your tips and tutorials :)

    I've altered our site www.BeetlesInTheWild.com to use the FlipCard view, and even though our post count isn't very high yet, we can see the great potential it has for looking STUNNING!

    We wanted to ask whether you know of any way we can alter the label picker that is automatically added to the top of the site in FlipCard view. I'd like to use these labels to our advantage, and change them to "Beetle Colors", or "Beetle Situation" like the labels in our sidebar gadget. (We were thinking of using the label "Beetle Ferocity" but that was silly, as everyone knows all Beetles are 10/10 stars WILD)

    We can see the html code to change the Label Value, but this does not actually change the functionality of the label.

    Any help would be Beetely appreciated :)

    ReplyDelete
    Replies
    1. Hi Matthew,

      As much as I wish I could help you, the label page under Flipcard view is not as robust as it looks. There are several ongoing bugs in it: you won't see all your labels in that page, and if your post has more than one label, it will be categorised in only either one of them. As of now, there isn't a way to alter the way posts are being selected.

      I wish I could be more of a help. I'm sorry, Beetly.

      Delete
    2. Thanks for the reply.

      The bugs you mentioned are the exact reason I was hoping to get some sort of customization option.

      The default categories they use are pretty much useless in our situation.

      Thanks again anyway :)

      Delete
  24. Hey man! Thanks for those tuts, they're helping me a lot!
    About this one, though, I'd like to know if I can change the title color and the flipcard color.

    Thanks again

    ReplyDelete
    Replies
    1. Hey there,

      Are you referring to the title text on the flipcards itself or the ones that pop out when you click on a card?

      Delete
    2. The thumbnails, actually. Like, when You enter the blog, those posts miniatures that flip and show the title. When it flips, it's background color is gray. I've tried changind "background-color", but it gets a little messy...

      Delete
    3. Right.. Here, use this:

      .overlay .title, .ss{
      color: red !important;
      }
      .items .item .card .back{
      background: white !important;
      }

      Cheers..

      Delete
  25. Hey Yoga,

    I just have to say, your page is awesome. I vehemently hate Blogger sometimes, especially Dynamic views. But it makes my blog look so nice!

    Because of your page today, I have been able to make SUBSTANTIAL changes to my blog and I couldnt be happier. So thank you SO MUCH.

    Feel free to check out my blog and see how all your hard work and help paid off:

    http://www.raths-reviews.com

    Also, curious on your opinion...I have always used the Mosaic template for my blog (it looks pretty cool with movie posters) but recently switched to Flipcard after seeing your posts on how to correct the issues with them. Which do you think looks better?

    Thanks again man. You made my day today!

    -Jordan

    ReplyDelete
    Replies
    1. Hi Jordan,

      Your blog looks awesome the way you've customised it. As for Flipcard and Mosaic, well, it's tough. Mosaic has a faster load speed (very slightly), whereas Flipcard shows more posts on the same screen-space compared to Mosaic, which could have a positive effect on your traffic. Personally, I prefer Flipcard, mainly because I have a obsessive compulsive need to have things look neat and in the same size and order each time I see them :P (seriously though)

      And thanks for the many kind words. I feel guilty for not writing more to let you know how much I appreciate a comment like this. Thanks again Jordan :)

      Delete
  26. Yoga,

    I entered the CSS code but it did not change the appearance. Still showing the shortened titles. Any things I should also check?

    Doug

    ReplyDelete
  27. It's working now.

    I originally added the new CSS code at the bottom of the page (after the previous update.

    I then moved the new CSS code to the top of the page and it started working correctly. Strange.

    ReplyDelete
  28. Very informative. I have a query pls. I also chose dynamic view for my blog (prettygloss.blogspot.com). In this format on the home page my latest post & the post heading are always left aligned showing alot of white space below & on the right. These do not go further towards the right like the photo is completely & nicely aligned on the left.

    Any suggestions on that pls?


    Sarah
    Pretty Gloss ♥ beauty, makeup & a bit of life..
    bloglovin | twitter | pinterest

    ReplyDelete
    Replies
    1. Hi Sarah,

      We can utilize the space to right of the summary, but once expanded, there'll be more space below the summary. Add this to your CSS to see what I mean:

      #lead .has-thumbnail .story{
      width: 470px !important;
      }

      Since there is a limit on the number of characters the summary can fetch from your post, the only way I can think to utilize this space is by increasing the size of your summary font. Use this instead:

      #lead .has-thumbnail .story{
      width: 470px !important;
      font-size: 20px !important;
      }

      Cheers~!

      Delete
  29. Oh this looks lovely! Thanks!
    I'm also experimenting with different fonts to see which looks nicer & occupies more space. Noted down both.

    One more question pls. If you click on my post you'll see that the text is not as wide as the photos. Is there a way to decrease left & right margins? I like big photos & want the text to look balanced.

    Thanks again Yoga, as you can see Ive made great use of your site for my blog customization. :)

    Sarah

    ReplyDelete
    Replies
    1. Hi Sarah,

      It looks like your text width is about the same width as your photos:
      http://www.southernspeakers.net/2009/09/how-to-boot-from-usb-disk.html

      What am I missing?

      Delete
    2. True, but that is because I have reduced the photo size to the width of the text. If I make the photos a bit bigger, the text doesnt adjust with it hence an inch or more space on the right.

      Is it possible if I make the photos a bit bigger (wider)the text adjusts with it?

      Delete
    3. I'll give this a try, but I need to work on one of your posts that has an image with the width you're trying to set. Could you change the width of your image in one of your posts and get back to me with its link once you're done?

      Delete
    4. Sorry for the late reply!

      Here's the link to my new post (http://prettygloss.blogspot.com/2013/09/hello-autumn.html). The text should either be aligned to the photos or even more wide.

      Sarah

      Delete
    5. Hi Sarah,

      The text is not long enough for me to see the space you're referring to. Could you send me an annotated screenshot to speed things up?

      Delete
    6. How about my latest post? It has alot of text in the first paragraph.
      (www.prettygloss.blogspot.com)

      Delete
    7. Still the same - your text width is about as wide as your images:
      http://i.imgur.com/ztCOxh3.png

      Delete
  30. Hi Yoga,

    My flipcards aren't showing anything but a reverse view of the image when I roll over them. I added the code from this tutorial and it's still without text. I had previously added quite a few CSS code tweaks, from your site (thank you so much for this site!).

    My name above is linked to the page, but here it is as well: http://www.naturalkathlooks.blogspot.com

    Thank you for any help!
    Kath

    ReplyDelete
    Replies
    1. Hi Kath,

      Have you got this sorted. All your flipcards are showing your post titles just fine, except for your latest post, because it doesn't have a title set to it.

      Delete
    2. Thank you for checking. It's not showing for me (and I'm viewing it outside the Blogger editor), I'm using IE 10, I'm glad at least some people will be able to see them!

      Thank you!
      Kath

      Delete
    3. Hi Kath,

      Can you post a screenshot of what you're seeing?

      Delete
    4. This may seem like a dumb question, but how do I post a screenshot?

      Delete
    5. There are several ways - you could save your screenshot to your local machine, and upload the image to one of your posts (which you do not have to publish). You just need to get the image's direct link and paste it here in the comment section:

      http://www.southernspeakers.net/2011/09/obtaining-direct-links-from-blogger.html

      Delete
    6. I have the same problem, it happens only in IE, firefox and chrome are OK but IE just flip the image and do not show the post titles when hovering the mouse. This is a screenshot:
      http://4.bp.blogspot.com/-TJd5ADut0LU/Ur2-BjrcOGI/AAAAAAAAF-c/EBoACGUWB7o/s1600/Untitled.jpg
      You can see on the first thumb (top left) that the word update is flipped, that is because the images get flipped when you pass the mouse over them, instead of showing the post title. My blog is www.kpopcams.com. Thank you very much!!!

      Delete
    7. Actually, the template is designed to flip the background when hovered, so this is not entirely strange. But it should not show - the back card should have kicked in, and the title layer should have appeared on top of the flipped background. I realize this is happening on all flipcard blogs in IE. I will pass it to the team and see if they are aware of it. Do you have a question posted on this in Blogger Help Forum by any chance?

      Delete
    8. Thank you so much for your fast reply! I have not posted on blogger help forum but I will. Thanks!

      Delete
    9. Hmm... on the Blogger forum they told me that they see my blog OK using IE... So strange, maybe it depends on something else (some add on or something...)

      Delete
    10. Could you gimme the link to the discussion thread? I have already escalated this issue to the Blogger team btw. Haven't got any responds though.

      Delete
    11. Thank you so much for telling them! This is the link:
      https://productforums.google.com/forum/#!msg/blogger/K6ySmUdMcfs/MhUO1iTGQccJ

      Delete
    12. I have not heard back from the team regarding this.. Hmm..

      Delete
  31. Hi, Yoga! You seem to be the go-to guy for questions about Flipcard view. Some of my blog looks fine when you select from the thumbnails, but other entries are skewed to the left, and the image doesn't show. I can't see any differences, but there must be something that I've done to cause this.
    www.365creativedresses.blogspot.com
    For example, if you start with the oldest entry, the first four are OK. Then 5-9 are messed up, 10-11 are OK, and so on. Thanks for any help you can provide!

    ReplyDelete
    Replies
    1. Hi there,

      Sorry for the late reply. I just got the chance to look at your blog, and it doesn't look like your blog uses Flipcard anymore. Do you still need help with it?

      Delete
    2. In the top post "See All My Dresses" I link to a flipcard view. At that link, for random posts, is where I see the problem. for example Jan 27th displays correctly, yet Jan 26th does not. Perhaps the best solution is to remove the link to the flipcard view! If you don't see anything obvious, that is what I will do. Thanks!

      Delete
    3. Sorry for the late reply Jeannie,

      I can see the problem, but I can't quite figure what's causing it. Fortunately, I can think of a fix that'd work. Give it a try by adding the following to your 'Add CSS' box:

      .ribbon{
      width: auto !important;
      }
      .date.ribbon{
      width: 35px !important;
      }

      Cheers :)

      Delete
  32. Under Flipcard view some of my entries (http://www.365creativedresses.blogspot.com/view/flipcard)
    don't display correctly when you click through to them. For example, if you start at the newest, the first four are OK, but then the 5th to the 9th are messed up. Then the 10th and 11th are OK again. I certainly don't mind going through and correcting but I don't know what to fix! I checked all the obvious settings, and to the best of my knowledge, I created them all in exactly the same manner.
    Thanks so much!
    Jeannie

    ReplyDelete
  33. Hi again,

    I was wondering if it is possible to change the format of the date present in the flipcards (reverse side).

    I have almost everything in Portuguese in my blog but the date (for example "Nov 5th", I would like to write "5 nov" or "5 nov 2013", something like that)

    Is it possible?

    btw, I went now to check for other non-portuguese parts and so I came to ask if I can change it:

    1. In the bottom of an (open) post, I says "Publicado 4 days ago por nata" (half portuguese, half english). Can I change it?

    2. And also the "Add comments" are in english.

    Well I guess everything was supose to be in Portuguese, but there are some minor bug.

    Well it is not extremely important to change it, but I thought of asking anyway.

    Many thanks!

    my blog: http://memoriasdeumzepresente.blogspot.pt/

    P.S. Now I am thinking... problably you will see the stuff in english anyway... it depends on where you are from or the language your computer and software have by default, no? Well let me know if this is a stupid question...

    ReplyDelete
    Replies
    1. The 'Add Comments' is static (as in it stays 'Add Comments' forever), and thus we can change it to say something else. See this:
      http://www.southernspeakers.net/2012/05/change-add-comment-in-blogger-dynamic.html

      As for the date on the back of the flipcard, and last posted tag, there isn't much we can do about it, as it changes all the time. Changes that we can make to this is limited to static changes only. For example, if change for 5 Nov, all the months will be shown as Nov. And if we change for '4 days ago', even weeks and months will be shown as 'days'.

      I suggest you drop a word in the help forum, under Recommendation category. If no one replies to you, nudge me and I'll make sure someone from Google sees it.

      Delete
  34. Nice, I changed the "add commment". thanks!

    Now I was thinking, I can do like you say here, remove the date from the flipcard. The thing is, I would like that the number of comments do not desappear.

    Can you give the code for that, please? Full post title, NO date, and number of comments.

    Thanks again!

    ReplyDelete
    Replies
    1. Here you go, this should help:

      .overlay .title, .ss{
      height: 90px !important;
      max-height: 90px !important;
      font-size: 14px;
      }
      .flipcard .back .overlay .date.published{
      display: none !important;
      }
      .overlay .comments-count{
      margin-top: 0px !important;
      margin-bottom: 0px !important;
      }

      Cheers :)

      Delete
  35. Hi! Just changed my Blogger template to Flipcard and couldn't for the life of me figure out how to enable my entire title to show - all of them were getting cropped. Came across your suggestion - and it worked like magic! So THANKS a ton!

    ReplyDelete
    Replies
    1. Hello there.. Glad I could be of help :)

      Delete
  36. HI Yoga,

    Thank you very much for all you help.

    Salut

    ReplyDelete
  37. Hi Yoga,

    I was hoping to create a flashcard like setup using the flipcard/label display but I need the title of the post to appear when I hover over as opposed to the date (which I saw how to suppress that). Any way to do this? Thanks!

    ReplyDelete
    Replies
    1. Hi Pierre,

      The dynamic view templates aren't very customisable, and honestly I can't think of a way to do this.

      Delete
  38. Hi
    I want to show full image post on my homepage.
    http://www.LatestShortUrduPoetry.blogspot.com
    I want that Full image view should be on homepage, rather than click on that post title.

    ReplyDelete
    Replies
    1. Looks like you're using a third party template. It's probably pre-configured with auto-summary script. It'll be best if you could contact the maker of your template to work this out.

      Delete
  39. it is not working at time of applying the code to my template

    http://www.huntermessages.com

    ReplyDelete
  40. Hi!
    That doesn´t work for me!
    What should i do?

    ReplyDelete
    Replies
    1. Hi,

      Let's have a look at your blog shall we? What's your blog's URL?

      Delete
  41. Hi, Yoga

    It's very strange. I've applied your suggestion and the date has dissapeared (ok) but the title doesn't appear. what's the problem?

    My blog is: http://exkaliber.blogspot.com.es/view/flipcard

    Thank you.

    ReplyDelete
    Replies
    1. Hi Editor,

      The color of your text is white, and it appears invisible against a white background.

      .overlay .title{
      color: black !important;
      }

      Delete
    2. You're always right, Yoga.

      Thank you very much for the third time.

      Jose.

      Delete

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