Hiển thị các bài đăng có nhãn Blogger Tips And Tricks. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Blogger Tips And Tricks. Hiển thị tất cả bài đăng

Thứ Bảy, 13 tháng 10, 2018

How To Remove Bundle.css And Blogger Javascript From Blogger

       1 comment
widget css bundles

This post is similar to How To Eliminate Render-Blocking Scripts And CSS From Blogger and in this post I am going to tell you how to remove bundle.css from blogger which is an external styling by blogger and is the default CSS for every blog but if you have your own CSS style for your blog then you don't need it and its doing nothing but overriding your custom CSS and slowing down your blog. So in this short post I will tell you how to remove bundle.css and other CSS styling and javascript by blogger so that these scripts don't slow down your blog.

CAUTION: This can result in irregular blog design so you should add your own CSS from any external sources or put your CSS in <head> of your blog. Also after following this post your blogger widgets like Google+ badge, G+1 button may stop working so you need to add google G+1 button api in your blog <head>.

How To Remove Bundle.css And Blogger Javascript From Blogger

Step to remove bundle.css and blogger javascript from blogger.

1.  Go to blogger dashboard and go to theme and click on Edit HTML.

how-to-edit-blogger-template-101helper

2.  Find <head> in your theme by using CTRL+F and replace it with &lt;head&gt;

3.  Now again search for </head> code and replace it with &lt;/head&gt;&lt;!--<head/>--&gt;

4.  Now search for </body> and replace it with &lt;!--</body>--&gt;&lt;/body&gt; code.

5.  Save your theme.

This will completely remove your theme's all javascrpts and css added by blogger.

Google+ Api:

Add this script after your blog's <head> if your google+ badge or g+1 button has stopped working.

<script src="https://apis.google.com/js/platform.js" async='async' defer='defer'></script>

Search keywords: Step to remove bundle.css and blogger javascript from blogger, how to remove render blocking scripts and css from blogger,widget.js blogspot,how to speed up blogger blog.

Thứ Tư, 19 tháng 9, 2018

How To Make Whole Sidebar Sticky/Fixed In Blogger

       1 comment
sticky-sidebar-javascript-plugin-for-making-high-performance-sticky-sidebars-101helper

Yesterday I came across a blog and I noticed that the whole sidebar was floating/sticky as I was scrolling and when I scrolled up the sidebar stopped and when I reached to the top of the sidebar it
became fixed/sticky again unlike just a widget floating the whole sidebar was sticky. So I thought its a good thing because when a visitor is scrolling down he will see all the sidebar and then sidebar will become sticky and the last widget in the sidebar will be covering the sidebar the whole time visitor is scrolling and when he will scroll back he is not going to miss the other widgets in the sidebar, he will see all the widgets until he finally reaches the top placed widget and will carry the sidebar once again with him with the top placed widget in focus.

Its a unique thing that you can not find on other blogs or websites with javascript tricks. So this exclusive trick is shared with you by 101helper. Its similar to sticky widgets in blogger but this code which I going to share in this post makes the whole right sidebar or left sidebar sticky.

SIMILAR POST: How To Make Sidebar Widgets Sticky/Fixed In Blogger?

One more benefit of this sticky javascript code is that the sidebar is sticky until you reach the very bottom of the page and stops from scrolling down and stays in the limit.

So lets do it.

How To Make Whole Sidebar Sticky/Fixed In Blogger:

1. Go to blogger and navigate to your blog's theme.

2. Click on Edit Html and click inside the source code of your theme.

3. Search for <head> or </head> by using CTRL+F on your keyboard.

4. Now just above </head> or below </head> paste follow javascript code:

<script src='https://rawgit.com/fahimraza/docs/master/sticky_sidebar.js'/>

5. Save your theme and now again search for </body>.

6. Just above it paste the following code:

FOR STICKY/FLOATING RIGHT SIDEBAR USE BELOW CODE:

  <script>
    &quot;use strict&quot;;

    var Sticky = new hcSticky("#sidebar-right-1", {
      stickTo: ".content",
      responsive: {
        980: {
          disable: true
        }
      }
    });
  </script>

FOR STICKY/FLOATING LEFT SIDEBAR USE BELOW CODE:

  <script>
    &quot;use strict&quot;;

    var Sticky = new hcSticky("#sidebar-left-1", {
      stickTo: ".content",
      responsive: {
        980: {
          disable: true
        }
      }
    });
  </script>

Note: If your sidebar is not floating after using any of the code in Step 6, please change the ID of the sidebar highlighted with yellow colour in the code and try again. To find the ID of your sidebar, find id='sidebar in your theme code using CTRL+F and you will find your ID.

find-code-html-blogger

Note: If the sidebar is still not floating after replacing with correct ID of your sidebar then kindly replace .content as highlighted with green colour with #content and save your theme code.

7. Save your theme code and done.



Important Discussion:

I have emphasised on correct ID's in the step 6 because every individual blogger theme has different ID's and Classes for <div> so having a correct ID or Class with make the code work so you have to add a correct ID or class to make your blog's sidebar sticky.

I hope you found this post helpful, if not please let me know by leaving a comment of contacting me.

Thanks for visiting 101helper. Please share this post with others who may be searching for this trick but can't found it.

Search tags: make whole sidebar sticky,scrolling sidebar in blogger,fixed sidebar in blogger,floating blogger sidebar code,full sidebar sticky in blogspot blog,javascript code,jquery code,css code,101helper

Thứ Hai, 26 tháng 3, 2018

How To Add Theme Color Using Meta Tag In Blogger

       No comments
When it come to designing blog, I am always ready to find something new. Today I really brought something new for you and I am sure you don't know anything like this. Have you ever noticed chrome color change while surfing your blog though your smartphone on Chrome? I think you still don't know what I am actually talking about. So I have a screenshot here.


In before part of the above image you can see that the browser has a dull color and after redesign the browser became black. So its good for site design and brings more professional look. So in this post I am going to teach you how to change chrome color with your site using a simple meta tag.

How To Add Theme Color Using Meta Tag In Blogger To Change Chrome Color In Mobile?


Step 1: Go to blogger and login to your account, choose the blog in which you want to make changes.

Step 2: Go to Theme and click on Edit Html.

Step 3: Click inside your theme code and use CTRL+F on keyboard.

Step 4: Search for <head>, you will find it in very initial part of your theme code.

Step 5: Copy below meta tag and paste it below <head>.

<meta content='#000000' name='theme-color'/>

Step 6: Now replace COLOR CODE with code of color that you want chrome to adapt when your blog is visited.

You can generate color code with our Color picker tool.

This works only for mobile chrome.

I hope you liked this trick, if yes, share it and leave a comment below. If you have any suggestions please leave a comment below or contact us.

Thanks for visiting 101Helper.

Search KeywordsHow To Add Theme Color Using Meta Tag In Blogger,How To Add Theme Color Using Meta Tag In Blogger To Change Chrome Color In Mobile? new blogger tricks 101heper,blogger design tricks

Chủ Nhật, 18 tháng 3, 2018

How To Get +1000 Email Subscribers In 30 Days

     ,  No comments
grow-your-email-list

Sounds good? Yes! now you can easily without any hard work, make a super huge email list with this simple trick. All you need is a blog, some visitors not too many but at least 150 a day, more will be good and sumo website tools. So if you don't have a sumo account then go and read this post and come back to this post to build a super huge email list in no time.

If you don't know why I want a huge email list then let me tell you that if a visitor visits your blog and you have his email, you can send him all your new posts and get him back to your blog so its like binding him with your site so you don't loose your old traffic and the new visitors also visit your blog. So its like multiplying traffic by keeping old visitors engaged and getting new visitors. And the new visitors then become your email list subscriber and old visitor is already in list, so it go in this way and in the end you have a big audience for your blog.

How to build huge email list with Sumo Welcome Mat:

Step 1: Go to sumo tools and login to your account, if you don't have one, make it by following this post.

Step 2:  Add New Site  if you are new to Sumo tools or  Manage  your excising site.

use-sumo-tools-to-build-email-list

Step 3: Click on Forms in the menu on left side and choose List builder.

use-sumo-welcome-mat-to-build-email-list

Step 4: Click on Create New Form.

welcome-mat-sumo-tools-list-builder

Step 5:

» Set My Goal as Collect Emails.

email-list-building-tools

» Select Welcome Mat as email collector(Form type).

collect-emails-for-email-list

» Choose design from list.

email-subscribe-widget-blogger

» Choose visibility Mode:

smart-mode-sumo-tools

Smart Mode: In this mode sumo decides when your welcome mat should show. It chooses best time for your welcome mat and its really smart specially when you have multiple welcome mats it chooses best time and best visitor to show it to him.

Manual Mode: In this mode you decide when will welcome mat show. If you want to show your welcome mat always to every visitor then leave the default settings but if you want to show welcome mat to a visitor only once in an hour, minutes, days, months or even year then switch always show to desired option and enter the time in which you want welcome mat to show, as shown in below image:

sumo-website-tools-blogger-welcome-mat-tool

Switch on Toggle on to stop visitors from scrolling page when the welcome mat is shown.

You can also change display mode to Embedded or Parallax. In Embedded mode you have to place below piece of code where you want the welcome mat to slide down and show up.

<span class="sumome-welcomemat-anchor"></span>

In Parallax mode the welcome mat shows up as a parallax. To know what is parallax, set it and see it live.

So in this way you have control over your welcome mat, there are some advanced settings too by which you decide on which pages your welcome mat is going to show.

Step 6: Now you have Success option, leave it.

Step 7: Now connect your welcome mat to a Email service, so when it collects emails for you then send it to your Email service which you use to send emails to visitors.There are many good email services, choose one which you use and connect it to your welcome mat.

Step 8: Click on Publish button and its done!

connect-email-service-sumo-tools

If you are using feedburner then don't connect to any email service, all collected emails will be saved in your sumo account in subscribers section. You can copy each email and send it your latest post and add it to your feedburner list manually but your visitor will receive emails only when he approves your feedburner to send emails to him.

I personally use Mailchimp to send emails to my blog subscribers and it is a very good email service because its easy to use and provides me full data about every subscriber, whether he opens my emails, visit links or no. So I know which subscriber is active.

What else can you do with sumo to collect emails?

Sumo provides you great tools for free and you have multiple options to collect emails. E.g Popups, slide outs, Welcome mats, Sumo scrolling bar, Inline form and Cart casino(Pro users only). All you need to do is to select Goal as collect emails and choose the form type and follow instructions as show above.

I hope its a good post for you and you got help. If not please leave a comment below.

Don't forget to share this post, it motivates me to create more good posts for you.

Thanks for visiting 101Helper.

Search Keywords:create a huge email list,how to get subscribers for emails,email subscribers widget blogger,how to collect emails,best tools to collect emails,increase email subscribers fast,Grow email list,How To Get +1000 Email Subscribers In 30 Days With Welcome Mat

