How to add author box widget to your blogger blog

Make your visitor know more about you by adding author box widget to your blogger blog with social media buttons. This litle author box widget does amazing thing's in ons's blog. This author box widget will allow your visitors to join you on your social media networks.

Well if you are wondering "How to add author box widget to your blogger blog?" Then this tutorial post will help you add author box widget to your blogger blog.

This is simply CSS designed author box widget with author file photo. And discription about author professional experiences and achievements.

Adding author box widget to your blogger blog:

Copy the below code for author box widget,  And go to Layout> Add Gadget> HTML / JavaScript, Paste author box widget source code & save your widget. Finally you are done. Reload your blogger blog and get inspired with author box widget for blogger blog.

<style>
.card{padding-top:20px;margin:10px 0 20px 0;background-color:rgba(214,224,226,0.2);border-top-width:0;border-bottom-width:2px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.card .card-heading{padding:0 20px;margin:0}
.card .card-heading.simple{font-size:20px;font-weight:300;color:#777;border-bottom:1px solid #e5e5e5}
.card .card-heading.image img{display:inline-block;width:46px;height:46px;margin-right:15px;vertical-align:top;border:0;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}
.card .card-heading.image .card-heading-header{display:inline-block;vertical-align:top}
.card .card-heading.image .card-heading-header h3{margin:0;font-size:14px;line-height:16px;color:#262626}
.card .card-heading.image .card-heading-header span{font-size:12px;color:#999999}
.card .card-body{padding:0 20px;margin-top:20px}
.card .card-media{padding:0 20px;margin:0 -14px}
.card .card-media img{max-width:100%;max-height:100%}
.card .card-actions{min-height:30px;padding:0 20px 20px 20px;margin:20px 0 0 0}
.card .card-comments{padding:20px;margin:0;background-color:#f8f8f8}
.card .card-comments .comments-collapse-toggle{padding:0;margin:0 20px 12px 20px}
.card .card-comments .comments-collapse-toggle a,.card .card-comments .comments-collapse-toggle span{padding-right:5px;overflow:hidden;font-size:12px;color:#999;text-overflow:ellipsis;white-space:nowrap}
.card-comments .media-heading{font-size:13px;font-weight:bold}
.card.people{position:relative;display:inline-block;width:170px;height:300px;padding-top:0;margin-left:20px;overflow:hidden;vertical-align:top}
.card.people:first-child{margin-left:0}
.card.people .card-top{position:absolute;top:0;left:0;display:inline-block;width:170px;height:150px;background-color:#ffffff}
.card.people .card-top.green{background-color:#53a93f}
.card.people .card-top.blue{background-color:#427fed}
.card.people .card-info{position:absolute;top:150px;display:inline-block;width:100%;height:101px;overflow:hidden;background:#ffffff;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.card.people .card-info .title{display:block;margin:8px 14px 0 14px;overflow:hidden;font-size:16px;font-weight:bold;line-height:18px;color:#404040}
.card.people .card-info .desc{display:block;margin:8px 14px 0 14px;overflow:hidden;font-size:12px;line-height:16px;color:#737373;text-overflow:ellipsis}
.card.people .card-bottom{position:absolute;bottom:0;left:0;display:inline-block;width:100%;padding:10px 20px;line-height:29px;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.card.hovercard{position:relative;padding-top:0;overflow:hidden;text-align:center;background-color:rgba(214,224,226,0.2)}
.card.hovercard .cardheader{background:url("http://41.media.tumblr.com/5ee426da231139eda4e182ba644d2494/tumblr_nj0os4f7a21tqohceo1_1280.jpg");background-size:cover;height:135px}
.card.hovercard .avatar{position:relative;top:-50px;margin-bottom:-50px}
.card.hovercard .avatar img{width:100px;height:100px;max-width:100px;max-height:100px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;border:5px solid rgba(255,255,255,0.5)}
.card.hovercard .info{padding:4px 8px 10px}
.card.hovercard .info .title{margin-bottom:4px;font-size:24px;line-height:1;color:#262626;vertical-align:middle}
.card.hovercard .info .desc{overflow:hidden;font-size:12px;line-height:20px;color:#737373;text-overflow:ellipsis}
.card.hovercard .bottom{padding:0 20px;margin-bottom:17px}
.btn{border-radius:50%;width:32px;height:32px;line-height:18px}
</style>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
 <div class="row">
  <div class="col-lg-3 col-sm-6">

            <div class="card hovercard">
                <div class="cardheader">

                </div>
                <div class="avatar">
                    <img alt="" src="http://damirhara.com/files/damirsquare.jpg" />
                </div>
                <div class="info">
                    <div class="title">
                        <a href="URL">Junaid Khalid</a>
                    </div>
                    <div class="desc">Web developer</div>
                    <div class="desc">Advance Graphics Designer</div>
                    <div class="desc">Professional SEO Consultant</div>
                </div>
                <div class="bottom">
                    <a class="btn btn-primary btn-twitter btn-sm" href="">
                        <i class="fa fa-twitter"></i>
                    </a>
                    <a class="btn btn-danger btn-sm" rel="publisher"
                       href="">
                        <i class="fa fa-google-plus"></i>
                    </a>
                    <a class="btn btn-primary btn-sm" rel="publisher"
                       href="">
                        <i class="fa fa-facebook"></i>
                    </a>
                    <a class="btn btn-warning btn-sm" rel="publisher" href="">
                        <i class="fa fa-behance"></i>
                    </a>
                </div>
            </div>

        </div>

 </div>
</div>

LIVE PREVIEW
I hope this author box widget for blogger blog will create professional look in your blogger blog. If you have any problem installing author box widget ask your questions in comments. I will try my best to help you installing author box widget. Thank you Enjoy!

Read more

Add CSS Minifier and Expander tool to blogger blog

Yes Why do we need to minify CSS codes? In blogger SEO page speed is most important factor currently considered by search engines. Heavier web pages are ignored during crawling search results. There are so many other factor's that effects page speed but CSS minification is one of the main way to increase your page speed.
Let your visitors minify their CSS codes on your blogger blog & add CSS Minifier and Expander tool to blogger. This is inspirational tool for css code minification.
Well today I am going to share amazing blogger design tool. Adding CSS minifier and expander tool in blogger blog will be handled is some steps.

Steps for adding  CSS Minifier and Expander tool to your blog:
Step 1: Log in to the Blogger blog you are wanting to add pages to and click on the “Pages” link.
Step 2: Click the “New Page” button.
Step 3: Type the page title (this will appear as a link on the navigation bar), add the the below code in HTML and then click “Publish.”

<style>
img,
object,
embed,
video {
  max-width: 100%;
}

#pbw-wrapper {
  width: 100%;
  margin: 0 auto;
}

#pbw-header {
  width: 61.6%;
  /*1000*/
  
  height: 71px;
  margin: 5% auto 0 auto;
  background: #16A085;
  font-family: 'Lobster', cursive;
}

h1 {
  padding: 2% 0 0 2%;
  color: #fff;
  font-size: 2em;
  font-weight: 300;
}

#pbw-main {
  width: 61.6%;
  /*616/1000*/
  
  height: 361px;
  margin: 0 auto;
}

#left-box {
  width: 49.8%;
  height: 361px;
  float: left;
  background: #34495E;
  text-align: center;
}

#left-box > input {
  text-align: left;
  margin: 0 auto;
}

#right-box {
  width: 49%;
  height: 361px;
  float: right;
  background: #34495E;
  text-align: center;
}

#right-box > input {
  text-align: left;
  margin: 0 auto;
}

#input {
  width: 99%;
  height: 357px;
  border: none;
}

#output {
  width: 99%;
  height: 357px;
  border: none;
}

#help {
  width: 61.6%;
  /*1000*/
  
  height: 71px;
  background: #232323;
  margin: 0 auto;
  font-family: 'Lato', sans-serif;
  color: #fff;
}

#help p {
  margin: 0 20% 0 10%;
}

#help p:nth-child(2) {
  text-align: right;
  margin: 0 20% 0 0;
}

#help p:nth-child(3) {
  margin: 0 0 0 6%;
}

#console {
  width: 61.6%;
  /*1000*/
  
  height: 71px;
  background: #2C3E50;
  margin: 0 auto;
}

