In this tutorial, we will get the page views statistics widgets that display total website views, posts, and comments which may help bring potential advertisers. The blogger widget shows the full total amount of all posts, pages, and all URLs that are associated with your website. The widget has a responsive and clean look that will skyrocket the user interface of your blogger blog visitors. Let’s integrate the views Stats Widget into your Blogger Website.
How To Add Views Stats Widget For Blogger Website
1: Go to Layout > Add a Gadget > Blog’s page views Stats and add the widget to your sidebar panel.
2. Now Click on theme.
3. Under live view next o customize, click on Edit HTML.’
4. Click anywhere in your template code and search for the below code.
<b:widget id=’Stats1′ locked=’false’ title=’Custom Stats’ type=’Stats’ version=’1′ visible=’true’>…</b:widget>
Find This Line
5. Replace the code With the Below Code.
<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 + "_content"' 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 + "_sparkline"' 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 + "_totalCount"'/> <b:else/> <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/> </b:if><script type='text/javascript'>function postCount(json){document.write("<span class='counts post2'> Total Posts ");var count = json.feed.openSearch$totalResults.$t;document.write("<span class='count'>" + count + "</span>");document.write("</span>")}6. Search for the code </head> and paste the below code just BEFORE the head tag.
<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 seoblur.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:"Page Views";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:"f06e";}.counts.post2:before {content:"f044";}.counts.comment:before {content:"f0e6";}#Stats1_content {width:auto;height:auto;background-color:#fff;}</style>That’s all, now visit your website to view your website page views widget look.