Thứ Năm, 21 tháng 12, 2017

How To Remove Swipe "next" And "previous" From Blogger Mobile Site

       No comments
Have you swiped next or back while surfing your blog's mobile site on your phone? If yes then you might have wished to remove this thing from your blog because sometime it is swiped next or back without intention and it is a negative thing for your user experience. Mostly it happens if your mobile site page e.g a post has a html table or it has a big image because of with content is bulging out of your main post body which causes the user to swipe next or back without intention and if it happens 2-3 times the visitor just leave and stop visiting your blog. May be they don't leave but it is not a good visitor experience. I personally don't like swiping pages without next.

how-to-remove-swipe-next-and-previous-from-blogger-mobile-siteAnyway, suppose your visitor is reading a long story on your blog page on his mobile and he is in the middle of the page and just swipe to next page although he doesn't want to do so but by mistake he did it so now he has to go back and scroll to the middle and find where he was? so he will definitely not like it. Because most of the mobile sites do not have this feature so everybody don't know about it so this mistake occurs often on blogger sites. So to avoid this bad user experience you can remove it.

Unfortunately it is not known that how blogger add this swipe next and back because you don't find any script for it in blogger templates so we have to add a script to remove this swiping rather than to remove a script.

So in this post I am going to show you step by step how to remove swipe next and back from blogger mobile site. In my next post I will show you how to add sticky next and back buttons in your blogger mobile site so that if a user wants he can go to next or previous post by intention without any mistake.

How To Remove Swipe "next" And "previous" From Blogger Mobile Site?

Step 1: Go to blogger > Theme > Click on Edit HTML.

how-to-edit-html-in-blogger-template-theme

Step 2: Click in your theme code and use CTRL+F to open theme search box.

Step 3: Search for </body>.

Step 4: Copy below code and paste it above </body>.

<b:if cond='data:blog.isMobile'>
    <script>
      document.getElementById('main').addEventListener = function() {}
    </script>
</b:if>

add-javascript-in-blogger-theme-template

Step 5: Save your theme and visit your site on your phone, swipe next or back and see its removed!



I know it is not a long post and just simple 5 steps post but many people ask how to do it so I decided to do a post on it. If you like it share it with others and if you don't leave a comment below.

Thanks for visiting 101Helper. Follow oon Google+ or Pinterest and like on Facebook for updates.

Search keywords: How To Remove Swipe "next" And "previous" From Blogger Mobile Site, add next and prev button in blogger, remove swipe from blogspot mobile,how to modify blogger mobile template,blogger mobile template help,101helper mobile blogging

Thứ Hai, 1 tháng 5, 2017

Disadvantages Of Buying Custom Domain For Blogger

       No comments


As you know that 101Helper was upgraded to the101helper.com some months ago and then it was again degraded to blogspot, the reason for this was that custom domain doesn't give you things that you expect and so it is not good to buy a custom domain in my opinion. So this post is on request and I am going to share my experience of why I upgraded 101helper to the101helper.com and why I degraded it back. I hope that if you are also thinking of upgrading your domain, you might get some advice from this post.

So the main goal to buy a domain is to:

1. Boost traffic.
2. Increase earnings.
3. Get popular and improve ranking.
4. Make a brand.

etc.

But actually you don't always get all the things mentioned above for example if you think you can increase your traffic after buying a domain then its wrong, reality is that after buying a domain you lose the traffic which you have gained. And similar to that if you lost your traffic you will ultimately lose your ranking, earnings etc. So here are the reasons to avoid buying a domain.

1. Its not free:

Everybody knows that buying a domain is not for free, although there are some domain name providers that give you a discount but still you have to pay atleast $10 to buy a domain. There are some fake offers too like HOSTGATER says buy a domain for $0.01 but when you come to register they ask you to pay $20 or more for two years or whatever.

I purchased my first domain at Ipage and no doubt there service was good, always available to help but they were also lying at the time of buying domain like the offer "Get $100 in Google adwords after spending $25" and when I asked them about this offer they told me that this offer is available for USA only while at the time of purchasing domain they didn't tell the truth.

Similar to Ipage other domain registrars also use these fake tricks to get more customers as I mentioned Hostgator above.

2. Rank, Shares, Backlinks Lose:

When a blogger blog is upgraded to a custom domain Alexa and other ranking websites do not include the backlinks and shares of old blog so you get traffic from these sources but the rank and backlinks you got for the blog are no more. Also Alexa forgets the old blog after sometime so you lose everything.

3. Fake Pageviews:

I am not sure about all the domain providers but when I upgraded 101Helper to the101helper.com I saw a dramatic increase in my traffic but the sources were unknown and blogger was unable to track the viewing source. So I got 2000 to 3000 pageviews but ad-views were just 600 because it was real traffic.

4. Ad networks Lose:

Some ad networks like Google Adsense, Yahoo Gemini and Content.ad do not accept new domains easily and review site again and reject it so if you have a blog and got approved for Adsense or Content.ad are you upgrade to a domain, you'll be not allowed to show their ads until you get approved and the approval process starts again and its almost impossible to get approved for the new domain. Even after specifying that its the upgraded version of the same blog you are unable to use the same account and network. So it is a very big lose I guess.

5. Search Rankings:

After upgrading to custom domain "search ranking"  is also lost. It means if your blog is on first page of search results it may go to 5th or 7th page of search results or it may even disappear and take months to re-appear again and the hard work you did to get you blog to top of search results is wasted. So if your blog is appearing on 1st or 2nd page of search results for a keyword then buying a domain would be a bad choice and your competitors will get a good chance to replace you.

6. Search Engine Results Intermixed:

You might have heard this first time but when a blogger blog is upgraded to a custom domain the search engine is confused and show mixed results and it happened with 101Helper also. When I upgraded to a custom domain, everything was fine for a month because Google, Bing and Yandex were busy in replacing old links with new domain links but after a month I found that my mobile site links with "?m=1" suffix were showing up in the desktop version of Google and I tried to fix it with Webmaster tools but unfortunately I was unsuccessful in doing so.

So visitors were viewing mobile site on desktop or desktop site on mobile which was bad for user experience and I was loosing traffic because of it.

7. Post Preview Feature Lose:

Blogger is the easiest platform for blogging and it has many features and among them a feature is that you can Preview a post while editing it or writing it or adding any ad inside it. But when a blog is upgraded to a custom domain this feature is lost (in my case it was lost) and when preview button is clicked, the whole page is crashed and nothing works so you have to close the whole browser while writing a post and it becomes very difficult to edit or write a post.

8. Encrypted Page(HTTPS) Feature Lose:

This is another feature which is lost after upgrading to a custom domain, it tells visitors that the page they are viewing is secure. So to get this feature back you have to pay for it and the amount they get for this feature is more then the domain price! So its better to get this feature for free.

9. Your Information Is Available to Everyone:

This is another thing that made me stop using custom domain which is they ask you the info and allow public to view it and to secure this info they again ask you to pay.

10. You Don't Have Full Control:

Blogger gives you full control over your blog but domain providers don't. Such as you can't make changes in your DNS in case of mine I was not able to do so. So I  had to go to support everytime I wanted to make changes in DNS. And when I asked them to let me control my domain's DNS they said you are not allowed to do so, first buy a hosting (not domain) which was of $30 and then you will be allowed to make changes in DNS.

11. Fake Offers To Get Customers:

As I mentioned above many registrars like Hostgator and Ipage have fake offers in their promo pages and banners e.g free adwords credit, seo marketing tools, FTP features(upload files), Email sending feature. All these offers are just to attract visitors and these are just tricks to get more customers and sell their packages.

Confusions And Wrong Concepts

Ad Networks Approve Custom Domains:

You might have read alot of posts on other blogs and websites that some ad networks like Google Adsense is approved when you have a custom domain which is absolutely a wrong concept. The reason for this confusion is these bloggers and website owners actually want to refer you to domain providers and get commissions.

PageRank Increase Slowly With Subdomains:

Almost all bloggers favoring custom domains write in their posts that buying a custom domain is the first requirement to gain a good rank which is again a very wrong concept because you can check many sites which are registered for years but rank is not that good.

More Shares And Followers:

Another wrong thing that I have read in some blogs and websites is that your post social media shares get increased along with your social followers when you have a custom domain which is again a wrong concept and the reality is that if you have a good, helpful, meaningful content that people like they will surely share, bookmark and read your content and also they will follow you because they like your content and they don't want to miss more content in future.

Reputation:

This is also a wrong concept that if you have a custom domain then you have a good reputation because I have seen many blogs which have better design, more followers and more readers than websites. So if you thing that purchasing a custom domain is going to help your reputation then its wrong!

Conclusion:

I am not against domain registrars, I am just sharing my experience. Although some people get success by upgrading to Domain but if you are starting a new website then you should start it from domain and not from blogger because it takes a long time and hard work to make a successful blog and then after upgrading you don't get full of it. So in my opinion if you want to start a domain later after success in blogging then its not good choice. Also if you are beginning a website then choose the best domain provider and also your website should have a topic that will rock otherwise you can't get success in websites.

If you have any questions or any suggestion or opinion please feel free to share it with me and others by leaving a comment below. Thanks for visiting 101Helper.

Search keywords: disadvantages of buying a domain, pros and cons of purchasing domain,things to consider before buying domain name,reasons not to buy a custom domain for blogger,hostgator,ipage

Thứ Sáu, 24 tháng 3, 2017

How To Make Mobile Section For Gadgets In Layout In Blogger

       No comments
How-To-Make-Mobile-section-For-Gadgets-in-Layout-In-Blogger
As predicted by Google that from now people will read blogs and sites more from phones rather than from desktop that's why everyone should make their mobile site and maintain it to get maximum traffic not from only desktop but also from mobile. It is also good to get mobile traffic because it can increase your earnings from both Adsense and Appnext. Specially mobile traffic is best for Appnext.

Making mobile site is not easy in a platform like blogger because everyone is not able to do it as its not easy to code and also most methods don't work in blogger. So I frequently write about making mobile site for blogger blogs to make it easier for other bloggers to make their own mobile site.

So in this post I am going to teach you how to make sections for mobile gadgets in blogger layout. So follow below steps to make sections for your mobile gadgets.

Step 1: Go to blogger > login to your account and navigate to Theme.

Step 2: Click on Edit Html to begin editing your blog theme to make sections for mobile gadgets.

how-to-edit-blogger-theme

Step 3: Search for below code by using CTRL+F:
<b:section class='header' id='header'

You will find this code:
<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Horizontal scroll menu (Header)' type='Header'>....</b:widget>
</b:section>

how-to-make-mobile-section-in-blogger

Step 4: Now just after above code paste below code and save your template.
<b:section id='mobile-section-1'>
</b:section>