#minimize {
  text-align: center;
  float: left;
  width: 15%;
  margin: 2%;
}

#expand {
  text-align: center;
  float: left;
  width: 15%;
  margin: 2%;
}

#helpbtn {
  color: #fff;
  text-align: center;
  float: left;
  width: 3%;
  margin: 2% 0;
  font-family: 'Lato', sans-serif;
  text-decoration: none;
  vertical-align: middle;
  padding: 1%;
  background: #2ECC71;
}

#helpbtn:hover {
  border-top-color: #27AE60;
  background: #27AE60;
  color: #ccc;
}

#helpbtn:active {
  border-top-color: #16A085;
  background: #16A085;
}

#info {
  width: 47%;
  height: 45px;
  float: right;
  color: #fff;
  padding: 2% 0 0 0;
  font-family: 'Lato', sans-serif;
  text-align: center;
  font-size: 1.5em;
}

.button {
  background: #8E44AD;
  color: white;
  font-family: 'Lato', sans-serif;
  text-decoration: none;
  vertical-align: middle;
  padding: 1%;
}

.button:hover {
  border-top-color: #9B59B6;
  background: #9B59B6;
  color: #ccc;
}

.button:active {
  border-top-color: #27AE60;
  background: #27AE60;
}
</style>
<script>
$(document).ready(function() {
  $("#minimize").click(function() {
    var e = $("#input").val();
    $("#info").css("display", "block");
    if (e != "") {
      e = e.replace(/[\n]/g, " ");
      $("#output").val(e);
      $("#info").text("Succesfully minified");
      setTimeout(t, 4e3);

      function t() {
        $("#info").fadeOut().empty()
      }
    }
  })
});
$(document).ready(function() {
  $("#expand").click(function() {
    var e = $("#input").val();
    $("#info").css("display", "block");
    if (e != "") {
      e = e.replace(/\#/g, "\n#");
      e = e.replace(/\./g, "\n.");
      e = e.replace(/\{/g, "{\n");
      e = e.replace(/\}/g, "}\n");
      e = e.replace(/\;/g, ";\n");
      $("#output").val(e);
      $("#info").text("Succesfully expanded");
      $("#output").select();
      setTimeout(t, 4e3);

      function t() {
        $("#info").fadeOut().empty()
      }
    }
  })
});
$(document).ready(function() {
  $("#help").css("display", "none");
  $("#helpbtn").click(function() {
    $("#help").slideToggle("slow")
  })
})
</script>
  <br />
<div id="pbw-wrapper">
<div id="pbw-header">
<h1>
CSS Minifier and Expander tool</h1>
</div>
<div id="pbw-main">
<div id="left-box">
<textarea id="input"></textarea>
      </div>
<div id="right-box">
<textarea id="output" onclick="this.focus();this.select()" readonly="readonly"></textarea>
      </div>
</div>
<!--/main-->
    <br />
<div id="help">
Input the CSS codes in left box,<br />
Minified code will be shown in right box<br />
↓ Push button for either minifying or expanding your code</div>
<div id="console">
<div class="button" id="minimize">
MINIFY</div>
<div class="button" id="expand">
EXPAND</div>
<div id="helpbtn">
?</div>
<div id="info">
</div>
</div>
</div>

 Result We love to help you adding CSS Minfifer and expander tool to blogger blog. Ask your question's if you are facing in problem installing CSS Minifier and Expander tool to blogger blog. Please don't forget to put your suggestions in comments. thank you

Read more

Add Rollover Social Media Icons Widget in Blogger

The Social Media icons widget allows users to put their their social media website profile URL's. Encourage your visitors to join your social media network by adding social media profile widget in your blogger blog.
For Now I am going to show you how to add Rollover CSS effected Social Media Icons Widget in your blogger blog.

If you are wondering how to add Social media icons widget in your blogger blog?. Then this tutorial post will help you adding social icon widget.

Live Preview:

 

Adding Rollover Social Media Icons Widget:

1. Go to Blogger Dashboard 
2. Click The Drop Down For Your Blog > Choose Layout 
3. Click Add A Gadget > Choose HTML/JavaScript  
4. Copy the below CSS and HTML/Javascript & save your widget

<style>
.social-wrap {
margin:0 auto;
padding:0px;
text-decoration: none;
}
.social-wrap ul li {
list-style-type: none;
border-bottom:none;
margin:0 auto;
background: none;
padding:0px;
line-height: 0!important;
}
.social-wrap li a {
margin:5px 3px 0px 0px !important;
padding:0px;
width:50px;
height:50px;
text-indent:-99999px;
float:left;
}
.social-wrap li a.facebook1 {
background: #314d91 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdH5-5eyIaWxDjR5Ku8t4X4yY2AqOXbMtlMcp3XZB7FpOI94tMPAv2oyL8mGnrZHJew8T2u5pBhQSc-zQYvLLKk42rFPqPBVnyIQpPqIdFFLt7kbsA6IWBDyIhqhVaq0LLbmPtjrIZffo/s1600/social-icons.png) no-repeat 0px 0px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.facebook1:hover {
background: #314d91 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdH5-5eyIaWxDjR5Ku8t4X4yY2AqOXbMtlMcp3XZB7FpOI94tMPAv2oyL8mGnrZHJew8T2u5pBhQSc-zQYvLLKk42rFPqPBVnyIQpPqIdFFLt7kbsA6IWBDyIhqhVaq0LLbmPtjrIZffo/s1600/social-icons.png) no-repeat 0px -73px;
}
.social-wrap li a.twitter1 {
background: #07beed url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdH5-5eyIaWxDjR5Ku8t4X4yY2AqOXbMtlMcp3XZB7FpOI94tMPAv2oyL8mGnrZHJew8T2u5pBhQSc-zQYvLLKk42rFPqPBVnyIQpPqIdFFLt7kbsA6IWBDyIhqhVaq0LLbmPtjrIZffo/s1600/social-icons.png) no-repeat 0px -127px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.twitter1:hover {
background: #07beed url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdH5-5eyIaWxDjR5Ku8t4X4yY2AqOXbMtlMcp3XZB7FpOI94tMPAv2oyL8mGnrZHJew8T2u5pBhQSc-zQYvLLKk42rFPqPBVnyIQpPqIdFFLt7kbsA6IWBDyIhqhVaq0LLbmPtjrIZffo/s1600/social-icons.png) no-repeat 0px -204px;
}
.social-wrap li a.google-p1 {
background:#a7291b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdH5-5eyIaWxDjR5Ku8t4X4yY2AqOXbMtlMcp3XZB7FpOI94tMPAv2oyL8mGnrZHJew8T2u5pBhQSc-zQYvLLKk42rFPqPBVnyIQpPqIdFFLt7kbsA6IWBDyIhqhVaq0LLbmPtjrIZffo/s1600/social-icons.png) no-repeat 0px -254px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.google-p1:hover {
background: #a7291b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdH5-5eyIaWxDjR5Ku8t4X4yY2AqOXbMtlMcp3XZB7FpOI94tMPAv2oyL8mGnrZHJew8T2u5pBhQSc-zQYvLLKk42rFPqPBVnyIQpPqIdFFLt7kbsA6IWBDyIhqhVaq0LLbmPtjrIZffo/s1600/social-icons.png) no-repeat 0px -330px;
}
.social-wrap li a.rss1 {
background:#ffaa31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdH5-5eyIaWxDjR5Ku8t4X4yY2AqOXbMtlMcp3XZB7FpOI94tMPAv2oyL8mGnrZHJew8T2u5pBhQSc-zQYvLLKk42rFPqPBVnyIQpPqIdFFLt7kbsA6IWBDyIhqhVaq0LLbmPtjrIZffo/s1600/social-icons.png) no-repeat 0px -381px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.rss1:hover {
background: #ffaa31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdH5-5eyIaWxDjR5Ku8t4X4yY2AqOXbMtlMcp3XZB7FpOI94tMPAv2oyL8mGnrZHJew8T2u5pBhQSc-zQYvLLKk42rFPqPBVnyIQpPqIdFFLt7kbsA6IWBDyIhqhVaq0LLbmPtjrIZffo/s1600/social-icons.png) no-repeat 0px -454px;
}
.social-wrap li a.pinit1 {
background:#cb2027 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdH5-5eyIaWxDjR5Ku8t4X4yY2AqOXbMtlMcp3XZB7FpOI94tMPAv2oyL8mGnrZHJew8T2u5pBhQSc-zQYvLLKk42rFPqPBVnyIQpPqIdFFLt7kbsA6IWBDyIhqhVaq0LLbmPtjrIZffo/s1600/social-icons.png) no-repeat 0px -508px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.pinit1:hover {
background: #cb2027 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdH5-5eyIaWxDjR5Ku8t4X4yY2AqOXbMtlMcp3XZB7FpOI94tMPAv2oyL8mGnrZHJew8T2u5pBhQSc-zQYvLLKk42rFPqPBVnyIQpPqIdFFLt7kbsA6IWBDyIhqhVaq0LLbmPtjrIZffo/s1600/social-icons.png) no-repeat 0px -580px;
}
.social-wrap li a.linkdin1 {
background:#1698E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdH5-5eyIaWxDjR5Ku8t4X4yY2AqOXbMtlMcp3XZB7FpOI94tMPAv2oyL8mGnrZHJew8T2u5pBhQSc-zQYvLLKk42rFPqPBVnyIQpPqIdFFLt7kbsA6IWBDyIhqhVaq0LLbmPtjrIZffo/s1600/social-icons.png) no-repeat 0px -635px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.linkdin1:hover {
background: #1698e3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdH5-5eyIaWxDjR5Ku8t4X4yY2AqOXbMtlMcp3XZB7FpOI94tMPAv2oyL8mGnrZHJew8T2u5pBhQSc-zQYvLLKk42rFPqPBVnyIQpPqIdFFLt7kbsA6IWBDyIhqhVaq0LLbmPtjrIZffo/s1600/social-icons.png) no-repeat 0px -711px;
}
</style>
<div class='social-wrap'>
<ul>
<li><a class='facebook1' href='http://www.facebook.com/username' target='_blank' title='Facebook' rel='nofollow'></a></li>
<li><a class='twitter1' href='http://twitter.com/username' target='_blank' title='Twitter' rel='nofollow'></a></li>
<li><a class='google-p1' href='https://plus.google.com/b/username' target='_blank' title='Google Plus' rel='nofollow'></a></li>
<li><a class='rss1' href='http://feeds.feedburner.com/username' target='_blaank' title='RSS Feed' rel='nofollow'></a></li>
<li><a class='pinit1' href='http://www.pinterest.com/username' target='_blank' title='Pinterest' rel='nofollow'></a></li>
<li><a class='linkdin1' href='http://www.linkedin.com/in/username' target='_blank' title='Linkedin' rel='nofollow'></a></li>
</ul>
</div>

Note: To make sure Rollover Social Media Icons Widget Work correctly. Change the highlighted links in above HTML code with your social media profiles URL's.
Thanks

Read more

Add Sign Up Email Subscription widget in blogger blog

Well today I am going to share another Sign up Email subscription widget for blogger. The Subscribe widget helps you get more email subscribers and gather leads through your website. Maintaining contact with one’s visitors is one of the most important tasks a blogger blog has, and newsletters are an effective way to do so. So make sure you're constantly adding new contacts to your email list by adding the sign Up Subscription widget to your blog.

Demo Display:  

For adding subscription widget your blogger blog we will do so in some steps.

First We will go with CSS codes. To install CSS code open blogger> Templates> Edit HTML and apply the code below right before the </ style> or ]]> </ b: skin>.

