How Place a Linkedin Buton In Each Post

LinkedIn (Photo credit: Christopher S. Penn)

With this post I want to break the ice and initiate us into another social network, it is Linkedin. It is oriented to formalize a network professional and currently has over 135 million registered users in over 200 countries.
This new button will allow who we visit share the post with your professional network on Linkedin.

You probably already know this network, I from here I invite you to take a step further and appreciates the opportunity to create your own profile on Linkedin where you can enlist your resume, places I've worked and ultimately surround yourself with possible professional contacts to find new jobs and career opportunities.

Steps to place the button "Linkedin" on each blog

    Step 1. Access the HTML editor
        Go to "Template Tab"
        Make a backup copy of the template by clicking "Backup"
        Click on the "Format Template"
     
    Step 2. Find the following code in your template:
        Browser Use the form by pressing Ctrl F or Ctrl B (Mac ⌘ ⌘ F or B) and look for this text:
            .To place the button after the Post: post-footer-line post-footer-line-1
            .To place the button on the header of the post: post-header-line

    Step 3. Copy the following code Linkedin Button

    src='http://platform.linkedin.com/in.js' <script type='text/javascript'/>

    expr:data-url='data:post.canonicalUrl' data-counter='right' <script type='IN/Share'/>

    Step 4Paste the code just below the line found in Step 2.
    Step 5. Save the template and view the blog


For more information on this button and its variants refer to the official website Linkedin. In my case I chose the one with the counter clockwise. If you prefer to change the counter above the highlighted in red with the word top.

You may like me you take a surprise that some of your post already been shared on this network ... thanks!

We also recommend placing the button "Like Facebook" button "Google+" and button "Twitter"

How To Place A Sticky Bar With Facebook Like Button

The previous version of sticky were well entertained and some of you asked how to add Facebook like button and Google Plus button to the stickybar. If you have already added the sticky bar then you just need to make few changes to your old code.

Only step#6 is different else all styling and HTML is the same which we used in our previous tutorials else you can try these new codes from start and delete the previous one.  Stickybar is just a custom version of hello bar but it has no Ads and can easily be styled and customized to blend your blog template.

 Since it is always better to have your own custom widgets therefore we designed this easy bar which sticks to the top of your blog or website to grab the attention of all visitors. Both these social plugins would help you increase your fan following. The Facebook like button will be linked to your fan page so that any like may turn out into a Fan. Lets get to work then!


Add Stickybar to Blogger


Follow these easy steps:

1. Go To Blogger > Design > Edit HTML
   
2. Backup your template
   
3. Search for this
   

]]></b:skin>

   4.  Just above it paste the following CSS code,

/*Stickybar*/
#mbt_bar{
background:#0080ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhINBPA6PD1IzSMNUZiEjIPJw8YMo99C7bmyKz5BG-_o1fxkeVuTlpMuj-0Aw38sjzUEWWSeJu7E0GQE0ko5yCvTjLVBCEx7qcIa37Gz5kpK4FJqpHEWzFAaFPsngmwUJuh2L9R0aqwDTI/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:3px 0 0 0;
border-bottom: 1px solid #888888;
  -moz-box-shadow: #666666 0px 1px 3px;
  -webkit-box-shadow: #666666 0px 1px 3px;
  box-shadow: #666666 0px 1px 3px;
  z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
color:#fff;
font-size:12px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
}
#mbt_bar a{
text-decoration:underline;
color:#E2E504;
}
#mbt_bar a:hover{
text-decoration:none;
}
#mbt_bar p {margin:0; list-style:none;}
#mbt_bar img {vertical-align: middle;
      margin-right: 6px;}

Next search for </head>   and paste the following Javascript code just above it

<script type='text/javascript'>
//<![CDATA[
var mbt_arr = new Array();
var mbt_clear = new Array();
function mbtFloat(mbt) {
mbt_arr[mbt_arr.length] = this;
var mbtpointer = eval(mbt_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mbtsrc = document.all? document.all[mbt] : document.getElementById(mbt);
this.mbtsrc.height = this.mbtsrc.offsetHeight;
this.mbtheight = this.cmode.clientHeight;
this.mbtoffset = mbtGetOffsetY(mbt_arr[mbtpointer]);
var mbtbar = 'mbt_clear['+mbtpointer+'] = setInterval("mbtFloatInit(mbt_arr['+mbtpointer+'])",1);';
mbtbar = mbtbar;
eval(mbtbar);
}
function mbtGetOffsetY(mbt) {
var mtaTotOffset = parseInt(mbt.mbtsrc.offsetTop);
var parentOffset = mbt.mbtsrc.offsetParent;
while ( parentOffset != null ) {
mbtTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mbtTotOffset;
}
function mbtFloatInit(mbt) {
mbt.pagetop = mbt.cmode.scrollTop;
mbt.mbtsrc.style.top = mbt.pagetop - mbt.mbtoffset + "px";
}
function closeTopAds() {
document.getElementById("mbt_bar").style.visibility = "hidden";
}
//]]>
</script>

   Then search for <body>  and just below it paste the following HTML code

<div id='mbt_bar'> <span style='padding-right:5px; float:right'> <img align='absmiddle' border='0' onClick='closeTopAdsundefined);return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio4PMTR-rxCpW9YuAS0dD5TghzyOgEqB9USkhpeA2CH3eFCU_VFA77GjCwFMim0DKHPz9NV4oKWg6U-7UhQmXRX2D4bl0lLRvr6kZEscdJ0gbGCBN-Q6I3x_-hsWc_tMvB_QbWT4rd3AM/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span><div style='float:left; padding-left:10px;'>Stickybar with social Plugins</div> <div style='float:right; padding-right:0px;'> <p style='font:bold 12px arial; float:left; margin:5px;'>Liked us?</p><iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Ftrucosdeblogger&amp;send=false&amp;layout=button_count&amp;width=80&amp; show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21' style='border:none; overflow:hidden; width:80px; height:21px;'/> <g:plusone href='http://tricksblogspot.blogspot.com' size='medium'/> </div> </div>

You can write your message, announcement, anything you like instead of that purple text.
Replace blogger tricks with your Facebook Fan Page Username  and replace our blog link with yours.
    Note: Skip this step if you have already added google+ button somewhere already in your blog.
Paste the following code just below ]]></b:skin>

 <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

 8. Save your template and you are all done! Visit your blogs to see it fixed at top just perfectly