Step 5: Go to layout to see your mobile gadget section.

You will find your gadget section below header section in layout but if you want you can make another one in the footer by the above method, all you need to do is to paste below code above </html> in your template.
<b:section id='mobile-footer-section'>
</b:section>

how-to-make-footer-section-for-mobile-gadgets-in-blogger

Important Note: Although you can make unlimited sections for your blog's mobile site but you will need to enable each gadget you add in these sections for mobile only. So after adding a gadget in mobile section of your blog go to your template and add mobile='yes' after locked='false' in your gadget code as shown in below image. For details about how to enable a gadget for mobile device only read How To Show A Widget In Mobile View In Blogger

how-to-show-a-gadget-only-in-mobile-blogger

Don't for get to give us feedback about this post, if you have any questions ask me in comments. Share this post with other bloggers. Thanks for visiting 101Helper.

Search Keywords: how to show gadget in blogger mobile site, how to make separate section for mobile gadgets in blogger, how to edit layout in blogger, make header and footer section for mobile site in blogger

Thứ Năm, 9 tháng 3, 2017

How To Hide Ads And Gadgets On Error Pages In Blogger

       No comments
404-error-message-adsense-blogger

Before explaining about hiding things on error pages, i am going to tell you why do you need to do so? Its because Ad networks like Good Adsense and Adhitz both prohibit showing ads on pages which are empty or on error pages and reason for not showing gadgets in error pages is that nobody needs them and these gadgets makeerror pages look ugly and error pages also load slowly so visitors are unable to leave page until the page is loaded completely so it's necessary to hide gadgets and ads on error pages.

In this post i will show you how to hide any ad or gadget on error page.


Step 1: Go to Blogger Dashboard and open template / theme.

how-to-hide-ads-and-gadgets-in-blogger-error-pages

Step 2: Edit Html.
hide-ads-on-error-pages-in-blogger

Step 3: Now find the gadget in which you have added your ad code or if you have added your code directly to your template e.g below </head> or above </body>.


Step 4: After finding your ad code gadget or ad code, copy below code.

<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

Step 5: Paste this code above your ad code if you have added code directly to your template and in case of gadget paste the copied code below this line:

<b:includable id='main'>

As shown in below image:

how-to-gide-google-ads-in-error-pages-in-blogger

Step 6: Add below piece of code at the end of your code and above </b:includable> in case of gadget as shown in above image.

</b:if>

Step 7: Save your theme / template and you are done.

To check if your code is working fine, open any url of your post and add any wrong characters to it and view it, your gadgets or ads which you have hidden will not show on error pages.

What else can you do with above code?

A special thing about this code is that you can hide unwanted gadgets on error pages and also you can use it reversely by making a small change in it. Then it will start showing content on error pages only like if you want to show an error message or a search box to your visitors who accidentally reach an error page to let them search your site and find what they are looking for. So here is the reverse effect code:

<b:if cond='data:blog.pageType = = &quot;error_page&quot;'>

Also don't forget to close it with the same ending code: </b:if>

Your final code should be like this in both cases:

<b:if cond='data:blog.pageType = = &quot;error_page&quot;'>
My Content / Ad Code
</b:if>

If you have any confusion or problem ask me in comments or contact.

Thanks for visiting 101Helper.

Search Keywords: how to hide gadgets and ads on error pages in blogger,how to hide gadgets in 404 error pages blogger, how to hide google adsense ads in blogger error pages,how to show error message on 404 error pages in blogger,101helper blogger tricks

Thứ Ba, 14 tháng 2, 2017

How To Eliminate Render-Blocking Scripts And CSS - Blogger

       No comments
eliminate-render-blocking-javascript-css

As page loading speed matters so much that's why I write frequently about how to make blog or site load faster and so is this post about and I am writing this post on request of a visitor to help him and also those who also have this problem in their blogs. So let me start with intro of what is render blocking scripts and CSS.

What Is Render-Blocking Scripts And CSS ?

Render blocking script is usually a script from any external source which is called by using a <srcipt src="...../files/style.css"/> tag and the problem lies in the URL or storage of the javascript file. Some common problems with external scripts are:

1. The URL which contains the Javascript file is redirecting to multiple URLs and then reach the Javascript file.

2. The URL which contains the Javascript file responds slowly due to server error.

3. The URL which contains the Javascript file sometimes does not respond due to down server status.

Similar to Javascript files, there are some CSS files which are stored externally have the same problems as mentioned above.

How To Identify Render-Blocking Scripts 

To identify render blocking script or css you need to use PageSpeed Insights. It will show you which scripts and css files are blocking and making your page load slow.

how-to-eliminate-render-blocking-scripts-css-in-blogger

How To Remove Render-Blocking Scripts And CSS From Blogger

Step 1: Find render-blocking scripts by using Google PageSpeed Insights as shown in the above image.

Step 2: Go to blogger dashboard > Template > Edit Html.

how-to-edit-template-in-blogger

Step 3: Search for that script or CSS using CTRL+F in the code which you found to be blocking in the PageSpeed Insights tool.

Step 4: Do following things:

For Javascript:

1. Add "Defer" Tag:

A defer tag is a tag which stops the script from loading and loads it when the whole page contents are loaded completely so it improves page loading speed. To add defer tag to your javascript simply add defer='defer' as showing in below example:

<script defer="defer" src="...file/code.js"/>

2. Add External Javascript Internally:

If you see that javascript loading on your blog is redirecting or taking time to load than add the code above </head> in your template or shift it to another host like GitHub.

 Recommended:  How To Store Blogger Codes On Github To Speed Up Blog ?

3. Remove Blocking Code:

If you do above things and still see that the script is blocking then remove that script or copy it and add it in the Layout as a gadget.

 Recommended:  How To Add Or Remove Gadgets In Blogger ?

4. Use "async" Tag:

This tag tells the page that the code which is asynchronised will be executed when it is available and will not be executed when not available so it minimizes page loading speed. To add async tag to your code simply add async='async' because blogger doesn't accept async alone. Here is a sample:

<script async="async" src="...file/code.js"/>


For CSS:

1. Add CSS in <head>:

If you have CSS code stored externally but you are loading it in body by using below code:

<link href="...file/code.css" rel="stylesheet" type="text/css"/>

Simply move it below <head> in your template

2. Use Github:

If your hosting is not responding in time or have many redirects(as in GOOGLE DRIVE) then use Githun to store your codes.

 Recommended:  How To Store Blogger Codes On Github To Speed Up Blog ?

Step 5: Save your template and you are done successfully.

What To Do For Internal Blocking Javacript Or CSS ?

If you have any internal codes which are blocking your pages then remove them because you can't modify them to get work and also avoid such scripts because they are coded by inexperienced bloggers.

Final Words:

By following above steps you can remove blocking javascript and css but if you need the codes and you want to keep them but minimize the loading speed then don't remove the codes but store them on github or in the layout. You may not see any improvement in the Google PageSpeed Insights tool but there will be surely some improvement which you will observe while loading your page.

I hope this post was helpful to you, if not ask me about it. Thanks for visiting 101Helper. Like us on Facebook and never miss a post.

Search keywords: How To Eliminate Render-Blocking Scripts And CSS - Blogger, Blogger blog page loading speed, how to remove blocking scripts and css from blogger blog,how to speed up blog,how to minimize page loading speed in blogger

Thứ Ba, 17 tháng 1, 2017

How To Add Google Analytics Code In Blogger

     ,  No comments
GoogleAnalytics-blogger
What Is Google Analytics?

Google Analytics are tools powered by Google which are super good to analyze your site. It keeps all information about your site e.g where your visitors are coming from, what is the country of your visitor, How much time is your visitor spending on your site, What is the behavior of your visitor etc. So with the help of Google Analytics you can keep every info about your site or blog and use it to improve your earnings and to make your site or blog better.

Why Should I Use Google Analytics?

The answer is simple and obvious, you can use Google Analytics to improve your site and earnings.

How can I increase my earnings using Google Analytics? Well, for example you have an interstitial ad which shows up after 10 seconds and overlays your content and you can see that your visitors are aware about your ad and they are smart :p  and when the ad shows up they simply close it and use your site for free without paying you a cent then you can know with the help of Google Analytics that exactly how much time your visitors are spending on your site so for instance your visitor is spending 2 mins on your site or blog then you can show your ad after 20 sec or after 40 sec so your visitor won't understand when the ad is going to show up so you will get more clicks and hence your earnings will increase.

How to improve your blog or site using Google Analytics? Let me share another example to explain how can your improve your site and user experience with the help of Google Analytics. So for example you have a blog and you have installed a "Pop Up Page Take Over Follow Buttons" in your blog using Hellobar then you can set the perfect time for the pop up to show up in the due time and make a good user experience. Moreover you can also plan timings of slideout and Newsletter to show up when your visitor is on your site so with the help of Google Analytics you can manage your dynamic widgets and get benefit of them.

How To Use Google Analytics For Blogger?

Step 1: Add your blog to Google Analytics.

Step 2: Go to ADMIN in Google Analytics and select a property to get its analytics.

Step 3: Select Tracking Info > Tracking Code.


how-to-use-google-analytics-for-blogger

Step 4: Copy the Tracking ID or Website tracking code, its your choice you can copy the tracking ID or Website tracking code.

how-to-add-google-analytics-code-in-blogger

Step 5:  Follow below steps if you have copied website tracking code or scroll below to add tracking ID in your blog.