.sign-up {
  position: relative;
  margin: 50px auto;
  width: 280px;
  padding: 33px 25px 29px;
  background: white;
  border-bottom: 1px solid #c4c4c4;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
.sign-up:before, .sign-up:after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  height: 10px;
  background: inherit;
  border-bottom: 1px solid #d2d2d2;
  border-radius: 4px;
}
.sign-up:after {
  bottom: 3px;
  border-color: #dcdcdc;
}

.sign-up-title {
  margin: -25px -25px 25px;
  padding: 15px 25px;
  line-height: 35px;
  font-size: 26px;
  font-weight: 300;
  color: #aaa;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.75);
  background: #f7f7f7;
}
.sign-up-title:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: #c4e17f;
  border-radius: 5px 5px 0 0;
  background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}

input {
  font-family: inherit;
  color: inherit;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.sign-up-input {
  width: 100%;
  height: 50px;
  margin-bottom: 25px;
  padding: 0 15px 2px;
  font-size: 17px;
  background: white;
  border: 2px solid #ebebeb;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 -2px #ebebeb;
  box-shadow: inset 0 -2px #ebebeb;
}
.sign-up-input:focus {
  border-color: #62c2e4;
  outline: none;
  -webkit-box-shadow: inset 0 -2px #62c2e4;
  box-shadow: inset 0 -2px #62c2e4;
}
.lt-ie9 .sign-up-input {
  line-height: 48px;
}

.sign-up-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 54px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #f0776c;
  border: 0;
  border-bottom: 2px solid #d76b60;
  border-radius: 5px;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #d76b60;
  box-shadow: inset 0 -2px #d76b60;
}
.sign-up-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

