All Frontend Dev Tricks - Javascript & Reactjs tutorials

Best Privacy-First New Tab Chrome Extension in 2026

noreply@blogger.com (MM Nauman) — Sat, 21 Feb 2026 11:47:00 +0000

I Was Tired of Browser Distractions, So I Built the Ultimate "New Tab" Productivity Hub

We have all been there. You sit down at your desk, ready to tackle a major project. You open a new Chrome tab with the best of intentions, and immediately, you are bombarded.

Your eyes dart to your bookmarks bar. You open three different tabs just to check your calendar, your to-do list, and the weather. Before you have typed a single URL, your focus is entirely derailed.

As a developer, I found myself constantly battling context switching. I was using one extension for a Pomodoro timer, another for screen recording, a separate web app for API testing, and yet another tool to pick colors from web pages. My browser felt bloated, slow, and worst of all, it felt like an invasion of privacy with every tool requiring a new account and tracking my data.

So, instead of complaining about the lack of good options, I decided to build the exact solution I wished existed.

Today, I am incredibly excited to introduce ()—a lightweight, 100% privacy-first Chrome extension that transforms your default new tab into a powerful command centre for deep work.

What Makes Assist Tab Different?

Most "new tab" extensions fall into two categories: they are either beautiful but useless, or they are packed with features but run incredibly slowly and harvest your personal data. Assist Tab bridges the gap. It is designed to be the ultimate daily starting point for founders, developers, marketers, and students.

Here is a look at what you can do right from your new tab:

1. Reclaim Your Time with Built-in Focus Tools

Deep work requires an environment free of clutter.

Persistent Pomodoro Timer: Start a focus session directly from your new tab. The best part? The timer reliably persists even if you accidentally close the tab.
Ambient Soundscapes: Block out background noise with built-in ambient sounds like rain or a flowing stream to keep you in the zone.
Distraction-Free Mode: Trying to read an article but the website is covered in annoying sidebars and pop-ups? Use the built-in element hider to instantly wipe them away.

2. The Ultimate Daily Organizer

No more switching between five different apps just to plan your morning.

Unified Dashboard: See your synchronized Google Calendar meetings right next to your daily To-Do list.
Customizable Widgets: Instantly check your local city weather, get inspired by daily quotes, and organize your most frequently visited page shortcuts.
Curated Aesthetics: Set the tone for your day with stunning, category-specific wallpapers and a fully customizable color/theme picker.

3. A Powerhouse for Developers & Creators

If you build things on the web, Assist Tab replaces the need for half a dozen standalone extensions. Right from your dashboard, you can access:

API Testing: Quickly test endpoints without firing up a heavy desktop application.
Visual Capture: Built-in screenshot capture and high-quality screen recording tools.
Tech Stack Detector: Instantly identify the frameworks and technologies powering any website you visit.
AI Page Summarization: Don't have time to read a massive document? Enter your own API key to instantly generate an AI summary of any webpage.

100% Privacy-First: Your Data Stays Yours

In today's digital landscape, your data is constantly being scraped, sold, and stored on third-party servers. I fundamentally disagree with that model.

Assist Tab requires zero accounts, zero subscriptions, and zero mandatory logins.

All of your core data—your tasks, your shortcuts, your timer history—is saved locally right on your own device's storage. Even our AI summarizer uses your own personal API key, meaning the data goes straight from your browser to the provider; we never intercept, see, or store your queries.

Ready to Upgrade Your Workflow?

If you are tired of your browser stealing your focus and want to reclaim your productivity, I would love for you to try it out.

Link to Assist Tab

Install it, customise your dashboard, run a few focus sessions, and let me know what you think! I am actively reading all the feedback and reviews to figure out what features to build next.

Check for Spelling Mistakes with One Line HTML5 Attribute

noreply@blogger.com (MM Nauman) — Mon, 14 Jun 2021 16:09:00 +0000

Hello, Everyone, I'm back with another small but useful feature of HTML5. Many developers think about how they can implement a feature that can check for spelling mistakes when user type in the input box.

When you think first you might come out with an opinion that a very complex solution for this problem.

HTML5 is so powerful with one line attribute you can check for spelling mistakes/type made by users.

If you are a Grammarly user you know when you make a typo there will be an underline in red colour under that word.

Similarly, you can achieve a similar feature just by adding this attribute to editable elements.

Screenshot from developer.mozilla.org

Please note:

Non-editable elements are not checked for spelling errors.

How To Use:

     
  <input type="text" spellcheck="true"> // To Enable Spell Check

  <input type="text" spellcheck="false"> // To Disable Spell Check

If you want to explicitly disable the spell check feature you can change the value to false.

What about the compatibility? Whether it is supported by top browsers?

According to MDN, This property is supported by all the major browsers like chrome, firefox and safari please refer to the MDN Compatibility chart to know about all the browsers.

SpellCheck Attribute Compatibility Chart - MDN Docs

Conclusion: Hopes you learned something new from this article. Try This HTML5 spellcheck attribute in your project and check whether it is useful or not.

CSS Shorthand - Positioning all 4 sides with one Inset property

noreply@blogger.com (MM Nauman) — Sun, 13 Jun 2021 18:31:00 +0000

Hello, Friends, I'm back with a new article that will guide you to use this new CSS Property INSET which can be used as a shorthand for positioning values, refer to the image above.

Developers get tired of writing the same position values like a top, right, bottom and left separately what if there will be a shortcut like a margin or a border property for the position values.

Yes, Now we have the property which is like margin and border where we can specify all 4 sides in a single line.

Before:

#element {
    position: absolute; /* can be any position like relative, fixed */          
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
} 

Now:

#element {
    position: absolute;
    inset: 0; // 
}

How it works if we have different position values?

Inset Property Explanation:

If 4 Values:

 
    inset: top  right  bottom  left;

    inset: 10px  20px   30px   40px;

If 3 Values:

    
    inset: top   left and right    bottom;

    inset: 10px       20px          30px;

If 2 Values:

    
    inset: top and bottom     right & left;

    inset:     10px              20px;

If 1 Value:

    
    inset: top  right  bottom  left;

    inset:       10px;

Yes, like I mentioned above, you can assume this property similar to a margin and a border.

What about the compatibility? Whether it is supported by top browsers?

According to MDN, This property is supported by all the major browsers like chrome, firefox and safari please refer to the MDN Compatibility chart to know about all the browsers.

Compatible with (Edge 79, Firefox 66, Safari 14, Chrome 87, Opera 73)

Inset Property Compatibility Chart - MDN Docs

Conclusion: Thanks for following this article to determine how inset property works and its coompatibility. If you have any doubts or questions please feel free to comment.

Determine If multiple keys are pressed at once using JavaScript

noreply@blogger.com (MM Nauman) — Thu, 15 Apr 2021 07:54:00 +0000

Hello, Everyone Today we will determine or Find out and add an Event listener that detects if two keys are pressed at once.

It is common for developers to create shortcuts for users if they press some key combinations then something happens for example we see in Windows or Mac shortcuts to copy-paste are given like in Windows the shortcut for copy is ctrl + c etc

Today we will be creating a function that gonna listen and responds only when two keys are pressed.

Let's begin:

The Plan (Theory):

Firstly we gonna think about how we can achieve it using JavaScript. We got key event listeners like key down and key up.

KeyDown: This will detect a key only when the key is pressed.

keyUp: This will detect a key only when the key is released.

So we will leverage the above methods to resolve our problem. Firstly we gonna create an object {

key1: false,

key2: false

}

like the above and assigned the object the properties here the two keys which we are detecting at once give the properties the value of a Boolean false.

This means our keys are off.

Now we will add the event listener keyDown and add the conditions to detect a key using the event object of the listener.

For example if event.key === "w" then object.key1 = true

if event.key === "a" then object.key1 = true

Now we stored both of the results in our object keys. Now we need the last condition to check whether both of the object properties return true if it's true then we know that both the keys are pressed.

Now you will be thinking what's the use of the keyup event listener or the key release listener.

it is important because we need to determine when the key is released so we need to use it and add conditions to it like for example

if event.key === "w" then make our object key value false do this two times for both the keys.

Now our problem is resolved we are now able to detect multiple keys at once using JavaScript.

Executing the plan (The Practical Coding Part):

Creating The Object with the properties of the keyboard keys we want to detect and giving both of them false boolean value as both the keys are not pressed.

let keys = {
  a: false,
  s: false,
};

addEventListener("keydown", (event) => {

  if (event.key === "a") {
    keys.a = true;
  }
  if (event.key === "s") {
    keys.s = true;
  }

if(keys.a && keys.s){
  console.log("both the keys pressed at once")
}

});

Like in the above plan I have mentioned throwing condition to find which key is pressed using the event object of the listener.

Here in the above code, we are determining separately if our desired key is pressed. In this example, our desired key is a and s. If our desired keys are pressed then we need to change our object that we created above and change its property to true.

After this, we need to add the third condition to determine if both of the properties of our object is true if it's true then we know that both the keys are pressed at once by the user.

Last thing we need to also find out when the keys are released by the user if we don't do this then our object properties remain true all the time and cause undesirable results.

addEventListener("keyup", (event) => {
  if (event.key === "a") {
    keys.a = false;
  }
  if (event.key === "s") {
    keys.s = false;
  }
});

In the above code, we are resetting our object properties when the user released the keys after pressing them.

Finally, we completed and if you follow along with me you understood the concept and how this works and now you can try by your self for three keys pressed at once.

Final Code:

    let keys = {
      a: false,
      s: false,
    };

    addEventListener("keydown", (event) => {
      if (event.key === "a") {
        keys.a = true;
      }
      if (event.key === "s") {
        keys.s = true;
      }

    if(keys.a && keys.s){
      console.log("both the keys pressed at once")
    }

    });

    addEventListener("keyup", (event) => {
      if (event.key === "a") {
        keys.a = false;
      }
      if (event.key === "s") {
        keys.s = false;
      }
    });

Conclusion:

I wrote this article to make sure my readers understand the code and how it works instead of just getting the code and using it in the application. if you understand then you can customize and add more functionality to it.

29 Top Curated Chrome Extensions For Developers In 2021

noreply@blogger.com (MM Nauman) — Fri, 22 Jan 2021 04:17:00 +0000

Hello, Everyone, I'm back with another post on Top 21+ Must-Have Chrome Extensions for Developers in 2021 I have received many requests from my users to share best chrome extensions or the extensions that I'm using.

I have invested a lot of my time in curating and testing these extensions that can improve your workflow and boost your productivity and cut your time.

I'm not using all these extensions but many of them as this is 2021 so I thought to search and find the top 21 chrome extensions.

I'm sharing the extensions in random order, not by their rankings or anything. If you think any of them are useful to you click on the link it will open the chrome store and will take you to that extension so that you can download easily.

Most of the widgets before adding here I have tested but few of them were not installing but their reviews were great so I have shared them too.

Name:

React Developer Tools

Number of users: 2,000,000+

Average Ratings: 4/5

Summary: We know how important this extension is for React Developers. This makes react development quite easy what we visualize while creating components we can actually see in the developer tools extension. From the components to props and state everything is systematically arranged in the correct order. If you inspect a React element on the page using the regular browser Elements tab, then switch over to the React tab, (the extension) that element will be automatically selected in the React tree.