How to add Google Analytics website tracking code in blogger?

  • Go to Blogger > Template > Edit HTML and search for </head>
  • Paste your copied code above it.
  • Save your template and you are done.

    • How to add Google Analytics website tracking ID in blogger?

  • Go to Blogger > Settings > Other > Google Analytics.
  • Paste your tracking ID.
    how-to-add-tracking-id-in-blogger-google-analytics
  • Click on Save settings button on top right of the page and you are done.


    • That's it, you are done successfully. If you have any question ask me in comments or contact me.

    Follow us on social networks, thanks for visiting 101Helper.

    Search keywords: How To Add Google Analytics Code In Blogger, Google Analytics website tracking ID,Google Analytics website tracking code in blogger,what is Google anlytics,how to use google analytics,how to improve user experience and earnings with google analytics.

    Thứ Sáu, 2 tháng 12, 2016

    How To Add HTML Tables In Blogger Posts

           No comments
    HTML tables are simple tables which gives a summery of something and are mostly used by those bloggers who own blogs about money so they show there content e.g info about ad networks in the form of tables. But not all bloggers know how to add HTML tables in blog posts and blogger does not have any option to create HTML tables so it can be added only manually. And that's actually the reason of writing this post. In this post I will share with you how to create an HTML table and add it in your blog posts. I will show you only simple one because there are a number of types of HTML tables and I can't share each and every type of HTML table so I will share a simple HTML table with text Like this!. So lets get started!

    How To Add HTML Table In Blogger Posts?

    Step 1: Copy code of HTML table from below:

    <style>
    #mytable{
    width:100%
    }
    #mytable, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    #mytable th, #mytable td {
        padding: 5px;
        text-align: left;
    }
    </style>
    <table id="mytable">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
    </table>

    Step 2: Go to blogger > Posts > Edit a post Or Create a new post.

    Step 3: Switch to Html view of the post editor and paste the copied code after a certain text or in the beginning of the post or after an image, where ever you want to show your HTML table in the post.

    how to switch to HTML editor In blogger.png

    Step 4: Make changes according to your choices and publish your post to see your HTML table.

    Understanding The HTML Table Code:
    html table blogger


    After adding above code for HTML Table, you need to make changes in the text and the table code and for that you need to understand the code because without it you can't add a new row in your table and can't add custom info in the rows and columns of your table. so read out below to know what the code is doing.

    Here is the CSS code of your table:

    <style>
    #mytable{
    width:100%
    }
    #mytable, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    #mytable th, #mytable td {
        padding: 5px;
        text-align: left;
    }
    </style>

    It gives your table the borders for each row and column and if you want, you can add your own decorations to your table for example to add a background color you need to add this:

    background: yellow;

    You have to add above piece of code in this part of code:

    #mytable{
    width:100%;
    background: yellow;
    }

    Now its time to make changes in the info which is added in your table's row and columns. Here is the overall code for your table:

    <table id="mytable">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
    </table>

    In this code blue one is the first row of your table, orange is the second, green is the third and yellow is the fourth row of your table. Now you can change text according to your choices.

    To add a new row you need to add a simple piece of code below the yellow one, here is the simple piece of code that is need to be added for new row:

    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>

    For more HTML tables visit w3schools. Or search for online HTML table generator and create one for you.

    I hope you found this post helpful. If you have any question ask me in comments or contact me. Thanks for visiting 101Helper.

    Search Keywords: How to add HTML Table in blogger posts, html tables with rows and columns for blogger, how to add html table in blogger with CSS style, show content in table form in blogger posts.

    Thứ Hai, 4 tháng 7, 2016

    How To Add Twitter Cards In Blogger

           No comments
    twitter cards in blogger blogspot blogs tutorial 101helper

    You might be thinking, why I am posting about Twitter again because I have recently created a post about Twitter follow box and before that I have also created some posts about twitter like Twitter animated bird gadget and some other posts. But the reason which made me to write another post related to twitter is something new and interesting that is "Twitter Cards".

    You might have heard about it. If you know about Twitter Cards then you are good at Twitter marketing and you must be getting good traffic from twitter.

    So this post is about Twitter cards, How to add Twitter cards in blogger, what is its significance, What are types of twitter cards and everything about Twitter cards.
    So let me start from:

    What A Twitter Card Is?

    Twitter cards are a kind of optimizations which makes your tweets more living. With twitter cards you are able to add images, videos and media experiences in your tweets. You just need to add some Html code in your template and after that when someone tweets your post, the tweet will carry post image or video so making your tweets more living.

    Significance Of Using Twitter Cards:

    Twitter cards have following significance:

    1. Twitter cards add images, videos, GIF's and other media to your tweets.
    2. Twitter cards make your tweets more attractive.
    3. Boost your twitter engagement, people view your tweets and visit your links.
    4. Ultimately you get more traffic from twitter.
    5. Unique tweets with twitter cards bring you more followers too!
    6. After embedding tweets tweeted with twitter cards they have an amazing look so you will definitely get noticed by your visitors so you will get more and more followers.

    Types Of Twitter Cards:

    1. Summery Card: Summery card contains title, description, thumbnail and twitter account info. All the info is gathered from the post it is tweeted. Take a look of summery card below.

    twitter summery card in blogger

    2. Summery Card With Large Image: It is same as summery card with a little difference of large image unlike small image a in summery card. The large image is so prominent that such tweet will definitely get response of users. I have a demo of it too, take a look below.

    summery twitter card with large image blogger


    3. App Card: An app card contains info about your site's mobile app with a Download button which directly takes you to App store. So this card is good for those who have apps for their site. This card has different looks for mobile and desktop, you can take a look below.

    twitter mobile android,ios app card blogger

    4. Player Card: A card which provides tweets with videos, audio, images, GIF's and other media. This card is best for sites with media content like videos or audio(mp3). You can take a look below.

    player card twitter blogger tutorial

    How To Add Twitter Cards In Blogger?

    1. Summery Card:

    To install twitter summery card in your blog include the code given below in your template after <head>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta content='summary' name='twitter:card'/>
    <meta content='@101helperblog' name='twitter:site'/>
    <meta expr:content='data:blog.pageName' name='twitter:title'/>
    <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
    <meta expr:content='data:post.firstImageUrl' name='twitter:image'/>

    Replace @101helperblog with your blog's twitter ID. You can check if your card is working fine or no by either tweeting your post or by using Twitter Card Validator.

    2. Summery Card With Large Image:

    Copy the below code and paste it in your template after <head> and save your template.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:site" content="@101helperblog"/>
    <meta name="twitter:creator" content="@101helperblog"/>
    <meta name="twitter:title" expr:content='data:blog.pageName'/>
    <meta name="twitter:description" expr:content='data:blog.metaDescription'/>
    <meta name="twitter:image" expr:content='data:post.firstImageUrl'/>
    </b:if>

    Replace @101helperblog with your's(twitter:creator) and your blog's(twitter:site) twitter ID.

    3. App Card:

    This card is not for everyone because I don't think that bloggers have ios app. But maybe those who buy a domain later after successful blogging, the may create ios app. So this card is for those who have ios app and they want to increase their downloads. Simple include the below code in your template just after <head>.
    <meta name="twitter:card" content="app"/>
    <meta name="twitter:site" content="@TwitterDev"/>
    <meta name="twitter:description" content="Cannonball is the fun way to create and share stories and poems on your phone. Start with a beautiful image from the gallery, then choose words to complete the story and share it with friends."/>
    <meta name="twitter:app:country" content="US"/>
    <meta name="twitter:app:name:iphone" content="Cannonball"/>
    <meta name="twitter:app:id:iphone" content="929750075"/>
    <meta name="twitter:app:url:iphone" content="cannonball://poem/5149e249222f9e600a7540ef"/>
    <meta name="twitter:app:name:ipad" content="Cannonball"/>
    <meta name="twitter:app:id:ipad" content="929750075"/>
    <meta name="twitter:app:url:ipad" content="cannonball://poem/5149e249222f9e600a7540ef"/>
    <meta name="twitter:app:name:googleplay" content="Cannonball"/>
    <meta name="twitter:app:id:googleplay" content="io.fabric.samples.cannonball"/>
    <meta name="twitter:app:url:googleplay" content="http://cannonball.fabric.io/poem/5149e249222f9e600a7540ef"/>

    After adding this code in your site or blog below <head> make following changes.
    1. <meta name="twitter:card" content="app"/>
    2. <meta name="twitter:site" content="YOUR SITE'S TWITTER ID"/>
    3. <meta name="twitter:description" content="SITE DESCRIPTON"/>
    4. <meta name="twitter:app:country" content="APP COUNTRY"/>
    5. <meta name="twitter:app:name:iphone" content="YOUR APP'S IPHONE NAME"/>
    6. <meta name="twitter:app:id:iphone" content="YOUR APP ID FOR IPHONE"/>
    7. <meta name="twitter:app:url:iphone" content="YOUR APP'S IPHONE URL E.G: cannonball://poem/5149e249222f9e600a7540ef"/>
    8. <meta name="twitter:app:name:ipad" content="YOUR APP'S IPHONE NAME"/>
    9. <meta name="twitter:app:id:ipad" content="YOUR APP ID FOR IPAD"/>
    10. <meta name="twitter:app:url:ipad" content="YOUR APP'S IPAD URL E.G: cannonball://poem/5149e249222f9e600a7540ef"/>
    11. <meta name="twitter:app:name:googleplay" content="YOUR APP'S GOOGLEPLAY NAME"/>
    12. <meta name="twitter:app:id:googleplay" content="YOUR APP'S GOOGLEPLAY ID E.G: io.fabric.samples.cannonball"/>
    13. <meta name="twitter:app:url:googleplay" content="YOUR APP'S GOOGLEPLAY URL E.G: http://cannonball.fabric.io/poem/5149e249222f9e600a7540ef"/>

    4. Player Card:

    Player card is for those sites which have videos or audio content. If you have a blogger having video content then you can install this card in your blog. Just copy the below code and paste it in each of your post's Html editor not in text editor or in template. After pasting the code below just make changes according to your needs. If you have videos hosted on youtube then you don't need this card because Youtube has installed the cards, you don't need to install player card.
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
    <meta name="twitter:card" content="player"/>
    <meta name="twitter:site" content="@TWITTER ID"/>
    <meta name="twitter:title" content="TITLE OF VIDEO"/>
    <meta name="twitter:description" content="DESCRIPTION OF VIDEO"/>
    <meta name="twitter:image" content="IMAGE URL FOR VIDEO"/>
    <meta name="twitter:player" content="PAGE URL CONTAINING VIDEO"/>
    <meta name="twitter:player:width" content="480"/>
    <meta name="twitter:player:height" content="480"/>
    <meta name="twitter:player:stream" content="URL OF VIDEO E.G: Yourvideo.com/video.mp4"/>
    <meta name="twitter:player:stream:content_type" content="video/mp4"/>
    <meta name="twitter:player:stream" content="http://devimages.apple.com/iphone/samples/bipbop/gear1/prog_index.m3u8"/>
     <meta name="twitter:player:stream:content_type" content="video/mp4;codecs=&quot;avc1.42E01E1, mp4a.40.2"/>

    One more thing about this card that after implantation of code you need to request Twitter for approval. So go to Twitter Card Validator to first confirm that your card is implanted correctly or no and after that you have to send request for approval.

    After validating your player card you will see following page, click on Request Approval.

    how to request twitter for player card approval

    Fill up the form and send request and wait for approval!

    how to request twitter for player card approval 101helper

    NOTE: Include the above code only once in a page for a video. Also use https for every link you add inside meta tags. Otherwise you won't get your player card approved!

    I hope you found this post helpful. I have used all the meta tags in my template to check if they are working fine or no and I found every tag working fine. But if you have any problem ask me or if you have any info about Twitter Cards share it with me so that I can add it in this post.

    Thank you very much for visiting 101Helper, do visit again. Share us with your fiends and co-bloggers or webmasters. Follow us on social networks to stay updated.

    Search Tags: twitter cards in blogger,twitter app,player,summery cards in blogger or website,info about twitter meta tags,optimize blogger blog for twitter,get traffic from twiiter,twitter cards blogspot