Home » Blogger Tutorials, Tricks and Hacks » Blogger Tricks / Other » Show Custom Widgets In Dynamic View

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Show Custom Widgets In Dynamic View

Show Custom Widgets In Dynamic View

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error


If there’s one thing Blogger users would like to have in their Dynamic View template it’d be the ability to support to support custom or third-party widgets, but so far the likelihood of that ever happening is still farfetched so some users decided to look for other ways to get around this by means of what some call as “dirty hacking.”

Dirty hacking in Blogger is like what jailbreaking is to an iPhone, so on that note, this disclaimer is in order: this Blogger hack can stop working any time and performing it on your blog may have a negative effect. Consider yourself warned.

Again, the goal of this hack is to show your custom widgets when a user expands a post while viewing using the various Dynamic View options (Flipcard, Snapshot, Mosaic, etc.).

Here are the instructions:

  • On your Blogger dashboard, proceed to the Template section.
  • Click Edit HTML and then on Proceed.
  • Add the following lines of code below anywhere inside the <head></head> tag.
<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'/>
  • Then add this line just above the </body> tag.
<script type='text/javascript'>setTimeout(function(){gradditBloggerDynamicViewsRatingsHack();},1000);</script>
  • Or this if you want to also display Related Posts.
<script type='text/javascript'>setTimeout(function(){gradditBloggerDynamicViewsRatingsHack(true);},1000);</script>
  • Save the template.
  • Now going back to the Template section, click on the Customize button this time.
  • Click on Advanced and then Add CSS to start applying some style (otherwise the stars won’t show up properly).
  • Copy/paste this in the CSS box.
.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 and you’re done.
  • Open up your blog to try it. It should be working now.

    You can check out the demo.

      Liked It ? Please Share

      Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here