Get your Rating-Widget

In your Tumblr dashboard, click Customize.

Click on Edit HTML in order to edit your theme.

Open the search tool by clicking Command-F on Mac or Ctrl-F on Windows and search for </body>.

Copy and paste the code below into your theme's html immediately before the </body> tag.

<script type="text/javascript">(function(d, t, e, m){
    
    // Async Rating-Widget initialization.
    window.RW_Async_Init = function(){
                
        RW.init({
            huid: "your-unique-site-id",
            uid: "your-site-public-key",
            options: { "style": "oxygen" } 
        });
        RW.render();
    };
        // Append Rating-Widget JavaScript library.
    var rw, s = d.getElementsByTagName(e)[0], id = "rw-js",
        l = d.location, ck = "Y" + t.getFullYear() + 
        "M" + t.getMonth() + "D" + t.getDate(), p = l.protocol,
        f = ((l.search.indexOf("DBG=") > -1) ? "" : ".min"),
        a = ("https:" == p ? "secure." + m + "js/" : "js." + m);
    if (d.getElementById(id)) return;              
    rw = d.createElement(e);
    rw.id = id; rw.async = true; rw.type = "text/javascript";
    rw.src = p + "//" + a + "external" + f + ".js?ck=" + ck;
    s.parentNode.insertBefore(rw, s);
    }(document, new Date(), "script", "rating-widget.com/"));</script>

Now, simply copy and paste the code below in the exact place you want the rating widget to appear.

<div class="rw-ui-container rw-urid-{PostID}"
    data-urid="{PostID}"
    data-url="{Permalink}"
    data-domain="{BlogURL}"{block:Title}
    data-title="{block:Text}{Title}{/block:Text}{block:Chat}{Title}{/block:Chat}"{/block:Title}{block:Caption}
    data-title="{block:Photo}{PhotoAlt}{/block:Photo}{block:Panorama}{PhotoAlt}{/block:Panorama}"{/block:Caption}{block:Quote}
    data-title="{Quote}"{/block:Quote}{block:Link}
    data-title="{Name}"{/block:Link}{block:Photo}
    data-img="{PhotoURL-500}"{/block:Photo}{block:Panorama}
    data-img="{PhotoURL-Panorama}"{/block:Panorama}{block:VideoThumbnail}
    data-img="{VideoThumbnailURL}"{/block:VideoThumbnail}{block:HasTags}
    data-tags="{block:Tags}{URLSafeTag},{/block:Tags}"{/block:HasTags}
></div>

Typically, we suggest that you paste the code right after {/block:NotReblog} (this will place at the end of the post) or right after <section class="post"> (this will place it on top of the post). You can use the search tool again to find these places in the code. If you can't find these tags, we recommend to paste the code right before {/block:Posts}.

It might take some trial and error to get it to show in the right place. Note that you can also use CSS to style the rating to get it to display just the way you want. Put that inside the <style> tag at the top of your theme.

Finally, click Update Preview and then Save. Done!

If your layout breaks, try to add the following shorter code version instead:

<div class="rw-ui-container rw-urid-{PostID}"
    data-urid="{PostID}"
    data-url="{Permalink}"
    data-domain="{BlogURL}"{block:Title}
></div>