JavaScript shortcuts DOM Element Helper Functions for fast coding

Hello! Friends I was working on a website and was just using JavaScript, not any library as it was the demand. So I thought I should create a helper function that could make our code shorter like for example I have a div element with the ID of the container. I need to select it and assign it to a variable.

Normally we have to select it like this:


var container = document.getElementById("container");

If I need to select more elements with the id's then the same code will be repeated just the difference in id's

So to make it simple like in JQuery we select the same Id in this way:


var container = $("#container");

See how JQuery saved our time but here if we don't want to use any library then what? that's why I have created a helper function. That will work similar to jquery or easier then Jquery.

This is the function we have created a helper function to get the id of the element.

function $(h){    var idSelector = document.getElementById(h);    return idSelector;}
Here we have created a function with the name of $ (dollar) and it accepts a parameter.

In this function, we have assigned a variable idSelector and given the value of document.getElementById(h);

After declaring, it will return the variable.

Now after using this function, we can get the Id of the element similar to jQuery

Example: if you have a div with the id of a container:

<div id="container">Hello, All blogger tricks</div>

Now to get the id we just need to call the above callback function:\

var content = $("container"); // Here we are calling the function name i,e $ and the parenthesis and the id name.

We will update this post as we create more helper function to get elements by tag and class name also.
Read more »

Coding Expertise not Essential For Bloggers to Start a Blog 2018

Coding Expertise not Essential For Bloggers to Start a Blog 2018

Do We Need Any Coding Expertise To Create A New Blog?

Well to answer it in a single line, no you need not be any sort of a coding expert so as to create a new blog. Although it does take some guidance while working your way around on making a blog. Blogs are, no doubt the new trend these days, it provides a platform for your ideas and merchandise if you are the business sort of person.

Blogs have become part of the online persona. Good news is, making a blog isn't rocket science. The bad news is, making a bad blog is easy, while making a good one requires a little extra ounce of effort.You don't need any coding expertise to create a new blog. All that you've got to do is covered up well in this article.

