Articles by "HTML"

Blogger Custom Robot txt and Custom robots header tags

Assalamu alaikum dear friends. Hope all are fine. Today i am gonna to showing how to set Custom Robot txt and Custom robots header tags  on blogger. This article help the beginner bloggers. Because Custom Robots header tags setting  is most important for every blogger. Custom Robots header tags play and important role on Google Search engine and this setting helps you on better SEO too.

How to set Custom Robot txt and Custom robots header tags for blogger

Custom Robot.txt  is an another important setting of blogger. If you want to index your content on google, then custom robot.txt is must be set. Custom Robot TXT help you for indexing your url on google. By setting this option you should get better result from Search Engines.

Now comes to the main point. At first i am show you the custom robot txt.

How to set Custom Robot TXT

User-agent: *Disallow: /searchAllow: /
Sitemap: http://your-blog.blogspot.com/sitemap.xml

Note: "http://your-blog.blogspot.com" just replace it with your blog url.

How to setup Custom robots header tags

This is the most important part of blogger. Every blogger must be set this setup. Now i just added a screenshots of Custom robots header tags.

How to set Custom Robot txt and Custom robots header tags on blogger

That's it. Now click Save changes Hope guys you understand about how to setup custom robot.txt and custom robots header tags for blogger. This setup help you lot to get better search results.

Don't forget to share this posts. If you have any problem, then feel free to describe on comment box. I'll try to resolve this. Thanks... 

Custom Stats Widget for Blogget

In this post, i am going to share with you custom stats blogger widget. By using this widget you can display total page views, total posts and total comments of your blog. Only blogger has total page views widget. After that time, i modify some css and added some script for total posts and total comments. The design of this widget is modern and clean. I used some icons using font awesome. Installing custom stats widget is very useful blogger widgets. In my own template i am also using a custom stats widget. But this is only total page views and total posts. 

It is very unique and smart design. Some of friends requested me to share this blogger widgets. After that time now i am share this with new look and one more extra features. This blogger widgets help you to display Total page views, comments and total posts of your blog. People who want make their blog more attractive and beautiful, some blogger widgets make them easy.


How to install custom stats blogger widget

Here is some very simple steps to installing custom stats blogger widget. In this blogger widget i used font awesome icons and PT Sans google font. So you have also need to adding These fonts on your blog. If font awesome already added on your blog. then ignore it.

Step 1: Go to Layout > Add a Gadget > Blog's Stats add this widget.

Install Custom Stats Widget for Blogger

Step 2: Now go to Edit HTML and find below codes.
   <b:widget id='Stats1' locked='false' title='Custom Stats' type='Stats' version='1' visible='true'>...</b:widget> 

Now replace this line with below codes.

   <b:widget id='Stats1' locked='false' title='Custom Stats' type='Stats' version='1' visible='true'>
    <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <!-- Content is going to be visible when data will be fetched from server. -->
    <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>
      <!-- Counter and image will be injected later via AJAX call. -->
      <b:if cond='data:showSparkline'>
        <img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' src='http://2.bp.blogspot.com/-nsxCtkYnchQ/VLEifAyf97I/AAAAAAAAIlk/9Viyy0W9r04/s1600/FFF.png' title='Sparkline' width='75'/>
      </b:if>
      <b:if cond='data:showGraphicalCounter'>
        <span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
      <b:else/>
        <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
      </b:if>
<script type='text/javascript'>
function postCount(json){
document.write(&quot;<span class='counts post2'> Total Posts &quot;);
var count = json.feed.openSearch$totalResults.$t;
document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;);
document.write(&quot;</span>&quot;)
}

function numberOfComments(json){
document.write(&quot;<span class='counts comment'> Total Comments &quot;);
var count = json.feed.openSearch$totalResults.$t;
document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;);
document.write(&quot;</span>&quot;)
}

</script>
<script src='/feeds/posts/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=postCount' type='text/javascript'/>
<script src='/feeds/comments/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=numberOfComments'/>


    </div>
  </div>
</b:includable>
  </b:widget> 

You're 80% done. Now paste all below CSS Codes befor </head>
 <link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/> 
<style type='text/css'>
/* Blogger Custom Stats widget by msdesignbd.com */
.Stats img {display:none!important;background-image:none;}
.Stats .counter-wrapper {width:92%;text-align:right;margin:10px;line-height:35px;color:#333;font-weight:700;font-size:16px;margin-left: 0;}
.Stats .counter-wrapper:after {content:&quot;Page Views&quot;;float:left;text-align:left;font-size:13px;font-weight:700;color:#333;}
.counts {display:inline-block;width:92%;font-size:13px;line-height:35px;color:#333;font-weight:700;}
.counts .count {display:inline-block;font-size:16px;height:30px;
vertical-align:top;direction:ltr;float:right;color:#333;font-weight:700!important;}
.counts:hover .titles:before {color:#333!important;border-radius:2px;border-color:rgba(255,255,255,0.1);}
.counter-wrapper.text-counter-wrapper:before, .counts:before {display:inline-block;font-size:13px;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 10px;float:left;width:10px;text-align:center;}
.counter-wrapper.text-counter-wrapper:before, .counts:before {
display:block;background-color:#fff;color:#333;width:35px;height:35px;font-size:18px;line-height:35px;border-radius:2px;margin:0px 8px 0 0;}
.counter-wrapper.text-counter-wrapper:before {content:&quot;\f06e&quot;;}
.counts.post2:before {content:&quot;\f044&quot;;}
.counts.comment:before {content:&quot;\f0e6&quot;;}
#Stats1_content {width:auto;height:auto;background-color:#fff;}
</style>  

You're done. Now Save template and see result by refreshing page.

Hope you understand that, how to add custom stats blogger widgets on blog or blogger site. If you have any problem, then feel free to communicate by comment box. If you like this widget, then don't forget to share this post with your social media. Your support is our future. Thanks.  

Ch.Shahzad Nasir

{facebook#YOUR_SOCIAL_PROFILE_URL} {twitter#YOUR_SOCIAL_PROFILE_URL} {google-plus#YOUR_SOCIAL_PROFILE_URL} {pinterest#YOUR_SOCIAL_PROFILE_URL} {youtube#YOUR_SOCIAL_PROFILE_URL} {instagram#YOUR_SOCIAL_PROFILE_URL}

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget