Before |
After |
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.
.snapshot .item.comments .title { left: 5px; right: 5px; font-size: 14px; text-wrap: normal !important; white-space: normal !important; overflow: visible !important; } .snapshot #content .item h3.title{ bottom: 5px; height: auto; } .snapshot .item .comments-count { bottom: 220px; }This tweak should allow titles within 10-12 words to be visible. If your average titles are longer than this, feel free to bring the title font-size down to fit in more words, by adjusting line 4.
"Help, it doesn't work!"
If the code above doesn't work for you, try this instead:
If the code above doesn't work for you, try this instead:
.snapshot .item .title { left: 5px !important; right: 5px !important; font-size: 14px !important; text-wrap: normal !important; white-space: normal !important; overflow: visible !important; } .snapshot #content .item h3.title{ bottom: 5px !important; height: auto !important; } .snapshot .item .comments-count { bottom: 220px !important; }
What if you do not want the words visible at all? How would you eliminate the extra border sdpace at the bottom of the photo? -Thx, Bob
ReplyDeleteHi Bob,
DeleteHere you go :)
.snapshot .item {
padding: 10px 10px 10px !important;
}
.snapshot .item h3.title{
font-size: 0px;
}
Cheers!
Worked great! Thanks!
DeleteNo problem :)
DeleteGreat Tutorial, it's useful for people who use dynamic views template.
ReplyDeleteYoboy, i am making a new blog Bloggers Network, and i want to take your interview. If you allow me please contact me on my email depy45631@gmail.com
Hi Deepak,
DeleteI am currently extremely busy with my MSc project, thus the reason why I've been away from the forum for the past few weeks. We'll try again in the future.
Cheers..
your tutorials are sooo good and sooo useful! what would I do without your help! Thank you so much!
ReplyDeleteThanks :)
DeleteIt works great!
ReplyDeleteThanks
Glad it worked! :)
DeleteThanks for all your great posts, I was wondering if there is anyway to remove the additional photos in snapshot view the template automatically creates when your post has more than one photo? Been scratching my head for hours now!
ReplyDeleteHi Jodie,
DeleteI know a way, but you're not gonna like it. Basically, what we need to do is to stop Blogger from fetching all your thumbnails except for the one that you'd like to see in the main snapshot view. In order to stop that, you need to upload your picture elsewhere, other than blogger. That way, Snapshot will only show the picture that is uploaded using Blogger. But it'll be a major pain in the back to do this.
Here's an example of post that has two different picture, but only one of them would show in my Snapshot view (because the other one is hosted at Imageshack)
Example
I have the same problem, I would consider your tip, but I have way too many pictures already on my blog. Is there no other way? Great Blog BTW very helpful!
DeleteUnfortunately, there isn't. If you want to exclude some pictures from being fetched by Blogger thumbnail-making engine, you need to make the source of the image unidentified by hosting it elsewhere.
DeleteI've tried this by linking to photo on Flickr, but it's still appearing as a snapshot on front page. Does this trick not work with Flickr - it's where I'm going to be uploading most of my photo's too anyway.
DeleteP.s. thanks for all the amazing tips - I've only just started up my blog and have used a lot of your tips already!
Ah.. They must have added support for Flickr pictures then, although I'm not entirely sure about it. Do you still have the flickr picture in your blog? Let me have a look if you don't mind. What's your blog's address?
DeleteYa i know your all turtal is work properly ...
ReplyDeleteBut I don't know your turtal how to remove search bar in dyanamic view i used it and it works in firefox not in google chrome and other thing not open site in Internet explorer
Hi Anon,
DeleteWhat's your blog's address? Let me have a look.
The only help on the net for handling dynamic views, otherwise less people would use it!
ReplyDeleteI am interested in changing the size of the Snaphot view items, I want to make smaller thumbnails like in Flipcard (I like Flipcard, but it shows incorrectly in IE).
So can you give me a code for smaller snapshot items?
Thanks a lot!
Hi Grabriel.. Thanks for dropping some nice words, appreciate it.. As for the snapshot thumbnail size, I've tried adjusting it, but unfortunately, it is too dynamic to be assigned a static value - it just won't work.. I'm sorry I couldnt be much more of a help..
DeleteTHANKS FOR GIVING SUCH USEFUL INFORMATION.
ReplyDeleteI want to change to Dynamic views but out of 7 different views that it provides,I want only three of them displayed with names changes(e.g. Flipcard - Photo frame or so..) otherwise it will confuse my visitors.
is it possible ?
Hi there,
DeleteYes it is possible. Which 3 would you like to make visible?
Cheers..
Is there any way I can align the thumbnails/tiles so that they are in line and are NOT alternatively tilted like how they are now(in Snapshot view). Thanks for the help
ReplyDeleteHi chidanand,
DeleteSee if this is what you're looking for. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
.askew .item, .ss {
-moz-transform: rotate(-0deg) !important;
-webkit-transform: rotate(-0deg) !important;
-ms-transform: rotate(-0deg) !important;
-o-transform: rotate(-0deg) !important;
margin: 0px !important;
}
Cheers..
Thanks Yoga, that was really helpful!! I have been playing with my blog all the while and I need another favor from you. Using the code below ,I managed to increase the thumbnail sizes, but the image inside the thumbnail don't fill it up(there is a 25px white margin). Is there any way I can make these image thumbnails fit those cells?? (pencilshades.blogspot.com)
Delete.askew .item .thumbnail, .ss{
width: 250px !important;
height: 250px !important;
}
CHEERS!!
Hi Chidanand,
DeleteThis is the best I could come up with:
.snapshot #main #content.items .item a.thumbnail{
background-size: 250px 250px !important;
}
Let me know how it goes :)
Cheers!
Dear Yoga,
DeleteYour tips are so very valuable and helpful, thousand thanks for writing this blog! I am turning to you with a question of my own. I extensively modified the Snapshot view on this test blog:
http://robdebob1.blogspot.ch/
I basically wanted to remove the post title from the bottom of thumbnails , and remove the rotation of the thumbnails. I used the code in this thread. There is a small left-over that is bothering me. When I hover over the thumbnail, the bottom edge expands slightly, about 5px. Can you think of any way how to remove this?
On a related topic, do you know if it is possible to change the color (or lightness or contrast) of the thumbnail over which one hovers, or perhaps that of the background frame? This would make for a nice visual effect.
Cheers!
Hello Yaccobo,
DeleteThis could get lengthy. Mind if we take it to the forum?
Hi! Your blog is amazing! Thank you so much. Is it possible to make the snapshots in Snapshot View flip like the images in Flipcard view?
ReplyDeleteThanks Emily, appreciate it :)
DeleteUnfortunately, we can't add flipcard's transition effect to Snapshot. It has been wired that way..
This is great! Everything works just fine. Bravo lad. Could you please tell me how to add drop down menu to Blogger Dynamic View? - to 'Magazine'template?
ReplyDeleteThanks Imran.. As for adding a drop-down menu, see if this helps:
DeleteDrop-Down Pages Gadget Menu in Blogger Dynamic View
All the best :)
Thank you for all of your tips about DV! I tried this one, but it didn't work :(
ReplyDeletePlease help..
Also have you find a way to use facebook comments in DV? I really want to use this template but I also want to use Facebook comment and it didn't work with DV template..
Heiy don't mind about my previous comment! It actually works now! Excellent!!
ReplyDeleteBut I still hope you could find a way to integrate facebook comment in DV :)
Hi Ciyus,
DeleteBelieve it or not, I don't have a facebook account! :) In any case, if you have some sort of HTML or script for facebook comments, you can try to insert it to the HTML section of your post (Dashboard - Post - Edit - HTML).. If it doesn't work, I'm afraid there aren't anything left for us to whirl..
Hi Raza,
ReplyDeleteYou need to upload your images to Blogger, using the 'Image Upload' tool built-in your post editor. The dynamic view template will not fetch thumbnails from images that are not hosted at Blogger - even if they're linked in your posts.
Cheers :)
Hello there !
ReplyDeleteFirst off, thank you so much for all the tips, they really helped me customize my blog exactly how I wanted.
I just have one question.
Is there a way to change the white color of the thumbnails in the snapshot dynamic view?
Hi Morgane,
DeleteYeap, there's a way. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
.snapshot .item{
background-color: red !important;
}
Cheers :)
how to add like button like mashable in blogger flipcard template - thumbnails when we hover..
ReplyDeleteI don't see a way forward in Flipcard template so far..
DeleteIn the magazine setting, how do you embolden the titles of thumbnails? And how to you create automatic, visible separators between those thumbnails?
ReplyDeleteI'm not entirely sure with what you mean by thumbnail titles. But if you were referring to your post titles, you can bold-face them by adding the following code to your CSS:
Delete.entry-title{
font-weight: 900 !important;
}
Try this for creating separators between your posts:
.magazine .item{
border: 1px solid black !important;
}
Cheers..
Thanks so much for all your GREAT tutorials. I have a quick question regarding the comments bubble that shows up on the Snapshot view. Currently on my blog it is located in the lower right corner of the Snapshot and it covers longer titles. Is there a way to remove it completely or just move it to a different location?
ReplyDeletesorry about my previous comment i had typed the css wrong. I realize you had that included in your code posted above. my bad but thank you again for your tutorials
ReplyDeleteHey Jessica,
DeleteNo worries. Glad you got it figured :)
Hi Yoga,
ReplyDeleteThank your for all your informations, even if i never use css (nor any webdev language) i manage to modify my blog as i want to.
However, i cant manage to make this one work, maybe there is a conflict with something already written in the css file.
Do you mind taking a quick look at it? (there are comments for each action, that may be usefull to somebody even though most of it comes from you :)
/*title size-color*/
#header.header .title a h1{
color: white;
font-weight: bold;
text-shadow: 1px 1px 1px black;
font-size: 40px;
}
/*share buttons*/
.share-controls{
display: none !important;
}
/*background transparency*/
.sidebar .item{
background: #E4E4E4 !important;
}
#items.items li.item, .overview-inner, .magazine #content, .ss .item, .mosaic #content .item, .sidebar #content, #sidebar .item.selected, .timeslide .item, .viewitem-content {
background: url('http://www.nauvootimes.com/images/white90.png') !important;
}
.overview-panel .article, .magazine #feature, .viewitem-panel .article, .sidebar #content .article{
background: transparent !important;
}
#overview .overview-backdrop{
opacity: 0 !important;
}
/*remove feedback*/
.feedback
{display:none !important;}
/*thumbnails titles*/
.snapshot .item.comments .title {
color: red;
left: 5px;
right: 5px;
font-size: 14px;
text-wrap: normal !important;
white-space: normal !important;
overflow: visible !important;
}
.snapshot .item .comments-count {
bottom: 220px;
}
I also was wondering something, when i add a picture to a post, there is a thumbnail created for each picture.
I was wondering is its possible to make one thumbnail for one message with several pictures in it but no thumbnail except the one of the message?
Maybe what i'm asking is totally nonsense but as i said before i'm not at all at ease with code lines :)
Hi Seb,
DeleteSeeing the code alone isn't gonna be very helpful. I'd rather inspect your blog straight away, as that could tell why the tweak above isn't working. Let's have a look at your blog. What's your blog's address?
As for the thumbnails, Snapshot view tends to fetch all Blogger-uploaded images from each post. That's the key there - Blogger-uploaded images. If you don't want a thumbnail to appear, then host the image elsewhere, like imageshack, flickr and so on, and link it to your post.
Cheers :)
Thanks a lot for your answer Yoga and for your help :)
DeleteHere is the link (almost empty right now, just few data for the tests before really using it in few months)
http://sebchris.blogspot.fr/
What's more I was also wondering if there is a way to auto resize background image to fit screen size dynamically.
By the way thank you for the answer you already made.
Cheers
Hi Seb,
DeleteHere, try this:
.snapshot .item .title {
left: 5px !important;
right: 5px !important;
font-size: 14px !important;
text-wrap: normal !important;
white-space: normal !important;
overflow: visible !important;
}
.snapshot #content .item h3.title{
bottom: 5px !important;
height: auto !important;
}
.snapshot .item .comments-count {
bottom: 220px !important;
}
And there isn't a way to auro resize background images to fir screen size dynamically - which is very unfortunate I might add.
Cheers.
Hi Yoga it works :)
DeleteThank you again for having taken time to answer me.
Cheers
This may be a bit offtopic, sorry about that (I'm still learning the places around here :)
ReplyDeleteI'd like to use the Snapshot view in my blog, displaying an image I'd upload to blogger, but instead of opening that post when clicking on the snapshot, I'd like to redirect the user to another site;
Like... I'm displaying an image of a certain amazon product in my snapshot, and when clicking, I'd like the user to be redirected to the proper Amazon product page.
Is it possible?
Thanks in advance, Yoga (it's pretty amazing what you're doing in this place!)
Hi Trendy Freak,
ReplyDeleteUnfortunately, there isn't anyway to edit the target link of the snapshots. You might wanna use one of the third party templates that is optimised for online shopping - that could come in handy.
Cheers :)
Thank you, Yoga!
DeleteWill check third party templates as you say.
Have a great weekend :)
Great tips, thanks man. Is there a way to make the frames in snapshot view black instead of white?
ReplyDeleteTry this:
Delete.snapshot .item{
background-color: black !important;
}
Cheers.
Hi
DeleteI have made a snapshot gallery.
But when i have added more than one photo to the blog entry, it names the first photo the name of the header on the blog entry, and leaves the other once blank.
Is there a way to add a specific name under the picture?
I tried to click the properties in the picture in the post entry and give it a name (titlee text / alt text) but were not able to get it to show.
Any ideas?
http://elama-norjassa.blogspot.no/view/snapshot/search/label/Degut
That's a good question.. I will escalate this to Blogger support and get back to you if they reply..
DeleteHi! So happy that I found your terrific blog! You may have already answered my questions. Please direct me to the correct place if you have. 1) Is there any way to ONLY use the snapshot view with the dynamic template? 2) I don't mind hosting the thumbnail on a third party site, but how do I link to it in my post? (photobucket.)
ReplyDeleteThanks!
Hi Charlene,
ReplyDelete1) Yeap, first choose Snapshot as your default template, next disable all the other template options (see here), and then redirect all template view URL to your default URL (see the link above, under Extras).
2) The last time I checked, DV template did not fetch thumbnails from Photobucket. It is best for you to upload to Blogger directly if you want your thumbnails to show fine. I've seen Flickr working in some blog, but it's more of a hit-and-miss thing.
Thanks you are amazing!!! Worked beautifully on my blog: www.stylemeetsperfection.blogspot.com :)
ReplyDeleteLooking good there :)
DeleteIs there a way to make the post tiles align in the center of the page instead of the left side?
ReplyDeleteI'm afraid that could be disastrous. What you're seeing is actually not a gap on the right hand side. Snapshot works this way. It measures the width of your viewer's display, and starts populating snapshots starting from the left. Naturally, there'll be some space left on the right, this is what you're seeing. This space varies from computer to computer, depending on the display size. Any attempt to mitigate this 'gap' will only get in the way of the dynamic nature in which the cards are arranged. Worse case scenario: you might not see the gaps in your computer, but most of your readers might not see some of your snapshots.
DeleteHI!! Could you please tell me how to insert two images in a snapshot template and not create two posts?
ReplyDeleteHi Rochak,
DeleteBy inserting two images in any single post, you'll end up with both images showing in Snapshot templates - but this constitute a single post.
If you were looking for a way to not have both images shown, you need to ensure only one of those images is uploaded to Blogger. The rest of them must be hosted elsewhere (imageshack, photobucket, facebook, etc)..
Hello, I just wanted to say thanks for all the great tuts on the Dynamic Views Blogs. You are really helping me out a lot! Kudos.
ReplyDeleteThanks!
DeleteHi Yoga,
ReplyDeleteSouthernspeaker is a very useful resource, thank you for all your coding tips & lessons!
I am using Snapshot as landing page for my blog http://www.chinesecoloured.com/. Is it possible to select only one picture for each post to show in snapshot view?
Laure
Hello Laure,
DeleteIt is possible, but the way to go about it is a little clumsy. Here's how: Snapshot fetches all Blogger-uploaded images from all posts to the main view. The trick to get only one picture from each post is to only upload one picture to Blogger (using the Blogger image uploader using post editing).. The rest of the pictures should be uploaded/hosted elsewhere and linked to the post.
This worked wonderfully. Thank you!
ReplyDeleteHi Yoga
ReplyDeleteThanks for all the tips - I've had fun updating my blog formatting!
However when I try this bit of code any titles that are 2 lines long then end up encroaching on the photo snapshots (ie overlapping). It seems that changing the spacing between the 2 lines would solve this, but I can't work out how to do it - any tips?!
Thanks
Katie
Whatskatiedoing.blogspot.co.uk
Hello Katie,
DeleteSorry for the (ridiculously) late reply. You'll need this code to change your title line height:
.snapshot .item .title a{
line-height: 15px !important;
}
Great - thanks Yoga, it worked a treat!
ReplyDeleteHi There,
ReplyDeleteI'm wondering if there is any way to customize how much text is seen below the thumbnail in magazine view. Preferably, I'd love to be able to add a custom description that doesn't show up when you click in to the actual thumbnail and see the whole post. Thank you!
Hello,
DeleteI'm not sure if there is a way to limit the number of text on the magazine front view, but I do know a way where you can include a description and only allow it to show on the front view (NOTE: the description will only appear on the front view, but the actual content will appear both at the front and in the post).
1) Go edit your post - switch to HTML view - Add the following preferably towards the top of your post editor box:
<div class="post-description">
This is my description
</div>
2) Republish your post.
3) Add the following to your 'Add CSS' box:
.article.hentry .post-description{
display: none;
}
4) Repeat steps 1 and 2 for others posts.
hello brother, I’m using the Snapshot View in my blog but the problem is that if i upload 5 pictures in a post all those pics appear in the main page, i would like to set it up so it would only show the picture that i selected as the Thumbnail Picture as you taught us in Change Blogger Dynamic View's Thumbnail Picture.
ReplyDeleteThat should not be the case, only your first picture should show. Here's a test post I've published again:
Deletehttp://testblog18-yoboy.blogspot.my/
Can I have a look at your blog?