How to Optimize Images For SEO Automatically

How to Optimize Images For SEO Automatically

This is done so that the images on your blog page automatically indexed by the search engines like google so you are not bothered by adding it manually (add a description of the <img alt = "description of the image" height = "125" scr = "/ image.png" width = "125" /> when posting images).

The way it can be said to be a hassle. With this automatic way each image has the same description with the title of the picture. Therefore, you should give them appropriate names for each picture to be posted. Why should Optimization For SEO Image Automatically? Because the image on the blog page is one medium that can be used for traffic on search engines because most Internet users are very likely to seek or simply browsing to look at pictures.

Here's how to install automated SEO code in the image Find </ body> tags on your blog template, then copy and paste the code below just above the </ body>

<script type='text/javascript'>

// <! [CDATA [

$(document).ready(function() {

$('img').each(function(){

var $img = $(this);

var filename = $img.attr('src')

$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));

});

});

//]]>

</script>

<script type='text/javascript'>

// <! [CDATA [

$(document).ready(function() {

$('img').each(function(){

var $img = $(this);

var filename = $img.attr('src')

$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));

});

});

//]]>

</script>

<script type='text/javascript'>

// <! [CDATA [

was scrollwork hours = null;

$(window).scroll(function() {

   var viewportHeight = $(this).height(),

       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,

       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),

       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;

    $('#scroll')

        .css('top', distance)

        .text(' (' + Math.round(progress * 100) + '%)')

        .fadeIn (100);

    if (scrollTimer !== null) {

        clearTimeout(scrollTimer);

    }

    scrollTimer = setTimeout(function() {

        $('#scroll').fadeOut();

    }, 1500);

});

//]]>

</script>

Next save the template.

Every picture of your blog post in an article automatically will have SEO friendly code. 

Blogger Redirection Code to redirect your site to .com domain.

Blogger Redirection Code to redirect your site to .com domain.

Argentina [blogspot.com.ar]

Australia [blogspot.com.au]

Brazil [blogspot.com.br]

Canada [blogspot.ca]

Czech Republic [blogspot.cz]

France [blogspot.fr]

Germany [blogspot.de]

Hong Kong [blogspot.hk]

India [blogspot.in]

Italy [blogspot.it]

Japan [blogspot.jp]

Mexico [blogspot.mx]

New Zealand [blogspot.co.nz]

Portugal [blogspot.pt]

Romania [blogspot.ro]

Spain [blogspot.com.es]

Sweden [blogspot.se]

UK [blogspot.co.uk]

The blogger redirect code where you can redirect your local site to international .com domain for example example.blogspot.com will redirect to.com.au in australia and so on , this is the big problem for sites with good page rank and alexa  rank. Now here is the best code for the blogger.

Code #1

<script type="text/javascript">
var blog = document.location.hostname;
var slug = document.location.pathname;
var ctld = blog.substr(blog.lastIndexOf("."));
if (ctld != ".com") {
var ncr = "http://" + blog.substr(0, blog.indexOf("."));
ncr += ".blogspot.com/ncr" + slug;
window.location.replace(ncr);
}
</script>

Best code..

Code #2

<script type='text/javascript'> var str= window.location.href.toString(); if ((str.indexOf('.com/'))=='-1') { var str1=str.substring(str.lastIndexOf(".blogspot.")); if (str1.indexOf('/')=='-1') { var str2=str1; } else { var str2=str1.substring(0,str1.indexOf('/')+1); } window.location.href =window.location.href.toString().replace(str2,'.blogspot.com/ncr/'); } </script>

How to Divide Column in Blog Post

How to Divide Column in Blog Post

How to Divide Column Articles Post - Actual column, in an ordinary article you write can be divided into two columns even more.The column that divided this article we often see in a newspaper or magazine media.

Here I will give you a few tips to take advantage of column-width CSS code Property.Terlebih first please apply the code below on the template.

1. Go to your blogger dashboard>> Template>> Edit Template

  2.Hit Ctrl+F and find ]]></b:skin> and past the following code before ]]></b:skin>

.bagidua
{
   -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

In the above code, the value of column-count me give you two are meant article posts will be divided into two columns. If you want some columns eg 3 columns then specify a column-count value with the number 3.

Save template.Kemudian to the application on the post, please copy and wrap your article with the HTML code below.

HTML#1

<Div class = 'bagidua'> APPLY YOUR TEXT HERE </ div>

HTML#2

<Div class = 'bagidua'> Donec at dolor mi. Pellentesque ornare sit amet risus. Fusce ut turpis sed semper varius. In ut est et interdum gravida nec enim id quam. Leo Aliquam ante, suscipit id posuere et, varius quis Metus. Aenean tincidunt pellentesque facilisis. Maecenas iaculisntesque ante, mass velfaucibus iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, silent ante pharetra dui, eleifend posuere Tellus Metus et lorem.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </ Div>

Save the templete and Then see the result.

How to Add Google Analytics to your blog or website.

How to Add Google Analytics to your blog or website.

Google analytics is a great tool provided by Google as a free service for Gmail account holders.Google analytics provides detail information on what is going on your website or blog.

Google analytics can monitor real-time website activities like real time visitors on you site,location of visitors, content viewed, traffic sources, from where the traffic to your site is coming.

Other features like Intelligence Events, Audience, Acquisition, Behavior, Conversions. Totally free from google.

Analytics can provide many useful information about your site…and you can get track of your site.

You can also link your webmaster tools,adwords,adsense accounts to google analytics.

First thing to do in order to add analytics to your site or blog is to add a tracking code.

There are two basic methods are mentioned by google:

Add tracking using Google Tag Manager [Universal method to add Analytic to blog or website]

To add tracking code to your website you have to create a Google tag manager account..

1.Go to Google tag manager and signup.

2.Fill your account name..and check the check box below it if you want to improve your Analytics data.

3.Give a container names...cotainer is important because " A container holds all the tags for a specific website, so it’s best to name the container after the site. For the site example.com, you might name the container "example""-google

container contains google analytics tag,adword tag, etc.

4.Now click on creat..

Accept all terms...and click on yes....

5.Copy and paste this snippet immediately after the opening <body> tag on every page on the site.

Now you have done adding Tag manager code to verify your website on Analytics account.

Add the tracking code directly to your site [easy mothode]

1.Log in to your analytics account.

2.Then go to admin…select property, from dropdown menu and create a new property.

-Give website name and website URL.

-Select the industry type .i.e website type.

-Add Reporting Time Zone.

-And click on get tracking ID.

3.Now you will be directed to Administration panel. From there click on tracking ifo and click on Tracking code.

4.Now copy the tracking code which is java script and paste it in <head> tag of your websites HTML code.

Now you are almost done. If you want to edit extra setting like AdWords linking, AdSense linking.you can do it now from there.

After placing Analytics code you have to wait for 24hrs to get real-time data.

How to Add Google Analytics in Blogger.

How to Add Google Analytics in Blogger.

Google Analytics also can be added to blogger…analytics is a great tool for blogger for managing and get real time report related to traffic and visitors.

Analytics can be linked to google AdSense, webmaster tools, so you can get more effective data of your bloggers blog.

Setting up google analytics to blogger is quite easy.

Here is simple steps on How to Add Google Analytics in Blogger:-

1.login to your Gmail account…after login search the Google for google analytics.

2.Now signup for Google Analytics.

3.Under new account fill the given  information

In “What would you like to track?” select website.

In “Setting up your account” give account name..

In “Setting up your property” give Website Name..

Select “Industry Category”

Fill up time zone also.

In “Data Sharing Settings”, mark all the boxes.

4.Now click on Get tracking ID.

Accept terms and conditions.

5.Now you will be directed to the Admin page..from here copy  Tracking ID.

6.now login to Blogger. Go to Setting>>other.

Under Google Analytics.

In Analytics Web Property ID paste the copied code and save the settings.

7.Now  Go to the page from where the Tracking ID was copied,Copy the javascript code which is given just below the line  “This is your tracking code. Copy and paste it into the code of every page you want to track.”

8.Again go to blogger and click on template and then on Edit HTML.

9.Now just click in HTML code and press ctrl+f and type </head> and press enter.

Just above </head> paste the JavaScript code that we copied earlier.

10.Save the  template.

You are almost done here you have successfully added the tracking code to your blogger.  

From here you have to wait for 24hr to get data on google analytics.

How to add Progress Bar in Blog

Progress Bar in Blog

Effect of loading progress bar will appear when the page is in the process of loading the blog page and disappear when the page has finished loading.

1.First Open bloggers> Template> Edit HTML> Copy the code below and apply this before

</ head>

<script src='https://arlina-design.googlecode.com/svn/progressbar.js'/>

2.Then apply the given following code following code before

</ style>

Please chose CSS below according to your taste.

Barber Shop

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background-color: #29d;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 12px;
  overflow: hidden;

  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

.pace .pace-progress-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: -32px;
  bottom: 0;

  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient (45deg, rgba (255, 255, 255, 0.2) 25%, 25% transparent, transparent 50%, rgba (255, 255, 255, 0.2) 50%, rgba (255 , 255, 255, 0.2) 75%, 75% transparent, transparent);
  background-image: -moz-linear-gradient (45deg, rgba (255, 255, 255, 0.2) 25%, 25% transparent, transparent 50%, rgba (255, 255, 255, 0.2) 50%, rgba (255 , 255, 255, 0.2) 75%, 75% transparent, transparent);
  background-image: -o-linear-gradient (45deg, rgba (255, 255, 255, 0.2) 25%, 25% transparent, transparent 50%, rgba (255, 255, 255, 0.2) 50%, rgba (255 , 255, 255, 0.2) 75%, 75% transparent, transparent);
  background-image: linear-gradient (45deg, rgba (255, 255, 255, 0.2) 25%, 25% transparent, transparent 50%, rgba (255, 255, 255, 0.2) 50%, rgba (255, 255, 255, 0.2) 75%, 75% transparent, transparent);
  -webkit-background-size: 32px 32px;
  -moz-background-size: 32px 32px;
  -o-background-size: 32px 32px;
  background-size: 32px 32px;

  -webkit-animation: pace-stripe-animation 500ms linear infinite;
  -moz-animation: pace-stripe-animation 500ms linear infinite;
  -ms-animation: pace-stripe-animation 500ms linear infinite;
  -o-animation: pace-stripe-animation 500ms linear infinite;
  animation: pace-stripe-animation 500ms linear infinite;
}

@-webkit-keyframes pace-stripe-animation {
  0% { -webkit-transform: none; transform: none; }
  100% { -webkit-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-moz-keyframes pace-stripe-animation {
  0% { -moz-transform: none; transform: none; }
  100% { -moz-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-o-keyframes pace-stripe-animation {
  0% { -o-transform: none; transform: none; }
  100% { -o-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-ms-keyframes pace-stripe-animation {
  0% { -ms-transform: none; transform: none; }
  100% { -ms-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@keyframes pace-stripe-animation {
  0% { transform: none; transform: none; }
  100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
}

DEMO

Mac OSX

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background-color: #78c0f0;

  color: #CBE7F9;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 12px;
  overflow: hidden;

  -webkit-border-radius: 0 0 4px 0;
  -moz-border-radius: 0 0 4px 0;
  -o-border-radius: 0 0 4px 0;
  border-radius: 0 0 4px 0;

  -webkit-box-shadow: inset 1px 0 rgba (0, 0, 0, 0.3), 0 1px inset rgba (0, 0, 0, 0.3), 0 2px inset rgba (255, 255, 255, 0.5) , inset 0 6px rgba (255, 255, 255, 0.3);
  -moz-box-shadow: inset 1px 0 rgba (0, 0, 0, 0.3), 0 1px inset rgba (0, 0, 0, 0.3), 0 2px inset rgba (255, 255, 255, 0.5) , inset 0 6px rgba (255, 255, 255, 0.3);
  -o-box-shadow: inset 1px 0 rgba (0, 0, 0, 0.3), 0 1px inset rgba (0, 0, 0, 0.3), 0 2px inset rgba (255, 255, 255, 0.5) , inset 0 6px rgba (255, 255, 255, 0.3);
  box-shadow: inset 1px 0 rgba (0, 0, 0, 0.3), 0 1px inset rgba (0, 0, 0, 0.3), 0 2px inset rgba (255, 255, 255, 0.5), inset 0 6px rgba (255, 255, 255, 0.3);

  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

.pace .pace-progress-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: -28px;
  bottom: 0;

  background-image: -o-radial-gradient (rgba (25, 147, 228, 0.6) 0%, rgba (120, 192, 240, 0) 100%);
  background-image: -moz-radial-gradient (rgba (25, 147, 228, 0.6) 0%, rgba (120, 192, 240, 0) 100%);
  background-image: -webkit-radial-gradient (rgba (25, 147, 228, 0.6) 0%, rgba (120, 192, 240, 0) 100%);
  background-image: radial-gradient (rgba (25, 147, 228, 0.6) 0%, rgba (120, 192, 240, 0) 100%);


  -webkit-background-size: 28px 100%;
  -moz-background-size: 28px 100%;
  -o-background-size: 28px 100%;
  background-size: 28px 100%;

  -webkit-animation: pace-stripe-animation 500ms linear infinite;
  -moz-animation: pace-stripe-animation 500ms linear infinite;
  -ms-animation: pace-stripe-animation 500ms linear infinite;
  -o-animation: pace-stripe-animation 500ms linear infinite;
  animation: pace-stripe-animation 500ms linear infinite;
}

@-webkit-keyframes pace-stripe-animation {
  0% { -webkit-transform: none; transform: none; }
  100% { -webkit-transform: translate(-28px, 0); transform: translate(-28px, 0); }
}
@-moz-keyframes pace-stripe-animation {
  0% { -moz-transform: none; transform: none; }
  100% { -moz-transform: translate(-28px, 0); transform: translate(-28px, 0); }
}
@-o-keyframes pace-stripe-animation {
  0% { -o-transform: none; transform: none; }
  100% { -o-transform: translate(-28px, 0); transform: translate(-28px, 0); }
}
@-ms-keyframes pace-stripe-animation {
  0% { -ms-transform: none; transform: none; }
  100% { -ms-transform: translate(-28px, 0); transform: translate(-28px, 0); }
}
@keyframes pace-stripe-animation {
  0% { transform: none; transform: none; }
  100% { transform: translate(-28px, 0); transform: translate(-28px, 0); }
}

DEMO

Flat Top

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace .pace-progress {
  display: block;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 12px;
  background: #29d;

  -webkit-transition: -webkit-transform .3s, width 1s;
  -moz-transition: width 1s;
  -o-transform: width 1s;
  transition: transform .3s, width 1s;

  -webkit-transform: translateY(-50px);
  transform: translateY(-50px);

  pointer-events: none;
}

.pace.pace-active .pace-progress {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

DEMO

Big Counter

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace.pace-inactive .pace-progress {
  display: none;
}

.pace .pace-progress {
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 0;
  height: 5rem;
  width: 5rem;
}

.pace .pace-progress:after {
  display: block;
  position: absolute;
  top: 0;
  right: .5rem;
  content: attr(data-progress-text);
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 100;
  font-size: 5rem;
  line-height: 1;
  text-align: right;
  color: rgba (0, 0, 0, .19999999999999996);
}

DEMO

Big Corner

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace .pace-activity {
  display: block;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background: #29d;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: transform latex (100%) translateY (-100%) rotate (45deg);
  transform: transform latex (100%) translateY (-100%) rotate (45deg);
  pointer-events: none;
}

.pace.pace-active .pace-activity {
  -webkit-transform: transform latex (50%) translateY (-50%) rotate (45deg);
  transform: transform latex (50%) translateY (-50%) rotate (45deg);
}

.pace .pace-activity::before,
.pace .pace-activity::after {
    position: absolute;
    bottom: 30px;
    left: 50%;
    display: block;
    border: 5px solid #fff;
    border-radius: 50%;
    content: '';
}

.pace .pace-activity::before {
    margin-left: -40px;
    width: 80px;
    height: 80px;
    border-right-color: rgba (0, 0, 0, 0.2);
    border-left-color: rgba (0, 0, 0, 0.2);
    -webkit-animation: pace-rotation 3s linear infinite;
    animation: pace-rotation 3s linear infinite;
}

.pace .pace-activity::after {
    bottom: 50px;
    margin-left: -20px;
    width: 40px;
    height: 40px;
    border-top-color: rgba (0, 0, 0, 0.2);
    border-bottom-color: rgba (0, 0, 0, 0.2);
    -webkit-animation: pace-rotation 1s linear infinite;
    animation: pace-rotation 1s linear infinite;
}

@-webkit-keyframes pace-rotation {
  0% {-webkit-transform: rotate (0deg); }
  100% {-webkit-transform: rotate (359deg); }
}
@keyframes pace-rotation {
  0% {transform: rotate (0deg); }
  100% {transform: rotate (359deg); }
}

DEMO

Bounce

.pace {
  width: 140px;
  height: 300px;
  position: fixed;
  top: -90px;
  right: -20px;
  z-index: 2000;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  -webkit-transition: all 2s linear 0s;
  -moz-transition: all 2s linear 0s;
  transition: all 2s linear 0s;
}

.pace.pace-active {
  -webkit-transform: scale(.25);
  -moz-transform: scale(.25);
  -ms-transform: scale(.25);
  -o-transform: scale(.25);
  transform: scale(.25);
  opacity: 1;
}

.pace .pace-activity {
  width: 140px;
  height: 140px;
  border-radius: 70px;
  background: #29d;
  position: absolute;
  top: 0;
  z-index: 1911;
  -webkit-animation: pace-bounce 1s infinite;
  -moz-animation: pace-bounce 1s infinite;
  -o-animation: pace-bounce 1s infinite;
  -ms-animation: pace-bounce 1s infinite;
  animation: pace-bounce 1s infinite;
}

.pace .pace-progress {
  position: absolute;
  display: block;
  left: 50%;
  bottom: 0;
  z-index: 1910;
  margin-left: -30px;
  width: 60px;
  height: 75px;
  background: rgba (20, 20, 20, 0.1);
  box-shadow: 0 0 20px 35px rgba (20, 20, 20, 0.1);
  border-radius: 30px / 40px;
  -webkit-transform: scaleY(.3);
  -moz-transform: scaleY(.3);
  -ms-transform: scaleY(.3);
  -o-transform: scaleY(.3);
  transform: scaleY(.3);
  -webkit-animation: pace-compress .5s infinite alternate;
  -moz-animation: pace-compress .5s infinite alternate;
  -o-animation: pace-compress .5s infinite alternate;
  -ms-animation: pace-compress .5s infinite alternate;
  animation: pace-compress .5s infinite alternate;
}

@-webkit-keyframes pace-bounce {
  0% {
    top: 0;
    -webkit-animation-timing-function: ease-in;
  }
  40% {}
  50% {
    top: 140px;
    height: 140px;
    -webkit-animation-timing-function: ease-out;
  }
  55% {
    top: 160px;
    height: 120px;
    border-radius: 70px / 60px;
    -webkit-animation-timing-function: ease-in;
  }
  65% {
    top: 120px;
    height: 140px;
    border-radius: 70px;
    -webkit-animation-timing-function: ease-out;
  }
  95% {
    top: 0;
    -webkit-animation-timing-function: ease-in;
  }
  100% {
    top: 0;
    -webkit-animation-timing-function: ease-in;
  }
}

@-moz-keyframes pace-bounce {
  0% {
    top: 0;
    -moz-animation-timing-function: ease-in;
  }
  40% {}
  50% {
    top: 140px;
    height: 140px;
    -moz-animation-timing-function: ease-out;
  }
  55% {
    top: 160px;
    height: 120px;
    border-radius: 70px / 60px;
    -moz-animation-timing-function: ease-in;
  }
  65% {
    top: 120px;
    height: 140px;
    border-radius: 70px;
    -moz-animation-timing-function: ease-out;}
  95% {
    top: 0;
    -moz-animation-timing-function: ease-in;
  }
  100% {top: 0;
    -moz-animation-timing-function: ease-in;
  }
}

@keyframes pace-bounce {
  0% {
    top: 0;
    animation-timing-function: ease-in;
  }
  50% {
    top: 140px;
    height: 140px;
    animation-timing-function: ease-out;
  }
  55% {
    top: 160px;
    height: 120px;
    border-radius: 70px / 60px;
    animation-timing-function: ease-in;
  }
  65% {
    top: 120px;
    height: 140px;
    border-radius: 70px;
    animation-timing-function: ease-out;
  }
  95% {
    top: 0;
    animation-timing-function: ease-in;
  }
  100% {
    top: 0;
    animation-timing-function: ease-in;
  }
}

@-webkit-keyframes pace-compress {
  0% {
    bottom: 0;
    margin-left: -30px;
    width: 60px;
    height: 75px;
    background: rgba (20, 20, 20, 0.1);
    box-shadow: 0 0 20px 35px rgba (20, 20, 20, 0.1);
    border-radius: 30px / 40px;
    -webkit-animation-timing-function: ease-in;
  }
  100% {
    bottom: 30px;
    margin-left: -10px;
    width: 20px;
    height: 5px;
    background: rgba (20, 20, 20, 0.3);
    box-shadow: 0 0 20px 35px rgba (20, 20, 20, 0.3);
    border-radius: 20px / 20px;
    -webkit-animation-timing-function: ease-out;
  }
}

@-moz-keyframes pace-compress {
  0% {
    bottom: 0;
    margin-left: -30px;
    width: 60px;
    height: 75px;
    background: rgba (20, 20, 20, 0.1);
    box-shadow: 0 0 20px 35px rgba (20, 20, 20, 0.1);
    border-radius: 30px / 40px;
    -moz-animation-timing-function: ease-in;
  }
  100% {
    bottom: 30px;
    margin-left: -10px;
    width: 20px;
    height: 5px;
    background: rgba (20, 20, 20, 0.3);
    box-shadow: 0 0 20px 35px rgba (20, 20, 20, 0.3);
    border-radius: 20px / 20px;
    -moz-animation-timing-function: ease-out;
  }
}

@keyframes pace-compress {
  0% {
    bottom: 0;
    margin-left: -30px;
    width: 60px;
    height: 75px;
    background: rgba (20, 20, 20, 0.1);
    box-shadow: 0 0 20px 35px rgba (20, 20, 20, 0.1);
    border-radius: 30px / 40px;
    animation-timing-function: ease-in;
  }
  100% {
    bottom: 30px;
    margin-left: -10px;
    width: 20px;
    height: 5px;
    background: rgba (20, 20, 20, 0.3);
    box-shadow: 0 0 20px 35px rgba (20, 20, 20, 0.3);
    border-radius: 20px / 20px;
    animation-timing-function: ease-out;
  }
}

DEMO

Loading Bar

.pace {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;

  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;

  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  z-index: 2000;
  position: fixed;
  margin: auto;
  top: 12px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 200px;
  height: 25px;
  border: 2px solid #29d;
  background-color: #fff;
}

.pace .pace-progress {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;

  -webkit-transition: width 1s ease-in-out 1s linear;
  -moz-transition: width 1s ease-in-out 1s linear;
  -ms-transition: width 1s ease-in-out 1s linear;
  -o-transition: width 1s ease-in-out 1s linear;
  transition: width 1s ease-in-out 1s linear;

  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

  max-width: 190px;
  position: fixed;
  z-index: 2000;
  display: block;
  position: absolute;
  left: 3px;
  top: 3px;
  height: 15px;
  font-size: 12px;
  background: #29d;
  color: #29d;
  line-height: 60px;
  font-weight: bold;
  font-family:  Helvetica, Arial, "Lucida Grande", sans-serif;
}

.pace .pace-progress:after {
  content: attr(data-progress-text);
  display: inline-block;
}

.pace.pace-inactive {
  display: none;
}

DEMO

Center Circle

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  -webkit-perspective: 12rem;
  -moz-perspective: 12rem;
  -ms-perspective: 12rem;
  -o-perspective: 12rem;
  perspective: 12rem;

  z-index: 2000;
  position: fixed;
  height: 6rem;
  width: 6rem;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.pace.pace-inactive .pace-progress {
  display: none;
}

.pace .pace-progress {
  position: fixed;
  z-index: 2000;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 6rem;
  width: 6rem !important;
  line-height: 6rem;
  font-size: 2rem;
  border-radius: 50%;
  background: rgba (34, 153, 221, 0.8);
  color: #fff;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 100;
  text-align: center;

  -webkit-animation: pace-3d-spinner linear infinite 2s;
  -moz-animation: pace-3d-spinner linear infinite 2s;
  -ms-animation: pace-3d-spinner linear infinite 2s;
  -o-animation: pace-3d-spinner linear infinite 2s;
  animation: pace-3d-spinner linear infinite 2s;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.pace .pace-progress:after {
  content: attr(data-progress-text);
  display: block;
}

@-webkit-keyframes pace-3d-spinner {
  from {
    -webkit-transform: rotateY (0deg);
  }
  to {
    -webkit-transform: rotateY (360deg);
  }
}

@-moz-keyframes pace-3d-spinner {
  from {
    -moz-transform: rotateY (0deg);
  }
  to {
    -moz-transform: rotateY (360deg);
  }
}

@-ms-keyframes pace-3d-spinner {
  from {
    -MS-transform: rotateY (0deg);
  }
  to {
    -MS-transform: rotateY (360deg);
  }
}

@-o-keyframes pace-3d-spinner {
  from {
    -o-transform: rotateY (0deg);
  }
  to {
    -o-transform: rotateY (360deg);
  }
}

@keyframes pace-3d-spinner {
  from {
    transform: rotateY (0deg);
  }
  to {
    transform: rotateY (360deg);
  }
}

DEMO

Circle Atom

.pace.pace-inactive {
  display: none;
}

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  z-index: 2000;
  position: fixed;
  height: 60px;
  width: 100px;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.pace .pace-progress {
  z-index: 2000;
  position: absolute;
  height: 60px;
  width: 100px !important;
}

.pace .pace-progress:before {
  content: attr(data-progress-text);
  text-align: center;
  color: #fff;
  background: #29d;
  border-radius: 50%;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 100;
  line-height: 1;
  padding: 20% 0 7px;
  width: 50%;
  height: 40%;
  margin: 10px 0 0 30px;
  display: block;
  z-index: 999;
  position: absolute;
}

.pace .pace-progress:after {
  border-radius: 50%;
  border: 5px solid #29d;
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 60px;
  width: 100px;

  -webkit-transform: rotate (90deg);
     -moz-transform: rotate (90deg);
       -o-transform: rotate (90deg);
          transform: rotate (90deg);
  -webkit-animation: spin-3 2s linear infinite;
     -moz-animation: spin-3 2s linear infinite;
       -o-animation: spin-3 2s linear infinite;
          animation: spin-3 2s linear infinite;
}

.pace .pace-activity {
  font-size: 15px;
  line-height: 1;
  z-index: 2000;
  position: absolute;
  height: 60px;
  width: 100px;

  display: block;
}

.pace .pace-activity:before {
  border-radius: 50%;
  border: 5px solid #29d;
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 60px;
  width: 100px;

  -webkit-animation: spin-1 2s linear infinite;
     -moz-animation: spin-1 2s linear infinite;
       -o-animation: spin-1 2s linear infinite;
          animation: spin-1 2s linear infinite;
}

.pace .pace-activity:after{
  border-radius: 50%;
  border: 5px solid #29d;
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 60px;
  width: 100px;

  -webkit-transform: rotate (45deg);
     -moz-transform: rotate (45deg);
       -o-transform: rotate (45deg);
          transform: rotate (45deg);
  -webkit-animation: spin-2 2s linear infinite;
     -moz-animation: spin-2 2s linear infinite;
       -o-animation: spin-2 2s linear infinite;
          animation: spin-2 2s linear infinite;
}

@-webkit-keyframes spin-1 {
  0% {-webkit-transform: rotate (0deg); }
  100% {-webkit-transform: rotate (359deg);}
}
@-moz-keyframes spin-1 {
  0% {-moz-transform: rotate (0deg); }
  100% {-moz-transform: rotate (359deg);}
}
@-o-keyframes spin-1 {
  0% {-o-transform: rotate (0deg); }
  100% {-o-transform: rotate (359deg);}
}
@keyframes spin-1 {
  0% {transform: rotate (0deg); }
  100% {transform: rotate (359deg);}
}

@-webkit-keyframes spin-2 {
  0% {-webkit-transform: rotate (59.8deg); }
  100% {-webkit-transform: rotate (418.8deg);}
}
@-moz-keyframes spin-2 {
  0% {-moz-transform: rotate (59.8deg); }
  100% {-moz-transform: rotate (418.8deg);}
}
@-o-keyframes spin-2 {
  0% {-o-transform: rotate (59.8deg); }
  100% {-o-transform: rotate (418.8deg);}
}
@keyframes spin-2 {
  0% {transform: rotate (59.8deg); }
  100% {transform: rotate (418.8deg);}
}

@-webkit-keyframes spin-3 {
  0% {-webkit-transform: rotate (119.6deg); }
  100% {-webkit-transform: rotate (478.6deg);}
}
@-moz-keyframes spin-3 {
  0% {-moz-transform: rotate (119.6deg); }
  100% {-moz-transform: rotate (478.6deg);}
}
@-o-keyframes spin-3 {
  0% {-o-transform: rotate (119.6deg); }
  100% {-o-transform: rotate (478.6deg);}
}
@keyframes spin-3 {
  0% {transform: rotate (119.6deg); }
  100% {transform: rotate (478.6deg);}
}

DEMO

Center Radar

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  z-index: 2000;
  position: fixed;
  height: 90px;
  width: 90px;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.pace.pace-inactive .pace-activity {
  display: none;
}

.pace .pace-activity {
  position: fixed;
  z-index: 2000;
  display: block;
  position: absolute;
  left: -30px;
  top: -30px;
  height: 90px;
  width: 90px;
  display: block;
  border-width: 30px;
  border-style: double;
  border-color: #29d transparent transparent;
  border-radius: 50%;

  -webkit-animation: spin 1s linear infinite;
     -moz-animation: spin 1s linear infinite;
       -o-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
}

.pace .pace-activity:before {
  content: ' ';
  position: absolute;
  top: 10px;
  left: 10px;
  height: 50px;
  width: 50px;
  display: block;
  border-width: 10px;
  border-style: solid;
  border-color: #29d transparent transparent;
  border-radius: 50%;
}

@-webkit-keyframes spin {
  100% {-webkit-transform: rotate (359deg); }
}

@-moz-keyframes spin {
  100% {-moz-transform: rotate (359deg); }
}

@-o-keyframes spin {
  100% {-moz-transform: rotate (359deg); }
}

@keyframes spin {
  100% {transform: rotate (359deg); }
}

DEMO

Center Simple

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  z-index: 2000;
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  width: 200px;
  background: #fff;
  border: 1px solid #29d;
}

.pace .pace-progress {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-transition: width 1s ease-in-out 1s linear;
  -moz-transition: width 1s ease-in-out 1s linear;
  -ms-transition: width 1s ease-in-out 1s linear;
  -o-transition: width 1s ease-in-out 1s linear;
  transition: width 1s ease-in-out 1s linear;

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

  max-width: 200px;
  position: fixed;
  z-index: 2000;
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  background: #29d;
}

.pace.pace-inactive {
  display: none;
}

DEMO

Comments Widgets for blogger

Comments Widgets for blogger

Widgets, also known as gadgets, are small tools or applications that can be added to a website or blog to enhance its content or functions, or to pull content and services from third-party websites. Widgets come in multiple forms, such as countdown tickers, photos, games, or interactive social media applications that allow you to chat. Some widgets in Blogger serve the purpose of enhancing your blog, such as listing your blog followers or allowing readers to subscribe to your blog content

1.Log in to your Blogger account with your username and password.

2.Access the Layout page of your blog.

3.Choose a widget.

4.Now copy and past following code and save.

<div id="most-comments"></div>
<style scoped='' type='text/css'>
#most-comments li,#most-comments ul,#most-comments ul li{margin:0;list-style:none;color:#444;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:14px}#most-comments ul li{position:relative;overflow:hidden;background:#fff;margin:3.5px 0;padding:7px 10px 7px 50px;white-space:nowrap;text-overflow:ellipsis;box-shadow:inset 0 0 #fc4f3f;border:1px solid #e6e6e6;transition:all .6s}#most-comments ul li:hover{box-shadow:inset 310px 0 #fc4f3f}#most-comments ul li a{color:#444;font-weight:700;text-decoration:none;transition:all .3s}#most-comments ul li a:hover,#most-comments ul li:hover a{color:#fff}.count-most{position:absolute;left:0;top:0;width:40px;height:100%;margin:0;padding:7px 0;background-color:#383838;color:#fff!important;text-align:center;transition:all .3s}#most-comments ul li:hover .count-most{background-color:#fc4f3f}
</style>
<script type='text/javascript'>
// <! [CDATA [
was numPosts =10;
were homepage ="Arlinadesign.blogspot.com";
var postTitlear=new Array();
var postUrlar=new Array();
var postCommentar=new Array();
var totalpost;document.write('<div id="most-comments"><ul>');
function mostComment(j){var a=j.feed.entry.length;totalpost=a;
for(var f=0;f<a;f++){
var h=j.feed.entry[f];
var c=h.title.$t;var b;
var g;if(f==j.feed.entry.length){break}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];}};
postTitlear.push(c);
postUrlar.push(g);
postCommentar.push(b)}sortPosts();
for(var f=0;f<numPosts;f++){var e='<li><span class="count-most">'+postCommentar[f]+'</span><a href="'+postUrlar[f]+'" title="'+postTitlear[f]+'" target="_blank">'+postTitlear[f]+'</a>';
document.write(e)}}
function sortPosts(){function c(d,f){var e=postTitlear[d];
postTitlear[d]=postTitlear[f];
postTitlear [f] = e;
var e = postUrlar [d];
postUrlar[d]=postUrlar[f];
postUrlar [f] = e;
var e = postCommentar [d];
postCommentar[d]=postCommentar[f];
postCommentar [f] = e}
for(var b=0;b<postTitlear.length-1;b++){
for(var a=b+1;a<postTitlear.length;a++){
if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}
document.write('<script src="http://'+homePage+'/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=mostComment"><\/script>');
document.write('</li>')
document.write('</ul>')
document.write('</div>');
//]]>
</script>