Let's get down to business and see what are the things you need, to get your blog going.

    STEP 1: Choose a Blogging Platform

    Choose a Blogging Platform

    To start a blog, you need a blogging platform. A blogging platform is a software service available online, which can be used to publish your content online in the form of a blog. There are a lot of blogging platforms available, most of which are free too, like, WordPress, Tumblr, Blogger, and more. You can create your account in one of them and start your journey. But picking the right one is a crucial decision.

    Everyone who has the slightest hint of what a blog is will know the hottest name in town. It's WordPress. It's undeniably the best blogging platform out there, and there are good reasons for it too. For starters, its free, it's extremely user-friendly, it is highly customisable,  it offers a multitude of options on themes and a long list of plugins, its basically every blogger's dream-come-true. With a staggering 72 million active users, it is evident why its the most sought-after platform.

    STEP 2: Find a Domain Name

    Find a Domain Name

    Your domain name is your address in the internet world. It is technically the short and catchy name of your otherwise long and confusing IP address which no one will ever remember. For example, the domain name of your website is ""

    Your domain name has to be a unique, easily remembered name, which should ideally help generate traffic and pop high in the search results. So make sure you use the keyword of your blog idea in the domain name. A name like "" makes it evident that you are a florist. While a name like "" makes it a bit vague on what to expect on the site, making it less easy to remember.
    You can choose how your domain name ends. It could be with the standard ".com", or with ".net", "", depending on your location and preference. It is always safe to stick to the standard ones as they are more trusted. Avoid names like .biz, .rocks, and the like as they have a fishy look about them.

    STEP 3: Self-Hosting and Domain Registration

    Self-Hosting and Domain Registration

    Why Self-Host?

    WordPress is a free blogging platform and having an account on a free blogging platform doesn't look nice, and that's due to the following reasons:
    • Like a nasty tail end, your website address will have the blogging platform name attached to it. For example, on a free blogging platform, your web address will be "", which could be a bit hard to remember. However, you can take care of that bit by hosting your own website. Self-hosting changes your web address into "". Now that looks chic.
    • You cannot advertise on a free blogging platform.  Blogs can be a source of income. But that is only possible on a self-hosted site. All the more reason to self-host.
    • Control your content with a self-hosted site. Depending on a free blogging platform means you are giving up control over your blog, which includes the power to shut you down if they wish. Yikes!
    • Self-hosting has evolved over the years to become a simple task. There are a lot of web hosting service providers who can do the job for you at a meagre rate. Fret not, its always around $5-6 per month, there are even cheaper ones.

    Domain Registration and Web Hosting at a go!

    Registering your domain name and hosting has become an easier task now since a majority of the service providers do both. Since they are bundled together, you can easily do both from the same place.

    You can register your domain with a service provider which does both hosting and domain registration. By registering, you are owning the name of your website, making sure that it is unique. Otherwise, you can choose to register your domain separately. Sites like provide great deals for the same. You can register your domain name for a very less fee, mostly around $10 per year.

    A web hosting service provides you, simply put, the storage space online for your blog content, much like how your hard drive stores the content on your computer. Find a good web hosting service and the rest is easy.

    Sites like Bluehost, iPage, Namecheap, HostGator, and GoDaddy provide easy, reliable and efficient service in both domain registration and web hosting. You can choose a package of your liking, as all of these sites provide flexible rates and great offers. Once you decide on your web host service provider, register your domain name and get your site up and running.

    STEP 4: Having a Good Looking Blog

    Now that you have a registered domain name and a self-hosted website, install WordPress in your app and log in to your very own blogging site. Bask in its pristine glory and get your design caps ready. It is essential to have a good looking design that is captivating and displays your best content to a visitor, much like how a shop is made to make the customer stay and buy your best product.

    Having a Good Looking Blog

    There are a few things to keep in mind, now that you have gotten down to content creation. Your blog is bound to have more traffic if you have checked these boxes:
    1. A compelling blog theme
    2. Plugins to maximize blog features
    3. SEO optimized content
    You can choose from a vast array of themes and layouts for WordPress, most of which are free. There are so many you can choose from like Minnosh, Rachel, Paragon, Hydra and more. You can also add from the various plugins provided by WordPress to expand the scope of your blog. You can add subscription plugins, woocommerce plugins and more. By using Search Engine Optimised (SEO) content you can generate more traffic, as your blog name will appear higher in the search results.

    STEP 5: Start Blogging

    Start Blogging

    Now that you have chosen a blogging platform, set up a self-hosted, registered domain, made a compelling look and format for your blog, all that's left to do is start blogging. You can start easy and work your way around very easily on a site like WordPress. Sublimate your ideas on your blog and make your way to a successful blog. Happy Blogging!!


    So you see, one does not need to know coding or web designing to create a stunning blog page, most blogging platforms have got that covered for you. If you are up to making a blog, you have come to the right place. 

    That's It Thanks For Following our Tutorial '' 21 Free and Premium Mobile Friendly WordPress Themes For Blogging '' 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.
    Read more »

    Add Cute Social Sharing Buttons Below Every Post on Blogger Blogs

    Add Cute Social Sharing Buttons Below Every Post on Blogger Blogs

    Today we are sharing a simple horizontal Social Media Sharing Buttons for blogger blogs that will be present below every post.
    We have added Facebook, Twitter, Pinterest and GooglePlus Sharing Buttons because these social channels are highly crowded.

    Social sharing widget is recommended to all bloggers as users after reading can share the articles which they like the most with their friends or family.

    The best position for this widget is after the post or below the post title. This widget is very responsive and very fast loading as we have used the modern methods of coding.

    These sharing buttons are mobile friendly and beautiful and we have added a hover effect to it. We have used little javascript to change the colours as is very user-friendly to store the colours in a variable comparing to changing the colours in CSS codes repetitively. But if you think that javascript can slow down or any other cross-browser issue then you can add it using CSS.

    Now Without wasting time, we will start adding the widget. As blogger still is hard to customize the type of thing for newbies so follow step by step.

      Adding The Social Sharing Widget in Blogger Blogs

      This has a color theme on the darker side of the spectrum. It is fully responsive and an ideal business theme. It supports parallax, custom backgrounds, multiple sections and theme options panel.

      First We Will Add The Styling( CSS ):

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


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

      STEP 3: Click On Edit HTML.

      STEP 4:  Press CTRL + F And Search for


      STEP 5:  Copy This Below Font-awesome Script after <head>

      <link rel="stylesheet" href="" />

      STEP 6:  Now Its Time For CSS, Search For 

      Template Code

      STEP 5:  Copy This Below Code Before ]]></b:skin>

      /* Start Social Sharing Widget By */

      .ABT_Social_Sharing .ABT_Social_Heading::before {content: "";width: 40%;height: 3px;background: #000;position: absolute;top: 12px;left: 0px;display: block;border-radius: 10px;background: linear-gradient(to right, #4764ad, #38b0f0, rgb(219, 68, 55), rgb(189, 8, 28));}.ABT_Social_Sharing .ABT_Social_Heading::after {content: "";width: 40%;height: 3px;background: #000;position: absolute;top: 12px;right: 0px;display: block;border-radius: 10px;background: linear-gradient(to right, #4764ad, #38b0f0, rgb(219, 68, 55), rgb(189, 8, 28));}.ABT_Social_Sharing .ABT_Social_Heading {position: relative;display: block;padding-bottom: 12px!important;font-size: large;font-family: arial;text-align: center;}.ABT_Social_Sharing > * {margin: 0px!important;padding: 0px;box-sizing: border-box;}.ABT_Social_Sharing {width: 100%;list-style: none;height: 50px;box-sizing: border-box;margin: 20px 0px 0px 0px!important;}.ABT_Social_Sharing ul {list-style: none;width: 100%;}.ABT_Social_Sharing ul li {width: 24%;font-size: 1em;cursor: pointer;color: #fff;display: inline-block;vertical-align: middle;height: 40px!important;border-radius: 4px;}.ABT_Social_Sharing ul li span {font-size: 28px;position: relative;left: 0px;border-right: none;border-radius: 4px;display: block;box-sizing: border-box;float: left;border-bottom-right-radius: 0px;border-top-right-radius: 0px;padding-top: 5px;padding-right: 5px;padding-left: 5px;}.ABT_Social_Share_inner:after {display: table;content: "";clear: both;}.ABT_Social_Sharing ul li a {text-align: right;display: block;float: left;position: relative;right: -2px;font-weight: 600;padding-top: 8px;color: #fff;}.ABT_Social_Sharing ul li:hover {} .ABT_Social_Sharing ul li:hover span i {animation: allbloggertricksTilt .2s infinite;}.ABT_Social_Sharing ul li:nth-child(1), .ABT_Social_Sharing ul li:nth-child(1) span{background: rgb(64,87,149);}.ABT_Social_Sharing ul li:nth-child(2), .ABT_Social_Sharing ul li:nth-child(2) span{background: rgb(0,157,238);}.ABT_Social_Sharing ul li:nth-child(3), .ABT_Social_Sharing ul li:nth-child(3) span{background: rgb(219, 68, 55);}.ABT_Social_Sharing ul li:nth-child(4), .ABT_Social_Sharing ul li:nth-child(4) span{background: rgb(189, 8, 28);}@keyframes allbloggertricksTilt {from {transform: rotate(10deg)}to {transform: rotate(360deg)}}@media (max-width: 600px) {.ABT_Social_Sharing ul li a {font-size: 12px!important;padding-top: 12px!important;}.ABT_Social_Sharing ul li span {font-size: 18px;padding-top: 10px!important;}.ABT_Social_Sharing .ABT_Social_Heading:before,.ABT_Social_Sharing .ABT_Social_Heading:after {width: 30%!important;}}@media (max-width: 790px) {.ABT_Social_Sharing .ABT_Social_Heading:before,.ABT_Social_Sharing .ABT_Social_Heading:after {width: 35%!important;}}@media (max-width: 530px) {.ABT_Social_Sharing .ABT_Social_Heading:before,.ABT_Social_Sharing .ABT_Social_Heading:after {width: 25%!important;top: 8px;}.ABT_Social_Sharing .ABT_Social_Heading {font-size: 14px;}}
      /* End Social Sharing Widget By */

        STEP 6:  All Done Save the template.

        Final Adding Markup And JS:

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

        STEP 2:  Now Search for (Search by Pressing CTRL + F) 


        You Will Find This Code 3 Times or more in your Template So Refer 2nd or 3rd Time.

        STEP 3:  Copy This Below Code After <data:post.body/>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>

            <div class='ABT_Social_Sharing'>
                <h4><span>Sharing is Caring:</span></h4>
                <ul class='ABT_Social_Share_inner'>
                    <li class='ABT_Social_Buttons'><span class='ABT_Icon_Left'>
        <i class='fa fa-facebook-official'/>

                        <div class='sharingPlatform'>

                            <a class='facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' rel='nofollow' target='_blank'>

                    <li class='ABT_Social_Buttons'><span class='ABT_Icon_Left'><i class=' fa fa-twitter-square'/></span>
                        <div class='sharingPlatform'>
                            <a class='twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' rel='nofollow' target='_blank'>

                    <li class='ABT_Social_Buttons'><span class='ABT_Icon_Left'>
        <i class='fa fa-google-plus-square'/>

                        <div class='sharingPlatform'>
                            <a class='google' expr:href='&quot;; + data:post.url' onclick=',   &quot;&quot;, &quot;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;);return false;' rel='nofollow' title='Share this on Google+'>
                    <li class='ABT_Social_Buttons'>
                        <span class='ABT_Icon_Left'>
        <i class='fa fa-pinterest-square'/>

                        <div class='sharingPlatform'>
                            <a class='pinterest' expr:href='&quot;;   + data:post.url + &quot;   &amp;   media=&quot;   + data:post.thumbnailUrl + &quot;   &amp;   description=&quot;   + data:post.title' rel='nofollow' target='_blank' title='Share This on Pinterest'>

            <div style='clear: both;' />

        STEP 4:  All done save the template and Open Your Post and Scroll Down To The End To See This Widget Working.


        Finally, we come to the conclusion still adding scripts in blogger template is not like a piece of cake for newbies so blogger should update its template and make it more user-friendly like WordPress.

        So If you added the script correctly then congratulations soon you will become developer :p and those who have found problems in adding it, please comment below and we will help you in adding the script to your blogs free :p

        If you have any suggestions for optimizing or customizing this widget then comment or contact us we will update the widget for you.

        That's It Thanks For Following our Tutorial '' Add Cute Social Sharing Buttons Below Every Post on Blogger Blogs '' 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.
        Read more »