How To Hide/Show Widget On Mobile Inward Blogger

If yous direct maintain always tried to access your spider web log from a mobile device too hence yous mightiness familiar amongst blogger provides a mobile responsive template which is greatly responsive. However, it doesn't creates a slap-up acquit on towards design. There are surely widgets which do non await practiced on mobile sentiment whereas they await appealing on big screens hence that inwards that province of affairs yous tin precisely shroud those from your spider web log solely for mobile sentiment or yous tin demo around specific widgets solely for mobile sentiment non for big screens. Today, inwards this article, nosotros volition demo yous how to hide/show widget on mobile inwards blogger.

Also Read: 
How to Enable a Responsive Mobile Template inwards Blogger
How To Add Google Adsense on Your Mobile Website

How to Hide/Show Blogger Widget on Mobile View

So hither are the steps yous ask to follow inwards lodge shroud or demo blogger specific widgets on mobile sentiment too customize your spider web log for unlike screens
.

How to Find Widget ID inwards Blogger?

In example your spider web log is non showing whatever of your widget on mobile view, follow the instructions that nosotros direct maintain mentioned below:

Go to Blogger >> Template >> Layout. Now click on Edit button of widget which yous desire to demo on your blogger template.

Now yous ask to await for Widget ID which would move inwards the URL of your selected widget. In the URL await for widgetId it would move towards the halt of the URL. If yous cannot uncovering the Widget ID too hence precisely Copy the championship of the widget too if at that topographic point is no championship too hence hand a championship for fourth dimension being, precisely for the sake of search.

Show Blogger Widget on Mobile View

Go to Template >> Edit HTML >> Search for widget coding using Widget ID which you’ve copied inwards higher upwardly footstep or widget title. (Quick Tip: You tin role "Jump to widget" pick available inwards template editor to become to the code of whatever widget that yous like).

This volition direct direct maintain yous to the widget coding, forthwith add together mobile=’yes’ in the widget code just later the locked=’false’. Refer the below screenshot to add together it correctly.

Now precisely salve your blogger template yesteryear clicking on Save template too yous are done.

Hide Blogger Widget for Mobile View

Go to Template >> Edit HTML >> Search for widget coding using Widget ID which you’ve copied inwards higher upwardly footstep or widget title.

This volition Pb yous to the the widget coding, forthwith add mobile=’no’ in the widget code just later the locked=’false’. Refer the below screenshot to add together it correctly.

Then Click on Save template push too yous are done.

We promise this article helped yous inwards learning how to demo or shroud widget on mobile inwards blogger. If yous direct maintain whatever queries or confusion left related to this article too hence lend your queries inwards the comment box. Any of our squad members volition attention yous inwards solving them. 

How To Withdraw Locked Widget Inward Blogger

If yous direct maintain e'er tried a blogger template that is developed yesteryear a third-party developers similar templateism, as well as then close likely yous mightiness direct maintain come across a sort of locked widget inwards the blog’s layout department are which cannot hold out removed. As take away push clit is missing because the widget is ready to locked which makes it non removable. You mightiness direct maintain tried difficult to larn rid of such widget, only couldn’t succeed. Today inwards this article, nosotros volition exhibit you, how to take away locked widgets inwards blogger.

How to Remove Locked Widget inwards Blogger

The rattling start affair yous involve to exercise is to uncovering out the unique Widget ID of the widget yous would similar to remove, thence larn  Blogger >> Layout >>  Open the Widget which yous desire to remove.

Now a window volition appear, inwards the address bar hold off for widgetid=. It would hold out towards the destination of your widget address. For your assist nosotros direct maintain attached a screenshot below:


After finding the widgetid re-create it inwards a notepad for farther usage inwards the tutorial.

Now larn to Template >> Edit HTML >> Jump to Widget as well as and then choose the ID of your widget (which you’ve coped inwards in a higher house step).

After that it volition accept yous to the coding of your widget,then yous involve to brand picayune changes inwards the coding of your widget every bit plow over below. To larn far to a greater extent than straightforward, modify Locked=’false’ to true. Refer the below screenshot for to a greater extent than clarity.