LINK

Name:

WAVE

Number of users: 200,000

Average Ratings: 4/5

Summary: One of the most important factors in developing websites is to develop websites for all. WAVE is a web accessibility evaluation tool. It provides visual feedback about the accessibility of your web content by injecting icons and indicators into your page and give you the accurate report.
To run a WAVE report, simply click on the WAVE icon at the top right of your browser address bar, or select "WAVE this page" from the context menu.

LINK

Name:

JSON Formatter

Number of users: 1,000,000+

Average Ratings: 4.6/5

Summary: We all know how bad the JSON will appear if it is not formatted. This extension makes JSON easy to read and interact. The developers who regularly works with JSON will love this extension as this extension poses many features I will list a few of them here
Syntax highlighting, Collapsible trees, with indent guides, Clickable URLs etc please visit the developer link to download and test it

LINK

Name:

Grammarly

Number of users: 10,000,000+

Average Ratings: 4.6/5

Summary: We all know sometimes developers are required to write documentation and we know no one is perfect sometimes to complete in time or in hurry we make spelling or grammatical mistakes which are hard to find
Here comes the Grammarly to rescue the free plan is enough for developers to get rid of spelling mistakes and concentrate on developing.

LINK

Name:

Redux Dev Tools

Number of users: 1,000,000+

Average Ratings: 4.7/5

Summary: For Redux Developers or any other developer using redux with a language that deals with state change, this is a must-have extension to visualize how redux works. Best for debugging on how to state change, Actions fire, and state Tree. I usually use these tools with react dev tools when both tools are in use this can boost your workflow

LINK

Name:

axe - Web Accessibility Testing

Number of users: 100,000+

Average Ratings: 4.5/5

Summary: Another must use tool for developer to find accessibility defects on your website or web application. Accessibility checker for WCAG 2 and Section 508 accessibility. This tool is fast, simple to use and most importantly accurate.

LINK

Name:

WhatFont

Number of users: 1,000,000+

Average Ratings: 4.1/5

Summary: Now you don't need to inspect the element or view the source to find the font. You can easily find the font in just one click thanks to this extension this saves a lot of our time and helps a developer to boost productivity.

LINK

Name:

Lorem Ipsum Generator

Number of users: 20,000+

Average Ratings: 3.7/5

Summary: Web Developers are required to fill the spaces with placeholder text or dummy text many editors are providing this dummy text option but what if we required a particular number of lines with few line break then we need to manually do this but now with this extension, you have the control to generate text with line breaks and much more.

LINK

Name:

Wireframe

Number of users: 3,000+

Average Ratings: 4.2/5

Summary: When you want to see the layout of any page quickly. This extension highlights all the HTML sections.

LINK

Name:

Web Developer

Number of users: 1,000,000+

Average Ratings: 4.5/5

Summary: This is one of the popular extension among developers because it provides you with so many sub developer tools for images, forms and other HTML elements. You can outline all the images that are overflowing or taking extra proportions. If you want to see all the images on the webpage without any alt tags and many other features.

LINK

Name:

Checkbot

Number of users: 40,000+

Average Ratings: 4.9/5

Summary: One Important Requirement For Developers nowadays to make the website not only responsive but Search Engine Optimized. This tool helps you to detect broken links, Redirects, validate your code, Perform Page Speed tests, Security test like finding Mixed content issue. This tool is very powerful can perform 100's of the test in a minute and helps to fix Common Problems Affecting SEO.

LINK

Name:

Fonts Ninja

Number of users: 300,000+

Average Ratings: 4.4/5

Summary: Another Extension in the list to find the font of any website in a single click. you can find any font by just hovering over the text.

LINK

Name:

MozBar

Number of users: 700,000+

Average Ratings: 3.8/5

Summary: You can find Page Authority or Domain Authority score of any webpage in a single click. MozBar gives you instant metrics while viewing any page or SERP.

LINK

Name:

ColorZilla

Number of users: 2,000,000+

Average Ratings: 4.5/5

Summary: One of the most important thing for a developer is to find colours. Many developers inspect the page or view the source code to find the colour but what if you like a colour of an image inside the video? With this tool, you can pick a colour from any pixel on the page.
Few Features that I would like to mention - Advanced Eyedropper, Color Picker, Gradient Generator.

LINK

Name:

Clear Cache

Number of users: 800,000+

Average Ratings: 4.5/5

Summary: When you develop a web page the browser cache it and when you visit the page again then the browser will show you the cached copy of that page. For a developer, it is important to clear the cache once when you update the code. You can customize how much data you want to clear or which data you want to clear.

LINK

Name:

Talend API Tester

Number of users: 400,000+

Average Ratings: 4.7/5

Summary: If you are an API Developer Particularly REST API's then this extension is for you. Test your HTTP Request easy or complex you can also insert variables and much more. This Tool will work offline and POSTMAN requests can be imported.

LINK

Name:

Wayback Machine

Number of users: 100,000+

Average Ratings: 4.3/5

Summary: A Developer needs a lot of resources and inspiration but what if a URL design you were referring or searching is dead. This tool comes in rescue thanks to Wayback you can find an archived copy of the webpage.

LINK

Name:

Full Page Screenshot

Number of users: 100,000+

Average Ratings: 4.3/5

Summary: Web Developers are always required to capture screenshots of their designs to get approval from the clients or to create a responsive image or for web thumbnails. This tool helps in saving time and capture high-quality full screen or capture any area on the page. you can also exclude sticky and headers and footers.

LINK

Name:

Images ON/OFF

Number of users: 20,000+

Average Ratings: 4.2/5

Summary: For a developer, it is very important to add an alt attribute to the image for accessibility purpose and for SEO purpose it is very important. What if you want to test whether you added alt tags to all the images then you have to go to the code and check this will consume a lot of time this extension will disable all the images of the current page and you can easily find out whether

LINK

Name:

Open Graph Preview

Number of users: 30,000+

Average Ratings: 4.3/5

Summary: This Extension Shows you how your web page looks to viewers on social networks when it is shared. In addition to that this also helps in showing how many times the content of your post has been shared. This will help you when a client demanded to add meta tags so that the site shows thumbnail, description and title on the social site.

LINK

Name:

Alexa Traffic Rank

Number of users: 700,000+

Average Ratings: 4.6/5

Summary: This Free Extension shows you Alexa Rank of any website without disturbing your browsing just on one click.

LINK

Name:

Cookie-Editor

Number of users: 200,000+

Average Ratings: 4.8/5

Summary: One of the powerful yet simple extensions with 4.8 ratings with this tool you can add, edit, delete cookies on the current page without switching tabs. Easy to use interface you can also delete all the cookies at once.

LINK

Name:

Web Maker

Number of users: 40,000+

Average Ratings: 4.8/5

Summary: If you don't have an internet connection and you want live preview at low System resources then this offline code practice or testing tool enables you a playground when you can test HTML/CSS/Javascript code with built-in console for debugging everything without a need of Internet.

LINK

Name:

Amino: Live CSS Editor

Number of users: 30,000+

Average Ratings: 4.6/5

Summary: This is a live CSS Editor with SCSS/Sass support, Realtime Time Editing and you can save your customized CSS by exporting. Autocomplete/IntelliSense feature also included. this will help you to style any website in realtime.

LINK

Name:

Marmoset

Number of users: 10,000+

Average Ratings: 4.6/5

Summary: If you want to share code snippets snapshots with styling then this tools is for you. this tool creates code snippets snapshots within seconds that are ready for share.

LINK

Name:

Quick Javascript Switcher

Number of users: 200,000+

Average Ratings: 4.3/5

Summary: For Testing purposes, if you want to see how your developed site looks without javascript. If you want to test a site without javascript then this tool can help you you can disable the javascript on the current page and even you can disable javascript globally by following tools instructions.

LINK

Name:

Dimensions

Number of users: 100,000+

Average Ratings: 4.2/5

Summary: If you want to measure the distance between two elements This extension measures the dimensions from your mouse pointer up/down and left/right until it hits a border. this works very accurately with elements than images.

LINK

Name:

PerfectPixel by WellDoneCode

Number of users: 200,000+

Average Ratings: 4.5/5

Summary: PerfectPixel allows developers and markup designers put a semi-transparent image overlay over the top of the developed HTML and perform pixel perfect comparison between them.

LINK

Name:

Stylus

Number of users: 400,000+

Average Ratings: 4.6/5

Summary: Easily install custom themes from popular online repositories, or create, edit, and manage your own personalized CSS stylesheets. A highly customizable UI, including theming, optional layouts, icon and badge color choices, along with many other tweaks

LINK

Conclusion

Hope you like this post and I assumed that this helped you in some way so please don't hesitate to share this on your social profiles. If you are using any chrome extension that is not in the list and have potential to be in top extensions then do share that in comments or through the contact page.

Set/Change Template In Blogger Blogs in 2021

noreply@blogger.com (MM Nauman) — Mon, 11 Jan 2021 12:05:00 +0000

Hello, Friends like we know Blogger has updated its User Interface so for the newbies it is little confusing as to how they can set their own templates or change the templates.

Blogger is one of the best Free CMS with the latest update of Support to HTTPS for Custom Domains blogger is once again in the competition and becoming the newbie favourite.

All Blogger tricks are also powered by blogger and we are proud of this as you can also create customized templates for your blogs to make it look more appealing and professional.

Today's post is for newbies who want to change or set the blogger template

Please follow and check the screenshots for the reference.

First Go To Blogger Dashboard in the left sidebar you will see many sections like Posts, Stats etc in that at the bottom in the sidebar you will See Theme as highlighted in the screenshot below.

Click on the Theme it will take you to the themes section. There you will see all the blogger themes listed and at the top, you will see my Theme section as shown in the image below.

Click on the arrow it will open a drop-down menu as shown in the image below

You will see many options but the main options are Backup and Restore the First click on backup to create a backup of your current template.

After Downloading Backup its time to upload your new template click on Restore as shown in the image above.

After clicking on Restore you will a dialogue appears asking you to upload your new template click on upload as highlighted in the image above and then choose your template file which will be in XML format.

If your template is error-free then it will be uploaded and applied successfully after that customize the

layout.

Conclusion

That's it thanks for following along with me. This is the basic Tutorial for newbie bloggers who already have a template but don't know how to change or create a backup of it.

Adding Tag/Label Below The Blogger Post is Good For SEO?

noreply@blogger.com (MM Nauman) — Fri, 08 Jan 2021 15:00:00 +0000

I have answered this question many times but newbie bloggers or template developers are confused so today I thought to create a post and clear this so that I can share this post whenever someone asks this question.

Can I add a tag/label below the post?

Yes, You can add the tag below the post, below the post title or even separately in the sidebar or in footers.

Is it Good or Bad?

It is good because internal linking can reduce bounce rate and help visitors to find your old and new posts easily this will help them to stay on your blog for a longer time and interact with the posts.

What about Search Engines like Google?

By default, Blogger creates robots.txt file which instructs search engines, not to index the URLs starting /search so Google Bots will read this instruction and exclude these URLs from indexing to avoid duplication of posts.

Please check again the first image above to see how robots.txt file is already structured by blogger.

You can find your blog robots.txt file by typing /robots.txt after the Blog Url like below

