Search

About

Showing posts with label BLOGGER WIDGETS. Show all posts
Showing posts with label BLOGGER WIDGETS. Show all posts

How To Opening External Links in a New Window Blogger

Saturday, 26 October 2013

Opening External Links in a New Window

Welcome to a the first of a"mini" series of posts about the nitty gritty of this blogging malarkey! You may have noticed a few tweaks and changes to the look and functionality of this blog of late. Well, recently I've been delving into some html coding, & addressing all the niggly little things that have been bugging me about my blog. Some of it to do with functionality; some of it purely aesthetic. Anyway, you know how much I like to share my little eureka moments with anyone who'll listen; and I've had a few of you ask about different changes that I've made too.  So if, like I did, you have little niggles about your own blog, but feel a bit glazed over by html, then hopefully I can help show you how quick, easy, (and strangely!) fun, it is, to get the tool kit out and start tinkering with the insides of your blog! (Seriously, if I can do this, anyone can!)

One niggle for me is the way Blogger automatically opens all links in the same tab. So if I've got a link to another site in one of my sidebars, readers will be directed away from my blog and onto, let's say, Karen's Sewlutions post. Now I think people should click on the links in my sidebar, otherwise they wouldn't be there! But I don't want it to be at the expense of my blog. I want readers to hang around and have a look around my blog. They're less likely to do that if Blogger shuts down my page in order to send them to another blog that I've linked to. Ideally I want Blogger to keep my page open, then open any external links, in a new tab. (If you're not sure what I mean, then click on Karen's Sewlutions button in my sidebar. Watch, and it will open up a new tab along the top of your screen, with this page still open. Sorted!) This is how to get Blogger to do that. It involves adding some simple html code to a specific place in your template. It's not as geeky as it sounds. Promise!

1) Click on "Template" in your dashboard. Click on "Backup/Restore". This will download a copy of all of the coding that goes to make up your blog, and save it in a file on your computer. It's wise to do this after every few adjustments you make to your blog template. Then click on "edit html"


2) This will open up all the geeky gobbledy gook (aka HTML) that is behind your blog; and how it looks and functions. Within the first few lines you'll find a "<head>" tag. As highlighted in blue in the screenshot below. Click right next to it, on the same line...
3) Copy the code snippet below...
12345678910111213

<!-- start of external links new window -->



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>



 <script type='text/javascript'>



  



$(document).ready(function () {          



 



                $(&quot;a[href*=&#39;http://&#39;]:not([href*=&#39;&quot;+location.hostname+&quot;&#39;]),[href*=&#39;https://&#39;]:not([href*=&#39;&quot;+location.hostname+&quot;&#39;])&quot;).attr(&quot;target&quot;,&quot;_blank&quot;).attr(&quot;title&quot;,&quot;Opens new window&quot;).addClass(&quot;external&quot;);



 



    });



 



    </script>



 



<!-- end of external links new window -->
view rawgistfile1.txt hosted with ❤ by GitHub


4) Then paste it right next to the "<head>" tag....

5) Click "save template" and you're done!

From now on, any links to external sites that you put in any of your posts OR your sidebars/footers etc, will open in a seperate window. Any links to other parts of your blog, will open in the same window. So your readers can go visit the sites you recommend, but still leave your blog open to come back to when they're done!

Told you it was easy ;) (and secretly quite satisfying. Or am I just sad?!)



Posted by Unknown at 07:25 0 comments
Labels:

New Floating Social Sharing Bar Widget for Blogger / Blogspot

New Fixed / Floating Social sharing Horizontal Bar Widget for Blogger. This widget is requested by one of way2blogging reader, and thanks for requesting this new widget for you as well as for our Readers. :)
Coming to this widget, it is horizontal social sharing bar widget with counter and is displayed in above the post body. while you scrolling this horizontal social bar is fixed to the top of Post. which will give to readers to share the page immediately by the floating bar. This widget comes with Twitter, Facebook, Google plus, Pinterest, StumbleUpon and Digg buttons.

HOW TO ADD FLOATING SOCIAL SHARING BAR WIDGET?