Now click on Save Template.

Now larn to Layout as well as 1 time to a greater extent than opened upwards the locked widget, And yous volition hold out able to consider the Remove push clit on the widget. Simply click on Remove push clit to take away the widget.

You are done!

This was our tutorial to brand yous guys aware alongside the procedure of removing locked widget. We are hopeful that it would direct maintain been proven helpful for yous guys. If yous direct maintain whatever queries left related to this consequence as well as then lend your queries inwards comment box. Any of our squad members volition address your queries.

How To Gear Upwards Hatom Structured Information Errors Inward Blogger

Are you lot experiencing hatom structured information errors inwards your Google Webmaster tools? I am sure most of you lot must live as well as wondering if these errors could live bad for you. These errors may non haunt your spider web log functioning but for a salubrious site i would sure enough non similar these errors to remain inwards the Google webmaster tools. Today inwards this article, nosotros volition present you lot how to prepare hatom structured information errors inwards blogger.

What are Structured Data as well as its hatom errors?

Structured Data information is the construction of your spider web log as well as spider web log postal service that how they are structured inwards the search engines. It is the characteristic of Google Webmaster Tools which mainly deals amongst the construction of your spider web log as well as spider web log post.

And, the hatom error occurs when webmaster tools finds whatever form of errors inwards structuring your spider web log posts as well as pages. Keeping the errors unfixed tin acquit upon your site optimization at to a greater extent than or less extent. Therefore, you lot must larn for the fixes.

Common Encountered Errors of Structured Data

Before, moving towards the fixes allow us listing all the mutual errors which may run across inwards your structured data. We cause got added the fixes for each error.

1. Warning: Missing required champaign “entry-title”
2. Warning: Missing required champaign “updated”
3. Warning: Missing required hCard “author”

How to Fix hatom Structured Data Errors

After discussing much close structured information errors, nosotros are taking you lot correct towards the guide which nosotros cause got created for your convenience.

Fix Missing required champaign “entry-title”  Error

First of all, nosotros are going to prepare entry championship error. This error occurs due to non optimized blogger custom templates. And, inwards lodge to prepare these errors on your webmaster tools employment organisation human relationship you lot require to follow the steps mentioned below:

1. Go to Blogger >> Template >> Edit HTML >> as well as search for the next code:

<b:if cond='data:post.title'>
       <h2 class='post-title'>

OR

<b:if cond='data:post.title'>
         <h3 class='post-title'>

2. After finding whatever of the inwards a higher identify code, supersede it amongst the code mentioned below:

<b:if cond='data:post.title'>
<h2 class='post-title entry-title’>

3. In last, Save your blogger Template.

Fix Missing required champaign “updated” Error

Now, nosotros are going to prepare Updated error. This error takes identify when Google could non notice updated fourth dimension of your spider web log or spider web log postal service as well as for optimization Google must know close your updating time. If you lot are receiving this error thus follow the steps mentioned below:

1. Go to Blogger >> Template >> Edit HTML >> as well as search for the next code:

<data:post.timestamp/>

2. Ones you lot constitute the inwards a higher identify code thus supersede it amongst the i below:

<span class='updated'><data:post.timestamp/></span>

3. After replacing, Save your blogger Template.

Fix Warning: Missing required hCard “author” error

This is the concluding prepare which nosotros are including hither inwards this article which is close fixing hCard error. You require to follow the steps mentioned below:

1. Go to Blogger >> Template >> Edit HTML >> as well as search for the next code:

    <span class='post-author vcard' >
                    <b:if cond='data:top.showAuthor'>
                      <b:if cond='data:post.authorProfileUrl'>
                        <span class='fn'>
                          <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                            <data:post.author/>
                          </a>
                        </span>
                      <b:else/>
                        <span class='fn'><data:post.author/></span>
                      </b:if>
                    </b:if>
                  </span>

2. Ones you lot constitute it but supersede the consummate code amongst the below one.

