Add Button Pinterest, Automatic for Image Blogger

This is tutorial how to added pinterest button, automatic to image for blogger.

by Beben Koben

HTML

<h1>Tutorial Blog for Stylish Blogger</h1>
<center>
<img src="http://1.bp.blogspot.com/-hnbU2ZiQX04/T6AUlXx5nrI/AAAAAAAAFJ8/yBY0u1OB_Ec/s1600/wanita-sexy.jpg" /> <img src="http://1.bp.blogspot.com/-JqfIMVvnSEc/TqKsCYCTdAI/AAAAAAAAELk/ZyDdNH5lDrw/wanita-seksi.png" width="300px" height="250px" />        
</center>
      <p class="cred" align="center"> Creativity by <a href="http://ben-tools.blogspot.com/">Beben Koben</a></p>
<footer>
    <a class="orig" href="http://beben-koben.blogspot.com/2012/05/add-button-pinterest-automatic-for.html" title="GO BACK TO ARTICLE"> &laquo; BACK TO</a>
    <h2><a href="http://beben-koben.blogspot.com/">BEBEN KOBEN</a></h2>
</footer>

CSS

*
{margin:0;padding:0;}
body
{background:#debe94;color:#000;font:15px Calibri, Arial, sans-serif;text-shadow:1px 1px 1px #FFFFFF;padding:10px;}
a,a:visited
{text-decoration:none;outline:none;color:#a00;}
a:hover
{color:#fff;}
footer
{background:#D3A76F;position:fixed;width:100%;border-top:1px solid #333;height:70px;bottom:0;left:0;color:#fff;text-shadow:1px 2px 0 #000;}
footer h2
{font:25px/26px Acens;font-weight:bold;left:70%;margin:0px 0 0 150px;padding:20px 0;position:relative;width:400px;}
footer a.orig,
a.orig:visited
{-moz-box-shadow:0px 0px 20px #000;-webkit-box-shadow:0px 0px 20px #000;box-shadow:0px 0px 20px #000;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
    text-decoration:blink;
    font-weight:bold;
    color:#f00;
    font-size:14px;
    left:37%;
    line-height:46px;
    margin:12px 0 0 -405px;
    position:absolute;
    top:0;
    width:75px;
}
.cred {padding-top:15px;}
h1{text-align:center;text-shadow:3px 3px 5px #000;padding:25px;font-family: Verdana, Geneva, sans-serif;font-size:20pt;color:#D3A76F;}
.pinned .pin {
opacity: .7;
position: absolute;
margin-left: -45px;
}
.pinned .pin:hover {
opacity: 1;
}

JavaScript

// surround each image with div class='pinned'
$('img').each(function() {
    if ( ($(this).height() > 105) && ($(this).width() > 205) ) {
        $(this).wrap("<div class='pinned' />");
    }
});
// grab each image div with class of .pinned
var each_image = $('div.pinned');
// iterate through all divs
each_image.each(function() {
    var pinned_height = $(this).find('img').height();
    if ($(this).find('img').hasClass("imageLeft") == 'true') {
        $(this).addClass('imageLeft');
    }
    if ($(this).find('img').hasClass("imageRight") == 'true') {
        $(this).addClass('floatRight');
    }
    //if (pinned_width > 205 && pinned_height > 105) {
        // dynamically add span and empty pin button
        $(this).append('<span class="pin"><a href="" target="_blank" class="pin-it-button" count-layout="vertical" title="Pin it On Pinterest"><img src="http://1.bp.blogspot.com/-d-a06QQgOI0/T60PXEVtr6I/AAAAAAAAFNA/C8Csz68aAX8/s1600/pinterest.png" /></a></span>');
        $(this).find('.pin').css('marginRight', '2px');
        $(this).find('.pin').css('marginTop', pinned_height - 22);
        // cache variables
        var $this = $(this),
        // cache this
        image_source = $this.find('img').attr('src'),
        // grab image src
        web_title = $(location).attr('href'),
        image_height = $this.find('.pinned').height(),
        // grab current page title
        description = $this.find('img').attr('alt'),
        // grab img alt text
        slug = $this.find('a.pin-it-button');
        // find the Pinterest link
        // modify Pinterest href with new image details
        if (image_source.indexOf(".com") == -1) {
            image_source = window.location.protocol + "//" + window.location.host + image_source;
        }  
        slug.attr('href', 'http://pinterest.com/pin/create/button/?url=' + web_title + '&media=' + image_source + '&description=' + description + '');
    //};
});