Showing posts with label blogger. Show all posts
Showing posts with label blogger. Show all posts

How to Increase Blogger Blog Speed By DNS Prefetch or PreConnect

I will show you How to Increase Blogger Blog Speed By DNS Prefetch or PreConnect to make your Blogger site load faster than Usain Bolt. This DNS Prefetch can also be done on WordPress; I will focus more on the Blogspot aspect on this post.


According to PCMag.com, DNS. (Domain Name System) is the Internet's system for converting alphabetic names into numeric IP addresses. For example, when a Web address (URL) is typed into a browser, DNS servers return the IP address of the Web server associated with that name. In a nutshell, DNS stands for Domain Name System.

DNS Prefetch or Preconnect is a way to resolving the DNS of a specific domain. Most times, we used external image/js/css links in our site and it's effect on our web page loading time. By using DNS Prefetch, we can reduce the external link loading time. In this tutorial, we will learn how to add DNS Prefetch in our blogger site to speed up our site to the best speed rate.

How to Increase Blogger Blog Speed By DNS Prefetch or PreConnect

The recent updates on HTML 5 makes it easy to speed up a website loading speed by performing a DNS Prefetch on it. This methods works on all websites. Complete guide to install this script on your blog below;

Steps to Activate DNS PreFetch on Blogger


  • Login to your blogger account
  • Go to Template> click Edit HTML 
  • Click anywhere inside the code area
  • Press CTRL+F from your keyboard
  • Search following code;
  • Now, place this code below it.
































  • Save the template. All DNS Prefetch lines of codes are included.

How to Test Your Blogger Site Speed After Adding DNS Prefetch Scripts

I believe you've added the codes correctly? We need to test our website performance (Loading Time) now. Since we are not sure if the domains listed in the DNS prefect are working preporly, we need to test the performance with online tools.

There are many third party used in checking site site speed, but I have two most popular DNS Checker that shows accurate and real time results...... List goes;
  1. Tools.Pingdom.com (https://tools.pingdom.com/)
  2. WebPagetest (http://www.webpagetest.org/)
I tested my domain using PingDom and the result is pretty awesome after adding the DNS prefetch script on my blog.


You can now install the script and test your blogger blog loading speed on PingDom. This is one of the best way to speed up a blogger blog in less than 15mins.

Final Words:
This could be the next big thing you need to do on your blog today; it will help you to reduce bounce rate and increase page views on your blog. It also boosts your SEO - Google loves and cherish fast loading blogs.

Kindly share this post to others.

How to Hide Alexa Widget/Make Alexa Rank Invisible

Many bloggers always like to display their blog rank using the official alexa rank widget. But few bloggers like making the alexa rank widget invisble or hidden on their blogs. It can be added within a twinkle of an eye to a blog whether on wordpress or on blogspot platform.

hide alexa rank widget on blogger


You can hide alexa rank widget on your blog but what's the essence of adding the code if you can't show it to your readers. They are no proof that it increases your rank when hidden or invisible. But many bloggers believe it works like this.

Also read: JiJi.ng - No.1 and Best Classified Website in Nigeria

Alexa rank widget is used to determine how popular a blog/website is in the world. Alexa rank widget can also be used in SEO aspects to determine the backlinks to a blog/website. Nevertheless, it also helps to check the ranking keywords of your blog and its percentage of appearance.

All the same, Alaxe widget is not the best tool to check website ranking because of its  factors of ranking but it's one of the oldest tool used in ranking websites and owned by Amazon.(company found in 1996)

Also read: How to Get Google Adsense Account After Being Banned

How to Add Alexa Invisible Widget:

To add the invisible alexa rank widget, go to Blogger >> Layout >> Add Widget >> HTML/JavaScript and add/paste this code below;

 <a style="opacity: 0;" target="_blank" href="http://www.alexa.com/siteinfo/w3howto.com"><script type='text/javascript' src='http://xslt.alexa.com/site_stats/js/s/a?url=http://www.w3howto.com'></script></a>
Note: Change w3howto.com to your blog/website url 2 times.

Save the widget and save the arrangement. It's done. Refresh your website to confirm it's hidden.

 Also read: 2016 Jumia Mobile Week Reloaded - 100% Discount on Android Phones and Tablets


Final words:
 This is the easiest way to make alexa widget invisible on blogs. Many bloggers crave to have a good alexa rank, I will show you how to bring down your alexa rank with some easy trciks on my next post. Kindly sunscribe to my feed below.

Hope it works for you. Use the comment box below to add your suggestions and thoughts over this topic.

How to Add Facebook Like Box into Blogger Blog

Facebook fan Page are a great way to promote your blog or website and facebook like box is widely used social plugin from Facebook developers. This facebook like box will help your visitor to become regular reader just by clicking like button. So that this box will increase number of your facebook fans. To get this widget follow below procedure,


  • Simple fecebook like box

Simple Facebook Like Box for Blogger
Let me explain how to add simple facebook like box.

1. Login To Blogger Account.
2. Click Layout > Add A Gadget.
3. Select HTML / Javascript > Paste The Following Code In content Box.

<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/ThingsGuide/281417998619583&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&" style="border:none; overflow:hidden; width:292px; height:258px;" >

Replace my facebook page URL  with your page URL, Change Width And Height According To Your Template.

4. Now save and you are done.


  • Floating facebook like box for Blogger
Floating Facebook Like Box for Blogger

Now I came up with new tutorial for adding floating like box to blogger.

  • Adding Jquery Plugin
1. Go To Dashboard > Template > Edit HTML
2. Search for </head> teg in your template and just below it paste the following JQuery code (You can ignore this step if Jquery Link is already added in your template)

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

  • Adding Widget Code
1. Go to Layout > Add A Gadget
2. Select HTML/Javascript
3. Paste the following code inside it,
<script type="text/javascript">
 //<!--
 $(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
 //-->
 </script> <style type="text/css"> .w2bslikebox{background: url("http://2.bp.blogspot.com/-TNZHLj4Kwkw/UA-vZcFs0WI/AAAAAAAAAe0/vHQnokct5jU/s1600/FloatingFB.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 300px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .w2bslikebox div{border:none;position:relative;display:block;} .w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .w2bslikebox span a{color: #808080;text-decoration:none;} .w2bslikebox span a:hover{text-decoration:underline;} </style><div class="w2bslikebox" style=""><div>
 <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fpages/ThingsGuide/281417998619583&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=292" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 292px; width: 245px;background:#fff;"></iframe><span><a style="font-family: arial, sans-serif; font-size: 9px; color: #999;" href="http://www.jobsmag.in" target="_blank"> JM</a></span> </div> </div>

4. Replace pages/ThingsGuide/281417998619583 with your Facebook fan page URL.
5. Now save your template and you are all done!

Visit your Blogs to see it floating at the right side of your webpage.