<span class='post-author vcard' itemscope='itemscope'  itemtype='http://schema.org/Person'>
                <b:if cond='data:top.showAuthor'>
                  <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn author'>
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn author'><span itemprop='name'><data:post.author/></span></span>
                  </b:if>
                </b:if>
              </span>

3. After that, Save your blogger template.

How to Check Errors are Fixed or Not?

If you lot are non sure that your errors are fixed or non thus but you lot require to follow these steps as well as you lot volition come upward to know close structured information condition instantly.

First of all, larn to Structured Data Testing Tool.  Now come inwards the URL of your spider web log inwards fetch URL. 

If it gives the condition similar below ikon that way your errors are fixed, if non thus that way you’ve made somewhere a mistake.

Your spider web log is gratuitous from errors now!

Now nosotros are sure that all these errors are fixed. If you lot are facing whatever employment piece applying these steps, thus drib your enquiry inwards the comment box. Any of our squad members volition larn dorsum to your enquiry every bit presently every bit possible.

Was it helpful? If it was thus don’t forget to part this article amongst other bloggers too. You may never know that your part may live proven helpful for many of the users out there.

How To Add Together Blogger Novel Featured Post Gadget Inwards Sidebar

Being a Blogger it is of import to proceed your readers busy past times updating your website on frequent basis. The to a greater extent than yous post, the to a greater extent than quickly your posts goes downward dead into the archives which makes it hard for users to detect your all published posts. Thankfully, Blogger’s novel Featured Post widget makes it easier to showcase whatsoever posts that yous desire your users to see. You tin direct whatsoever of your previous issue posts as well as tin highlight it anywhere on your blog. Today inwards this article, nosotros volition demonstrate yous How to Add Blogger New Featured Post Gadget inwards Sidebar.

Whether yous are re-sharing a amazing flush yous wrote few years back, yous desire to position maximum attending on a  promotion yous are running or yous desire to revive diverse posts from the achieve, the Feature Post gadget is a best means to showcase the content that matters the most.

How to add together featured Post Gadget inwards Blogger:

To add together Featured Post Tool larn to Blogger >> Layout >> Add a Gadget >> and select “Featured Post”.

The tool provides yous a enough of user friendly options to select a specific posts. You tin either search the championship of the postal service or yous tin browse through dissimilar labels (categories) to detect a postal service that matters the most.

The gadget also offers a minor preview of how the postal service volition look on your blog. You tin direct to cover the icon or championship of the postal service or fifty-fifty both.

Once yous direct selected a postal service as well as yous thinks it is best fit, press Save button.

Though, Featured posts inwards blogger is non a novel thing for blogger custom template users but this add-on to blogger adds a promise that blogger endure bringing only about expert changes to this platform inwards future. If yous similar this article, experience costless to portion it amongst your friends on Google, Facebook or Twitter.

How To Install Statcounter Inwards Blogger To Rail User Activity

In the past, nosotros accept shown you lot how to install Google Analytics inwards blogger to rail of import data close your users. However, sometimes you lot demand fifty-fifty farther data close who uses your website. Therefore, you lot demand to a greater extent than tools to attention you lot render you lot the right data that matters the most. Statcounter is the right tool which does the task quite nicely as well as to a greater extent than importantly it is FREE.  Today inwards this article, nosotros volition present you lot how to install StatCounter inwards Blogger to rail user activity.

What is StatCounter?

StatCounter is a Free online monitoring software that provides essential data close who visits your website. It keeps rail of pop pages, download activity, download counts, recent visitor activity, operate out links, keyword analysis as well as a packet to a greater extent than things that matters. 

You tin dismiss fifty-fifty notice the IP Address of the visitors visiting your weblog which is non possible alongside Google Analytics. Later on your tin dismiss purpose the block the user using IP Address inwards blogger.

How to Install StatCounter inwards Blogger

