 |
| 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;
}
Hello Yoga sir please help me
ReplyDeletehttp://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
Hi Jiban,
DeleteYou 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 :)
Thank you Yoga , u r superb
DeleteNo biggie Jiban :)
DeleteHave either of you figured out how to fix the recent change by Google to take the FLIP out of "FlipCards"?
DeleteAlso, to get rid of the ghastly date they decided to add to the bottom when they removed the meaningful name of the page?
As a UI expert, it can be said with confidence, Google seems to be deliberately making the interface worse as they did with Youtube.
Just wondering if there is a way to not have the first picture from each post appear as the image in the flipcard option
ReplyDeleteYeap there is. Refer to the following tutorial:
Deletehttp://www.southernspeakers.net/2011/10/change-blogger-dynamic-views-thumbnail.html
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?
ReplyDeleteHi KP,
DeleteI'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 :)
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
ReplyDeleteHi Nene Aloka,
DeleteI'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.
Ok, thank you for replying. I've now changed it to side bar which is a better template.
ReplyDeleteI 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
DeleteReplied here
DeleteCheers..
hi yoga,
ReplyDeleteHave 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?
Hi Ashneet,
DeleteIt 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
Thanx a lot yoga! :D
DeleteDon't mention it Ashneet :)
DeleteHello Sir, is there a way that i can use the flipcard AS A template and not just only a dynamic view?
ReplyDeleteHi BBL,
DeleteThe dynamic views are indeed template on their own. The flipcard view is a template as well.
This is not Working for me...
ReplyDeleteApplying 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..
Hi Rahul,
DeleteLet me have a look. What's your blog's address?
http://cheeseledger.blogspot.com/
ReplyDeleteI 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?
Hi Leo,
Delete1) 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 :)
This comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteHi Ajit,
DeleteGlad you got it figured, good job!
Cheers :)
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
ReplyDeleteThat could be a very cool feature. Unfortunately, we can't add anything dynamic to Dynamic View templates (ironic isn't it).
DeleteCheers :)
Hi all!
ReplyDeleteI 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 ...
Hi Monika,
DeleteAs 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.
hi yoga
ReplyDeletethis 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
Hi Ivan,
DeletePlease check your email :)
Doesn't seem to work for my blog: sventaylorpaintings.blogspot.co.uk
ReplyDeleteAny ideas?
Hi Sven,
DeleteAll your titles are showing in full. They seem to be working as expected. What am I missing?
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?
ReplyDeleteThanks
Www.parisbreakfast.blogspot.com
I meant Google Ghrome of course
ReplyDeleteHi Paris,
DeleteYou 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 :)
I'm looking for how to put images automatically post after post title, maybe you can help me? thanks
ReplyDeleteI've replied you here.
DeleteHey, Yoga. Thank you for this amazing site!
ReplyDeleteDo 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! :)
Hi Ted Reid,
DeleteNice idea. Here, this should do it:
.items .item .card .back{
display: none !important;
}
.item:hover .card{
transform: none !important;
}
Cheers :)
Hi Yoga
ReplyDeleteWondering 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
Hi there,
DeleteSee 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 :)
Hi,
ReplyDeleteThank 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 :)
Hi Matthew,
DeleteAs 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.
Thanks for the reply.
DeleteThe 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 :)
Hey man! Thanks for those tuts, they're helping me a lot!
ReplyDeleteAbout this one, though, I'd like to know if I can change the title color and the flipcard color.
Thanks again
Hey there,
DeleteAre you referring to the title text on the flipcards itself or the ones that pop out when you click on a card?
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...
DeleteRight.. Here, use this:
Delete.overlay .title, .ss{
color: red !important;
}
.items .item .card .back{
background: white !important;
}
Cheers..
Hey Yoga,
ReplyDeleteI 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
Hi Jordan,
DeleteYour 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 :)
Yoga,
ReplyDeleteI entered the CSS code but it did not change the appearance. Still showing the shortened titles. Any things I should also check?
Doug
It's working now.
ReplyDeleteI 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.
Glad you got it sorted! :)
DeleteVery 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.
ReplyDeleteAny suggestions on that pls?
Sarah
Pretty Gloss ♥ beauty, makeup & a bit of life..
bloglovin | twitter | pinterest
Hi Sarah,
DeleteWe 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~!
Oh this looks lovely! Thanks!
ReplyDeleteI'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
Hi Sarah,
DeleteIt 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?
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.
DeleteIs it possible if I make the photos a bit bigger (wider)the text adjusts with it?
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?
DeleteSorry for the late reply!
DeleteHere'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
Hi Sarah,
DeleteThe 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?
How about my latest post? It has alot of text in the first paragraph.
Delete(www.prettygloss.blogspot.com)
Still the same - your text width is about as wide as your images:
Deletehttp://i.imgur.com/ztCOxh3.png
Hi Yoga,
ReplyDeleteMy 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
Hi Kath,
DeleteHave 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.
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!
DeleteThank you!
Kath
Hi Kath,
DeleteCan you post a screenshot of what you're seeing?
This may seem like a dumb question, but how do I post a screenshot?
DeleteThere 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:
Deletehttp://www.southernspeakers.net/2011/09/obtaining-direct-links-from-blogger.html
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:
Deletehttp://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!!!
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?
DeleteThank you so much for your fast reply! I have not posted on blogger help forum but I will. Thanks!
DeleteHmm... 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...)
DeleteCould 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.
DeleteThank you so much for telling them! This is the link:
Deletehttps://productforums.google.com/forum/#!msg/blogger/K6ySmUdMcfs/MhUO1iTGQccJ
I have not heard back from the team regarding this.. Hmm..
DeleteHi, 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.
ReplyDeletewww.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!
Hi there,
DeleteSorry 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?
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!
DeleteSorry for the late reply Jeannie,
DeleteI 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 :)
Under Flipcard view some of my entries (http://www.365creativedresses.blogspot.com/view/flipcard)
ReplyDeletedon'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
Hi again,
ReplyDeleteI 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...
The 'Add Comments' is static (as in it stays 'Add Comments' forever), and thus we can change it to say something else. See this:
Deletehttp://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.
Nice, I changed the "add commment". thanks!
ReplyDeleteNow 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!
Here you go, this should help:
Delete.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 :)
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!
ReplyDeleteHello there.. Glad I could be of help :)
DeleteHI Yoga,
ReplyDeleteThank you very much for all you help.
Salut
Hi Yoga,
ReplyDeleteI 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!
Hi Pierre,
DeleteThe dynamic view templates aren't very customisable, and honestly I can't think of a way to do this.
Hi
ReplyDeleteI 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.
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.
Deleteit is not working at time of applying the code to my template
ReplyDeletehttp://www.huntermessages.com
You're not using a dynamic template.
DeleteHi!
ReplyDeleteThat doesn´t work for me!
What should i do?
Hi,
DeleteLet's have a look at your blog shall we? What's your blog's URL?
Hi, Yoga
ReplyDeleteIt'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.
Hi Editor,
DeleteThe color of your text is white, and it appears invisible against a white background.
.overlay .title{
color: black !important;
}
You're always right, Yoga.
DeleteThank you very much for the third time.
Jose.