Disclaimer. This is dirty hacking, it can stop working at any time and can even negatively affect behaviour of your blog. You were warned.
So, the goal is to make widgets appear when user expands a post in any view (Classic, Flipcard, Magazine, Mosaic, Sidebar, Snapshot and Timeline).
First, open Blogger dashboard and go to Template tab; click Edit HTML and then Proceed button.
<link href='http://static.graddit.com/css/graddit.css' rel='stylesheet' type='text/css'/>
<script src='http://static.graddit.com/js/graddit-extras.js' type='text/javascript'/>
These are styles and some cool scripts. Actually, we will need only one function called gradditBloggerDynamicViewsRatingsHack. Now go to the very bottom of the template and add this call just before closing </body> tag:
<script type='text/javascript'>setTimeout(function(){gradditBloggerDynamicViewsRatingsHack();},1000);</script>
Or this if you want also to display related posts (You Might Like widget):
<script type='text/javascript'>setTimeout(function(){gradditBloggerDynamicViewsRatingsHack(true);},1000);</script>
Now save template and close editor. Click Customize button to add some styles (without them stars will not show properly). Select Advanced and then click Add CSS. Add this:
.article .article-content .ffbs_rate img {
padding: 0;
border: 0;
border-image: none;
-webkit-border-image: none;
vertical-align: middle;
}
.article .article-content .ffbs_stats {
font-size: 10px;
}
.article .article-content a {
border: 0;
}
Click Apply to Blog.
Now it should be working, open your blog and try! Here's live demo: http://ffbs-widgets.blogspot.com/.
Did it work for you?
Rate this posting:
{[['
']]}
']]}You might like:
I just finished implementing dynamic views on my website and the codes above work great!
ReplyDeleteBy the way, somehow the rating part looks different:
- "Average rating" is missing (see for an example: http://www.thefluks.com/2013/01/vid-top-10-table-tennis-rallies-in-2012.html), could it be that the CSS part is outdated?
I got two additional questions, I hope you can help me out again!
1. How can I make the rating go right under the title? (position of the rating)
2. Is it possible to show the average rating again and the lines "rate this post"?
Thanks in advance!
Greetings,
TheFluks
I added average rating and "Rate this post:" label to the JS function. If you want to change something you'll have to take that function (gradditBloggerDynamicViewsRatingsHack from graddit-extras.js) and make your own implementation.
DeleteP.S. if you still don't see the average and label that means your browser cached graddit-extras.js, you need to refresh the page (Ctrl+R), possibly few times.
That worked!
Deletelooks good on my blog :D
It is kinda weird direct links are not working, is there maybe some kind of work around for that?
Could it be possible to add the ratings to the "tops"?
It would also be cool if you can add this to RSS feeds of the latest posts to let users rate external websites! :D
Just some random ideas, if you got some ideas how I could implement this, please let me know!
Greets,
TheFluks
> It is kinda weird direct links are not working, is there maybe some kind of work around for that?
DeleteI remember there was an issue with that, but I can't recall what exactly; it wasn't that simple.
> Could it be possible to add the ratings to the "tops"?
Just to display current rating of each record? It's currently possible with tops options, it will display as a number, but I'm planning to change it to stars in future.
Didn't work :/
ReplyDeleteBecause it's a dirty hack ;)
DeleteI checked it yesterday on some blog, it was somewhat working. And still working on my test blog (expand a post): http://ffbs-widgets.blogspot.com/
Things change in dynamic template, also it was not working on all views initially. Try another view, try to expand a post by clicking on it (not accessing by direct link). Also, you can use JS function as a reference to create your own.
Hey mand, I'm really itnerested in being able to add custom widgets to Blogger, specifically the SoundCloud widget to the header or the sidebar, whichever is easier. However, I can't see yours working on Chrome 25. Does it depend on the browser?
ReplyDeletePLease let me know
my email: cristhopper@gmail.com
Cristhopper
It may or may not be dependent ob browser - you never know with JS. However, in this particular case widgets just stopped working few months ago, my guess is Google changed HTML and as this solution was relying on document structure it broke. If you are familiar with JS you can implement it, better use jQuery to make it easier; use my sources as reference.
DeleteToo bad they stopped working.
DeleteAre you planning to update your hack? Is it possible to get it to work again?
Thanks in advance!
It's definitely possible, but I was not planning to update it anytime soon. Because everytime you update it, Google updates Blogger too and it stops working. And see how many people interested in this feature - 3 comments for 6 months.
DeleteI am interested in working HTML widget under dynamic templates, because it is a only way i know to add paypal button to my project.
ReplyDeletehttp://trackerbase.blogspot.com/
As i understand solution above no longer working?
Any ideas?
The reason why it's not working (I guess) is because Blogger constantly changing dynamic templates markup. Is that possible to make it working again? I think yes, but I was not planning to support this.
Delete