So to acquire started acquire to Statcounter.com and register for a novel account. Registering an trouble concern human relationship is simple, come inwards your email, password, total nurture as well as other information. Once you’re done creating as well as setting upwards your trouble concern human relationship details click on “Create Account”, motility to the side yesteryear side step.

After signing up, add together a projection to your account, insert projection URL (your website link to track), projection title, province as well as Timezone. You accept about optional features every bit well, you lot tin dismiss select whether to display a stat counter to your visitors or produce invisible tracking without displaying whatever counter button. Once you lot are done alongside writing details, press "Add Project" button.

Now from listing of multiply platform select "Blogger" if you lot are non using blogger you lot tin dismiss select whatever other listed platform. After selecting Blogger you lot volition acquire a tracking code which you lot demand to insert inwards the template codes of your blog.

Go to Blogger >> Template >> Edit HTML >> search for </body> and merely higher upwards it glue your code you lot copied inwards the previous step.

After installing the code on your blogger site, acquire dorsum to statcounter.com, To endure able to come across reports correctly, you lot demand to verify if your code was installed correctly as well as to produce as well as thence click on "Check installation" every bit you lot tin dismiss come across inwards the screenshot below. 

If you lot accept installed the code correctly onto your website, you lot volition come across the message every bit it is shown inwards the screenshot below. After verification your website is laid upwards to rail all the essential data that you lot demand to know close your user. 

We promise this tutorial has helped you lot inwards learning how to install Statcounter inwards Blogger to rail fifty-fifty farther data close your users. If you lot similar this article, produce portion it alongside your friends on Facebook, Twitter or Google+.

How To Rail Adsense Invalid Clicks Using Statcounter Inward Blogger

Google Adsense is i of the most pop in addition to trustworthy agency to monetize your website. But since you're online a lot tin transportation away become wrong, which is seamlessly beyond your command fifty-fifty amongst Google Adsense. One of these is Invalid Click activity. Invalid click activity could survive the most daunting experience for a Publisher, it could terminate upward getting you lot banned from Adsense. But what if you lot tin transportation away rails those invalid clicks in addition to accept timely actions to salve your trace of piece of employment concern human relationship from getting banned? Today inwards this article, nosotros volition present you lot how to rails Adsense invalid clicks using Statcounter inwards blogger.

What is Invalid Clicks Activity?

An invalid click consists of whatever click that may demeanour on straight or indirectly to the advertiser. In other words, publishers encouraging users to click on ads, automatic clicking, mistaken traffic bots, or whatever non ethical techniques used to drive to a greater extent than clicks is considered equally an invalid click activity.

However, many times your competitors tin transportation away perform an invalid click activity but to wound you lot financially because for around publishers Adsense is the alone promise for around revenue. In society to survive on a rubber side, it is of import to rails invalid clicks.

How to Track AdSense Invalid Clicks inwards Blogger:

To rails invalid clicks nosotros volition survive using an online user monitoring software Statecounter.com which is 100% gratuitous to use.

In instance you lot are non aware of Statecounter nosotros would recommend you lot to outset larn  read our previously written tutorial how to install Statcounter inwards Blogger in addition to exercise a gratuitous account.

Once you lot conduct maintain completely setup a account, login to your trace of piece of employment concern human relationship in addition to become to the statistics of your website past times clicking on the projection title. For example, inwards the screenshot below "MBL" is the projection championship thence nosotros volition click on it to access the website statistics.

Now on the left you lot volition run across a listing of options which tin transportation away assistance you lot rails diverse aspects of your website. However, to rails Adsense invalid clicks pick out "Exit Link Activity" in addition to all those links volition seem that your user clicked to acquire out your website. You tin transportation away also acquire exact data near the appointment in addition to fourth dimension of clicks activity in addition to moreover you lot tin transportation away also rails the counts of clicks made on a particulate Adsense advertising unit. 

On give away anything suspicious near the click activity, you lot tin transportation away acquire fifty-fifty to a greater extent than data near that visitor but pick out the "magnify icon" beside the date. This volition present you lot the IP Address, Location, Browser, OS, etc useful data near the user who clicked the advertisement.