:-moz-placeholder {
  color: #ccc;
  font-weight: 300;
}

::-moz-placeholder {
  color: #ccc;
  opacity: 1;
  font-weight: 300;
}

::-webkit-input-placeholder {
  color: #ccc;
  font-weight: 300;
}

:-ms-input-placeholder {
  color: #ccc;
  font-weight: 300;
}

::-moz-focus-inner {
  border: 0;
  padding: 0;
}

Now we will add HTML code for the Sign Up Email Subscription Widget. To add HTML code go to Layout> Add Gadget> HTML / JavaScript Then copy below all HTML code and add in HTML/JavsScript Widget.

<form action="http://feedburner.google.com/fb/a/mailverify?uri=Msdesign92" class="sign-up" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Msdesign92, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<h1 class="sign-up-title">
Sign up in seconds</h1>
<input autofocus="" class="sign-up-input" placeholder="Your Name" type="text" />
     <input name="uri" type="hidden" value="YOUR-USER-NAME" /> <input name="loc" type="hidden" value="en_US" /> <input autofocus="" class="sign-up-input" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}" placeholder="Your Email" type="text" />

    <input class="sign-up-button" type="submit" value="Sign me up!" />
  </form>

Save Template. You are done.Enjoy widget and don't forget to put your suggestions in comments. Thank you!

