Showing posts with label PinTerest. Show all posts
Showing posts with label PinTerest. Show all posts

Add a Floating Social Media Counter Button Including Pinterest Pin it Button

3 comments
Today I am bit free and Holidays it is I have decided to lets play with CSS again.  I am going to put a floating Bar Widget  For Blogger and WordPress both . Contain Facebook like button and Twitter Counter  By tweetmeme and Pinterest Pin it button and Google G+ button as we know Facebook and Tweeter are widely known social media without which you can not call blog a blog. This widgets lets your reader circulate and share the post to their best and loving ones.

"This new version of CD Widgets are available all this four social media buttons if you want to add more buttons to it and need help from us feel free to ask and drop your doubt in Comment box."

This can be further edited :
  • This can be aligned any where in the blog left or right side of your website. By default it will appear in the middle left of your blog.
  • You can add more more Social media to it like Digg.
Follow the Steps to Add Facebook, Twitter, Pinterest and Google G+ Counter to Blogger:
  • Log in to blogger>Design.
  • Select HTML/JavaScript Widgets from anywhere (position Doesn't matter).
  • Inside it Post the code Below.
<style>
/*-------CD Sharing Widget------------*/
#cdfloat {
  position:fixed;
bottom:15%;
margin-left: -84px;
z-index:10;
float:left;
padding-bottom:2px;
}
#cdsidebar {
        background:#fff;
        border-top:1px solid #ddd;
        border-left:1px solid #ddd;
        border-bottom:1px solid #ddd;
        border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
        padding-left:5px;
        width:60px;
        margin:0 0 0 5px;
}
.fb_share_count_top {width:52px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id="cdfloat">
<div id="cdsidebar">
    <table cellpadding="1px" cellspacing="0">
<tr>
    <td style="padding:5px 0px 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="probloggingtool">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </td>
    </tr>
    <tr>
    <td style="padding:5px 0 2px 0;">
    <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
    </td>
    </tr>
    <tr>
    <td style="padding:5px 0 2px 0;">
    <a href="http://pinterest.com/pin/create/button/" class="pin-it-button" count-layout="vertical"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
    </td>
    </tr>
    <tr>
    <td style=" padding:5px 0px 0px 0px;">
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
<g:plusone size="Tall" expr:href="data:post.url">
    </g:plusone></td>
    </tr>
    <tr>
    <td> <a href="http://coderdesire.blogspot.in/2012/06/add-floating-social-media-counter.html" style="color:#000000; font-size:8px">Get This </a>
    </td>
    </tr>
        </table> </div> </div>
  • Save your widgets and you are Done !
See your Blog its look beautiful with a hanging light widgets in middle left of your Website. hope you liked it...  :)

Read More...

How to Add The Animated Eassy Bookmarking Gadget To Your Blog

Leave a Comment
All is that All blogger , reader like the Social media Button very Much.And widgets especially unique gadgets that can catch the eye of readers and get them bookmarking your blog.Today I have a very cool social bookmarking gadget with a stylish animated effect.With the Sassy bookmarks gadget a basic share button is placed in the corner of your blog, then on hover 6 icons for the main social bookmarking websites appear in a semicircle.The buttons that appear are for Pinterest, Google+, Facebook, Twitter, Tumblr and Email.

Add The Animated Sassy Bookmarking Gadget To Your Blog :

Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template.

Step 1: In Your Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Tick The Expand Widget Templates Box.

Step 2: Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code.
 
</body>

Step 3: Copy and Paste the following code Directly Above / Before </body>


<!-- Start Shareaholic Sassy Bookmarks HTML - http://www.coderdesire.blogspot.com -->
<div class='shr_ss shr_publisher'>