https://www.allbloggertricks.com/robots.txt

Change https://www.allbloggertricks.com to your blog URL to check.

Bonus For Understanding

What are tags/labels in blogger?

A collection of posts that are or about a similar or common topic are tagged or labelled for identification.

For example - If a user is interested in a post about how to make a cake and then there that user found Tags/Labels regarding cakes, cold cakes, cooking, then this will help them to find more posts or recipes and helps you too to get more views.

18 Most Valuable Google Chrome Extensions Every Blogger Must Have

noreply@blogger.com (MM Nauman) — Fri, 08 Jan 2021 07:33:00 +0000

Amazing Things Bloggers Can Do Using Google Chrome Extensions

There are various extensions which improve the productivity of Bloggers and Developers. Here are the 15 Best Google Chrome extensions for Bloggers and Developers:

Usersnap
Image Downloader
Stylebot
Resolution Test
Grammarly
Speed Tracer
Awesome Screenshot
WhatFont
MozBar
META SEO inspector
CSS-SHACK
SimilarWeb
Scraper
Tag Assistant
LinkMiner
Buzzmarker
Page Load Time
Page Analytics

Usersnap :

Usersnap allows taking screenshots of the browser. One can obtain reports of visual bugs through Usersnap. Bugs can be easily tracked with the help of point and click issue reporting. A feedback button is created by a small snippet of code on the website. The following are the features of Usersnap:

One could invite colleagues into Usersnap and discuss screens for finding solutions.
Visual bug reports can be obtained with the help of advanced client-side JavaScript error recording.
No plugins are required to take in-browser screenshots.
With Usersnap, one can connect the bug tracker of Usersnap with their chat Messenger.
Usersnap can be connected with Hipchat, Hall and Slack.
Usersnap allows creating an API key.
One can connect Usersnap with their existing tool easily. Usersnap integrates with:

Microsoft Team Foundation Server
Fogbugz
JIRA
Asana
Pivotal Tracker
Countersoft
Desk
Trello
Github
Evernote
Teamwork.com
Zendesk
Redmine
Axosoft
Kanbanize
Trac
Bitbucket
Intercom

Image Downloader:

Image Downloader helps in bulk downloading of images from a particular web page. All the images selected by you are saved Chrome’s default download directory by pressing the “Download” button. The following are the features of Image Downloader:

You can customize the width of the display, style and colour, border size, buttons as well as notifications which aren't required.
Image Downloader provides dedicated buttons for downloading and opening individual images in a new tab.
You can select images for downloading by clicking directly on the image or using checkboxes.
You can sort or filter images by URL.
Image Downloader supports regular expressions as well as wildcards.

Stylebot:

With Stylebot, any website's appearance could be quickly manipulated by using custom CSS. The following are the features of Stylebot:

The look and feel of your favourite websites can be personalized by using Stylebot.
For learning CSS, Stylebot is a great tool.
You can debug the design of your own website.
Visibility, font size, colour and margins can be changed.
CSS can also be written manually by advanced users with Stylebot.

Resolution Test:

For testing web pages in different resolutions of the screen, Resolution Test is a great extension. The features of Resolution Test are as follows:

A list of resolutions which are used commonly is included. The list can be customized too.
The option of turning on Google Browser Size is provided by Resolution Test.
One can define their own resolutions by Resolution Test.

Grammarly:

Bloggers or Content Writers need this extension as no one is perfect when you write long articles/posts you may make silly grammatical mistakes without noticing them It’s embarrassing to find grammatical mistakes in the content you just published.

Grammarly will make sure your messages, documents, and social media posts are clear, mistake-free, and impactful

So If you want to Avoid Grammatical Mistakes Uses this extension

Speed Tracer:

Speed Tracer helps in identification and fixation of performance-based problems in web applications. The features of Speed Tracer are as follows:

Speed Tracer helps in visualization of metrics which are taken from points of low-level instrumentation.

Speed Tracer provides information regarding where your time is being spent in the application which includes problems caused by:

DOM Event handling
Network resource holding
CSS style recalculation and selector matching
Timer fires
Painting
JavaScript parsing and execution
Layout

Awesome Screenshot (Screen Capture):

Screen Capture is an extension which is useful for capturing:

A region of a web page.
Visible content of a tab.
A whole page as a PNG image.

Before saving a captured image as a PNG image, one can edit it with the help of Screen Capture. The features of Screen Capture are:

Screen Capture is super fast in capturing page image, especially for large pages.
Floating objects on a page can be detected.
Horizontal scrolling for large pages is supported.

WhatFont:

WhatFont helps in finding out a particular web font used on a web page. Web fonts can be inspected by simply hovering on them. The features of WhatFont are as follows:

Services used for web font serving can be detected by WhatFont.
WhatFont supports Google Font API and Typekit.

MozBar :

Moz.com is one of the biggest sites for SEO Optimization Tips and Analytics. They have created this extension to check the Domain Authority and Page authority of any page. you can see which are nofollow links and which are do follow. But to see the DA And PA You need to have a free account in MOZ.com

The features of Page Analytics are as follows:

MozBar gives you instant metrics while viewing any page or SERP.
Create custom searches by engine, country, region, or city.
Quickly assess the Page Authority and Domain Authority of any site or page.
Access and compare link metrics across pages while viewing any SERP.
Find and highlight keywords on a page and differentiate links by type: Followed, No-Followed, External, or Internal.
Expose page elements, general attributes, markup, and HTTP status.
Export your search engine results page (SERP) analysis details to a CSV file

META SEO inspector:

We know the importance of meta tags and their role in Search Engine Optimization. Search Engine Crawlers check whether our blog has the meta tags and then index our pages according to these tags.

Metadata is not just the usual HTML meta tags, but the XFN tags, various microformats, the recently introduced canonical attribute, the no-follow links and so on.

With this Extension you can get on page data like Rich Snippets, Script Tags, Open Graph tags etc Online Tools Like SEO, Social, Safety etc

CSS-SHACK:

The features of CSS-SHACK are as follows:

Layer styles can be designed by CSS-SHACK.
The designs can be exported after creating the theme into a CSS file.
CSS-SHACK works similar to a photo editor.
It proves to be useful for web development tasks.

SimilarWeb :

SimilarWeb is useful for a quick site analysis. Beyond SEO, a broader view of a website is provided by SimilarWeb. This extension analyses clickstream data from hundreds of providers of internet service, its own web crawlers and data of their clients. The features of SimilarWeb are as follows:

By SimilarWeb, one can obtain reliable stats on audience demographics of a brand, the amount spent on paid media and the nations from which their traffic comes from.
A Brand’s digital presence can be known more accurately by SimilarWeb.
This extension is free. However, access to an even more complete data set is given by a paid account.

Scraper :

The features of Scraper are as follows:

Scraper helps in speeding up the process of pulling elements from a range of individual pages as well as websites for the purpose of large-scale analysis.
Scraper helps in exporting HTML data elements of a page by using the XPath query language.
During audits of technical SEO, a lot of time is saved by the effective functioning of Scraper.

Tag Assistant :

The features of the Tag Assistant are as follows:

Acting as a trouble-shooter, Tag Assistant verifies the installation of Google tags which are used for Remarketing and Google Analytics.
Tag Assistant has the ability to record sessions and analyzing tracking tags’ implementation through user journeys.
Tag Assistant helps to verify that the tags are implemented correctly.
Tag Assistant helps to verify that the tags are implemented correctly.

LinkMiner :

The features of LinkMiner are as follows:

LinkMiner is useful in identifying broken links.
LinkMiner highlights active outbound links in green, while broken links are highlighted in red.
Links get fixed quickly as LinkMiner makes for an easy way for sharing issues with the development team.
The ratio of inbound to outbound links on every page is known due to the integration of LinkMiner with indices like:

Moz
Majestic
Ahrefs

Buzzmarker :

The following are the features of Buzzmarker:

Buzzmarker is the extension which simplifies the outreach process.
By highlighting the key metrics of social media, Buzzmarker helps with prospecting.
By Buzzmarker, one can add bookmark influencers into the main BuzzStream platform.

Page Load Time :

The features of Page Load Time are as follows:

The amount of time taken to load a page (in seconds) is highlighted by Page Load.
Quick insights into page speed can be obtained by Page Load Time.
It helps to keep an eye on speed, which is an important ranking factor.

Page Analytics :

The features of Page Analytics are as follows:

Even while browsing websites, one can view data from their account of Google Analytics with the help of Page Analytics.
A user can also view metrics by using Page Analytics.
The performance of each individual page can be known through this extension.

Conclusion:

Google Chrome has made our life easier. Using these extensions will save time and also helps in avoid us from making mistakes.

There are tons of extensions in chrome store where you can download your desired extensions. Daily hundreds of new extensions added in chrome so if we missed some of your favorites then notify us in the comments we will add it.

Use these tools and say us which is your most used Google Extension? and Which is your most rarely used Google Extension from the list?

That's It Thanks For Following our Tutorial '' 18 Most Valuable Google Chrome Extensions Every Blogger Must Have'' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.

Add Floating Table of Contents Component in All Blogger Posts

noreply@blogger.com (MM Nauman) — Sun, 03 Jan 2021 21:30:00 +0000

Hello, Today We have created/modified our last Stylish Table of Contents widget as few of our subscribers requested us for a Floating TOC Component. That will be visible in a fixed position all the time even when a user scrolls the page.

We have added this Floating functionality and some styling so that the TOC Component looks good and doesn't take much space when you scroll the page and is away from the main content of the page.

The live demo of this widget can be seen in this post above.

Table Of Contents Features:

Fully Dynamic and Responsive.
Floating Functionality when scroll.
Very Compact and Fast.
Stylish and Elegant build.
Collapsible Header.
Build with HTML5, CSS and Pure Javascript (No Libraries).
Smooth Animations and transitions effects.

Adding The Widget:

Step 1: Adding the code

Firstly go to Blogger → Template → Edit HTML and search for the code </body> and paste the given code just before it.

<style>
.ABT_Active{display:block !important}#TOC{display:grid;background-color:#f4fa9c;padding:20px;color:#f469a9;width:80%;justify-content:baseline;align-items:baseline;margin:0 auto;border:4px solid #88bef5;box-shadow:0px 0px 3px 1px #88bef5}#TOC span{font-size:1.4em;font-weight:bold;display:block;cursor:pointer}#TOC ol{padding:0px 0px 0px 15px;justify-content:baseline}.ABT_Animate{transition:all .1s;animation-name:ABT_Aanimation;animation-duration: .4s;animation-iteration-count:infinite}#TOC li{font-size:1.2em;padding:8px 0px}#TOC a{color:#ba53de;text-decoration:none}#TOC a:hover{color:#f469a9;text-decoration:none}@keyframes ABT_Aanimation{10%{transform:translate(1px, 1px) rotateY(0deg)}20%{transform:translate(-1px, -2px) rotateY(-1deg)}30%{transform:translate(-3px, 1px) rotateY(1deg)}40%{transform:translate(4px, 2px) rotateY(0deg)}50%{transform:translate(2px, -1px) rotateY(1deg)}70%{transform:translate(-2px, 2px) rotateY(-1deg)}80%{transform:translate(-3px, 1px) rotateY(0deg)}90%{transform:translate(1px, 2px) rotateY(0deg)}100%{transform:translate(0px, -2px) rotateY(-1deg)}}
</style>

