September 2012

Friday, September 21, 2012

Hacking Blogger Dynamic Views to support custom widgets

Blogger Dynamic Views are cool, but they support only few official widgets. Today we're hacking dynamic views to support any custom widgets (using Graddit widget as an example, of course).

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.

For dynamic views we can't change a part of the template that displays posts - it will not work. But we still can change head section. Add the following lines to <head>...</head>:

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

Sunday, September 16, 2012

Graddit polls widgets

Graddit presents new widgets for polls that you can build into your blogs and sites. Here's a simple poll example:

{[['Bad',' | '],['Average',' | '],['Awesome']]}

Number of options and text can be changed. Take code from graddit page, options are set like this:

{[['Bad','  |  '],['Average','  |  '],['Awesome']]}, where '  |  ' are the separators between options; number of options should match the number that is passed to the script as a parameter (3 in this example).

I can be not just text, but any HTML valid element. For example, images:

Who rocks?

{[['

',' '], ['

']]}

And of course general polls. How do you like the new widgets?

{[['So so'],['Okay'],['Perfect']]}

Monday, September 3, 2012

Graddit ratings statistics

There's a new tab in admin panel called "Statistics" that allows you to see detailed data about ratings, views, votes and feedbacks numbers. Also you could get some interesting details such as Google Pagerank, Alexa Rank, Facebook and Twitter mentions (later this will be extended). Here's the tab screenshot:

It's sortable. To get information about a page click corresponding ⟳ link. Leave your suggestions here in comments.