</div>
<!-- End Shareaholic Sassy Bookmarks HTML -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type='text/javascript'>
var SHRSS_Settings = {&quot;shr_ss&quot;:{&quot;src&quot;:&quot;//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark&quot;,&quot;link&quot;:&quot;&quot;,&quot;service&quot;:&quot;5,7,2,313,38,201,88,74&quot;,&quot;apikey&quot;:&quot;b87f5899d80a5edce8b5e55f58542ef0f&quot;,&quot;localize&quot;:true,&quot;shortener&quot;:&quot;bitly&quot;,&quot;shortener_key&quot;:&quot;&quot;,&quot;designer_toolTips&quot;:true,&quot;tip_bg_color&quot;:&quot;black&quot;,&quot;tip_text_color&quot;:&quot;white&quot;,&quot;viewport&quot;:true,&quot;twitter_template&quot;:&quot;${title} - ${short_link} via @Shareaholic&quot;}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type='text/javascript'>
(function() {
var sb = document.createElement(&quot;script&quot;); sb.type = &quot;text/javascript&quot;;sb.async = true;
sb.src = (&quot;https:&quot; == document.location.protocol ? &quot;https://dtym7iokkjlif.cloudfront.net&quot; : &quot;http://cdn.shareaholic.com&quot;) + &quot;/media/js/jquery.shareaholic-publishers-ss.min.js&quot;;
var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(sb, s);
})();
</script>


<!-- End Shareaholic Sassy Bookmarks script -->
<!-- End Shareaholic Sassy Bookmarks HTML - http://www.coderdesire.blogspot.com -->
Step 4: Save Your Template.

You are Done !

That's it the animated Sassy Bookmarks gadget is on your blog !

Enjoy & Drop Your Comments And Questions Below !

Read More...

Pinterest Follow Button For Blogger/ WordPress Blog

4 comments

Since We Published and Before publishing How to Add Pinterest Pin it Button/Counter to Blogger Blog ( Which is By default only Works on Blogger), Several Readers contacted us and asked for yet Another Button i.e - Pinterest Follower Button.

Following using this Button is a Two - step process. Clicking the button firs takes readers to your boards are displayed. From, there, they can then choose to follow each board individually or choose to follow All boards at once By clicking respective Buttons. 

Here We go With the Steps that put A follow Button on your Blogger/ WordPress respectively.
1.) Button Code :
     Below are a list of available Buttons Provided by Pinterest on their website.

2.) Adding Code to Blog
  • Adding to Blogger :
  1. Got to Layout ( or design in the old interface).
  2. Click Add A Gadget and Select HTML/JavaScript Gadget.
  3. Copy a Code above and Paste it inside the content box (or in Some case If you are not able to Copy Type it By seeing it).
  4. Replace "USERNAME" with your Pinterest Username.
  5. Save.
  • Adding to WordPress :
  1. Go to Dashboard > Appearance > Widgets > Available Widgets.
  2. Drag Text Widget into a sidebar.
  3. Paste in the Code.
  4. Replace "USERNAME" with your Pinterest Username.
  5. Save.
You have Done !

Enjoy !


If you Find the Post Helpful Please Pin or Share.


Read More...

How to Add the Pin it Button as a Widget

Leave a Comment

To put the Pin it Button Outside post area e.g. in in Sidebar or Footer, Paste the Following code into a HTML/JavaScript Gadget. The Button will appear on all pages (not Just post pages), But it Comes without the Counter.


<a href='javascript:void(run_pinmarklet1())'><img src="http://2.bp.blogspot.com/-lRae8bdMpuA/TzuLrnycXaI/AAAAAAAACQE/YVYUjfs7dm8/s1600/pinmask2.png" style='margin:0; padding:0; border:none;'/></a>
<script type='text/javascript'>
function run_pinmarklet1() {
  var e=document.createElement('script');
  e.setAttribute('type','text/javascript');
  e.setAttribute('charset','UTF-8');
  e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);
  document.body.appendChild(e);
}
</script>

Save the HTML/JavaScript Gadget Window Box.

You have Done !

Enjoy !

If you Find the Post Helpful Please Pin or Share.



Read More...

How to Customize the Layout of Pin it Button

Leave a Comment



To customize the Pin it Button  (Configure the Button) Follow the Steps :


How to Place the Button :
 The Steps above position the button on bottom left of each post. To change the Button position , Do the following :
  • Position it on Top of the Post . Place the Button code , instead of after .
<data:post.body/>
  • Change Alignment:
Change the value of text-align property :Align Right : set it to right;Align Center : Set it to Center;
  • Save the template.
  • View your Blog. The Button Should Appear on Post page.
You Have Done !

Enjoy !


If you Find the Post Helpful Please Pin or Share.

Read More...

Pinterest Pin it Conter Button for Blogger Blog

4 comments

If you are unfamiliar with the Pinterest and Don't now about it, pinterest ia an Online pinboard that alllows users to share images they find over the web - By 'pinning' them on their boards. The i pinned images is like the Webpage or Blog post Giving chance to the Users to Visit the Source directly.

A pin button is button what  like button to facebook or tweet button to Tweeter, As it allows the users to share posts without leaving your blog. It also counted and displays how many time your post is shared over the Web.

Unlike Typical Pin it Button, Our Version Button Doesn't pre-select an image from the post, It displays all available images and let your readers to choose which image they like to pin it.

How to add this Button to your Blog :
(if you like to add this button to your blog with the other social media button Top/Bottom of your post, Follow this Simple Steps :)

  • Go to Design > Edit HTML (New interface : Template > Edit HTML)
  • Back Up your Blog Template.
  • Check the Expend Widget Templates checkbox.
  • Look for the Following data tag in your HTML. This is thae tag for post content:


<data:post.body/>


 Normallly there are two instances of the tag present in your template. Locate the First (from top) one.

  • Paste the following code immediately below (after) it:

<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='margin:5px 10px 5px 0; text-align: left;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
</div> 
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
}
</script>  
</b:if> 
<!-- Pinterest button End -->


The code is Made up of a combination of two Different codes - Pinterest pin it button and pinterest bookmarklet. Why a combination? Because the pin it Button code Pinterset simply doesn't work, at list not on Blogger, foer Now.


  • Save the Templet. 

You have Done !


You Can also like This too :


How to Customize the Layout of Pin it Button.

How to Add the Pin it Button as a  Widget.


Enjoy !


If you Find the Post Helpful Please Pin or Share.

Read More...