So nosotros promise you lot conduct maintain learned how to rails Adsense invalid click activity using Statcounter. Through Statcounter you lot volition survive able to honor invalid clicks, which allows you lot to brand timely actions to save your Adsense trace of piece of employment concern human relationship from getting banned. If you lot run across a abrupt growth inwards the clicks but the earning in addition to CPC is also depression in addition to all clicks are coming from same IP Address, its fourth dimension to either block that user IP Address or take the Ads for few days to projection yourself from facing a ban from Adsense or whatever advertising company.

If you lot conduct maintain whatever tips thence experience gratuitous to part your comments below. Do part our content on Facebook, Twitter or Google+. 

How To Add Together An Analog Clock Widget Inwards Blogger

Everyone says, “Time is Money” but even thus people neglect to realize the importance of it. Having a overnice classic Analog Clock widget on your weblog tin travel the nicest agency to aid your users to travel punctual fifty-fifty if they are busy reading your content. Recently, ane of our readers asked us that how to add together an analog clock widget inwards blogger which could travel a keen improver to a blog. Today inwards this article, nosotros volition demonstrate you lot how to add together an analog clock widget inwards blogger. 

What is an Analog Clock?

H5N1 clock or sentinel is labeled equally "Analog" when it has hours marked from 1 to 12 in addition to has 3 moving hands to demonstrate minute, hr in addition to seconds. Its basic purpose is to display the time. The divergence betwixt an analog clock in addition to a digital clock is that, digital clock shows the fourth dimension using numbers non hands.

How to add together an Analog Clock inwards Blogger?

Before nosotros jump to our tutorial, you lot would similar to encounter analog clock widget inwards alive action, thus instruct to the live preview.

To Add a beautiful analog clock inwards Blogger carefully apply the next instructions on your blog.

Firstly, you lot demand to install the analog clock scripts to your weblog for that instruct to Blogger >> Template >> Edit HTML >> search for the </head> tag in addition to only to a higher house the it glue the following

 <script type='text/javascript'>
/*<![CDATA[*/

// MBL Analog Clock
initLocalClocks();
setUpMinuteHands();
component initLocalClocks() {
  // Get the local fourth dimension using JS
  var appointment = novel Date;
  var seconds = date.getSeconds();
  var minutes = date.getMinutes();
  var hours = date.getHours();


  // Create an object alongside each mitt in addition to it's angle inwards degrees
  var hands = [
    {
      hand: 'hours',
      angle: (hours * 30) + (minutes / 2)
    },
    {
      hand: 'minutes',
      angle: (minutes * 6)
    },
    {
      hand: 'seconds',
      angle: (seconds * 6)
    }
  ];
  // Loop through each of these hands to prepare their angle
  for (var j = 0; j < hands.length; j++) {
    var elements = document.querySelectorAll('.' + hands[j].hand);
    for (var k = 0; k < elements.length; k++) {
        elements[k].style.webkitTransform = 'rotateZ('+ hands[j].angle +'deg)';
        elements[k].style.transform = 'rotateZ('+ hands[j].angle +'deg)';
        // If this is a infinitesimal hand, banknote the seconds seat (to calculate infinitesimal seat later)
        if (hands[j].hand === 'minutes') {
          elements[k].parentNode.setAttribute('data-second-angle', hands[j + 1].angle);
        }
    }
  }
}

