Removing Hyperlinks From Blogger Post Images

By default Blogger creates a link to the image whenever an image is uploaded to a Blogger post. Sometimes, however, you might want to remove the link to prevent the image from being clickable. A common reason would be to safeguard your image. If you are worried about your image being copied you can prevent it from appearing full size by disabling the link. When you remove the hyperlink off an image from your post, your post image won't be clickable anymore, preventing readers from accessing the larger version of the image.

If you are using a custom Blogger template, then you probably have noticed that few of the third-party developed templates does not supports Lightbox functionality, which causes images to be opened in a new tab window whenever they are clicked by the users. Since, Blogger use Picasa web album to host your blog’s images, so whenever user clicks on an image present on your site it ultimately takes them to a different destination, which causes increase in the bounce rate and decrease in the ad sales because your users are not converting they are coming from one end and leaving from the other.

Recently, one of our users asked us that How to Remove Hyperlinks from Post Images in Blogger? The easiest way to remove hyperlinks for post images in blogger is to simply revert to the HTML Tab in the blogger post editor and remove the hyperlink <a href>. However, what if you have to edit large numbers of posts? don't worry, we have prepared set of codes with CSS and JavaScript tweak, not HTML one to automatically remove links. Today in this tutorial, we will show you How to manually or automatically Remove Hyperlinks from single Post image or from Homepage page / Specific post / Specific page / or from all posts in blogger with step by step instructions and images.

Removing Hyperlinks from Posts Images

If you just want to disable the hyperlink from a single image in Blogger try this method. I have found that it removes the link but it will not reinstate it once removed so be sure you want to remove the link before you start otherwise you will need to reinstate the link manually. I suggest you backup before you start.

Removing Hyperlinks Manually / from Single Image

1. By Using Blogger Compose Editor Toolbar ( Easy ) 

Step 1. Login to your blogger account, then navigate to edit post ( From which you want to remove image hyperlink ).

Step 2. Make sure Compose is selected, then select the picture and then click on Link in Toolbar.

Step 3. Click on Publish / Update.

2. By Using Blogger Post HTML Editor

Step 1. Login to your blogger account, then navigate to edit post ( From which you want to remove image hyperlink ).

Step 2. Make sure HTML is selected, then Find the image hyperlink code.

Note : Their may be more than one Image hyperlink depends upon the number of images in post. Code may vary little because every image have different URL.

Code look like this :

<a href="https://4.bp.blogspot.com/-pqkPpEx7KNY/VxYXv655rRI/AAAAAAAAAmk/HCKXZFHvtCobFrpozByEUuclA7MAjEBYQCKgB/s1600/Vintage-Camera.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://4.bp.blogspot.com/-pqkPpEx7KNY/VxYXv655rRI/AAAAAAAAAmk/HCKXZFHvtCobFrpozByEUuclA7MAjEBYQCKgB/s320/Vintage-Camera.jpg" width="320" /></a>

Step 3. Now remove the hyperlink around the img tag ( Blue color code ).

<a href="https://4.bp.blogspot.com/-pqkPpEx7KNY/VxYXv655rRI/AAAAAAAAAmk/HCKXZFHvtCobFrpozByEUuclA7MAjEBYQCKgB/s1600/Vintage-Camera.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://4.bp.blogspot.com/-pqkPpEx7KNY/VxYXv655rRI/AAAAAAAAAmk/HCKXZFHvtCobFrpozByEUuclA7MAjEBYQCKgB/s320/Vintage-Camera.jpg" width="320" /></a>

Step 4. Click on Publish / Update.

Removing Hyperlinks Automatically From Post Images

Step 1. Login to your blogger account, then navigate to Template > Edit HTML.

Step 2. Click anywhere inside the code and search for following code ( CTRL+F ) :

</head>

Step 3. Copy and paste the following code just above it to disable Hyperlinks from :

• All posts

• Homepage

• All pages

• Specific post & page

<b:if cond='data:blog.pageType == "item"'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function() {
$('.post-body a[href]:has(img)').css({"cursor": "default" , "pointer-events": "none" , "-webkit-user-select": "none" , "-khtml-user-select": "none" , "-moz-user-select": "none" , "-o-user-select": "none" , "user-select": "none"})
.click(function() { return false; });
});
</script>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function() {
$('.post-body a[href]:has(img)').css({"cursor": "default" , "pointer-events": "none" , "-webkit-user-select": "none" , "-khtml-user-select": "none" , "-moz-user-select": "none" , "-o-user-select": "none" , "user-select": "none"})
.click(function() { return false; });
});
</script>
</b:if>

