Southern Listeners

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

Thursday, October 13, 2011

Change Blogger Dynamic View's Thumbnail Picture



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:
  • 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.




Step 3:

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:
<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.


Enjoy folks. And welcome to Southern Speakers v3.0!

186 comments:

  1. In the model live demo here:

    http://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!

    ReplyDelete
  2. very nice infor you gave mate it really helpfull for my mosaic one Visit IPL History

    ReplyDelete
  3. @nin: Glad you like the tweak :) Cheers.

    ReplyDelete
  4. thanks ! I've searching for this tutorial for a long time ~ :-)

    ReplyDelete
  5. @josie: Glad you've finally found it :)

    Cheers.

    ReplyDelete
  6. hi yoboy,

    thank 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!

    ReplyDelete
  7. @boboq88:

    Took 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.

    ReplyDelete
  8. hi great tutorial. does this one work for Magazine view??? or only Mosaic view??? thanks

    ReplyDelete
  9. @Anon: Works for all of them. Pretty ain't it?

    ReplyDelete
  10. Hi,
    I have Magazine view and it doesn´t work for me :(.

    ReplyDelete
  11. @pebbleinthesky: I've just tried this again, and it works fine in Magazine view, as well as other views. Check for yourself:

    Main Page - thumbnail shows

    Post page - thumbnail disappears

    ReplyDelete
  12. Replies
    1. You're most welcome. And thanks for the feedback :)

      Delete
  13. Awesome tutorial !! But is there anyway faster :(
    Just imagine you keep replacing that line in every single post, surely you no longer want to tell your stories...

    ReplyDelete
    Replies
    1. 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 :)

      Delete
  14. Hi, firstly, this site has been the best resource ever. You guys are fantastic.
    I was wondering how I can get rid of the grey border around the thumbnails?

    ReplyDelete
    Replies
    1. Hi TSC,

      Go 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..

      Delete
  15. I 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.

    I 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.

    ReplyDelete
    Replies
    1. 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 :)

      Delete
  16. I 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.

    I think the blogger post editor is just a little effed up

    ReplyDelete
  17. thanks for these great resources yoboy
    it 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.

    ReplyDelete
    Replies
    1. 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.

      Go 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.

      Delete
    2. thanks alot for the quick response
      this 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.

      Delete
    3. Pardon me for not thinking of this earlier. I've had my coffee now. Try this. You'll like this one better:

      .card .back{
      background: transparent !important;
      }
      .card{
      opacity: 0.3 !important;
      }
      .card:hover{
      opacity: 1.0 !important;
      }

      Cheers.

      Delete
    4. wow, thanks yoboy
      exactly 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

      Delete
    5. 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.

      Delete
    6. yea i noticed the flipcards re-arrange themselfs depending on window size
      gonna 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.

      Delete
    7. How about a combination of border+background instead?

      .flipcard .title{
      color: black;
      background: white !important;
      border: 1px solid black;
      }
      .flipcard .date.published{
      color: grey;
      background: white !important;
      border: 1px solid grey;
      }

      Cheers.

      Delete
    8. 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 ...
      if 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

      Delete
    9. update
      didnt 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.

      Delete
    10. update:
      i 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.

      Delete
    11. update:
      i 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

      Delete
    12. You did everything by yourself you almost left nothing else for me to do. Here:

      .flipcard .date.published, .overlay .title{
      max-width: 100% !important;
      width: 100% !important;
      margin-left: 0px !important;
      margin-right: 0px !important;
      }

      Cheers.

      Delete
    13. awsome
      that did the trick

      thank you so much yoboy
      gonna recommend this site to anybody that need help with their dynamic views

      Delete
  18. how do i change the color of these titles:
    http://i43.tinypic.com/15rnwq1.jpg

    ReplyDelete
    Replies
    1. Hi Anon,

      Add this to your CSS:

      .group-label span{
      color: white !important;
      }

      Delete
  19. 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.

    Here is the site the problem is happening on - thekarmatrail.com

    Any idea what is causing this issue? Fixes? Please help! Thank you!

    ReplyDelete
    Replies
    1. 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..

      Delete
  20. Awesum!!! it works perfect thankyou!! I'm bookmarking this page for reference :)

    ReplyDelete
  21. UHHHHHHMAZING. amazing. Thank you.

    ReplyDelete
  22. Hi again,

    Can 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

    ReplyDelete
    Replies
    1. Hi mereverzi,

      I've attempted this before.. It is not possible without stretching the pictures.. Sorry..

      Delete
  23. Yoga, you just rock! I recently started a blog and dont know what I would've done without your extremely helpful posts! Keep rocking! :)

    ReplyDelete
    Replies
    1. That's great Cynthya! Let me know if you need my help on something :)

      Cheers~

      Delete
  24. It's not workign for me, I think it's because im using a url to upload my picture maybe

    ReplyDelete
    Replies
    1. Dynamic 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.

      Delete
  25. Is 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...

    ReplyDelete
    Replies
    1. Hi Adam,

      Blogger 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..

      Delete
    2. Nah, it's fine. Thanks for the tip.

      Delete
    3. You could resize the first image width and height to 1px, so that the thumbnail wont be visible at all

      Delete
  26. seriously, this is so simple yet brilliant little trick! Thanks a lot!

    ReplyDelete
  27. Hi Yoga,

    No 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 !!!

    ReplyDelete
    Replies
    1. Hi afeg33,

      Sorry 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 :)

      Delete
    2. Hi,

      thanks 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

      Delete
    3. Hi there,

      This 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 :)

      Delete
  28. Hi! i folloewd a lot of your tips, and i have to say: great work!!!
    but 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

    ReplyDelete
    Replies
    1. Hi Bea P,

      As 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..

      Delete
  29. Hi Yoga,
    Is 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.

    ReplyDelete
    Replies
    1. Hi Ofer,

      Thanks :) 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..

      Delete
  30. Thanks Yoga.
    Do 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.

    ReplyDelete
    Replies
    1. Hi Ofer,

      Pretty 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 :)

      Delete
  31. Hi. How do I change the default size of the thumbnails?

    Blogger 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?

    ReplyDelete
    Replies
    1. Hi there,

      I'm afraid I'm not familiar with the 'data:post.thumbnailUrl' data tag. Have you tried shooting your question at the Blogger Help Forum?

      Delete
  32. 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 ;)

    The 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

    ReplyDelete
    Replies
    1. 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.

      Cheers :)

      Delete
    2. 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!

      Delete
  33. This 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!
    YOU ARE THE BEST! Thank you.

    ReplyDelete
  34. Hi Yoga, another problem came up...
    I 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.

    ReplyDelete
    Replies
    1. Hi Sami,

      Google 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

      Delete
    2. Thank you, Yoga. I'll try that.

      Delete
    3. Hope you find what you're looking for :)

      Delete
  35. Hello guys. Could you help me please for thumbnails.

    I 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

    ReplyDelete
    Replies
    1. Hi there,

      If 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..

      Delete
    2. 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.
      thanks yoga.

      Delete
  36. Hi Yoga,
    this 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

    ReplyDelete
    Replies
    1. Hi Nagi,

      It isn't possible at the moment. But do let your voice to be heard. Google might incorporate this feature in future updates.

      Cheers :)

      Delete
  37. 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?

    ReplyDelete
    Replies
    1. Technically 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.

      Cheers :)

      Delete
  38. 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!?!?

    Ps 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!

    ReplyDelete
    Replies
    1. 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

      Delete
  39. Do 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).

    http://mzvalentina.blogspot.com/

    i'm bummed now, since the dynamic layout looks awesome...
    but without the thumbnails, not so much :( pls help, Yoga!

    ReplyDelete
    Replies
    1. Hi Valentina,

      I'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?

      Delete
  40. Hi Yoga, question for you that I didn't see presented above in other comments.

    I 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/

    ReplyDelete
    Replies
    1. Hi Celestial,

      DV 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!

      Delete
  41. 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?

    ReplyDelete
    Replies
    1. Thumbnails work best when your pictures are uploaded to Blogger itself (Picasa). Give it a try and see if your thumbnail appears on other blogs..

      Delete
  42. Hi 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.

    My 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!

    ReplyDelete
    Replies
    1. Hi Manic,

      I 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!

      Delete
  43. 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! :)
    Thank you!

    ReplyDelete
  44. I 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.

    Thanks.

    ReplyDelete
    Replies
    1. Hi Doug,

      Sorry for the late reply. Here, try this:

      .timeslide .column .thumbnail{
      background-size: 100px auto !important;
      width: 100px !important;
      height: 100px !important;
      }

      Cheers..

      Delete
  45. 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.

    My 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!

    ReplyDelete
    Replies
    1. You're using a custom template. It'll be best if you could shoot this question to the maker of the template.

      But 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..

      Delete
  46. 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.

    ReplyDelete
    Replies
    1. Snapshot 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.

      The 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.

      Delete
    2. What if I just uploaded the video from my computer and not use the youtube version? Would that help?

      Delete
    3. I'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.

      Delete
  47. Great. 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.)?

    ReplyDelete
    Replies
    1. About time.. See this: http://www.southernspeakers.net/2013/07/finally-fix-for-blogger-dynamic-view.html

      Cheers..

      Delete
  48. 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?
    Thank You

    ReplyDelete
    Replies
    1. Hi Anon,

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

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

    ReplyDelete
    Replies
    1. Hi Ted,

      I'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)..

      Delete
    2. 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 /
      Thanks again and Congratulations on your intelligence! : D
      Greetings from Brazil

      Delete
    3. Hi Juliana,

      Glad you find them helpful - Thankful for your compliments :)

      Have a nice day! :D

      Delete
  50. Hi, I'm using sidebar... Is there any way to make the title of blogposts right aligned instead of center aligned?

    ReplyDelete
    Replies
    1. Hi Alan,

      This should do it:

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

      Cheer :)

      Delete
  51. 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.

    Genna

    ReplyDelete
    Replies
    1. Hi Genna,

      Let's look at your blog. What's your blog's address?

      Delete
  52. Sir Admin please give me solution
    i have 2 picture in my blogger post so i want to second picture thumbnail on post so please give me solution

    ReplyDelete
  53. What's your blog's address? Have you tried using the method in the tutorial above in this page?

    ReplyDelete
  54. Is 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.

    ReplyDelete
    Replies
    1. Yes you can. Add this to your CSS:

      .items .item .card .front, .items .item .card .back{
      background: url(http://i564.photobucket.com/albums/ss90/yoboy7/mastercopy-1.png);
      }

      Delete
  55. 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!

    ReplyDelete
    Replies
    1. If 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?

      Delete
  56. Hi Yoga,
    Apologize in case someone has already asked:
    Can you offer a way to remove the thumbnail?
    Thank you,
    Ofer.

    ReplyDelete
    Replies
    1. 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)

      Delete
    2. Hi 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...
      you may take a look at my blog here:
      http://ofer-megged-phys-notes.blogspot.co.il/

      Delete
    3. 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.

      Delete
  57. How 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.

    ReplyDelete
    Replies
    1. Hi Linda,

      Is 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?

      Delete
  58. Hi Yoga,

    Thanks 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

    ReplyDelete
    Replies
    1. Glad to hear that Sindhu. Happy blogging :)

      Delete
  59. Hi Yoga,
    Your 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!

    ReplyDelete
    Replies
    1. Hi Candice,

      I believe I've replied you in the forum. Let me know if I've got the wrong person here :)

      Delete
  60. 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
    http://dsl-official.blogspot.com/
    Please Help Me Bro Only You Are My Hope :D

    ReplyDelete
    Replies
    1. Hi Syed,

      Looks like you're using a custom template. Please contact your template maker.

      Delete
  61. 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?

    and 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

    ReplyDelete
    Replies
    1. 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.

      As for your editings, mind pointing out what exactly aren't showing? Could be due to lots of stuffs..

      Delete
  62. 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?

    ReplyDelete
    Replies
    1. The 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.

      Delete
  63. Hi Sindhu Devi K or Yoga (if you know)

    I 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.

    ReplyDelete
    Replies
    1. Hi Jeannie,

      Sorry 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?

      Delete
  64. 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..

    Any help would be great! Thanks!

    ReplyDelete
    Replies
    1. Mind if I have a look at the post in which you've embedded the picture link?

      Delete
    2. http://danyalsports.blogspot.co.uk/2014/03/fellaini-must-leave-manchester-united.html

      Thanks!

      Delete
    3. The image in your page is hosted at dailymail.co,uk. Have you tried the steps in the tutorial above?

      Delete
  65. Thanks 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.

    ReplyDelete
  66. Fantastically 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!

    The 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

    ReplyDelete
    Replies
    1. Hello Gideon,

      I can see images in your post. Have you gotten this fixed?

      Delete
  67. 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!

    ReplyDelete
    Replies
    1. I 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.

      Delete
  68. Hi Yoga, and thnx for your posts!
    I 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!

    ReplyDelete
    Replies
    1. Hello Shadow,

      You 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/

      Delete
  69. 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.

    ReplyDelete
    Replies
    1. I'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.

      Delete
  70. Here'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.

    http://jimysloangallery.blogspot.ca/2014/12/example-screenshot.html

    Weird.

    ReplyDelete
    Replies
    1. 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).

      Delete
  71. Thank you! I searched all over for how to do this -- yours was the only tutorial I could find. Worked like a charm!

    ReplyDelete
  72. What 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...

    ReplyDelete
  73. you can see my site looks horrible....
    www.byrealkids.com

    ReplyDelete
    Replies
    1. Hello there,

      Could 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.

      Delete
  74. 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.

    ReplyDelete
  75. I know this is awesome...it just doesnt work for me. ;-(

    ReplyDelete
  76. By R.E.A.L Kids,

    Looks 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?

    ReplyDelete
  77. 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.


    http://gladyslaguardia.blogspot.com/

    ReplyDelete
    Replies
    1. 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.

      Delete
    2. I 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.

      Delete
    3. Could you point me to one of your posts with the default thumbnail? I'm seeing thumbnails for all your posts.

      Delete
  78. Hi, here is my blog:

    http://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?

    ReplyDelete
    Replies
    1. 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?

      Delete
  79. Hi, 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

    ReplyDelete
  80. does 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

    ReplyDelete
    Replies
    1. Mind pointing me to the URL of your post?

      Delete
  81. This isn't working for me either. If you get a chance take a look.
    http://sp0rkeh.blogspot.com/?view=flipcard

    I can't post my HTML but I followed the steps exactly.

    Not sure what is wrong.

    Any insight?

    ReplyDelete
    Replies
    1. 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

      Delete
  82. Hi,

    Im 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!

    ReplyDelete
    Replies
    1. 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.

      Delete
  83. i want when i click medium size image then image will preview with full size is it possible here is by blog
    http://onlinepakistanofficial.blogspot.com/

    ReplyDelete
    Replies
    1. This can be done by linking your thumbnail (medium size) to the large size image via its URL.

      Delete

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