component YourTime() {
  // Get the local fourth dimension using JS
  //var appointment = novel Date;
  var hours = document.getElementById("hours_in").value;
  var minutes = document.getElementById("minutes_in").value;
  var seconds = document.getElementById("seconds_in").value;
document.getElementById('scy').style.animation='rotate 60s infinite steps(60)';
  // Create an object alongside each mitt in addition to it's angle inwards degrees
  var hands = [
    {
      hand: 'hours_y',
      angle: (hours * 30) + (minutes / 2)
    },
    {
      hand: 'minutes_y',
      angle: (minutes * 6)
    },
    {
      hand: 'seconds_y',
      angle: (seconds * 6)
    }
  ];
  // Loop through each of these hands to prepare their angle
  for (var j = 0; j < hands.length; j++) {
    var elements = document.querySelectorAll('.your_time .' + hands[j].hand);
    for (var k = 0; k < elements.length; k++) {
        elements[k].style.webkitTransform = 'rotateZ('+ hands[j].angle +'deg)';
        elements[k].style.transform = 'rotateZ('+ hands[j].angle +'deg)';
      1
        if (hands[j].hand === 'minutes_y') {
          elements[k].parentNode.setAttribute('data-second-angle', hands[j + 1].angle);
        }
    }
  }
}

/*
 * Set a timeout for the starting fourth dimension infinitesimal mitt possess (less than 1 minute), thus rotate it every infinitesimal after that
 */
component setUpMinuteHands() {
  // Find out how far into the infinitesimal nosotros are
  var containers = document.querySelectorAll('.minutes-container');
  var secondAngle = containers[0].getAttribute("data-second-angle");
  if (secondAngle > 0) {
    // Set a timeout until the halt of the electrical current minute, to motion the hand
    var delay = (((360 - secondAngle) / 6) + 0.1) * 1000;
    setTimeout(function() {
      moveMinuteHands(containers);
    }, delay);
  }
}
/*
 * Do the starting fourth dimension minute's rotation
 */
component moveMinuteHands(containers) {
  for (var i = 0; i < containers.length; i++) {
    containers[i].style.webkitTransform = 'rotateZ(6deg)';
    containers[i].style.transform = 'rotateZ(6deg)';
  }
  // Then proceed alongside a lx 2d interval
  setInterval(function() {
    for (var i = 0; i < containers.length; i++) {
      if (containers[i].angle === undefined) {
        containers[i].angle = 12;
      } else {
        containers[i].angle += 6;
      }
      containers[i].style.webkitTransform = 'rotateZ('+ containers[i].angle +'deg)';
      containers[i].style.transform = 'rotateZ('+ containers[i].angle +'deg)';
    }
  }, 60000);
}
//----------------------------------------------------------

/*]]>*/
</script>

After adding the script, the side past times side matter you lot demand to add together is the CSS codes thus directly over again inwards Template >> search for ]]></b:skin> tag in addition to only to a higher house it glue the next code:

.label {
    background: #fff;
    border-radius: 0.3em;
    color: #646464;
    font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    padding: 1em 1em 0.6em;
    position: absolute;
    top: -4em;
    left: 50%;
    transform: translate(-50%, 0);
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.label_y {
    background: #fff;
    border-radius: 0.3em;
    color: #646464;
    font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    padding: 1em 1em 0.6em;
    position: absolute;
    top: -4em;
    left: 50%;
    transform: translate(-50%, 0);
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.clock_local {
    border-radius: 50%;
    background: #fff url(http://mybloggerlab.com/Images/clock.svg) no-repeat center;
    background-size: 88%;
    height: 300px;
    width: 300px;
    float: left;
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.clock_local2 {
    border-radius: 50%;
    background: #bae2f6 url(http://mybloggerlab.com/Images/clock2.svg) no-repeat center;
    background-size: 88%;
    height: 300px;
    width: 300px;
    float: left;
    margin-left: 50px;
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.clock_local::after {
    background: red;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 4%;
    z-index: 10;
}
.clock_local2::after {
    background: red;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 4%;
    z-index: 10;
}
.minutes-container,
.hours-container,
.seconds-container,
.seconds-container_y {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.hours {
    background: #000;
    height: 20%;
    left: 48.75%;
    position: absolute;
    top: 30%;
    transform-origin: 50% 100%;
    width: 2.5%;
}
.minutes {
    background: #000;
    height: 40%;
    left: 49%;
    position: absolute;
    top: 10%;
    transform-origin: 50% 100%;
    width: 2%;
}
.seconds {
    background: #dc0000;
    height: 45%;
    left: 49.5%;
    position: absolute;
    top: 14%;
    transform-origin: 50% 80%;
    width: 1%;
    z-index: 8;
}
.hours_y {
    background: #000;
    height: 20%;
    left: 48.75%;
    position: absolute;
    top: 30%;
    transform-origin: 50% 100%;
    width: 2.5%;
}
.minutes_y {
    background: #000;
    height: 40%;
    left: 49%;
    position: absolute;
    top: 10%;
    transform-origin: 50% 100%;
    width: 2%;
}
.seconds_y {
    background: #dc0000;
    height: 45%;
    left: 49.5%;
    position: absolute;
    top: 14%;
    transform-origin: 50% 80%;
    width: 1%;
    z-index: 8;
}
@keyframes rotate {
    100% {
        transform: rotateZ(360deg);
    }
}
.hours-container {
    animation: rotate 43200s infinite linear;
}
.minutes-container {
    animation: rotate 3600s infinite steps(60);
}
.seconds-container {
    animation: rotate 60s infinite steps(60);
}
.skin2 {
    border-radius: 50%;
    background: #fff url(http://mybloggerlab.com/Images/clock4.svg) no-repeat center;
    background-size: 88%;
    height: 200px;
    width: 200px;
    float: left;
    position: relative;
    margin: 20px;
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.skin3 {
    border-radius: 50%;
    background: #fff url(http://mybloggerlab.com/Images/clock5.svg) no-repeat center;
    background-size: 88%;
    height: 200px;
    width: 200px;
    float: left;
    position: relative;
    margin: 20px;
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.skin4 {
    border-radius: 50%;
    background: #fff url(http://mybloggerlab.com/Images/clock6.svg) no-repeat center;
    background-size: 88%;
    height: 200px;
    width: 200px;
    float: left;
    position: relative;
    margin: 20px;
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.skin2::after {
    background: red;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 4%;
    z-index: 10;
}
.skin3::after {
    background: red;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 4%;
    z-index: 10;
}
.skin4::after {
    background: red;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 4%;
    z-index: 10;
}
.label {
    background: #fff;
    border-radius: 0.3em;
    color: #646464;
    font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    padding: 1em 1em 0.6em;
    position: absolute;
    top: -4em;
    left: 50%;
    transform: translate(-50%, 0);
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.label_y {
    background: #fff;
    border-radius: 0.3em;
    color: #646464;
    font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    padding: 1em 1em 0.6em;
    position: absolute;
    top: -4em;
    left: 50%;
    transform: translate(-50%, 0);
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.clock_local {
    border-radius: 50%;
    background: #fff url(http://mybloggerlab.com/Images/clock.svg) no-repeat center;
    background-size: 88%;
    height: 300px;
    width: 300px;
    float: left;
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.clock_local2 {
    border-radius: 50%;
    background: #bae2f6 url(http://mybloggerlab.com/Images/clock2.svg) no-repeat center;
    background-size: 88%;
    height: 300px;
    width: 300px;
    float: left;
    margin-left: 50px;
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.clock_local::after {
    background: red;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 4%;
    z-index: 10;
}
.clock_local2::after {
    background: red;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 4%;
    z-index: 10;
}
.minutes-container,
.hours-container,
.seconds-container,
.seconds-container_y {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.hours {
    background: #000;
    height: 20%;
    left: 48.75%;
    position: absolute;
    top: 30%;
    transform-origin: 50% 100%;
    width: 2.5%;
}
.minutes {
    background: #000;
    height: 40%;
    left: 49%;
    position: absolute;
    top: 10%;
    transform-origin: 50% 100%;
    width: 2%;
}
.seconds {
    background: #dc0000;
    height: 45%;
    left: 49.5%;
    position: absolute;
    top: 14%;
    transform-origin: 50% 80%;
    width: 1%;
    z-index: 8;
}
.hours_y {
    background: #000;
    height: 20%;
    left: 48.75%;
    position: absolute;
    top: 30%;
    transform-origin: 50% 100%;
    width: 2.5%;
}
.minutes_y {
    background: #000;
    height: 40%;
    left: 49%;
    position: absolute;
    top: 10%;
    transform-origin: 50% 100%;
    width: 2%;
}
.seconds_y {
    background: #dc0000;
    height: 45%;
    left: 49.5%;
    position: absolute;
    top: 14%;
    transform-origin: 50% 80%;
    width: 1%;
    z-index: 8;
}
@keyframes rotate {
    100% {
        transform: rotateZ(360deg);
    }
}
.hours-container {
    animation: rotate 43200s infinite linear;
}
.minutes-container {
    animation: rotate 3600s infinite steps(60);
}
.seconds-container {
    animation: rotate 60s infinite steps(60);
}
.skin2 {
    border-radius: 50%;
    background: #fff url(http://mybloggerlab.com/Images/clock4.svg) no-repeat center;
    background-size: 88%;
    height: 200px;
    width: 200px;
    float: left;
    position: relative;
    margin: 20px;
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.skin3 {
    border-radius: 50%;
    background: #fff url(http://mybloggerlab.com/Images/clock5.svg) no-repeat center;
    background-size: 88%;
    height: 200px;
    width: 200px;
    float: left;
    position: relative;
    margin: 20px;
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.skin4 {
    border-radius: 50%;
    background: #fff url(http://mybloggerlab.com/Images/clock6.svg) no-repeat center;
    background-size: 88%;
    height: 200px;
    width: 200px;
    float: left;
    position: relative;
    margin: 20px;
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.skin2::after {
    background: red;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 4%;
    z-index: 10;
}
.skin3::after {
    background: red;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 4%;
    z-index: 10;
}
.skin4::after {
    background: red;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 4%;
    z-index: 10;
}

After adding the JavaScript in addition to CSS codes its fourth dimension to insert HTML codes that volition play cardinal role inwards displaying your analog clock, nosotros bring developed dissimilar themes for clocks to jibe everyone's demand in addition to taste.

Now next are the clocks along alongside at that spot HTML code which tin travel used to display clocks on whatever component of your blog. Go to Blogger >> Layout >> Add a gadget >> Add HTML/JavaScript and glue whatever ane of the next code:

Style 1:

  <div class="clock_local2">
<section class="label">Local time</section>
  <div class="hours-container">
    <div class="hours"></div>
  </div>
  <div class="minutes-container">
    <div class="minutes"></div>
  </div>
  <div class="seconds-container">
    <div class="seconds"></div>
  </div>
</div>

Style 2:

  <div class="clock_local">
<section class="label">Local time</section>
  <div class="hours-container">
    <div class="hours"></div>
  </div>
  <div class="minutes-container">
    <div class="minutes"></div>
  </div>
  <div class="seconds-container">
    <div class="seconds"></div>
  </div>
</div> 

Style 3: 

<div class="skin2">
  <div class="hours-container">
    <div class="hours"></div>
  </div>
  <div class="minutes-container">
    <div class="minutes"></div>
  </div>
  <div class="seconds-container">
    <div class="seconds"></div>
  </div>
</div>

Style 4:

<div class="skin3">
  <div class="hours-container">
    <div class="hours"></div>
  </div>
  <div class="minutes-container">
    <div class="minutes"></div>
  </div>
  <div class="seconds-container">
    <div class="seconds"></div>
  </div>
</div> 

Style 5:

<div class="skin4">
  <div class="hours-container">
    <div class="hours"></div>
  </div>
  <div class="minutes-container">
    <div class="minutes"></div>
  </div>
  <div class="seconds-container">
    <div class="seconds"></div>
  </div>
</div>

Now ane time everything is done press "Save" in addition to you lot bring successfully added a analog clock to your blog. If you lot are proficient alongside CSS, you lot tin customize the appearance of the widget otherwise you lot tin bask the v dissimilar styles that nosotros bring pre-made for non technical users.

We promise this analog clock widget would travel an amazing improver to your weblog or website. Let us know what are your thoughts well-nigh this widget inwards the comments below.