Read more

How to Add Back To Top Button In Blogger

For now I am going to share back to top button for blogger. It is useful widget which enables blog readers to go back to top after browsing through number of some posts on your blogger blog rather than scrolling manually as it also takes time and ofcourse bad impression to blog readers.

DEMO DISPLAY:

Add a Back To Top button to your blogger site:

• To get started, add this to the CSS section of your site. In Blogger, this would be under blogger>Template>Edit HTML> and past the given code just before  ]]></b:skin>.

.back-to-top{ bottom: 2em;
 color: #fff;
 display: none;
 opacity:0.6;
 padding: 1.5em;
 position: fixed;
 right: 1.5em;
 text-decoration: none;
}
.back-to-top:hover{
 opacity:1;
 transition:1s;
}

After adding css code for back to top buttons. Save template and your done with CSS.

• In this step you will have to add jQuery to your blogger blog. To make sure your site is loading jQuery. Add this code in the </head> section.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

• Next, add the following code directly before the </body> code in your template’s main HTML file. In Blogger, go to Template > Edit HTML and search for and add this above it:

<a class="back-to-top" href="https://www.blogger.com/blogger.g?blogID=8402326634669559549#">↑</a> <script> jQuery(document).ready(function() { var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() &gt; offset) { jQuery(&#39;.back-to-top&#39;).fadeIn(duration); } else { jQuery(&#39;.back-to-top&#39;).fadeOut(duration); } }); jQuery(&#39;.back-to-top&#39;).click(function(event) { event.preventDefault(); jQuery(&#39;html, body&#39;).animate({scrollTop: 0}, duration); return false; }) }); </script>

 Now save your template you should see the Back to Top link appear as you scroll down the page in your blogger blog. If you have any problem installing back to top buttons ask your questions in comments. Thanks!

Read more

Simple CSS Slider with radio buttons widget for blogger

                                                             View Demo

Here I am going to share awesome sideshow for your blog and website. This is purely css designed slider with radio buttons widget for blogger. You can edit and add your pictures and description with them. It will make your blog look more professional and awesome. Slideshow consists of 6 sliding images and two social sharing buttons and description and heading area.

Adding this to your blog/website

Note: Here I am going to show you how to add into blogger.

Go to Blog Title→ Template→ Edit and search for 

]]></b:skin>

and add the below code just above it.

/*
 radio click through #2
 Hornebom / 2013-10-23
 MIT licensed
 http://hornebom.com/
*/
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:300);
@import url(http://weloveiconfonts.com/api/?family=entypo);
*, *:before, *:after {
  margin:0;
  padding:0;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#gal {
  position:relative;
  width:600px;
  height:300px;
  margin:0 auto;
  top:100px;
  background:white;
  -webkit-box-shadow:0px 0px 0px 10px white,
             5px 5px 0px 10px rgba(0,0,0,0.1);
  -moz-box-shadow:0px 0px 0px 10px white,
             5px 5px 0px 10px rgba(0,0,0,0.1);
  box-shadow:0px 0px 0px 10px white,
             5px 5px 0px 10px rgba(0,0,0,0.1);
  -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);
}
#gal:after {
  content:'';
  position:absolute;
  bottom:24px;
  right:0;
  left:0;
  width:100%;
  height:1px;
  background:rgba(255,255,255,0.35);
  z-index:3;
}
#gal ul {list-style-type:none;}
input[type="radio"], input[type="radio"] + label {
  position:absolute;
  bottom:15px;
  display:block;
  width:20px;
  height:20px;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  cursor:pointer;
}
input[type="radio"] {
  opacity:0;
  z-index:9;
}
input[value="one"], input[value="one"] + label {left:20px;}
input[value="two"], input[value="two"] + label {left:128px;}
input[value="three"], input[value="three"] + label {left:236px;}
input[value="four"], input[value="four"] + label {left:344px;}
input[value="five"], input[value="five"] + label {left:452px;}
input[value="six"], input[value="six"] + label {right:20px;}
input[type="radio"] + label {
  background:rgba(255,255,255,0.35);
  z-index:7;
  -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
  -moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
  box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
  -webkit-transition:all .3s;
  -moz-transition:all .3s;
  -o-transition:all .3s;
  transition:all .3s;
}
[class*="entypo-"]:before {
  position:absolute;
  font-family: 'entypo', sans-serif;
}
figure[class*="entypo-"]:before {
  left:10px;
  top:5px;
  font-size:2rem;
  color:rgba(255,255,255,0);
  z-index:1;
  -webkit-transition:color .1s;
  -moz-transition:color .1s;
  -o-transition:color .1s;
  transition:color .1s;
}
a[class*="entypo-"]:before {
  top:8px;
  left:9px;
  font-size:1.5rem;
  color:white;
}
a:hover[class*="entypo-"]:before {
  color:white;
}
figure, figure img, figcaption {
  position:absolute;
  top:0;
  right:0;
}
figure {
  bottom:0;
  left:0;
  width:600px;
  height:300px;
  display:block;
  overflow:hidden;
}
figure img {
  bottom:0;
  left:0;
  display:block;
  width:600px;
  height:300px;
  z-index:1;
  -webkit-transform:translateX(600px);
  -moz-transform:translateX(600px);
  -ms-transform:translateX(600px);
  -o-transform:translateX(600px);
  transform:translateX(600px);
  -webkit-transition:all .15s .15s, z-index 0s;
  -moz-transition:all .15s .15s, z-index 0s;
  -o-transition:all .15s .15s, z-index 0s;
  transition:all .15s .15s, z-index 0s;
}
figcaption {
  display:block;
  width:270px;
  height:300px;
  padding-top:20px;
  background-image:radial-gradient(rgba( 255,255,255,0.3), transparent);
  background-size:600px 600px;
  background-repeat:no-repeat;
  background-position:-300px -150px;
  text-align:center;
  z-index:3;
  -webkit-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
  -moz-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
  box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
  -webkit-transform:translateX(300px);
  -moz-transform:translateX(300px);
  -ms-transform:translateX(300px);
  -o-transform:translateX(300px);
  transform:translateX(300px);
  -webkit-transition:all .35s;
  -moz-transition:all .35s;
  -o-transition:all .35s;
  transition:all .35s;
}
h4 {
  display:inline-block;
  padding:0 15px;
  color:white;
  font-family: 'Titillium Web', sans-serif;
  font-weight:300;
  font-size:2rem;
}
figcaption nav ul {display:block;padding-top:10px;}
figcaption nav ul li {display:inline-block;margin-left:5px;}
figcaption nav ul li a {
  position:relative;
  display:block;
  width:40px;
  height:40px;
  background:rgba(255,255,255,0.2);
  text-decoration:none;
  color:white;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  -webkit-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
  -moz-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
  box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
  -webkit-transition:all .15s;
  -moz-transition:all .15s;
  -o-transition:all .15s;
  transition:all .15s;
}
figcaption nav ul li a:hover {
  background:rgba(255,255,255,0);
  -webkit-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
  -moz-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
  box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
}
figcaption p {
  padding:50px 15px;
  font-family:'Titillium Web', sans-serif;
  font-weight:300;
  color:#333;
  background-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.35)), color-stop(0.3, rgba(255,255,255,0.35)), color-stop(0.3, transparent), color-stop(0.7, transparent), color-stop(0.7, rgba(255,255,255,0.35)), to(rgba(255,255,255,0.35)));
  background-image:-webkit-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
  background-image:-moz-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
  background-image:-o-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
  background-image:linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
  background-size:1px 100%;
  background-repeat:no-repeat;
  background-position:50% 0%;
}
input[type="radio"]:hover + label {
  background:rgba(255,255,255,0.6);
}
input[type="radio"]:checked + label {
  background:rgba(255,255,255,1);
  -webkit-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
  -moz-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
  box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
}
input[type="radio"]:checked + label:before {}
input[type="radio"]:checked ~ figure img {
  z-index:2;
  -webkit-transform:translatex(0px);
  -moz-transform:translatex(0px);
  -ms-transform:translatex(0px);
  -o-transform:translatex(0px);
  transform:translatex(0px);
  -webkit-transition:all .15s, z-index 0s;
  -moz-transition:all .15s, z-index 0s;
  -o-transition:all .15s, z-index 0s;
  transition:all .15s, z-index 0s;
}
input[type="radio"]:checked ~ figure[class*="entypo-"]:before {
  z-index:3;
  color:rgba(255,255,255,0.5);
  -webkit-transition:color .5s;
  -moz-transition:color .5s;
  -o-transition:color .5s;
  transition:color .5s;
}
input[type="radio"]:checked ~ figure figcaption {
  z-index:8;
  -webkit-transform:translateX(0px);
  -moz-transform:translateX(0px);
  -ms-transform:translateX(0px);
  -o-transform:translateX(0px);
  transform:translateX(0px);
  -webkit-transition:all .35s, .7s;
  -moz-transition:all .35s, .7s;
  -o-transition:all .35s, .7s;
  transition:all .35s, .7s;
}
h2 {
  margin-top:150px;
  text-align:center;
  font-family: 'Titillium Web', sans-serif;
  font-weight:300;
  font-size:1.2rem;
}
h2 a {
  position:relative;
  color:tomato;
  text-decoration:none;
}
h2 a:after {
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  width:0;
  height:1px;
  background:tomato;
  -webkit-transition:width .1s;
  -moz-transition:width .1s;
  -o-transition:width .1s;
  transition:width .1s;
}
h2 a:hover:after {
  width:100%;
}
body {background:#f0f0f0;}
html, body {
  width:100%;
  height:100%;
}

Nex step is

Go to Blog Title→ Layout →Add Widget→ Html/JavaScript. Past the Below Code..

<div id="gal">  <nav class="galnav">    <ul>      <li>        <input type="radio" name="btn" value="one" checked="checked"/>        <label for="btn"></label>        <figure>          <img src="https://dl.dropboxusercontent.com/u/330966/static/iphone6infinity/new/01_Fabio_Basile.jpg"/>          <figcaption>            <h4>Fabio Basile</h4>              <nav role='navigation'>                <p>iPhone 6 Infinity</p>                <ul>                  <li><a href="http://dribbble.com/toxinide" class="entypo-dribbble"></a></li>                  <li><a href="https://twitter.com/fffabs" class="entypo-twitter"></a></li>                </ul>              </nav>            </figcaption>        </figure>      </li>      <li>        <input type="radio" name="btn" value="two"/>        <label for="btn"></label>         <figure class="entypo-forward">          <img src="https://dl.dropboxusercontent.com/u/330966/static/iphone6infinity/new/08_Brian_Miller.jpg"/>          <figcaption>            <h4>Brian Miller</h4>              <nav role='navigation'>                <p>TypeTi.me</p>                <ul>                  <li><a href="http://dribbble.com/BMDG" class="entypo-dribbble"></a></li>                  <li><a href="https://twitter.com/BMDG" class="entypo-twitter"></a></li>                </ul>              </nav>            </figcaption>        </figure>      </li>      <li>        <input type="radio" name="btn" value="three"/>        <label for="btn"></label>        <figure class="entypo-forward">          <img src="https://dl.dropboxusercontent.com/u/330966/static/iphone6infinity/new/05_Nicolas_Quod.jpg"/>          <figcaption>            <h4>Nicolas Quod</h4>              <nav role='navigation'>                <p>Iphone 6 - Notification - iOS 7</p>                <ul>                  <li><a href="http://dribbble.com/NicolasQuod" class="entypo-dribbble"></a></li>                  <li><a href="https://twitter.com/@NicolasQuod" class="entypo-twitter"></a></li>                </ul>              </nav>            </figcaption>        </figure>      </li>      <li>        <input type="radio" name="btn" value="four"/>        <label for="btn"></label>         <figure class="entypo-forward">          <img src="https://dl.dropboxusercontent.com/u/330966/static/iphone6infinity/new/04_Joffrey.jpg"/>          <figcaption>            <h4>Joffrey</h4>              <nav role='navigation'>                <p>▽</p>                <ul>                  <li><a href="http://dribbble.com/joffrey" class="entypo-dribbble"></a></li>                  <li><a href="https://twitter.com/joffrey" class="entypo-twitter"></a></li>                </ul>              </nav>            </figcaption>        </figure>      </li>      <li>        <input type="radio" name="btn" value="five"/>        <label for="btn"></label>         <figure class="entypo-forward">          <img src="https://dl.dropboxusercontent.com/u/330966/static/iphone6infinity/new/09_Jared_Long.jpg"/>          <figcaption>            <h4>Jared Long</h4>              <nav role='navigation'>                <p>Don't drop your iPhone Infinity</p>                <ul>                  <li><a href="http://dribbble.com/designmylife" class="entypo-dribbble"></a></li>                  <li><a href="http://www.behance.net/designmylife" class="entypo-behance"></a></li>                </ul>              </nav>            </figcaption>        </figure>      </li>      <li>        <input type="radio" name="btn" value="six"/>        <label for="btn"></label>         <figure class="entypo-forward">          <img src="https://dl.dropboxusercontent.com/u/330966/static/iphone6infinity/new/02_Charles_Treece.jpg"/>          <figcaption>            <h4>Charles Treece</h4>              <nav role='navigation'>                <p>iPhone 6 Infinity Side Status Bar</p>                <ul>                  <li><a href="http://dribbble.com/CharlesTreece" class="entypo-dribbble"></a></li>                  <li><a href="https://twitter.com/CharlesTreece" class="entypo-twitter"></a></li>                </ul>              </nav>            </figcaption>        </figure>      </li>    </ul>  </nav></div>

      
Now you are Done. Thank you for visiting pro blog world.
Your comments makes us so happy.  

Read more

Free bloggerlogics Responsive Template for Blogger 2016

DEMO

Bloggerlogics is a free blogger template adapted from WordPress with 2 columns, responsive design, right sidebar, footer columns, landing page, social bookmarking icons and post thumbnails.

Detailed features are given in the below table.

Features	Availability
Responsive	True
SEO	True
Google Testing Tool Validator	True
Custom Mobile Version	True
Custom Threaded Comment	True
Dynamic Heading	True
2 Column	True
Light Base Theme Color	True
Simple Flat Design	True
Auto Read More with Thumbnail	True
Responsive Ad Slot	True
Breadcrumbs	True
Related Posts with Thumb	True
Search Box	True
Social Share Button	True
Mini Homepage Share Button	True
Sidebar Tab Widget	True
Recent Post Widget	True
Recent Comment Widget	True
Custom 404 Page	True
Smooth Scroll back To Top	True
Better Print Page Layout	True
Custom Subscribe Box Widget	True
Sitemap Widget	True
Contact Form Widget	True
Well Documentation	True

Download Template

I hope you liked Blogger-Logics Responsive Template. Don't forget to put your questions and quires in comments.

Read more

How to Add a Numbered Pagination in Blogger blog

In blogger there is option to show limited number of posts on blogger home page. When doing so Normally blogger shows a two-link Older / Newer or Previous / Next navigation to browse through the index. 

But this is typical way to navigate to older posts with these links. You must seen modern, stylish and beautiful numbered navigation on several blogs, websites and mostly on wordpress.

Numbered Paged Navigation or Numbered Pagination menu is modern and inspiring way to make visitors navigate posts easily through the index on your blogger blog. 

If you are wondering how to add add Numbered Pagination to blogger?. This tutorial post will answer your question in all possible ways.

DEMO DISPLAY:Here is a demo display to preview how it looks.

Installing Number Pagination In blogger

CSS:Adding the styles

Open blogger> Templates> Edit HTML and paste the given css code just before
]]> </ b: skin>. and save template