<script async src='https://rawcdn.githack.com/mmnauman/allbloggertricks-files/8ef30d65aa506e2a0e5a188545a368f6adb75547/TOC_Builder.js' type='text/javascript'></script>

After completing the first step now its time for the final step which is very easy let's do it.

Step 2: Placing the widget inside posts/static pages.

Copy the below code in any post or page where you want this widget to appear:

document.addEventListener("DOMContentLoaded", () => {
ABT_TOC(".post-body", "h2");
});

Settings: Adjusting widget

The Red highlighted text is for the container tag inside the post or pages if you don't know comment your blog URL will tell you. If you are a blogger user then this will work for you.
The Orange highlighted text is for the heading tags you want the widget to catch from your post and make it the table of contents. Means the heading tags you used for headings. by default, it is h2 change it according to your needs.

Now, whenever you are writing your post just add that above three lines of code then the widget will appear and this will help in structuring your posts and make it more user and SEO friendly.

We are here to resolve all your problems I know we are learners so if you are not knowing or getting confused don't mess up ask me in comments or through contact page will resolve your problems. Have a great day. Cheers.😊

Easy Tricks - Add Auto Read More Break With Blogger Snippet

noreply@blogger.com (MM Nauman) — Sun, 03 Jan 2021 09:40:00 +0000

Introduction

Hello, Everyone Happy New Year 2021, This will be my second post this year. Yesterday when I was trying to fix my blog and was trying to avoid the previous Javascript technique to add read more button on every post on the homepage.

What previous javascript technique was doing is it was fetching the whole post and then trimming and extracting the text or image from it because we are doing it from front-end. We have to get all the data from the Blogger Server then only we can modify it. if you got my point this trick was not optimizing the blog performance instead this was just to make the appearance better.

Thanks to Blogger new snippet feature now we can leave everything on blogger to do server-side and with the perks of improved performance and less code we can make it looks how we want.

Why I'm sharing this trick now?

Because I got to know about this Yesterday when I was trying to find a better way to achieve this thanks to an answer on StackOverflow where they answered a question similar to mine and I got this and I modified a bit to make it even better.

I will share the link to StackOverflow answer at the end so that you can also see and upvote that answer.

Now coming back to the trick - you may have few questions like

Whether you need to play with the template code?

Yes, You are required to edit the template and make few changes, But if you are a newbie and don't know how to edit the template my advice is to create a backup before editing so incase if the template gets break then you can restore the backup.

Whether This Trick will add Read More Button in All Blog Posts?

Yes, Thanks to blogger new snippet feature you can add Read More button break button on all the posts automatically without any extra javascript.

Features of New Blogger Snippet

Control the Snippet length- Yes, you can control the snippet length
Control the ellipsis at the end - Yes, you can hide or show the three dots at the end of the snippet,
Preserve the Links in the post - You can Show links as the link or plain text on the homepage,
Preserve the Line breaks - You can preserve the line-breaks from the post as it is in the snippet or remove it.

What About the Featured Image?

Yes, We are going to make the first image of every post as the featured or cover image. It is included in this post.

Adding the code

Firstly go to Blogger → Template → Edit HTML and press CTRL + F and search for the code

<data:post.body/>

This expression will appear two to three times try the second one and replace it with the given code below.

<b:if cond='data:blog.pageType not in {"static_page", "item"}'>

<b:if cond='data:post.firstImageUrl'>
<div class='PostCover'>
<img expr:src='data:post.firstImageUrl' itemprop='image' expr:alt='data:post.title'/>
</div>
</b:if>

<p class='PostSinppet' itemprop='description'>
<b:eval expr='snippet(data:post.body, {length: 300, linebreaks: false, links: false})'/>
</p>

<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"'>
<data:post.body/>
<div style='clear: both;'/> 
</div>
</b:if>

Customization:

Change the length of the snippet - If you want to limit or increase the length of the characters in the snippet then change the red highlighted number from 300 to your desired number.

No Featured Image - If your blog is already showing the featured image and you only want the Readmore not the image then remove the entire area highlighted in orange colour.

Remove Extra Readmore - If you found two Readmore buttons are appearing search for

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

Remove if you found these lines two times (don't remove from the above code 😅)

Any Other Help - In Case of any code break or help to style the tags, Don't hesitate to use my contact page to send me the message will try to help you as fast as possible.

Bonus - (Optiona; Styling not Required)

Find the code:

]]></b:skin>

Paste the below code before

.jump-link a{color: rgb(248 249 250)}

.jump-link{
width: 100%;
padding: 10px 0px;
background-color: rgb(52 58 64);
text-align: center;
color: rgb(248 249 250);
border-radius: 4px;
margin: 20px 0px;
transition: all 0.5s;
}

.jump-link:hover{
box-shadow: 0px 0px 2px 2px gray;
}

Styles Customization

Background-Colour: Change the Green Highlighted text if you want to change the background colour of the Read More button

Text Colour: Change the Light Blue Highlighted text if you want to change the Text colour of the Read More button

Live Demo: All Blogger Tricks

Conclusion:

Thanks for following with me hopes you got a good looking Read More Break button on every post in Homepage, Labels Pages.

If you break your code or unknowingly did something then please restore your backup and don't mess with the code ask me in your comments or message me through the contact page.

Thanks to the StackOverflow answer by Prayag Sharma you can visit or upvote his answer here.

Answered By Prayag Sharma

Dynamic Blogger Recent Posts With Carousel Sliding Widget

noreply@blogger.com (MM Nauman) — Thu, 31 Dec 2020 19:53:00 +0000

Introduction

Hello, Friends, Many of my posts related to Recent Posts Widgets were outdated so instead of updating those posts with the same code and design I have created a couple of great looking widgets which will be published in upcoming days.

Today I Have Created Recent Posts Widget with Carousel Sliding Feature which is responsive and looks great in any screen size.

This widget is not new but we have used TinySlider which is a Vanilla Javascript Based Slider Plugin which is lightweight and has zero dependencies.

This is the reason we have used the tiny slider to achieve the Sliding Effect and used Blogger JSON API to fetch the posts.

This Carousel Recent Posts Widget Looks very stylish and it is modular you don't need to tweak your template just you need to add this plugin in your layout using add a gadget section.

For the DEMO Purpose, I'm using this widget in my blog you can scroll down to see it live and working.

You may still have doubts regarding the responsiveness of this widget if you have any doubt just open my blog in your mobile phones or tablets to check the real responsiveness thanks to Tiny Slider 2 Plugin we got a lot of options to make it responsive.

Carousel Sliding Recent Posts in Mobile

I think now its time to add the widget I will show you how you can add it. If you are a new blogger you can be surprised or find this code too long but this is the code that I wrote I'm not minimising so that if a user wants to customize or create their own widget they can easily do.

Installing the widget

STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard

STEP 2: In The Left Side Bar You will find Layout Section as highlighted in the image above Click on Layout.

STEP 3: Click On "Add a Gadget" As highlighted in the image above.

STEP 4:After Clicking on "Add a Gadget" Choose "HTML/JavaScript" from the list & as highlighted in the image above.

STEP 5: Now Copy This Below Code And Paste it in The Empty Box of the "HTML/JavaScript" Section.

<link href='https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css' rel='stylesheet'/>
<style>
:root{
--success: rgb(40 167 69); /* Light Green Color*/
--light: rgb(248 249 250); /* Whitish Color */
--dark: rgb(52 58 64); /* Dark Gray Color*/
--gray: rgb(108 117 125); /* Normal Gray Color*/
--pink: rgb(232 62 140); /* Pink Color*/
}

.ABT_Recent_Posts{
margin-top: 30px;
}

.ABT_Recent_Posts div h2{
font-size: 16px;
margin-top: 10px;
text-transform: capitalize;
padding: 5px;
min-height: 80px;
}

.ABT_Recent_Posts div h2 a:hover{
text-decoration: none;
color: var(--success);
}

.ABT_Recent_Posts div{
text-align: center;
background-color: var(--light);

}

.ABT_Recent_Posts div a {
color: var(--gray);
}

.ABT_Recent_Posts img{
width: 100%;
max-height: 200px;
min-height: 200px;
height: 100%;
object-fit: cover;

}

.ABT_Recent_Posts div p{
margin: 0
}

.ABT_Recent_Posts div p a{
display: block;
background: var(--pink);
color: var(--light);
padding: 10px;
transition: all .5s;
}
.ABT_Recent_Posts div p a:hover{
background: var(--dark);
color: var(--light);
text-decoration: none;

}

.ABT_Recent_Posts div p{
border-radius: 4px;
}

.tns-controls {
width: fit-content;
margin: 20px auto;

}

.tns-controls button{
margin: 0px 15px;
outline: none;
border: none;
font-size: 20px;
background: unset;
padding: 5px 10px;
border-radius: 4px;
background-color: rgba(0,0,0,.1);
}

.tns-controls button:hover{
background-color: rgba(0,0,0,.2);
}
</style>

<div class='ABT_Recent_Posts'>

</div>