First,
  1. Login to New Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
  2. Select the Template > Click on Edit HTML > Proceed
  3. Check/Tick the Expand Template Widgets checkbox
Just follow 3 Simple steps,

THE JQUERY PLUGIN!

As always, it is jQuery based widget, and your blog must have the jQuery plugin. if your blog already have a latest jQuery plugin, then Ignore this step and directly follow the Second step.
If not add the below snippet code before </head> tag
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

THE SOCIAL SCRIPTS

This Code contains jQuery calls and Social button scripts and styles, and those are loads only in Post Pages which will decrease, load time when you on home or other pages. ;)
Add the below snippet code before </head> tag
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
 #w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
 #w2bSocialFloat td{padding:4px;margin:0;border:none;}
 #w2bSocialFloat td iframe{max-width:82px;width:82px !important;}
 #w2bSocialFloat.w2bFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Set the Top Offset
$theOffset = 0;

jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
/*]]>*/
</script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-blogger-pinit.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
 // Twitter
 (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
 // Google + (plus)
 (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
 // Stumbleupon
 (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
 // Digg
 (function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})();
/*]]>*/
</script>
</b:if>

ADDING SOCIAL BUTTONS WIDGET

Let’s add the final Social horizontal bar widget code.
Add this code before <data:post.body/> tag.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="w2bSocialFloat" class="w2bSocialFloat">
<table  width="100%" class="w2bSocialFloat">
 <tr>
  <td>
   <a href="https://twitter.com/share" class="twitter-share-button" expr:data-url="data:post.url" expr:data-text="data:post.title">Tweet</a>
  </td>
  <td>
   <iframe expr:src="&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&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&quot;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
  </td>
  <td>
   <div expr:id="&quot;w2bPinit-&quot; + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton"> 
    <data:post.body/>
    <script type="text/javascript">
     w2bPinItButton({ 
      url:"<data:post.url/>", 
      thumb: "<data:post.thumbnailUrl/>", 
      id: "<data:post.id/>", 
      defaultThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmwBEb6itDzUhZEzGw-PlEeF6QYK0fvTwp32m-nGOEgo0sG0nI_32LtpbbFQDuET4n38bPDqROugLSWXg7jqEDmUhbcy-aZ-hgntTRXPpNMBh26_BdJLDVuLBP4INbaRz5YXjZIfsnKfQt/s1600/w2b-no-thumbnail.jpg", 
      pincount: "horizontal" 
     }); 
    </script> 
   </div>
  </td>
  <td>
   <div class="g-plusone" data-size="medium" expr:data-href="data:post.url"></div>
  </td>
  <td>
   <su:badge layout="1" expr:location="data:post.url"></su:badge>
  </td>
  <td>
   <a class="DiggThisButton DiggCompact"></a>
  </td>
 </tr>
</table>
</div>
</b:if>

SAVE TEMPLATE!!!

Save the template and check your blog post pages, a working and awesome jQuery based floating social horizontal bar on your blog.
Hope this widget is helpful to you, Please leave your comments, and share this Widget.
Thanks to Raghav! for requesting this simple and awesome widget.

UPDATE :-

1. I FOUND THE TAG THREE TIMES?

If you found the <data:post.body/> three times, then you might using the Auto readmore hack,
Solution:
Search for below two lines
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
Place the Widget code in between the two tags.

2. HOW TO CHANGE THE BACKGROUND COLOR OF HORIZONTAL BAR?

You can change the background color of Horizontal bar.
Solution:
In the Second step (The Social Scripts), search for
background:#FFFFFF;
and change the #FFFFFF with your own Hex Color.
Thanks to All.

CHANGELOG :

18/06/2012
– Updated the Script for showing the floating bar only in Post area section.
Note: This should works in 95% of blogs. because Blogger template designers should use the Post Class as.post.
19/06/2012
– Added the Offset option.
To change the Offset search for $theOffset in the Second step Code and set the value. Initially it is 0(Zero).
Posted by Unknown at 07:16 0 comments
Labels:
Subscribe to: Posts (Atom)
 

Pages

Follow me on Google+

Powered by Blogger.

Blogroll

Followers

Most Reading

Sidebar One