Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Sunday, September 25, 2011

Open Blogger Picture Gadget Links in New Tabs

Spoken by at 10:13 PM

When you upload a picture to Blogger's picture gadget, you have the option to include a link to that picture. By default, the link loads on the same tab where the gadget is located - thus shifting your reader away from your domain. The tweak in this page will show you how you can make the link open on a new tab. Let's cut to the chase shall we?

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Expand Widget Template

If you're using the new Blogger interface: Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template

Next, find and delete the following lines:
<b:if cond='data:link != &quot;&quot;'>
        <a expr:href='data:link'>
The lines to be deleted:


Step 2:

Paste the following lines in place of the deleted lines in Step 1:
<b:if cond='data:link != &quot;&quot;'>
        <a expr:href='data:link' target='_blank'>
The new lines in place:


Click on 'Save' when you're done.

Note: Repeat Step 1 and 2 for x number of times - where x is the number of picture gadgets in your blog. For example, if you have 3 picture gadgets, the above code will appear 3 times in your template, and you need to make modifications to all 3 of them.

That will be all folks. Cheers and God bless.
Labels:

20 comments:

  1. destressthisDecember 22, 2011 at 6:21 AM

    Hi! Thanks so much for all of your amazing tuts for tweaking the new Dynamic Views on blogger - I love the look, but can't live without a little for customization ;) What I am trying to figure out now, however, is how to do the opposite as this post! For some reason, if the page link on the menu bar is to a WWW address (I have linked my old labels, since the widgets aren't up and running yet), then it opens in a new tab. So if you go through and click the different labels, it opens one tab after another, but all with the same header "CANADIEREN", so you can't tell which is which without going through them one by one. It drives me nuts, so I can only imagine that it is annoying my readers!

    I was wondering if there is any way for these label tabs to open in the mainframe window + the opened menu item in bold, in the same way as the direct page links (in my case the "About" and "Archives" tabs)? I like that the Bloglovin' link opens a new tab since it is offsite, but the rest would be great if they opened below in the mainframe! Any help would be very greatly appreciated. You can check out my site here: http://canadieren.blogspot.com

    Thanks! Cheers, Erin

    ReplyDelete
  2. YoboyDecember 24, 2011 at 1:07 PM

    @Erin: Technically, it is possible to open a page under the same tab - it is as simple as replacing the word 'TARGET' (in the tweak above) to 'SELF'. But in practice, this won't be possible in Dynamic Views. Blogger only allows users to make CSS tweaks, and unfortunately, tab-loading is an HTML tweak. As of now, there's no way for us to alter the way a new tab loads. Sorry I can't be much more of a help.

    Cheers.

    ReplyDelete
  3. Marta MadiganFebruary 27, 2012 at 11:58 PM

    Thank you, Erin! You solved my problem.

    ReplyDelete
  4. JankaApril 12, 2012 at 8:05 AM

    Thank you so much! Been searching for this for a while!

    ReplyDelete
  5. Lucy PromSeptember 25, 2012 at 5:38 PM

    Hi Yoga!

    Great site! Do you know how to make images/pictures when clicked on appear in lightbox with the dynamic view turned on? I know lightbox view is disabled for dynamic view but I don't like how it looks now when a viewer clicks on an image. Anyway we can still get lightbox view to still work? Or another way to get the clicked-on image to appear in an overlay or in another tab?

    Thanks!

    Blog: lucelandings.blogspot.com

    ReplyDelete
    Replies
    1. YoboySeptember 26, 2012 at 4:06 AM

      Hi Lucy,

      Unfortunately, there isn't any other way to load images that I am aware of, except for the default method. Third party lightbox tweak (for normal templates) runs on javascript, and javascripts aren't compatible in dynamic view as the template itself is running on its own scripts. I'm sorry I couldn't be much more of a help. I'll definitely post something if I ever come across a way to implement lightbox in Dynamic View.

      Cheers :)

      Delete
  6. ThePracticalNurseNovember 3, 2012 at 8:56 PM

    hi, I can't seem to be able to find the codes in my blog

    :(

    i did expand the widgets but they can't be found. do you think it got changed?

    ReplyDelete
    Replies
    1. YoboyNovember 4, 2012 at 7:35 PM

      Hi Brian,

      I've just re-added a new Picture gadget to one of my test blogs, and I could find the code in my template. It is very much in there.

      Hmm, try searching for the following line instead, and it should bring you to the right portion of code:

      <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;'

      Let me know how it goes.
      Cheers..

      Delete
  7. JulieMarch 1, 2013 at 1:56 PM

    Just want to say thank you so much for this! I've been trying to figure this out ever since I first started my blog, so thank you! *hugs*

    Do you know if it's possible to make the link open in a popup window instead of a tab? I know how to script it so normal links do that but I'm clueless as how to do with my widget images...or even if it's at all possible. Thanks! x

    ReplyDelete
    Replies
    1. YoboyMarch 4, 2013 at 3:28 PM

      I think we need to use some kinda script to get it done. What script are you using for your normal links? Perhaps we can tweak it to make it work for your widget images as well.

      Cheers :)

      Delete
  8. UnknownMarch 5, 2013 at 4:42 AM

    Hey there! I made a custom HTML/JavaScript gaget for the sidebar. It is a nav bar using icons. Well I want each link to open in a separate tab, but can't figure out where to replace the code you show with the code you provide. I hope you can help.

    ReplyDelete
    Replies
    1. YoboyMarch 6, 2013 at 12:03 AM

      Hi Courtney,

      I need to have a look at your code to see how things work. The Blogger comment system isn't exactly code-friendly (you can't paste most codes here). Do you mind starting a question thread at Blogger's official Help Forum, and get back to me with its link? We can continue our discussion there.

      Here's the link to the forum:
      https://productforums.google.com/forum/#!categories/blogger

      Cheers :)

      Delete
  9. SazMarch 5, 2013 at 5:24 PM

    Thanks Yoga, a great help! I found though that the first line of code didn't need to be altered.

    Anyway, working great now, cheers!

    ReplyDelete
  10. chrisAugust 8, 2013 at 11:43 PM

    Amazing! It really works! Thanks!!!

    ReplyDelete
  11. Viajero465January 23, 2014 at 2:55 AM

    It works! Thank you!

    ReplyDelete
  12. OC Mobile Recording StudioSeptember 29, 2014 at 7:11 PM

    I searched for a week for a solution to this problem and you're the only person who had a workable answer. Thanks so much! The blogger forums are literally useless.

    ReplyDelete
  13. Pelagie deParisFebruary 5, 2016 at 7:04 PM

    That was great, and it worked just fine, even for a rookie like me. Thanks!

    ReplyDelete
  14. Mary Vivanco Entrepreneurship OnlineApril 8, 2017 at 7:44 AM

    This works wonderful. Thank you!!

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.

Subscribe to: Post Comments (Atom)