<script>
let TotalPosts = 10; // Number of posts you want to display
function ABT_Fetch_Recent_Posts(JSON) {
const POSTS = JSON.feed.entry;
let PostTitle, PostURL = "";
let JumpLinkText = "Read More";
let RecentPostsContainer = document.querySelector(".ABT_Recent_Posts");

for (let i = 0; i < TotalPosts; i++) {
//Get Title and URL of the Post
POSTS[i].link.forEach((el, i) => {
if (el.rel === "alternate") {
PostTitle = el.title;
PostURL = el.href;
}
})

//Get Post Thumbnail
let thumbnail = POSTS[i].media$thumbnail && POSTS[i].media$thumbnail.url;
if (thumbnail) {
thumbnail = thumbnail.replace("s72-c", "");
} else if (POSTS[i].content.$t.match(/(http)?s?:?(\/\/[^"']*\.(?:png|jpg|jpeg|gif|png|svg))/)) {
thumbnail = POSTS[i].content.$t.match(/(http)?s?:?(\/\/[^"']*\.(?:png|jpg|jpeg|gif|png|svg))/)[0];
} else {
thumbnail = "https://placeholder.pics/svg/300/DEDEDE/555555/Image%20Not%20Loaded";
}

RecentPostsContainer.innerHTML += `<div>
<img src="${thumbnail}" alt="${PostTitle}"/>
<h2>
<a href="${PostURL}">${PostTitle}</a>
</h2>
<p><a href="${PostURL}">${JumpLinkText}</a></p>
</div>`;

}
}

var blogLink = document.location.origin;
var callScript = document.createElement("script");
callScript.src = `${blogLink}/feeds/posts/default?alt=json-in-script&start-index=1&max-results=${TotalPosts}&callback=ABT_Fetch_Recent_Posts`;
let Recent_Posts_Container = document.querySelector('.ABT_Recent_Posts');

document.body.appendChild(callScript);

let SliderOptions = [
"<i class='fas fa-arrow-left'/>",
"<i class='fas fa-arrow-right'/>",
];

window.onload = () => {
tns({
container: ".ABT_Recent_Posts",
items: 1,
mouseDrag: true,
autoplay: true,
controls: true,
arrowKeys: false,
gutter: 10,
nav: false,
slideBy: 1,
autoplayHoverPause: true,
autoplayButtonOutput: false,
controlsText: [
"<i class='fas fa-arrow-left'></i>",
"<i class='fas fa-arrow-right'></i>",
],
controlsPosition: "bottom",
loop: false,
preventScrollOnTouch: "force",
autoplayTimeout: 6000,
rewind: true,
responsive: {
0: {
items: 1,
},
320: {
items: 1,
},
460: {
items: 2,
},
600: {
items: 3,
},
800: {
items: 4,
},
}

});
}
</script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js'></script>

This is it, now get ready for the customization part.

Customization

If you want to change the Number of posts to display by default it is 10 but if you want to increase or decrease then just change the red highlighted number in the above code.

If you want to change the text for jump link by default it is Read More.

If you have a blog for example relating to the food reviews or movie reviews then you might want to show read review or something else then change the orange highlighted text. (make sure you don't remove quotes surrounding the text)

If you want to customize the styling according to your theme then you can do it easily I'm not adding how to do it here because you might break the widget if you miss a semicolon also. Ask me in comments with your blog URL I will change the styling for you.

Final Words

I hope you like this widget I have spent a lot of time in tweaking tiny slider plugin to work with blogger dynamic code. If you like it please do share this Blog Posts in your social profiles.

I know you want many blogger widgets if you have any request for any type of widget or plugin for your blog do request in comments or Send a message through Contact Form will be happy to assist and create a widget for our blogger community.

Credits:

For Slider Functionality thanks to Tiny Slider

Official Live Demo:

Mother's Touch - Premium Cakes in Kalaburagi

Count Number of Lines Inside Any HTML DOM Element

noreply@blogger.com (MM Nauman) — Tue, 04 Aug 2020 15:00:00 +0000

Hello, Friends back with another Javascript Tricks post. This trick is already there on the internet but we are adding this trick to make you understand how actually its works and created.

Introduction:

To Count Number of Lines Inside Any DOM Element, we first need to calculate these styles from the Element.

The First Thing is to get the Height of the Element.
Then We need to get the Line Height of the text inside that Element.
Then We will be using the formula to get the Estimated Number of lines of that element.

Formula To Count Number Of Lines in Any HTML Element:

Total Height of the Element / Line Height of the Content Inside that Element.

The Formula is very simple we need the total height of the element and divide it with the line-height of the content inside that element.

Common Problems / Mistakes:

The main problem that can a developer's face is not getting the line-height of the element if it is not explicitly set.

Means we need to explicitly set the Line-height of the element so that we can get the value otherwise we will get a normal implicit value instead of a number.

Even if we convert that normal value to a number that means the default line-height is slightly changed in few browsers that can cause some serious issues.

Instead of setting the line-height every time through CSS, we can set it through Javascript DOM methods.

Let see the Code to explicitly add line-height through Javascript.

The Code:

<script>

function ABT_CountLines(Element){
//Settings to Set The Line-height change the line-height and play
let ABT_LineHeight = "1.3em";
let ABT_Element = document.querySelector(`${Element}`);
// We are using this getCompuedStyle Method because it auto-update when
// changed.
let CodeBlockStyles = window.getComputedStyle(ABT_Element, null);
ABT_Element.style.lineHeight = ABT_LineHeight;
let CodeBlockHeight = ABT_Element.clientHeight;
let boxSizing = CodeBlockStyles.getPropertyValue("box-sizing");

/*This Below Conditional Statement is Inspired by an answer from StackOverflow
link to the answer: https://stackoverflow.com/a/37623987/5321854
*/
if(boxSizing === 'border-box'){
var padding_top = parseInt(CodeBlockStyles.getPropertyValue("padding-top"));
var padding_bottom = parseInt(CodeBlockStyles.getPropertyValue("padding-bottom"));
CodeBlockHeight = CodeBlockHeight - padding_top - padding_bottom;
}

let lineHeight = CodeBlockStyles.getPropertyValue('line-height');
let TotalLines = Math.floor(CodeBlockHeight/parseInt(lineHeight));
console.log(TotalLines)
return TotalLines;
}
</script>

ABT_CountLines(".post-body");

The Red highlighted text is where you need to add your element id or class name to calculate the number of lines in that given element.

To invoke the above function you need to call it wherever you want the number to appear.

The purple highlighted text in the code editor is inspired by an answer from StackOverflow you can see a link to that answer in the code section above.

Explanation:

We are using getCompuedStyle Method because it dynamically gets updated and gives us the updated values.

After that, we are fetching all the important properties of the element like line-height, height, padding-top and bottom.

When we get these values we need to apply a condition whether the box-sizing is border-box if it's true then we need to subtract padding top and bottom from the height.

We are using the clientHeight Property instead of offsetHeight because client height includes height with padding but no border and margin where offsetHeight includes padding, borders no margin

In this case, we don't need borders so we used clientHeight to avoid extra work.

After this apply the formula and get the number of lines.

This is so far the best solution to get the number of lines but if you have a much better solution then you are most welcome.

Count Words Length Of Any HTML DOM Element - JavaScript

noreply@blogger.com (MM Nauman) — Tue, 04 Aug 2020 03:54:00 +0000

Hello, Friends back with another easy trick that can help you to count how many words in any HTML Element with Native a JavaScript Method.

Introduction:

In this Trick, we are going to use javascript Native innerText property to access the text content of from HTML DOM Element.

We have a few more options like textContent or nodeValue but these properties when used they gonna fetch all the text even inside the script and style tags and also the unnecessary whitespace so we don't want this words to get counted as this content gonna hide from users so no use of counting these.

How To Count Words?:

The easiest way to count words is when the characters are separated by spaces means when a sequence of characters are separated by space then we assume that it becomes one word and after space next sequence characters until next space.

We identify words in an element from the spaces that separated them from each other so we break each word after space and add it to an array that array will be used to count the words.

We used the length property of that array to get the length and this length will be the total words in that element and webmasters and blogger can use this in their plugins or widgets.

The Code:

function ABT_CountWords(Element){
let arrayOfWords = document.querySelector(`${Element}`).innerText.split(" ");
return arrayOfWords.length;
}

ABT_CountWords(".post-body");

The red highlighted text is where you need to add your element id or class name to get the length of the word from it.

To invoke the above function you need to call it wherever you want the words to count to get displayed.

Hope this easy tricky post may have helped you in learning something new. If you liked it don't forget to share.

How to Add Stylish Table Of Contents Widget in Blogger Posts?

noreply@blogger.com (MM Nauman) — Fri, 31 Jul 2020 19:12:00 +0000

Hello, Friends today I came up with a new widget that will fetch your blog posts and extract all the headings and make it a Table of Contents automatically with anchor links to the sections.

You don't need to add all the contents manually every time you just need to invoke the given function in a post or page where you want that widget to appear.

The live demo of this widget can be seen in this post above.

Table Of Contents Features:

Fully Dynamic and Responsive.
Stylish and Elegant build.
Collapsible Header.
Build with HTML5, CSS and Pure Javascript (No Libraries).
Smooth Animations and transitions effects.

Adding The Widget:

Step 1: Adding the code

Firstly go to Blogger → Template → Edit HTML and search for the code </body> and paste the given code just before it.

<style>
.ABT_Active{display:block !important}#TOC{display:grid;background-color:#f4fa9c;padding:20px;color:#f469a9;width:80%;justify-content:baseline;align-items:baseline;margin:0 auto;border:4px solid #88bef5;box-shadow:0px 0px 3px 1px #88bef5}#TOC span{font-size:1.4em;font-weight:bold;display:block;cursor:pointer}#TOC ol{padding:0px 0px 0px 15px;justify-content:baseline}.ABT_Animate{transition:all .1s;animation-name:ABT_Aanimation;animation-duration: .4s;animation-iteration-count:infinite}#TOC li{font-size:1.2em;padding:8px 0px}#TOC a{color:#ba53de;text-decoration:none}#TOC a:hover{color:#f469a9;text-decoration:none}@keyframes ABT_Aanimation{10%{transform:translate(1px, 1px) rotateY(0deg)}20%{transform:translate(-1px, -2px) rotateY(-1deg)}30%{transform:translate(-3px, 1px) rotateY(1deg)}40%{transform:translate(4px, 2px) rotateY(0deg)}50%{transform:translate(2px, -1px) rotateY(1deg)}70%{transform:translate(-2px, 2px) rotateY(-1deg)}80%{transform:translate(-3px, 1px) rotateY(0deg)}90%{transform:translate(1px, 2px) rotateY(0deg)}100%{transform:translate(0px, -2px) rotateY(-1deg)}}
</style>

<script async src='https://rawcdn.githack.com/mmnauman/allbloggertricks-files/8ef30d65aa506e2a0e5a188545a368f6adb75547/TOC_Builder.js' type='text/javascript'></script>

After completing the first step now its time for the final step which is very easy let's do it.

Step 2: Placing the widget inside posts/static pages.

Copy the below code in any post or page where you want this widget to appear:

document.addEventListener("DOMContentLoaded", () => {
ABT_TOC(".post-body", "h2");
});

Settings: Adjusting widget

The Red highlighted text is for the container tag inside the post or pages if you don't know comment your blog URL will tell you. If you are a blogger user then this will work for you.
The Orange highlighted text is for the heading tags you want the widget to catch from your post and make it the table of contents. Means the heading tags you used for headings. by default, it is h2 change it according to your needs.

Now, whenever you are writing your post just add that above three lines of code then the widget will appear and this will help in structuring your posts and make it more user and SEO friendly.

12+ Top Royalty-Free Stock Photos Sharing Sites For Post Cover

noreply@blogger.com (MM Nauman) — Fri, 01 May 2020 07:12:00 +0000

Having an attractive image in your website or blog post can grab the attention of the audience.

This can make a great change to how your viewers respond to your WordPress website. Well, it is certain that the content is king but displaying eye-catching photographs surely add value to increase the number of frequent visitors you receive, and eventually lead your website to attain its goals in a better way.

But the problem starts while finding the good photos that can give your website the X-factor can be hard. In this article, we have tried to make your journey easier by making the list of the some best free and top stock photography websites.

There are many free stock photo websites that will quickly and easily allow downloading a high-quality image and help blogger or small business that needs occasional photographs for WordPress website content. So, let’s have a look over our list of some finest resources.

1. Unsplash:

It is a website dedicated to sharing stock photography which allows upload photos to its website. It is then curated by a team of professional and experienced photo editors.

It has over 110,000 contributing photographers and generates more than billions of photo impressions per month and having their growing library of photos.

2. Pixabay:

Pixabay is an international website for sharing beautiful photos, illustrations all around the world. Founded in 2011 now emerged out having a personal image collection into an interactive online community, with this it supports 20 languages.

It is having stunning free images having 1.6 million royalty-free stock photos and videos.

3. PicJumbo

With this, you can download beautiful stock photos and images in high resolutions for personal and commercial use.

Picjumbo has a lot of categories from technology to animals, fashion, foods etc.

4. RawPixel

With RawPixel you can get creative, with safe to use royalty-free stock images, vectors and public domain illustrations. It gives options to download for commercial use for free and premium.

5. PikWizard

PikWizard is stock photo game, and some bloggers cite it as a well-kept secret and new player in this game.

These websites have more than 30,000+ completely free images, many of which are exclusive. The images of PikWizard are licensed under Creative Commons zero consist of nature shots, photographs of people as well as of desktop wallpapers.

By mouseover on images, you can see options to download, edit etc.

6. Shutterstock

It provides ample option of stock photography, stock footage, stock music, editing tools and also maintains a library of around 200 million royalty-free stock photos, vector graphics, and illustrations.

Shutterstock has over 100,000+ contributors with an "active customer base of more than 1.5 million people in 150 countries.

7. Pexels

Pexels includes hundreds of thousands of photos, but it really takes the favourite spot on many bloggers. Because the images they have are just beautiful and decent.

The photos they use are especially useful for the business and technical side of people.

8. Stocksnap

Stocksnap includes hundreds of latest images weekly and regular intervals and they have a great search tool to help you quickly find specific photos based on the keywords.

9. Wikimedia Commons

From the name you might have guessed; it is Wikipedia’s online repository for all the photos they use. That means there is a photo for almost anything you might be looking for.

10. Burst (by Shopify)

Burst is a free stock photo platform that is managed by Shopify. The photographers of this website are frequently shooting and uploading high-resolution images to help others the world around to look for latest and trending images.

11. FoodiesFeed

It is the best resource present on the internet which is highly visually appealing especially for free food photos in high resolution.

12. Kaboompics

Kaboompics is one of its type and most widespread source of free images for lifestyle, interior designs and used by specialized bloggers.

Every month, almost over 70,000 people from 209 countries visit Kaboompics. Their image appears on sites like BBC, CNN, Forbes, Cosmopolitan, Yahoo, iSpot, BuzzFeed, Hubspot and many more.

Besides these, there is many other free images stock WordPress website presents, which can help us to look for the latest and trending images some of them are:

FreeImages, FreePhotos, FreeStocks, Gratisography, IM Free, Jay Mantri, Life of Pix, Moose, ShotStash, ScatterJar and many more.

(Fixed) Brackets Live Preview Chrome needs to be relaunched

noreply@blogger.com (MM Nauman) — Sun, 26 Apr 2020 11:46:00 +0000

Today when I installed Brackets Code Editor and tried the live preview feature then I got this error Chrome needs to be relaunched with remote debugging enabled. I tried few things then I saw there is another feature of Brackets Editor experimental live preview So I tried to Enable it then the issue got resolved.

Without wasting much time I will show you how to fix this issue step by step as this is very easy to self fix but for some newbies, it's harder to fix for them I'm writing this tutorial post.

Follow the below steps to resolve the issue

Click on File > then select the experimental live preview and enable it as shown in the image below:

Restart the code editor (Close the window and open it again) Now there is the last step that you must follow in order to use the live preview feature.

Now you must be having a file structure for your project all you need to do is Rename your HTML file to index.html as shown in the screenshot below:

After renaming click on live preview it should work smoothly and in realtime, you will see the changes reflecting in the browser.

If you don't rename the HTML file to index you will see this type of popup error displaying on your editor window.

This is it thanks for following this article and if you like it please share it and if you are still struggling with this issue then please do write to us in the comments section will try to help you.

JavaScript shortcuts DOM Element Helper Functions for fast coding

noreply@blogger.com (MM Nauman) — Tue, 01 Oct 2019 03:24:00 +0000

We know how fast javascript is growing and evolving with new methods to manipulate the DOM. When you compare vanilla javascript selectors code with jQuery Selectors you will find javascript code is lengthy and repetitive, to avoid this I have created a helper function which will make your coding life little easier and helps you to concentrate more on productivity than the code.

Hey, I have updated the last post and this time we are back with an awesome post.

Here is the code you can create a helperFunctions.js file and paste this below code inside that and add the reference to this file in your HTML page.

If you don't find the above method interesting then add it in the page just add two scripts tags opening and closing and place the code there and use it anywhere.

function sE(element, boolean) {
if (element && boolean === false) {
return document.querySelector(`${element}`);
} else {
return document.querySelectorAll(`${element}`);
}
}

The above function is to select HTML elements to manipulate them whether to select one or all you can do this using one function.

Brief Explanation of the Function:

sE: This is the name of the function. I have used a short name you can change this and use whatever you wish.

Arguments:

element: Here you can add id, class, tag name, attribute selector.
for example:

sE("h1", false);
sE(".container", "false");
sE("#id", false);

The above are the examples and the ways how this helper function works. If you are concentrating on reading then you have noticed that why this false value is coming as the next or second argument when invoking the function? let me explain you.

boolean: this is the second argument you have to add true or false based on your project.

True means to select all the elements either of the class, tag name etc

False means to select the single element of that either id, class, tag etc

This is the required field so missing may cause the code to break and produce errors.

Here a complete working example of the above function

let heading = sE("h1", false);

Here in the above example, I'm storing h1 tag in a variable. See how easy it has become to select any elements and to modify them.

4 Useful Tips to Improve SEO Ranking of Your Videos

noreply@blogger.com (MM Nauman) — Thu, 07 Mar 2019 06:46:00 +0000

At first glance, it may seem as though improving the SEO for videos that you publish on your blog is difficult. In some ways that are true, especially seeing as search engines can’t actually ‘watch’ videos and determine what they are about.

Despite that there are several useful ways that you can improve the SEO of your videos and provide search engines with more information about them:

Publish the video transcript near the video:

Transcribing the audio in your video and then publishing it will give search engines written content that they can use to understand your video better. If you want you can manually transcribe the video or use automated transcription tools to help.

In either case, it is best to publish the transcript near the video – ideally right below it. If you’re concerned that will disrupt the layout of your website, you could insert it in a collapsible HTML element.

Optimize the page speed of the webpage

As you add videos to your blog you should track the page speed and optimize them as necessary. If you aren’t carefully videos can have a significant impact on the page speed, which will affect your rankings on search engines.

Some of the factors that can affect the page speed include self-hosting videos or setting them to autoplay. In some cases, you may need to optimize other elements on your webpage to improve the page speed after you publish videos.

Add in video schema markup

Video schema markup will help provide search engines with lots of relevant information about your video. Some of the details that you can include are the title, description, duration, upload date, and view count.

On top of that, you will be able to assign a custom thumbnail to your video using schema markup as well. That can help to improve the clickthrough rate of your video when it is listed on search engines, which will both improve your SEO and its overall impact.

Make sure the video is mobile-friendly

Search engines place a lot of importance on how mobile-friendly websites are, and your video SEO should factor that in. The web design and video player should be responsive, and you may want to create versions of the video in different resolutions to cater to some mobile devices.

For example, you could use Movavi Video Converter as an HD video converter to ensure that your videos are in the resolutions (and formats) that you require.

Each of the tips listed above can have a big impact on your video SEO and it is crucial that you take steps to improve them. If you do the videos that you publish on your blogs should get listed faster, rank better, and have enhanced listings too.

It should be noted that there are lots of other steps that you should take if you want to truly scale the rankings of search engines. That being said these tips can help give you a solid foundation that you can start with.

30+ Facts That Proved (Why You Should Choose WordPress?)

noreply@blogger.com (MM Nauman) — Thu, 28 Feb 2019 10:59:00 +0000

Do you know what’s common between Mashable, Laughing Squid, and BuzzMachine, apart from the fact that all are top-ranking blog sites?

Each one of these uses WordPress. And so do 32.5% of all websites on the internet.

So if you are looking for a content management system for your new site, you should perhaps look no further than WordPress. If one-third of the internet is using WordPress, it must be really good.

But what makes WordPress so popular in the first place?

Well, there are many reasons. For starters, you don’t have to pay a dime to use the WordPress software. Anyone can download it from WordPress.org and start using it straight away--no questions asked.

The most amazing thing about WordPress is that you can install it, customize your site, and add new features without learning any coding or hiring an expensive developer.

Installing WordPress is a cinch. Most hosts today offer one-click WordPress installation to users. And in case you plan to use WordPress.com, a commercial blog hosting service provider, you’ll get WordPress pre-installed.

Similarly, adding new features to your WordPress site is ridiculously easy. At a press of a button, you can enable advanced features on your site by installing relevant plugins and improve your site’s performance and boost customer experience.

For instance, a fast loading site is crucial for delivering a satisfying browsing or online shopping experience to customers. There are WordPress plugins available, some even completely free, that help you load your site faster. One such plugin is WP Super Cache, which is the 6th most popular WordPress plugin, having been downloaded 3.9 million times.

Building Secure, Mobile & Search Engine Friendly Websites in 2019

noreply@blogger.com (MM Nauman) — Sun, 10 Feb 2019 06:14:00 +0000

Only having a website on Wordpress is not going to add any value for better returns. Your Website must be optimized and beautiful to enhance its attractiveness. Why you must take care more to it let’s have a look.

So, guess how many blog posts people do publish every day.

Any ideas?

Well, it is estimated that Word Press users alone publish more than 2 million posts every day. That comes out to be 25 blog posts every second. So where is our website get the chance in the queue of many? So to stand out of the crowd of millions of the website your website must be best. Not a surprise that millions of users search the term “SEO” on Google daily.

But what does SEO even mean?

Definition: According to Wikipedia, SEO is

Search engine optimization (SEO) is the process of affecting the online visibility of a website or a web page in a web search engine's unpaid results

In Simple language, you can assume SEO as Optimizing your site & following Search Engine's Requirements to rank your site organically higher in the Search Engine Results.

Search Engine like Google checks 100's of Factors to rank your site from Content to Authority of the Site. From Backlinks to Spam history of your site everything will be checked before your site is indexed higher in their pages.

If you come across the below problem, it’s alarming as:

Your site is not getting proper ranking in search terms of the engines.
You are not able to find potential customers.
In many cases, a not well-designed site could be the cause of the drop in the ranking of your WordPress site.

If you are very new in Blogging The Follow this Guide: How to Create a Blog and Earn Money for Living

What is an SEO friendly website?

A website which is well designed and developed by using SEO strategies design layout and website coding. The best website SEO sociability is when all of the following basics are taken care:

Marketing strategy and Keyword research
On-page and off-page SEO and SEO coding
Local SEO and citations
How engagement going on social media
Quality of the Content and Reputation.
Content should be unique and good.
Improve Authority of the site by organic backlinks
Optimizing images (Adding relevant ALT, Title tags to the images and using compressed images)
Optimizing your robots.txt file.
Reducing the Bounce rate.
The number of Ads should be less the content area. (Bad user experience)
Mobile First Blog or Site (Use Responsive Templates and themes)

Check This Guide for Off-page and On-page SEO Optimization Techniques

Viewing the website well on a phone and tablet is becoming the need of time. Nowadays, most people use the word press websites on mobile and which are going to increase day by day. There are many WordPress plugins present; which are free of cost that can be used to make your website mobile friendly.

Best plugins to Build SEO Friendly Sites:

Always install plugins that are frequently updated and have good authority (To check authority please check the total installs and Ratings). I'm sharing only the top SEO Plugins which are at a peak in terms of Downloads and Features.

These two plugins have similar features but The Yoast plugin has a little edge over the All in One SEO pack in dealing and avoiding duplicate content issue by Setting canonical URLs.

Some of the mobile-friendly plugins are given below:

WPTOUCH
AMP
TOUCHY
SUPERFLY

Steps to make your website secure:

You can secure your WordPress website by guarding the login page and preventing brute force attacks
Setup a website lockdown feature so you get notified of this unauthorized activity.
Well with Use of 2-factor authentication on the login page is also a good security measure.
Applying an SSL (Secure Socket Layer) certificate is one of the best moves to secure the admin panel.
Adjust your password strength by adding uppercase and lowercase letters, numbers, and special characters.

By implementing all the above steps you can be on the long term race to be among the best of the website to bring better output. So that way, next time your word press website being visited it will be responsive, optimized and friendly, but content will be accessible in the blink of an eye!

Always Update Plugins, Themes and follow the latest practices in web developing to keep your site Secure, beautiful, SEO And Mobile Friendly.

Hope you like this article, Don't forget to share which plugins your are using to optimize your site in the comments section below.

Ultimate Guide: Learn WordPress Duplicate Content And Its Types

noreply@blogger.com (MM Nauman) — Tue, 29 Jan 2019 17:40:00 +0000

Wordpress Content Description:

When we talk about blogging one thing that will come first in our thoughts is WordPress, it has the hold as best Content Management System title undisputedly. It manages the optimization for websites as its SEO optimized. with 100's of plugins.

Organic Search engines like Google, Yahoo etc. gives more traffic to Wordpress as it has the potential of becoming SEO friendly by correctly configuring it, It has such vast support for Third party plugins like Yoast, jetpack, All in one SEO etc. Hence so it manages the contents for blogs very well, but we know it’s the content at last which matters. Content is the King, so we must give priority to the content of the blog we dealing with.

There is a problem of content duplicity which kills the quality of your website, and hence, here in this article, we will discuss how to deal with this problem.

So get ready for a drive for our smooth ride with our blog to win the race against duplicity.

What is duplicate content?

Generally, duplicate content can be defined as content which could be accessed by multiple URLs of websites or blogs, which spoils content efficiency.

Due to this the visitor are not able to get quality content. Added on the pages with little to no content are also considered to be duplicate content.

There are multiple problems that can occur due to the presence of the Duplicate Content:

Duplicate content makes less or no value for your visitors and puzzles search engines.
SEO performance is harmed by the presence of it.
Duplicate content decreases the ranking and performance of the website or blog during the search.
It can be caused by technical mishaps and manually copied content.

Blogs with duplicate content can be penalized by Google. Yes, you heard it right Manual Actions From Google.

What actually is a Manual Action?

According To Google when a Human Reviewer at Google reviewed a blog/site and they found the site doesn't compliant with Google's webmaster quality guidelines and it is just trying to trick the search engines to manipulate the search Index.

What happened when Manual Action strikes on our blog?

The first thing you will not be knowing whether your blog is stricken by Manual Action. because Google told in this article they can lower your blog ranking without notifying or indicating user.

How To Know Whether the Blog is Penalized?

1. You can get the notification if you register your blog in Google Webmaster Tools.
In the Manual Action Section, you will find whether your blog is hit by a manual action or not.

2. The sudden drop in organic traffic can also be the cause of Manual Action. Register your site in Google Analytics then weekly check how much is your traffic? Check for a sudden drop in traffic.

Which Manual Action is for Duplicate Content?

Google Have classified Manual Actions based on the user actions to manipulate search engine to achieve their desires.

Google has more than 10 types of Manual Actions but for the duplicate content which contains no weight. it has Thin content with little or no added value Manual Action.

What Google has to say about this please check:

Types of duplicate content:

These are the Types of duplicate content that we come across are discussed below:

Scraped content:

The Scraped content can be defined as content which is not original on a site and has been copied.

These can be copied from some another website without permission of the owner of the website. Google may be sometimes not abler to tell difference between both of the original and the copy, so it's often the site owner's task to be on the lookout for scrapers.

As we know it adds no benefit to the ranking. The content owner must know; what to do if their content gets stolen.

Syndicated content:

Syndicated content or syndication of the content is when it gets republished on some other third party website, but with the permission of the original piece's author.

Well as we know it’s a legal way to get your content in front of the new viewer to increase the audience base.

It's important to set some set of rules so that the third party publisher who is working with to make sure syndication doesn't turn out be a problematic issue for the website.

With the use of canonical tags, you can authenticate the originality of content.

HTTP and HTTPS pages:

This is a problem that occurs commonly when internal duplication problems are identical HTTP and HTTPS URLs on a site.

These issues arise when the switch to HTTPS isn't implemented with the thorough attention the process requires.

The most common circumstances when this occurs are:

This can happen if there are backlinks from other sites directing to HTTP pages, It happens because some internal links on your site still contain the old protocol, and the non-secure pages do not redirect visitors to the secure ones.

Printer-friendly pages:

It happens as your site's pages have printer-friendly versions accessible which is accessed via separate URLs, it will be easy for Google to find and crawl those through internal links. As content on the page itself and its version which is printer friendly are going to be identical.

How Google find Duplicate content:

So now, this question might be in your head, how Google identify duplicate content. The answer is Crawlers.

In simple Crawlers is a set of instruction which is programmed to visit various sites over the internet. So, websites or specific pages can be selectively visited and indexed. Crawlers often called as spiderbots, got the name because it crawls through a site a page at a time.

In this way the crawler bots search your site, they will recognize the duplicacy of the site and so, it is indeed duplicate content.

Conclusion:

In this article, we learned about Duplicate Content in WordPress, Manual Action on Duplicate Content by Google and How Search Engines find duplicate content.

In the next article, I will explain you step by step how to fix the duplicate content issues. Hope all of you learned something useful from this tutorial. Please share this article on your social pages.

Best Budget Laptop with fair Graphics for Education under 30k

noreply@blogger.com (MM Nauman) — Mon, 21 Jan 2019 07:53:00 +0000

Hello, Friends If you are a Student, Developer, Civil Engineer searching for a Budget laptop that can run big Softwares and the one that should not put a hole in your pockets.

AMD is giving a tough competition to Intel when it comes to its series Ryzen which is power efficient and has some Good Integrated graphics compare to Intel.

Most of the Laptops which have Intel Core i5 Processor of 8 Generation and 8GB of Ram the starting price is around 38k in Indian Rupees.

The Best Budget Laptop when it comes to performance is Lenovo Ideapad 330 With Ryzen 5, 8GB of Ram and Integrated Vega 8 Graphics.

You can get this laptop at 27,240 Rupees in Flipkart Republic Day Sale when you pay with SBI Card you will this 10% extra flat discount. This offer is only valid until 22 January 2019.

Buy @ Flipkart Lenovo Ideapad 330 Ryzen 5 Quad Core

We have checked the benchmark of this CPU is actually a beast when comes to performance check its benchmark score.

Image Source: https://www.cpubenchmark.net/

Why Buy:

Ryzen 5 2500U Powerful Quadcore Processor
Vega 8 Powerful Integrated Graphics
8GB of Ram
1TB Hardisk
The laptop is slim and is Beautiful

Cons:

Laptop Display is Poor
Battery drains in 3 hours
No Backlights in Keyboard

We can neglect these cons when we are focusing on performance-based laptops this laptop can run big software and mid-level games easily.

Comparing Ryzen 5 2500U with Intel Core i5-8250U @ 1.60GHz

Image Source: https://www.cpubenchmark.net/

This processor is giving a very tough competition to Intel Core i5 8250U Processor Which is having a slightly higher score.

Lenovo 330 Ryzen 5 2500U Graphics:

I have also checked the Graphics Benchmark of Vega 8 which is an Integrated Graphics within the processor.

When I compare it with the Intel i5 8250U Graphics then Ryzen Won the game here.

Image Source: https://www.videocardbenchmark.net/

Conclusion:

Intel Processors are always Good But their prices are not so Consumer Friendly but they have got a good competitor who is offering similar features at less price now let see whether Intel will alter their products pricing.

All the information collected is from 3rd Party sites so if there are any mistakes then, please say in the comments.

Submitting URL in New Interface of Google Webmaster Tools 2019

noreply@blogger.com (MM Nauman) — Sun, 20 Jan 2019 19:28:00 +0000

Hello, Friends Today I got a request from a blogger who is a little confused in using the webmaster tools new interface and submitting his blog posts or homepage for fetching and indexing.

As we know Google has removed the feature of submitting any link to Google. Now, blogger, Site Owners can only submit their registered site and its links in the webmaster tools.

We know Google updates its user interface at regular intervals and make it compatible with the new Design standards.

Last year Google Updated its Interface of Webmaster tools which is the recommended tool for every Webmaster.

Google removed individual sections like Fetch, sitemaps etc and merged it all together in the new interface which is little confusing for the newbie webmasters.

In this post, I will help you to get familiarize with the new interface and how to submit your URL to Google in Webmaster tools.

Let Start the Steps to Submit URL to Google in Webmaster Tools:

1. First Go To https://www.google.com/webmasters/ and Sign-in

2. You will be redirected to the New interface of Google Webmaster Tools.

3. You will find the Search Box at the Top Center of the Page as shown in the image below.

4. Enter your Page Url then click Enter. You will see the URL Stats whether it is already indexed or not.

5. If it is already indexed on Google but you have updated the Page Then Click on Request Indexing Again.

6. If the URL is new and not yet indexed then click on Request Indexing without any second thought.

7. It will take a few hours or days depending on Google how they honour your request. Normally it indexes within a few mins.

Most of the blogger depends on organic traffic. It is a very good habit to submit our new posts or updated posts as soon as possible for indexing so that the original content will be considered first.

What will happen if some other blogger copied your post but his post got indexed earlier then your's then your original work will go into drain till you file a DMCA Complain against that blog post this will take a lot of time and you will lose a lot of traffic and get a headache?

Writing SEO Optimized articles and submitting it faster will make your blog post get indexed and rank good on Google Search.

A couple of FAQ Related to the Article:

How to make Google reindex a site?

Follow the Same process shown above just enter the URL and click on Request Indexing.

Why Google is not indexing my site?

When you enter the URL You will see the page stats whether it is indexable or it is blocked by robot.txt or it is not optimized etc. In the end, it is on Google How they honour Your Request so but make sure your page is optimized and not blocked.

That's It Thanks For Following our Tutorial '' How To Submit URL in New Interface of Google Webmaster Tools 2019 '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.

155+ Ping Submit List - Fastest Indexing New Posts in WordPress

noreply@blogger.com (MM Nauman) — Sat, 19 Jan 2019 18:33:00 +0000

Every Blogger wants their blog posts to get index by Search Engine faster as soon as they write the post.

There will be two sections every blogger works on first Pre-writing and second Post-writing. When a blogger completes the pre-writing work then the post writing started.

The post writing includes submitting the blog post to the search engines to get it indexed as fast as possible.

Most bloggers use automated ways to submit the new post to major search engines. Wordpress users have edge over other CMS Available online.

Wordpress have built-in option to add sites to submit the post and circulate online to the major search engines as soon as you write and publish it.

By default, Wordpress have few update services included but you can add more. You can read more about Update Services.

List of Update Services/ Ping List 2019

http://www.newsisfree.com/xmlrpctest.php
http://www.snipsnap.org/RPC2
http://www.weblogues.com/RPC/
http://xmlrpc.blogg.de
http://bing.com/webmaster/ping.aspx
http://ping.blo.gs/
http://blog.with2.net/ping.php
http://blogping.unidatum.com/RPC2
http://blogpingr.de/ping/rpc2
https://ping.blogs.yandex.ru/RPC2
http://blogsearch.google.ae/ping/RPC2
http://blogsearch.google.at/ping/RPC2
http://blogsearch.google.be/ping/RPC2
http://blogsearch.google.bg/ping/RPC2
http://blogsearch.google.ca/ping/RPC2
http://blogsearch.google.ch/ping/RPC2
http://blogsearch.google.cl/ping/RPC2
http://blogsearch.google.co.cr/ping/RPC2
http://blogsearch.google.co.hu/ping/RPC2
http://blogsearch.google.co.id/ping/RPC2
http://blogsearch.google.co.il/ping/RPC2
http://blogsearch.google.co.in/ping/RPC2
http://blogsearch.google.co.it/ping/RPC2
http://blogsearch.google.co.jp/ping/RPC2
http://blogsearch.google.co.ma/ping/RPC2
http://blogsearch.google.co.nz/ping/RPC2
http://blogsearch.google.co.th/ping/RPC2
http://blogsearch.google.co.uk/ping/RPC2
http://blogsearch.google.co.ve/ping/RPC2
http://blogsearch.google.co.za/ping/RPC2
http://blogsearch.google.com.ar/ping/RPC2
http://blogsearch.google.com.au/ping/RPC2
http://blogsearch.google.com.br/ping/RPC2
http://blogsearch.google.com.co/ping/RPC2
http://blogsearch.google.com.do/ping/RPC2
http://blogsearch.google.com.mx/ping/RPC2
http://blogsearch.google.com.my/ping/RPC2
http://blogsearch.google.com.pe/ping/RPC2
http://blogsearch.google.com.sa/ping/RPC2
http://blogsearch.google.com.sg/ping/RPC2
http://blogsearch.google.com.tr/ping/RPC2
http://blogsearch.google.com.tw/ping/RPC2
http://blogsearch.google.com.ua/ping/RPC2
http://blogsearch.google.com.uy/ping/RPC2
http://blogsearch.google.com.vn/ping/RPC2
http://blogsearch.google.de/ping/RPC2
http://blogsearch.google.es/ping/RPC2
http://blogsearch.google.fi/ping/RPC2
http://blogsearch.google.fr/ping/RPC2
http://blogsearch.google.gr/ping/RPC2
http://blogsearch.google.hr/ping/RPC2
http://blogsearch.google.ie/ping/RPC2
http://blogsearch.google.in/ping/RPC2
http://blogsearch.google.it/ping/RPC2
http://blogsearch.google.jp/ping/RPC2
http://blogsearch.google.ki/ping/RPC2
http://blogsearch.google.kz/ping/RPC2
http://blogsearch.google.la/ping/RPC2
http://blogsearch.google.li/ping/RPC2
http://blogsearch.google.lk/ping/RPC2
http://blogsearch.google.lt/ping/RPC2
http://blogsearch.google.lu/ping/RPC2
http://blogsearch.google.md/ping/RPC2
http://blogsearch.google.mn/ping/RPC2
http://blogsearch.google.ms/ping/RPC2
http://blogsearch.google.mu/ping/RPC2
http://blogsearch.google.mv/ping/RPC2
http://blogsearch.google.mw/ping/RPC2
http://blogsearch.google.nl/ping/RPC2
http://blogsearch.google.no/ping/RPC2
http://blogsearch.google.nr/ping/RPC2
http://blogsearch.google.nu/ping/RPC2
http://blogsearch.google.pl/ping/RPC2
http://blogsearch.google.pn/ping/RPC2
http://blogsearch.google.pt/ping/RPC2
http://blogsearch.google.ro/ping/RPC2
http://blogsearch.google.ru/ping/RPC2
http://blogsearch.google.rw/ping/RPC2
http://blogsearch.google.sc/ping/RPC2
http://blogsearch.google.se/ping/RPC2
http://blogsearch.google.sh/ping/RPC2
http://blogsearch.google.si/ping/RPC2
http://blogsearch.google.sk/ping/RPC2
http://blogsearch.google.sm/ping/RPC2
http://blogsearch.google.sn/ping/RPC2
http://blogsearch.google.st/ping/RPC2
http://blogsearch.google.tk/ping/RPC2
http://blogsearch.google.tl/ping/RPC2
http://blogsearch.google.tm/ping/RPC2
http://blogsearch.google.to/ping/RPC2
http://blogsearch.google.tp/ping/RPC2
http://blogsearch.google.tt/ping/RPC2
http://blogsearch.google.tw/ping/RPC2
http://blogsearch.google.us/ping/RPC2
http://blogsearch.google.vg/ping/RPC2
http://blogsearch.google.vu/ping/RPC2
http://blogsearch.google.ws/ping/RPC2
http://news2paper.com/ping
http://ping.bloggers.jp/rpc
http://ping.fc2.com
http://ping.rss.drecom.jp
http://rpc.bloggerei.de/ping/
http://rpc.pingomatic.com
http://rpc.technorati.com/rpc/ping
http://rpc.twingly.com
http://services.newsgator.com/ngws/xmlrpcping.aspx
http://api.feedster.com/ping
http://api.moreover.com/RPC2
http://api.moreover.com/ping
http://www.blogdigger.com/RPC2
http://www.blogstreet.com/xrbin/xmlrpc.cgi
http://ping.syndic8.com/xmlrpc.php
http://ping.weblogalot.com/rpc.php
http://rpc.weblogs.com/RPC2
http://www.feedsubmitter.com
http://blo.gs/ping.php
http://www.pingerati.net
http://www.pingmyblog.com
http://geourl.org/ping
http://ipings.com
http://www.weblogalot.com/ping
http://rpc.blogbuzzmachine.com/RPC2
http://ping.fc2.com/
http://blogs.yandex.ru/
http://rpc.bloggerei.de/
http://ping.blogs.yandex.ru/RPC2
http://ping.rss.drecom.jp/
http://rpc.odiogo.com/ping/
http://mod-pubsub.org/kn_apps/blogchatt
http://ping.amagle.com/
http://ping.bloggers.jp/rpc/
http://ping.exblog.jp/xmlrpc
http://blogsearch.google.com/ping/RPC2
http://bblog.com/ping.php
http://bitacoras.net/ping
http://blog.goo.ne.jp/XMLRPC
http://blogdb.jp/xmlrpc
http://blogmatcher.com/u.php
http://bulkfeeds.net/rpc
http://coreblog.org/ping/
http://www.lasermemory.com/lsrpc/
http://ping.blo.gs/
http://ping.feedburner.com
http://ping.rootblog.com/rpc.php
http://pingoat.com/goat/RPC2
http://rpc.blogrolling.com/pinger/
http://rpc.pingomatic.com
http://topicexchange.com/RPC2
http://trackback.bakeinu.jp/bakeping.php
http://www.bitacoles.net/ping.php
http://www.blogoole.com/ping/
http://www.blogpeople.net/servlet/weblogUpdates
http://www.blogshares.com/rpc.php
http://www.blogsnow.com/ping
http://www.mod-pubsub.org/kn_apps/blogchatter/ping.php
http://www.newsisfree.com/RPCCloud

How to add this Ping List URLs In WordPress Blog?

Login to your WordPress Account
In the Left Sidebar Go to Settings >> Writing >> Update Services Section.
Copy and Paste the Above Ping list there.

Conclusion:

I'm very happy that you are able to add this ping list by yourself this is the initial step we have taken to Search Engine Optimization of the Blog.

There are many things we need to take care of like optimizing your Blog On-page and off-page SEO.

I will share all the SEO Tips and methods in my upcoming articles.

That's It Thanks For Following our Tutorial '' 155+ Ping Submit List - Fastest Indexing New Posts in WordPress '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.

Automated Title, Alt Attributes for Blogger Posts Images - JavaScript

noreply@blogger.com (MM Nauman) — Thu, 10 Jan 2019 19:40:00 +0000

ALT Attribute is the Alternate Text or the description of the image this will display when your image is not loaded for some reason.

This will inform the Search Engine about the image if it is not loaded.

ALT text should be Unique and Relevant to the image you are uploading.

Alt also plays an important role in accessibility. When there is no image loaded or the link to the image is broken then this will be very hard for visually impaired users to see what actually is not loaded or whether there is an image or not.

Relevant Alt tags can help your site/blog to rank higher in Search Engine Results Now your question is how?

When you use the right Alt attributes then your image will rank higher in Search Engines Images Search. So when any person clicks on that image it will redirect to your site hence it is one of the factors of SEO.

Title Attribute: Title attribute is different from the name of the image as the title attribute when defined it doesn't display all the time.

The title attribute is by default a hidden text when the user mouse over the image the title attribute text will be shown in the popup just above the image next to the mouse cursor.

Note: This trick will work on the empty images without alt and Title attributes.

My advice will be to add alt and title attributes explicitly to the new posts images.

How this trick will work?

This trick is a Javascript code where we take the name of the image as the alt and title attribute value.

In order, this trick to be efficient your images should have relevant image names.

Before you upload the image file just give it the exact name and then upload.

Who should not follow this trick?

This trick is not for the blogs where images are uploaded without naming it correctly.

Don't use the name of the images like 1.png, 1.jpeg etc give it short and relevant name to the image.

It will be useless if you don't have any relevant name to the images. Visually impaired users will not be able to know what exactly the image is about.

JavaScript Code for Blogger Blogs:

STEP 1: Go To Template Section As Shown in The Image Below

STEP 3: After Clicking on Edit HTML Search for
</body>
STEP 2: Copy This Below Code Before </body>

<script type="text/javascript">

let img,p,a,s;

p = /^.*[\\\/]/g;

img = document.querySelectorAll('.post img');
img.forEach((el, i, array) => {

s = el.getAttribute('src');

a = s.replace(p, '').split('.')[0].replace(/%2B/g, ' ');
if(!el.getAttribute('alt')){
el.setAttribute('alt', a);
}
if(!el.getAttribute('title')){
el.setAttribute('title', a);
}
});
</script>

STEP 3: Now save the template and check your images.

JavaScript Code for other Websites:

(Note: This will select all images)

<script type="text/javascript">

let img,p,a,s;

p = /^.*[\\\/]/g;

img = document.querySelectorAll('img');
img.forEach((el, i, array) => {

s = el.getAttribute('src');

a = s.replace(p, '').split('.')[0].replace(/%2B/g, ' ');
if(!el.getAttribute('alt')){
el.setAttribute('alt', a);
}
if(!el.getAttribute('title')){
el.setAttribute('title', a);
}
});
</script>

Concluding:

I'm very happy you have added the code and optimized your blog images.

This trick is to make your images to get the recommended alt and title attributes.

Doing this manually for new posts with relevant text will make your images more fruitful.

That's It Thanks For Following our Tutorial '' Automated Title, Alt Attributes for Blogger Posts Images - JavaScript '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.