<b:if cond='data:blog.pageType == "static_page"'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function() {
$('.post-body a[href]:has(img)').css({"cursor": "default" , "pointer-events": "none" , "-webkit-user-select": "none" , "-khtml-user-select": "none" , "-moz-user-select": "none" , "-o-user-select": "none" , "user-select": "none"})
.click(function() { return false; });
});
</script>
</b:if>

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "URL-HERE"'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function() {
$('.post-body a[href]:has(img)').css({"cursor": "default" , "pointer-events": "none" , "-webkit-user-select": "none" , "-khtml-user-select": "none" , "-moz-user-select": "none" , "-o-user-select": "none" , "user-select": "none"})
.click(function() { return false; });
});
</script>
</b:if>

Step 4. Configuration for Specific post and page only :

Replace URL-HERE with the page / post URL. For example :

If your post URL is : http://www.howbloggerz.blogspot.com/2016/04/removing-hyperlinks-from-blogger-post-images.html
Then add only : 2016/04/removing-hyperlinks-from-blogger-post-images.html

OR

If your page URL is : http://www.howbloggerz.blogspot.com/p/write-for-us.html
Then add only : p/write-for-us.html


Step 5. Click Save Template.

Enjoy!

Now view your blog post images and try a click over it :), as it is impossible to have one global code that works for all templates. If it doesn't work on your template, leave a comment and I'll prepare one that will work for you. Stay Updated, Browse Howbloggerz! :)

Read more ...

How To Change Email Subscription Delivery Time For Blogger

If you were looking to change your google blogger feedburner email subscription delivery time for blog updates or To send recent / latest / newly published posts into yours followers inbox immediately or after few hours or Want To manage the auto-send email setting to prevent delay of day or several hours in email receiving or to receive posts email updates from your blog in real-time or To solve any other issue related to posts delivery schedule via email. Follow the below given step by step tutorial with images :

Steps: To Change Email Subscription Delivery Time

Step 1. Go to Feedburner, Login with your blogger account > Select your blog.

Step 2. Then navigate to Publicize > Email Subscriptions > Delivery Options.

Step 3. Change the setting and then Click Save.

Some Tips :

1. Make sure your the time in your Blogger settings is in YOUR time zone. This will throw the delivery timing off if it isn’t.
2. Make sure when you schedule a blog that is timed BEFORE the scheduled Email Delivery time in Feedburner.
3. This screen is also where you can DEACTIVATE sending emails from Feedburner all together if you still want to keep your account active but just want to stop email service.
4. The setting to schedule delivery of new posts to email subscribers does not allow for immediate delivery, but asks you to choose a two hour window. Therefore you can schedule/publish your post few hours before delivery time to deliver it faster.

That's it

Now your subscribers will receive posts updates via email in your scheduled time. For any issues related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)

Read more ...

Show At Most Posts Setting Not Working In Blogger

Many users were facing problems related to topic ' The older posts were missing from their blog homepage but they were actually not deleted and still exist in posts list ' or ' The number of posts per page were not matching up with the setting of number of posts per page or that should be shown and missing posts were shown in link "older posts" ' or ' The number of posts on main page / Show at most posts on the main page setting is not Saving properly.

These problem were caused due to the large length of posts in your blog due to which blogger was not able to set preferred numbers of posts per page ( Approx limit  155,000 characters / page for posts ). and therefore shifts your posts to next page ( Older Posts link ).

To solve this problem Problem you need to add Jump Break in each post to summaries your posts by maintaining the length your posts without shorting / editing posts. This will add link to full post after few defined lines.

To learn to add jump break follow the given step by step tutorial with images :

Steps : How To Add Jump Break

Step 1. Login to your Blogger account, then click on New Post or Open existing post.

Step 2. After few lines ( Summary of post ) insert jump break using Blogger Post editor.

Step 3. Click publish / Update.

Post Preview after adding Jump Break

That's all

Now you can add Jump Breaks in each post either new or old which will also solve the above given problems. For any issues related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)

Read more ...

How To Backup And Restore Blogger Posts And Template

Has fear of losing data of your blog posts? Must backup your All blog posts to save your years of hard-work or to Import or Export your blog posts to other platform.

Thinking to make any changes in your blog template? Remember to backup your Template each time before it to preserve your blog design and layout if you ran into any problem in your edit.

So, If you want to backup and restore your blogger posts and template to prevent inconvenience to your users. Follow the given step by step tutorial with images :

How To Backup And Restore Template : 

Step 1. Login to your Blogger account, then go to Template > Backup / Restore.

Step 2. To Backup Template: Click Download full template and save the xml file.

Now you have Backup of your Template

Step 3. To Restore Template: Click Browse... , select the xml file ( Backup file ) and Click Upload.

Now you have successfully Restored your Template.

How To Backup And Restore Blogger Posts :

To Backup Blog content :

Step 1. Login to your Blogger account, then go to Settings > Other > Back up content.

Step 2. Click Save to your computer and save the xml file.

To Restore Blog content :

Step 1. Login to your Blogger account, then go to Settings > Other > Import content.

Step 2. Solve the  CAPTCHA ( if any ) Click Import from computer and select the xml file.

That's it !

You have successfully backup and restored your blogger Template and content included posts, pages and comments. For any issues related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)

Read more ...