With the exception of Classic Dynamic View, all other Dynamic Views tend to fetch the first Blogger uploaded image from your post and use this image as a thumbnail for that post. You can't readily choose which image you want to use as the thumbnail. Of course, if you have no problem with the first image being the thumbnail for your post, you wouldn't be here. In this tutorial, I'll show you how you can choose a thumbnail picture for each one of your posts in Blogger's Dynamic View. This is a reply to blog reader MarcusRimondini.
Step 1:
Create a new post, and upload the image that you want to use as the thumbnail. Few rules:
Click on Edit HTML (as opposed to 'Compose' mode) when you've inserted the image to your editor.
This is what you'll be seeing:
Create a new post, and upload the image that you want to use as the thumbnail. Few rules:
- Don't upload any other image - we can do that later.
- Don't start composing your post yet.
- Don't type anything.
- Just upload the image that you want to use as your thumbnail.
Click on Edit HTML (as opposed to 'Compose' mode) when you've inserted the image to your editor.
This is what you'll be seeing:
Step 2:
Delete any line break at the top of your HTML. Your HTML needs to be touching the editor's ceiling. There shouldn't be any line breaks above it. The pictures below show how it should and shouldn't be.
Delete any line break at the top of your HTML. Your HTML needs to be touching the editor's ceiling. There shouldn't be any line breaks above it. The pictures below show how it should and shouldn't be.
Step 3:
Delete the following line from your HTML - the very top line:
Delete the following line from your HTML - the very top line:
<div class="separator" style="clear: both; text-align: center;">
Step 4:
Paste this line in place of the deleted line in Step 3:
Paste this line in place of the deleted line in Step 3:
<div class="separator" style="display: none; clear: both; text-align: center;">
Step 5:
That's it. You've chosen a thumbnail picture for your post. If you've done the steps right, when you switch over to 'Compose' mode, you won't be seeing your thumbnail picture anymore. Yes, I said that right - you won't be seeing it. Nevertheless it is there. You can start composing your posts, and bring the other pictures in.
Since the thumbnail picture is no longer there, you need to bring the picture again if you want it to appear in your post. The picture that you've uploaded above is for your thumbnail. If you want the same picture to appear in your post, you need to re-insert/re-upload the picture to your post, like you normally would.
That's it. You've chosen a thumbnail picture for your post. If you've done the steps right, when you switch over to 'Compose' mode, you won't be seeing your thumbnail picture anymore. Yes, I said that right - you won't be seeing it. Nevertheless it is there. You can start composing your posts, and bring the other pictures in.
Since the thumbnail picture is no longer there, you need to bring the picture again if you want it to appear in your post. The picture that you've uploaded above is for your thumbnail. If you want the same picture to appear in your post, you need to re-insert/re-upload the picture to your post, like you normally would.
Enjoy folks. And welcome to Southern Speakers v3.0!
In the model live demo here:
ReplyDeletehttp://yoboy-dynamicview.blogspot.com/
I noticed you removed author from the submenu! What code should I put in the css box?
I also would like "Labels" to appear first- so it is the landing page.
Thanks so much!
@Jon: I left a reply to your previous comment, here:
ReplyDeleteDisable Certain Dynamic Views in Blogger
very nice infor you gave mate it really helpfull for my mosaic one Visit IPL History
ReplyDelete@nin: Glad you like the tweak :) Cheers.
ReplyDeletethanks ! I've searching for this tutorial for a long time ~ :-)
ReplyDelete@josie: Glad you've finally found it :)
ReplyDeleteCheers.
hi yoboy,
ReplyDeletethank you for helping the dynamic views users to do tweaks. ive added header to include picture like one of your tutorial.
how can i make the header not to stick while im scrolling up and down?
really need your pro help.
thanks in advance!
@boboq88:
ReplyDeleteTook me almost 3 hours. Here you go. Add this to your CSS:
#header .header-bar, #header .header-drawer.sticky, #header .header-drawer{
top: 0px !important;
margin-top: 0px !important;
position: relative !important;
}
body.sidebar #main.hfeed #sidebar{
position: absolute !important;
}
body.sidebar #main.hfeed #sidebar .item{
background: #EEEEEE;
}
Cheers.
hi great tutorial. does this one work for Magazine view??? or only Mosaic view??? thanks
ReplyDelete@Anon: Works for all of them. Pretty ain't it?
ReplyDeleteHi,
ReplyDeleteI have Magazine view and it doesn´t work for me :(.
@pebbleinthesky: I've just tried this again, and it works fine in Magazine view, as well as other views. Check for yourself:
ReplyDeleteMain Page - thumbnail shows
Post page - thumbnail disappears
Genius!!!!!! Thank you!!!!!!!
ReplyDeleteYou're most welcome. And thanks for the feedback :)
DeleteAwesome tutorial !! But is there anyway faster :(
ReplyDeleteJust imagine you keep replacing that line in every single post, surely you no longer want to tell your stories...
I bet there are many thumbnail gallery generating websites out there. But I'm not sure if they'd look in your blog. Give it a whirl :)
DeleteThanks for the help!
ReplyDeleteHi, firstly, this site has been the best resource ever. You guys are fantastic.
ReplyDeleteI was wondering how I can get rid of the grey border around the thumbnails?
Hi TSC,
DeleteGo to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
.card{
border: 0px !important;
}
Cheers..
Legendary. Thanks so much!
DeleteMost welcome :)
DeleteI added this to a post I had already composed. It you put the picture right at the top of the post and make sure all the html is right at the top, it works just as well. It doesn't matter if you have started composing or not.
ReplyDeleteI actually found that when I started composing after doing this, that it didn't work so I analysed the html, and it turns out that sometimes the text gets added to the html above the thumnail picture, while it needs to go below.
The purpose I had instructed that is because, some people will have trouble dealing with HTML, if the composing comes first. You're obviously a tech-savvy, you wouldnt have any problem with that :)
DeleteI don't know why, but when I started composing, the text instantly went ABOVE the HTML... might be a little hit and miss with the editor. Dunno what I did there >.> Might be the issue pebbles had further up.
ReplyDeleteI think the blogger post editor is just a little effed up
thanks for these great resources yoboy
ReplyDeleteit really helped me a lot to customize my blog atleast a bit
i got one question tho
is there a way to make these flipcards a bit transparent and only show it full color when somebody hovers over it ?
the reason i ask this is becouse once there is alot of posts the background is not visible anymore
i would love to have it transparent so its a mix from background and the actually flipcard thumbnail
and once somebody hovers over it the thumbnail is going to be as usual and the background not visible ... i hope you know what i mean, english is not my first language.
To an extent, it is possible if you're using a CSS3-capable browser. However, note that when it is transparent, and you hover over it, even though the image will start to become progressively visible, only the back of the flipcard will be shown (which is a solid color). See this for yourself.
DeleteGo to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
.card{
opacity: 0.3 !important;
}
.card:hover{
opacity: 1.0 !important;
}
Cheers.
thanks alot for the quick response
Deletethis code works great but i forgot about the solid color
so its not looking the way i had in mind but i am going to use this for now.
wish we could have the pictures there with darkened space on the title to make text easily visible on pics
hopefully blogger will allow this sometime
considering i cant change the color in the template designer at all, tried everything but it just stays grey
nonetheless thanks alot yoboy,
your site is a great help.
Pardon me for not thinking of this earlier. I've had my coffee now. Try this. You'll like this one better:
Delete.card .back{
background: transparent !important;
}
.card{
opacity: 0.3 !important;
}
.card:hover{
opacity: 1.0 !important;
}
Cheers.
wow, thanks yoboy
Deleteexactly what i had in mind
code works like charm
thanks for your time
is there also a way to limit the flipcards in a row ?
like lets say i dont want them to cover up the whole page from left to right and only have them occupy the left side
I'd assume there is, but having seen the structure of Flipcard, I'd seriously recommend you not to do so. That is because the Flipcard template is Dynamic. In other words, your template will look different on different monitor size. You might be seeing 8 flipcards in your system, but in another system, there might be just 2 or 3. Also, if you size-down your browser, you can see this effect for yourself. Forcing the template to go static will give rise to various bugs.
Deleteyea i noticed the flipcards re-arrange themselfs depending on window size
Deletegonna leave it the way it is now
the flipcards looks awsome now with your code
is there a code to make the white text have a shadow or boarder when hovering over them ?
depending on pictures, sometimes the text is hardly visible.
How about a combination of border+background instead?
Delete.flipcard .title{
color: black;
background: white !important;
border: 1px solid black;
}
.flipcard .date.published{
color: grey;
background: white !important;
border: 1px solid grey;
}
Cheers.
looks preety good is there a way to make the background color fill out the flipcard from left to right have it black but with opacity so the pics shines trough a bit and make the text white ...
Deleteif youre not sure what i mean
i had something similar in mind wich happens on "mosaic" when you hover over a thumbnail
there is this background popping out with a bit of pacity and make the title easily readable.
by now i know how to change the colors etc
im just not sure how to make it opacity and fill out the card left to right
update
Deletedidnt notice it before but
your previous code with the border+background
got rid of my header logo (used your code from this site for that aswell)
thats a bugger, hopefully we can fix that.
update:
Deletei fixed the dissappearing header myself
just had to write ".card" instead of ".flipcard"
now i just need to have the background "shadow" with opacity and then im done.
update:
Deletei fixed everything myself now
tried to use the opacity command but it made the title fade away too
so instead i made a alpha transparent png picture and replaced it with the background "color"
now it looks more like i wanted it to be
http://petercsonka.blogspot.com
it would be nice to have the transparent png fill out the edges too couse right now it seems like a fixed place behind the title
but now i am probably asking too much hehehe
thanks for all your help yoboy
thie site is a great resource and you helped me out alot
You did everything by yourself you almost left nothing else for me to do. Here:
Delete.flipcard .date.published, .overlay .title{
max-width: 100% !important;
width: 100% !important;
margin-left: 0px !important;
margin-right: 0px !important;
}
Cheers.
awsome
Deletethat did the trick
thank you so much yoboy
gonna recommend this site to anybody that need help with their dynamic views
Happy blogging :)
Deletehow do i change the color of these titles:
ReplyDeletehttp://i43.tinypic.com/15rnwq1.jpg
Hi Anon,
DeleteAdd this to your CSS:
.group-label span{
color: white !important;
}
I used your code to change thumbnail images last week, and it worked perfectly. Today, I checked out the website and all of the thumbnails are off center and too large. In the mobile version, the thumbnails are still fine.
ReplyDeleteHere is the site the problem is happening on - thekarmatrail.com
Any idea what is causing this issue? Fixes? Please help! Thank you!
Looks like Blogger updated their script to show just the top-right zoomed version of each thumbnail. I'm afraid the only way to fix this is to get rid of the excess border from all your thumbnails so that the script will capture the entire text. You need to do this on the actual image itself, and reupload the images..
DeleteAwesum!!! it works perfect thankyou!! I'm bookmarking this page for reference :)
ReplyDeleteYou're most welcome :)
DeleteUHHHHHHMAZING. amazing. Thank you.
ReplyDeleteNo prob dareyouto :)
DeleteHi again,
ReplyDeleteCan I increase the default size of the thumbnails (Flicard view) without stretching them and make the picture "ugly" as I've tried the following:
.card{
width: 500px !important;
height: 500px !important;
}
Thank you
Hi mereverzi,
DeleteI've attempted this before.. It is not possible without stretching the pictures.. Sorry..
Yoga, you just rock! I recently started a blog and dont know what I would've done without your extremely helpful posts! Keep rocking! :)
ReplyDeleteThat's great Cynthya! Let me know if you need my help on something :)
DeleteCheers~
It's not workign for me, I think it's because im using a url to upload my picture maybe
ReplyDeleteDynamic View doesnt have the ability to fetch thumbnail pictures from other image hosting services.. You need to use Blogger/Picasa for your thumbnails to be seen.
DeleteIs there any way to make it so no thumbnail displays at all, even if you have an image uploaded to the post? I don't want *all* posts to display no thumbnail though, just some of them...
ReplyDeleteHi Adam,
DeleteBlogger automatically fetches images to be used as thumbnails IF the images are uploaded via Blogger. If you don't want any thumbnail in a post, you need to upload your images to a third party hosting site, like Imageshack or Photobucket.
Troublesome, I know..
Nah, it's fine. Thanks for the tip.
DeleteYou could resize the first image width and height to 1px, so that the thumbnail wont be visible at all
Deletethis was awesome - thanks!
ReplyDeleteHi Blaire,
DeleteYou're most welcome :)
seriously, this is so simple yet brilliant little trick! Thanks a lot!
ReplyDeleteThanks allsy :)
DeleteHi Yoga,
ReplyDeleteNo idea why, but it doesn't work for me. Whenever I switch back to compose, the image is still visible...It's been driving me crazy !
Any tip ?
Thank you !!!
Hi afeg33,
DeleteSorry for the late reply. Can I have a look at one of your published posts in which the image is still showing in your post?
Cheers :)
Hi,
Deletethanks for your reply. My blog : http://afeg33.blogspot.fr/
and for instance, one of the published posts where I wish to differentiate the thumbnail image and the image in the post : http://afeg33.blogspot.fr/2012/11/est-6.html
Hi there,
DeleteThis is what I see in the source of your post (you'd see this when you edit your post - switch to HTML view):
http://pastebin.com/NLCAztqZ
It doesn't seem like Steps 3 and 4 have been performed well. Upon successful completion, you should see a div tag at the beginning of your line, with the css attribute 'display:none' in it (as shown in Step 4). This is no where to be found in your post. This is how your source code should look like (feel free to replace your post's current HTML with this one to see it in action):
http://pastebin.com/QaDMBBwa
Cheers :)
Hi! i folloewd a lot of your tips, and i have to say: great work!!!
ReplyDeletebut now i have to ask you another little trick: how can i enlarge the tumbnail size to make them larger?(i'm using flipcard view)
Thank you a lot for sharing your knowledge and skills! :D
Hi Bea P,
DeleteAs much as I want to say there is a way forward, there really isn't one - not without breaking your template anyway. You'd have your flipcards overlapping on top of each other. Tried it before and it's fugly as hell..
Hi Yoga,
ReplyDeleteIs there a way to force flipcard not to show any thumbnail? (just as if no picture appears in the post.) This, however, should not affect Snapshot.
By the way, I go over your blog almost post by post and I must admit that if is like a treasure to me. Thank you so much for the effort you put in!
Ofer.
Hi Ofer,
DeleteThanks :) As for the thumbnail, I'm afraid there isn't a way to distinguish the way flipcard and snapshow fetch the thumbnail - thus there's no way we can selectively prevent one of these templates from fetching the image links from your posts..
Thanks Yoga.
ReplyDeleteDo you think this option will be given in the future? Perhaps you can think of someone inside google to whom I can write and ask him to provide such option? Here is my email in case the information is privet: megged@gmail.com
(This is important to me because my blog contains articles, and the title is much more important than a fetched picture or graph).
Thanks again,
Ofer.
Hi Ofer,
DeletePretty sure there isn't a plan to distinguish the templates as of now. In fact, there isn't much being done for Dynamic View templates. Maybe we'll see few more compatible gadgets, and that's about it. That said, here's the official place where your feedback and suggestions should go to:
http://productforums.google.com/forum/#!categories/blogger/feature-suggestions--feedback
Hope you find watchu looking for. Cheers :)
Lots of thanks!
ReplyDeleteDon't mention it :)
DeleteHi. How do I change the default size of the thumbnails?
ReplyDeleteBlogger sizes each image to /s72-c/. This is from the displayed html from data:post.thumbnailUrl.
I'm trying to use innerHTML script to change it, but it doesn't work.
Then I thought there should be a data label of some kind that lets you pull the first image from any blogger post because that's what data:post.thumbnailUrl does. If I could figure that out, then I could try to append ?imgmax=100 to the end of the image src url to change its size.
Can you help me figure this one out?
Hi there,
DeleteI'm afraid I'm not familiar with the 'data:post.thumbnailUrl' data tag. Have you tried shooting your question at the Blogger Help Forum?
Hi Yoga, great postings! I added a lot of CSS code for the first time to my blogs thanks to your postings! I'm going to keep looking around for more ideas on this site too ;)
ReplyDeleteThe reason I found this site was because I was scouring Google to find out how and why videos sometimes create thumbnail images in the dynamic sidebar view and sometimes they don't! This particular posting worked great for images. What about for videos?
Thanks!
-Dave
daves80s.blogspot.com
Hi Dave.. Thanks! As for video thumbnails, it depends on where the video is hosted. The last time I checked, only youtube videos were able to generate thumbnails. You can still add thumbnails to your videos that are hosted at other sites, by following the steps in the walkthrough above. Just take a frame out of your video (screenshot or something) and use it as your post's thumbnail.
DeleteCheers :)
Thanks for the info Yoga. It's strange that sometimes a Youtube video will automatically create a thumbnail and sometimes it won't. I wish there was someway to fix this as adding photos to each posting is a lot of extra work that seems redundant!
DeleteThis is the second time I had a trouble with customizing my blog and happened to find your blog post with the exact answer I was looking for!
ReplyDeleteYOU ARE THE BEST! Thank you.
Hi Yoga, another problem came up...
ReplyDeleteI thought everything worked fine after trying your method but when opening my blog on Google Reader, I can still see the thumbnails. (They are usually invisible though. Just not on Google Reader so far) Is there anything I can do to fix this?
Thank you.
Hi Sami,
DeleteGoogle Reader is a separate Google product (from Blogger), and it uses a different algorithm to fetch thumbnails. I'm afraid I'm not familiar with Google Reader's fetching mechanism. You might wanna try shooting this here, at Google Reader's Help Forum --> http://productforums.google.com/forum/#!forum/reader
Thank you, Yoga. I'll try that.
DeleteHope you find what you're looking for :)
DeleteHello guys. Could you help me please for thumbnails.
ReplyDeleteI use a theme which is metro btk version 2 And i always used flickr to upload my blogger post photos into it. unfortunately that theme's homepage image thumbnail section no display my flickr post images as preview images.
What should i do to show photos with same theme's style? Adding or changing html?
Thanks
Hi there,
DeleteIf your template isn't automatically fetching thumbnails from your post's image source, then enabling it will not be as easy as adding or changing an HTML. In any case, I would suggest you to contact the maker of your template, as that person is the only one that can help you to get things fixed.
Cheers..
I've tired to contact them but couldnt get any reply so i thought that you might help me anyway even giving quick reply is enough for me.
Deletethanks yoga.
Nice tutorial, thanks!
ReplyDeleteNo biggie :)
DeleteHi Yoga,
ReplyDeletethis was very useful as always, :)
is there any way to link the thumbnails to external website,
i mean when you click the thumbnail it open external link instead of opening the post page?
Thank you in advance
Hi Nagi,
DeleteIt isn't possible at the moment. But do let your voice to be heard. Google might incorporate this feature in future updates.
Cheers :)
Is it possible to not have a thumbnail image generated by YouTube videos? That is, if I have a YouTube video in my post, is there anyway I can prevent Blogger from automatically generating a thumbnail tile image from it?
ReplyDeleteTechnically nope. But using the method in the tutorial above, you can overwrite the thumbnail that youtube would produce, with a thumbnail of your choice. You could prepare a blank white image for this purpose.
DeleteCheers :)
Omg finally!!! Thank you!!! Why doesn't anyone else care to pic their thumbnails? I don't understand why this was so hard to find spelled out!?!?
ReplyDeletePs why does the image have to come from an upload? Most of my post images are linked thru a photo storage account so this really a pain in the patootie!
That is the way of Google. When you upload an image, it goes to your Picasa Web Album, which is owned by Google. They want to encourage you to use this image hosting service, instead of other services out there. Well, it's just my theory anyways :P
DeleteDo you find that there's a delay with the thumbnails appearing for videos (hosted by youtube)? I just converted my site to dynamic, and there are no video thumbnails showing up for my new entries with videos (which i posted after switching to Dynamic View).
ReplyDeletehttp://mzvalentina.blogspot.com/
i'm bummed now, since the dynamic layout looks awesome...
but without the thumbnails, not so much :( pls help, Yoga!
Hi Valentina,
DeleteI've just tried publishing a test post in one of my test blogs, and the thumbnail appeared fine (with usual loading speed).
And it seems like all your posts have picture thumbnails, so I couldn't really inspect why your youtube thumbnail isnt appearing. Could you point me to one of your posts where there isn't any picture thumbnail and the video thumbnail isn't loading?
Hi Yoga, question for you that I didn't see presented above in other comments.
ReplyDeleteI just swapped to a dynamic template and have my images hosted through Flickr. The majority of the flipcards show images, others do not. And I cannot figure out why they don't (granted there are a couple of posts with no images, so of course there wouldn't be). On the ones that do have images I have noticed that my text is against the header of the HTML window. I have attempted altering my posts that do not have an image in the flipcard to be similar without seeing any changes. Any thoughts?
Here is my blog - http://nebuladesigns.blogspot.com/
Hi Celestial,
DeleteDV templates were never meant to fetch post thumbnails from Flickr - so it isn't entirely surprising that things are shaky at the moment.
That said, try using 1024x683px images throughout your blog. It appears images with this resolution have no problem being fetched by your template.
And I'm can't quite picture your text-against-windows-header problem. Could you send me a screenshot of what you're seeing?
Cheers!
Hi I have blog on blogger and use flickr for my pictures. I noticed that on other blogs in their my blogs list there is no picture for my blog just some text and blogger sign. How to change this?
ReplyDeleteThumbnails work best when your pictures are uploaded to Blogger itself (Picasa). Give it a try and see if your thumbnail appears on other blogs..
DeleteHi Yoga, is there a way to force blogger to 'fit' the first post picture it uses to produce the thumbnail? I use a lot of wide landscape images and when Blogger generates thumbnails they look pretty crappy.
ReplyDeleteMy blog here:http://manicslots.blogspot.com.au and my 'News' section in Magazine dynamic view: http://manicslots.blogspot.com.au/view/magazine/search/label/News
BTW, thanks for great advice here, amazing stuff!
Hi Manic,
DeleteI can see the problem, but with the way things are structured, I'm afraid it won't be possible. They've made it to split the thumbnail part and the summary part into two separate blocks, which is why the summary won't fill in towards the bottom of empty images. CSS alone can't do much to change this, unfortunately.
Cheers!
I cannot thank you enough for everything you post. I've just created my blog and I keep going back and forth whenever I want to tweak my dynamic view! :)
ReplyDeleteThank you!
Thanks Helene, that means a lot! :)
DeleteI am now using dynamic views - is there a way to decrease the size of the thumbs, I always use small after upload and insert. The main view is timeslide where the posts in the left column display the thumbs - it is these I would like to reduce the size of them.
ReplyDeleteThanks.
Hi Doug,
DeleteSorry for the late reply. Here, try this:
.timeslide .column .thumbnail{
background-size: 100px auto !important;
width: 100px !important;
height: 100px !important;
}
Cheers..
Hi! this is totally unrelated from the above post bro. I know some basic html only and don't know how i could able to edit this on my template.
ReplyDeleteMy blog features 18 post in the main page with images, when you click the title, it will open up the entire post. but when you click the thumbnails, it will open the original uploaded image instead. how could i able to change this one? I want to change it like the way when you click on the title and lead it to the entire post? where on template i could able to do this?
Thanks so much!
You're using a custom template. It'll be best if you could shoot this question to the maker of the template.
DeleteBut if that gets you nowhere, start a discussion in Blogger Help Forum, and let me know its link. I'll have a look at your discussion when I get the time. Cheers..
I followed your instructions to change the thumbnail photo and it worked great, except in the "snapshot" view--now I have TWO posts: one is correct and the other is identical, but has no photo at all, just a blank space: www.corco99.com. It works fine in the other dynamic views. Any help would be appreciated.
ReplyDeleteSnapshot view tends to fetch every single thumbnail that it finds in a post - be it of pictures or videos. In your case, the white thumbnail is generated because you have a youtube video embedded in your post.
DeleteThe only way I know to prevent Snapshot view from loading a thumbnail is by uploading a picture/video to a source that it cannot fetch - like a third party image/video hosting site. Unfortunately, Youtube is a recognised source and it will try to fetch the video's thumbnail, unless if you host your video elsewhere.
What if I just uploaded the video from my computer and not use the youtube version? Would that help?
DeleteI'm afraid that's not gonna help - since Blogger's built-in video tool uploads your video to its own server, the template could still recognise the video as a media content, and as such it will try to fetch the video's thumbnail. You might wanna give Vimeo a shot, but this is just off the top of my head - you might wanna see what other video hosting sites are there.
DeleteGreat. I will try this. Thanks for your help. BTW, what's with Dynamic view that requires constant refreshing to get the customized settings to show (like color, etc.)?
ReplyDeleteAbout time.. See this: http://www.southernspeakers.net/2013/07/finally-fix-for-blogger-dynamic-view.html
DeleteCheers..
I cannot remove the date posted from the thumbnail pictures. My goal is to just have pictures showing. I've gone to LAYOUT - BLOG POST - EDIT and unchecked everything. Still shows up. Any suggestions?
ReplyDeleteThank You
Hi Anon,
DeleteLet's have a look at your blog. What's your blog's address?
This comment has been removed by the author.
ReplyDeleteHi Ted,
DeleteI'm not sure if I'm following. But if you're trying to add links to thumbnails, that definitely won't work, since CSS allows cosmetic changes only (whereas adding link requires structural changes)..
Thanks for everything! Not only for this tutorial but all the site. I could do whatever I wanted in my blog. About the duplicate posts in viewing Snapshot, hosting the other images in different places of the Google / Blogger duplication ends! \ o /
DeleteThanks again and Congratulations on your intelligence! : D
Greetings from Brazil
Hi Juliana,
DeleteGlad you find them helpful - Thankful for your compliments :)
Have a nice day! :D
Hi, I'm using sidebar... Is there any way to make the title of blogposts right aligned instead of center aligned?
ReplyDeleteHi Alan,
DeleteThis should do it:
.sidebar .article-header h1.title{
text-align: right !important;
}
Cheer :)
I Just cam across your site when doing a google search Im not using blogger dynamic view but elite minima and I cannot get the size of my thumbnails to change Ive found the code etc in the template related to it Ive changed the height and width numbers to make it bigger but it just wont save and change to what I want but it does in preview mode.
ReplyDeleteGenna
Hi Genna,
DeleteLet's look at your blog. What's your blog's address?
Sir Admin please give me solution
ReplyDeletei have 2 picture in my blogger post so i want to second picture thumbnail on post so please give me solution
What's your blog's address? Have you tried using the method in the tutorial above in this page?
ReplyDeleteIs there a way to set one image as the default for posts that don't have an image? In other words, replace the light grey background of the flipcards with something more interesting? Obviously I could go through each post individually, but that would be rather tedious.
ReplyDeleteYes you can. Add this to your CSS:
Delete.items .item .card .front, .items .item .card .back{
background: url(http://i564.photobucket.com/albums/ss90/yoboy7/mastercopy-1.png);
}
I love the idea of this, but have not been successful in doing it. Is it possible to achieve with a post that's already been composed, but not yet published? I've checked my post and it is not interfering with the code, as suggested above. Help! Thank You!
ReplyDeleteIf the post isn't published yet, I'm afraid your template won't bother to fetch the thumbnail in the first place. Was it not working for your template? Can I have a look at one of your posts where this was implemented?
DeleteHi Yoga,
ReplyDeleteApologize in case someone has already asked:
Can you offer a way to remove the thumbnail?
Thank you,
Ofer.
It varies from one view to another. Any particular view you're aiming for? Another way would be to host your image elsewhere (flickr, etc)
DeleteHi Yoga, thank you for your answer. I am talking about the flipcard layout. My blog is a library for posts on physics, and I would like the title to appear in the card and not some graph or picture embedded in the text...
Deleteyou may take a look at my blog here:
http://ofer-megged-phys-notes.blogspot.co.il/
I'm afraid the flipcard view is designed in a way in which if you remove your background, your post title will not be seen. That means the best way forward in your case is to host the image elsewhere.
DeleteHow do I keep the same thumbnail for when I share my blog post on facebook? I am having a problem with this. I cannot choose the thumbnail when I share and worse still it cuts my profile picture so you can't even see my face.
ReplyDeleteHi Linda,
DeleteIs this happening to all your posts? Could you send me the link of one post where it worked fine and another link that doesn't work?
Hi Yoga,
ReplyDeleteThanks a ton for your tutorials! I have used many of them and even the suggestions given in the comments section to edit my blog template. You are the savior! really!
Will come back soon for more editing tips and tricks :)
Regards,
Sindhu
http://sindhudevik.blogspot.in
http://varnatantu.wordpress.com
Glad to hear that Sindhu. Happy blogging :)
DeleteHi Yoga,
ReplyDeleteYour tutorials are great - even I, who knows nothing about code, can follow along!
I have a problem with the picture/thumbnail of my latest post; on the homepage it's displayed HUGE and above the text. My previous posts were all with a smaller thumbnail on the left and the writing on the right.
Why is this one different? I inserted the picture in the same manner to normal and the picture properties should be the same as normal.
My link is:
http://frockingbird.blogspot.it
Thank you!
Hi Candice,
DeleteI believe I've replied you in the forum. Let me know if I've got the wrong person here :)
Hey Yoboy I Need Your Help In My Blog And I Am Not Asking You For Dynamic Veiw Template I Am Using Other template Just Tell Me How To Change Thumbnail Size In This Template
ReplyDeletehttp://dsl-official.blogspot.com/
Please Help Me Bro Only You Are My Hope :D
Hi Syed,
DeleteLooks like you're using a custom template. Please contact your template maker.
help! doesn't the dynamic view (flipcard) show the thumbnails unless they are uploaded to blogger? mine are at photobucket.com and the thumbnails don't seem to work (youtube-thumbnails work just fine?)… what should i do?
ReplyDeleteand why doesn't the editings i've done to the blogpost-section seem to work in dynamic views?
my blog: http://es-tuthoughts.blogspot.fi
Quite the opposite actually. You need to upload your images to Blogger for your thumbnails to work. Last I checked, the template was still unable to fetch thumbnail from most third party hostings, photobucket included.
DeleteAs for your editings, mind pointing out what exactly aren't showing? Could be due to lots of stuffs..
Good tutorial. Would you help me? I do not want to upload an image to get the thumbnail as per your tutorial above. What I want is this. I would like to get image thumbnail from images hosted in another side. When I click on that thumbnail, i should see my text only without images. I have see news websites doing that. I have seen image thumbnails appearing about in the actual post their is not image. How can I go about that?
ReplyDeleteThe steps in the tutorial above does exactly that. You get the thumbnail, but the image won't appear in your post. But it has to be uploaded to Blogger. Some reported success with flickr, I haven't given it a try though.
DeleteHi Sindhu Devi K or Yoga (if you know)
ReplyDeleteI would like to ask how are you all able to add so many gadgets on the side? I previously had my gadgets like about, twitter, links etc in my previous blog template, but now that i changed to this new dynamic template, I couldn't view this any more after the changes.
In addition, I would like to check if I do not have an image for the posts (e.g. it was a video posts), how can I change the images? I can't view the tutorial given in this blog anymore.
Anyone is able to help me out?.
Thanks.
Hi Jeannie,
DeleteSorry for the late reply. You can add supported gadgets by going to the Layout page. Twitter isn't one of them, and any third party gadget is pretty much out of the question.
As for adding thumbnail for videos, the tutorial in this page above should work. Why are you not able to view it?
Hi! For some reason I've tried your tutorial yet the pictures aren't coming up at all? I don't know why this is as I've followed the steps accurately..
ReplyDeleteAny help would be great! Thanks!
Mind if I have a look at the post in which you've embedded the picture link?
Deletehttp://danyalsports.blogspot.co.uk/2014/03/fellaini-must-leave-manchester-united.html
DeleteThanks!
The image in your page is hosted at dailymail.co,uk. Have you tried the steps in the tutorial above?
DeleteThanks this was awesome, I found this after I was told that it's not possible to change what image Blogger uses to pull the thumbnail. This work around is most excellent. Although I did work out how to change it on existing posts.
ReplyDeleteFantastically helpful site which I use a lot. Now for some reason some of my images appear in my posts and some don't. It also appears to be true for the images inside the post. I don't know if you are able to help out but it is driving me mad - especially as it is a site being developed for other teachers to use at my new school!
ReplyDeleteThe link to the site is: http://bsnelearning.blogspot.com/ and you can see the first dynamic posts has no image (it is for ScoopIT).
Hoping you can help, many thanks
Hello Gideon,
DeleteI can see images in your post. Have you gotten this fixed?
Hi there, thanks for being so helpful with your tutorial!! Just a question though - do you know how to preview a few photos on the front page for each post? Blogger only lets us do one, and we we're hoping to get three or four up on the front page. Many many thanks in advance!
ReplyDeleteI can't think of an automatic way - but if you're up for it, you could combine 3-4 pictures into a single image (using MS Paint or some online tool to create an image mash-up), then use that image as a thumbnail using the trick in the post above.
DeleteHi Yoga, and thnx for your posts!
ReplyDeleteI made a game site using blogger, and everything is working just fine.
But I want to move my site to the next level, instead of an image thumbnail, I want a video one (That moves not an image from the video) so the user can see how the game works before playing it. I tried embedding the video hosted on youtube, but I only got an image of the video :( please help!
Hello Shadow,
DeleteYou cannot use a video as a thumbnail. The closest you can go for is to convert your video as GIF, and use that as your thumbnail. Here's an example: http://yoboytestblog19.blogspot.jp/
Hey, sorry for all the questions recently. I was just messing around with my blogs trying to get the sites to look better when I switched over to the mosaic view. I was using the Blogger Template Designer and when it loaded all the tiles for the webpage it didn't display any of the thumb nails as the images from the posts, but instead as the text from the posts and the video thumbnails. Anyway it looked Awesome! I'd upload a picture here but I'm not sure how. Would it be possible to make mosaic view permanently display thumbnails like this, With no images from the posts, only text and video thumbnail.
ReplyDeleteI'd have to take a look at one of those posts to be sure - but generally your thumbnail will not be fetched if the image is not uploaded to Blogger. As for the video, Youtube videos usually does come up with thumbnail, others not so much.
DeleteHere's a screen shot of what happened. I thought the aesthetic was interesting, the posts which would normally display tiles as thumbnails of the images contained within the posts displayed instead as thumbnails of text.
ReplyDeletehttp://jimysloangallery.blogspot.ca/2014/12/example-screenshot.html
Weird.
The designer's preview mode is full of glitches - it must have failed to load your thumbnail then. But you can force this to happen by hosting your images elsewhere (other than Blogger).
DeleteThank you! I searched all over for how to do this -- yours was the only tutorial I could find. Worked like a charm!
ReplyDeleteWhat the heck are we doing wrong. I have tried this for the last two hours and can not get the thumbnail to change. It has to be somehow be me because everyone else is having great success. Please help...
ReplyDeleteyou can see my site looks horrible....
ReplyDeletewww.byrealkids.com
Hello there,
DeleteCould you elaborate what exactly you are trying to change? Just FYI, the tutorial in the post above wont work for you because you're not using a dynamic template.
My apologies...I had to change it to another because I was having so much trouble. Please take another look. I am attempting to change it back to dynamic so you can review. Thank you so much for responding.
ReplyDeleteI know this is awesome...it just doesnt work for me. ;-(
ReplyDeleteBy R.E.A.L Kids,
ReplyDeleteLooks like I'm a little late? Seeing you've switched back to your non-dynamic template. Perhaps you can attempt to recreate your issue in a dummy blog?
hi. is there a way to change the default thumbnail image for posts that have no images? I kind of hate the default thumbnail that appears in the Related Posts section of my blog.
ReplyDeletehttp://gladyslaguardia.blogspot.com/
This could be embedded within a custom code in your blog, since you're using a custom template. BTW, I tried looking for the default thumbnail but couldn't find any.
DeleteI maybe deleted it or something. I tinkered around with the code, even though I don't really have knowledge about the code. I could tell you what I've done to it, but it might prove uninteresting. and i just remembered that I changed my template yesterday, but I have the same problem with the thumbnail.
DeleteCould you point me to one of your posts with the default thumbnail? I'm seeing thumbnails for all your posts.
DeleteHi, here is my blog:
ReplyDeletehttp://vintagegif.blogspot.com/
I uploaded 3 images, and all of them are centered in the thumbnail,
but the fourth image -even being the same size of the first three- is not centered in the thumbnail, ...what's wrong?
I see 11 images now (sorry for the late reply btw), and it appears all of them are centered in the thumbnail. What am I missing?
DeleteHi, I wrote you a message yesterday... but please forget it, 'cause I already solved it following the steps of this post. Thanks a lot. I really appreciate that you take your time to solve our problems
ReplyDeletedoes not work ... i did all the steps. as you said in the last step, i added the thumbnail pic to bee seen in the post again. But when i publish the post, all the pics including the thumbnail pic appear again
ReplyDeleteMind pointing me to the URL of your post?
DeleteThis isn't working for me either. If you get a chance take a look.
ReplyDeletehttp://sp0rkeh.blogspot.com/?view=flipcard
I can't post my HTML but I followed the steps exactly.
Not sure what is wrong.
Any insight?
Hey I could no longer visit your blog - I gues you've already deleted it? Do you have an alternative URL I could use to see the issue? BTW I see you're a fellow TC :D
DeleteHi,
ReplyDeleteIm a bit of a novice but Im wondering if there is a way to stop any secondary pictures in the post appearing as thumbnails in dynamic view? Snapshot in particular!
The only way I know how is to upload the picture that you don't want blogger to fetch on another domain (like photobucket or something). Something other than blogger.
Deletei want when i click medium size image then image will preview with full size is it possible here is by blog
ReplyDeletehttp://onlinepakistanofficial.blogspot.com/
This can be done by linking your thumbnail (medium size) to the large size image via its URL.
DeleteThank you soooo much. I've been searching for this tutorial forever. You're the best!
ReplyDeleteThank you very much for this article!! very useful!
ReplyDelete