Welcome to the tech blog copacopi

Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts

How to make links open in new windows for Blogger blog?

If you design your blogs with lots of links to other blogs and web sites, you probably like to make the links to the other blogs and web sites open in a new browser tab or window (depending upon reader preference). That helps with reader retention (for you), and increases convenience (for your readers).

Image and video hosting by TinyPic

Unfortunately, in all of the Blogger GUIs, there's no selection for "Make links open in new window". If you want all links in your blog to open in a new window, you can do this with a simple template change as described below. If you want specific links to open in a new window, you will have to manually code each link individually.

To make all links open in new window is amazingly simple. Just sign into Blogger DASHBOARD > DESIGN > EDIT HTML to open template editor

Use keyboard shortcut ctrl+F to find <head> and immediately after that, add a single line
<base target='_blank' />

so that it become

<head>
<base target='_blank' />


Save the edited template and all links in your blog will now open in new tabs or windows.

If you prefer selective links not to open in new window/tab but to open in the same window, as you have now, add the attribute target="_self" for those links you want to open in the same window/tab.

Blogger who have multiple internal links, might not find the presented solution as acceptable since they might not like the idea to open ALL links in a new window, or to edit each link manually. The target is open in the new window just external links from your blog (what happens if the user clicks on your archives, or on the title, or on comment links, or on a javascript link?)
Here is a vanilla javascript solution, that you want to paste into your template just before the end of the body (if you're old-style template), or paste into a javascript widget:

Replace XXXXXX with the appropriate URL prefix.

<!-- code for turning all non-blog links to new page links -->
<script type="text/javascript" language="javascript">
   var arr = document.getElementsByTagName("a");  //get all links in the page
   for(var i = 0; i < arr.length; i++)
   {
      if(arr[i].href.indexOf("XXXXXX.blogspot") < 0 //not links that are 'inside' blog
         && arr[i].href.indexOf("javascript:") < 0) //not javascript links
         arr[i].target = "_blank";
   } 




Read More

4 Free Online Services to Scramble your Email Address and Prevent Spam

In today's underground culture of SPAM, the most used technique to harvest emails is by looking at websites.  Spiders run through the web collecting any code that has a name, an "@" sign, and a domain at the end. Thus, the SPAM lists are created from your own attempts to do business on the web.

So, by having your email address in a readable format you will eventually be hit by an email spam bot. Their function in life is to trawl every website looking for email addresses it can add to its database, with the sole purpose of spamming you at a later date. So what do these bots look for? Well firstly it might look for mailto: links. Alternatively it may look for email syntax xxx@xxxx.xx.xx for example.


Is there a simple solution to post your contact email address on the webpage, but still avoid the address capturing by unfriendly harvesters? Yes, it is. You can use a script encrypting email link on the webpage to hide them from spammers.

No, you do not have to be a software engineer to generate the code for each of your email addresses. You can find the appropriate generators online to be used for free. Here are selected links for you:

  1. Blogger Buster Email Link Scrambler
To use this email scrambler, simply enter your email address in the box below and type the link you would like to display to your visitors (eg: "Email Me"). When you click the "Scramble Email" button, you will be presented with javascript code which you can copy and paste into your blog template where you would like the email link to be displayed (eg: in an HTML/Javascript widget in your sidebar).

  1. uPromote Email Address Scrambler
The uPromote Email Address Scrambler turns ordinary text email addresses into ASCII code, causing email address harvesters to bypass real email addresses. To the human eye, an email addresses remains intelligible, while automated harvesters are duped into avoiding the code.

  1. WebDevTips Email Scrambler
Enter your email address into the appropriate field. The generator compiles a new string based on your email address, replacing the @ and . characters. A script is then created for you to cut and paste on your site which generates a mailto: link with javascript. Both your real email address and mailto: link will be invisible to the bots - protecting you from spam.

  1. DynamicDrive Easy Email Scrambler
To encrypt an email address, simply modify your existing "mailto:" link on the page with a specifically crafted email address instead, and the script modifies it to become valid for humans. Compatibility wise, the script works in all JavaScript enabled browsers, and even for those with JavaScript disabled, the resulting email link still works to a degree that allows the visitor to email you.
Read More

How to disable text selection on Blogger blog

In one of the previous publications, we presented a way to disable right click on the page of your Blogger blog to decrease the copyright violations from your readers “borrowing” your content for their own purposes. To go further in your content safeguarding efforts, you can make the next step, disabling text selection on your page entirely.

This hack was created by Dynamicdrive as well in the form of Javascript, and is also applicable to those bloggers who don’t like their content copied by others. If this concern is on top of your priorities list, then Copy the following code and Paste it to your blog template:


<script type="text/javascript">

/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false} How to disable
target.style.cursor = "default"
}

//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"

</script>
Read More

Display Recent Posts on your Blogger Blog

Recently, I have found an opportunity to display certain amount of the recent post of the blog on sidebar of the Blogger hosted blog. If your reader came to the particular article, he might just miss the opportunities to review your other content. So, the developed widget will help you capturing attention of your reader to your other posts.

"Display 10 recent posts" (10 posts represent just default setting, but you can alter the number as you like) widget is a free and can be easily embedded on your Blogger blog. You do not need to know scripting to do so. Just follow the simple steps given below.

Step 1: Go to Add and Arrange Page Elements page.
Step 2: Click Add a Page Element.
Step 3: Choose HTML/JavaScript
Step 4: Copy the following code to the ’HTML/JavaScript’ element.
Step 5 (optional): The red highlight code (var postshow=10) is the number of posts you want to display (Default is 10).
Step 6: Change the default address (http://yourblogaddress.blogspot.com/) to your blog address.
Step 7: Save your changes and review your blog.

Code to be copied from the developer website: http://kanlab.blogspot.com/2007/09/display-10-recent-posts-on-your-blog.html
Read More

NicEdit - Comments Format Enhancement

Comments left by your readers on your Web Site or blog give produce a perception of the site popularity and legitimacy. Therefore, comments are generally encouraged, with exception of junk and spam, that can be successfully blocked by the modern filtering.
NicEdit is a very handy solution that helps, among other applications, to bring more user comments. It is done by significant enhancement of the comments formating capabilities.

NicEdit is a Lightweight, Cross Platform, Inline Content Editor allowing easy editing of comments or any web site content as a matter of fact on the fly in the browser. This Javascript utility can be easily integrated in any site with minimal impact while providing visitors an effective means to express themselves in rich text, making the standard text areas completely obsolete and boring.

NicEdit was developed by Brian Kirchoff and is free to use for any purpose under the MIT license.
Read More

© Copacopi, AllRightsReserved.