.blog-pager,#blog-pager{font-family:"oswald", serif;font-weight:normal;font-size:12px;width:700px;padding:17px;} 
.showpageNum a,.showpage a {background:#163a5e; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;line-height:0;text-align:center;padding:12px 18px 12px;} 
.showpageNum a:hover,.showpage a:hover {background:#c03426; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;}
.showpageOf{margin:0 8px 0 0;font-family:'Coming Soon', cursive;text-decoration:none;font-size:100%;}
.showpagePoint {background:#fba783; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;}

Adding JavaScript:

Open blogger>Template Edit HTML and past the below javascript code just before </body>. and save template.

<script type="text/javascript">;
var home_page=&#39;/&#39;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=4;
var upPageWord =&#39;Prev&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script type="text/javascript">
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 I;6 i;6 f;6 n;1f();C 1g(15){6 5=\'\';J=K(N/2);4(J==N-J){N=J*2+1}A=f-J;4(A<1)A=1;d=K(15/j)+1;4(d-1==15/j)d=d-1;D=A+N-1;4(D>d)D=d;5+="<3 7=\'1A\'>1B "+f+\' 1C \'+d+"</3>";6 16=K(f)-1;4(f>1){4(f==2){4(i=="o"){5+=\'<3 7="1D"><a 9="\'+B+\'">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">\'+O+\'</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+16+\');w x">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+16+\');w x">\'+O+\'</a></3>\'}}}4(A>1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}4(A>2){5+=\' ...    \'}1h(6 l=A;l<=D;l++){4(f==l){5+=\'<3 7="1E">\'+l+\'</3>\'}b 4(l==1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+l+\');w x">\'+l+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+l+\');w x">\'+l+\'</a></3>\'}}}4(D<d-1){5+=\' ...  \'}4(D<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+d+\');w x">\'+d+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+d+\');w x">\'+d+\'</a></3>\'}}6 17=K(f)+1;4(f<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+17+\');w x">\'+1i+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+17+\');w x">\'+1i+\'</a></3>\'}}5+=\'<1j><a 9="1F://1G.1H-1k.1I" 1J="1K-1L: 1M; 1N: 1O; 1P: 1Q;" 1R="1S">1T 1U 1V-1k</a></1j>\';6 E=y.1W("E");6 18=y.1X("1Y-1Z");1h(6 p=0;p<E.P;p++){E[p].1l=5}4(E&&E.P>0){5=\'\'}4(18){18.1l=5}}C 1a(Q){6 R=Q.R;6 1m=K(R.21$22.$t,10);1g(1m)}C 1f(){6 h=u;4(h.e("/r/s/")!=-1){4(h.e("?S-c")!=-1){n=h.F(h.e("/r/s/")+14,h.e("?S-c"))}b{n=h.F(h.e("/r/s/")+14,h.e("?&c"))}}4(h.e("?q=")==-1&&h.e(".5")==-1){4(h.e("/r/s/")==-1){i="o";4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1n("<m T=\\""+B+"U/V/W?c-k=1&X=Y-Z-m&11=1a\\"><\\/m>")}b{i="s";4(h.e("&c-k=")==-1){j=20}4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1n(\'<m T="\'+B+\'U/V/W/-/\'+n+\'?X=Y-Z-m&11=1a&c-k=1" ><\\/m>\')}}}C L(H){12=(H-1)*j;I=H;6 13=y.1o(\'1p\')[0];6 z=y.1q(\'m\');z.1r=\'1s/1t\';z.1u("T",B+"U/V/W?1v-1w="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1x(z)}C M(H){12=(H-1)*j;I=H;6 13=y.1o(\'1p\')[0];6 z=y.1q(\'m\');z.1r=\'1s/1t\';z.1u("T",B+"U/V/W/-/"+n+"?1v-1w="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1x(z)}C 1b(Q){1c=Q.R.24[0];6 1y=1c.1z.$t.F(0,19)+1c.1z.$t.F(23,25);6 1d=26(1y);4(i=="o"){6 1e="/r?S-c="+1d+"&c-k="+j+"#G="+I}b{6 1e="/r/s/"+n+"?S-c="+1d+"&c-k="+j+"#G="+I}27.9=1e}',62,132,'|||span|if|html|var|class||href||else|max|maksimal|indexOf|nomerhal|showpageNum|thisUrl|jenis|postperpage|results|jj|script|lblname1|page|||search|label||urlactivepage|onclick|return|false|document|newInclude|mulai|home_page|function|akhir|pageArea|substring|PageNo|numberpage|nopage|nomerkiri|parseInt|redirectpage|redirectlabel|numshowpage|upPageWord|length|root|feed|updated|src|feeds|posts|summary|alt|json|in||callback|jsonstart|nBody||banyakdata|prevnomer|nextnomer|blogPager||hitungtotaldata|finddatepost|post|timestamp|alamat|halamanblogger|loophalaman|for|downPageWord|div||innerHTML|totaldata|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|timestamp1|published|showpageOf|Page|of|showpage|showpagePoint|http||||style|font|size|0pt|float|right|margin|0px||||||getElementsByName|getElementById|blog|pager||openSearch|totalResults||entry|29|encodeURIComponent|location'.split('|'),0,{}))
//]]>
</script>

Final Step:

After adding all the above codes save your template to deploy the changes. Done! Now preview your blog and see the numbered pagination in action.

If you got stuck anywhere following the tutorial, please post your query in the comments – I’ll try best to figure it out for you.

Read more