Simple CSS3 powered Ad Banner

Ad BannerA simple Advertisment Banner style using CSS3. Ad Banners have one purpose only and thats to grab the attention of the readers and make them click through. With this in mind I designed a simple one with some simple CSS3 border-radius property.

Demo

To add this Ad Banner Widget into your blog, you can use the one click installer

<style type=”text/css”>
/*<![CDATA[*/
.squarebanner ul{list-style-type:none;margin: 0px auto;padding: 10px 0px 0px 0px;width:300px;overflow:hidden;}.squarebanner ul li{list-style-type:none;margin: 0px 1px 0px 3px;float:left;display:inline;background:orange;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;-o-border-radius:100%;}.squarebanner ul li:hover {-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-o-border-radius:15%;-webkit-border-radius:15%;-moz-border-radius:15%;border-radius:15%;}.squarebanner ul li:active {-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;-o-border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}.squarebanner ul li a img{-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);padding:3px;}
/*]]>*/
</style>
<a href=”http://www.stylifyyourblog.com” title=”Stylify Your Blog” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a> <div class="squarebanner ">
<ul>
<li style="background: blue !important;"><a href="URL"><img height="120" src="http://4.bp.blogspot.com/-CXrtKp4-nm0/T40RMqgmdTI/AAAAAAAAD6U/XwLFnnlCOSA/s1600/Advertise%2BHere.png" width="120" /></a></li>
</ul>
</div>

Or you can add it manually

To do that just add the following CSS and HTML to a HTML/JavaScript widget

<style>
.squarebanner ul{list-style-type:none;margin: 0px auto;padding: 10px 0px 0px 0px;width:300px;overflow:hidden;}.squarebanner ul li{list-style-type:none;margin: 0px 1px 0px 3px;float:left;display:inline;background:orange;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;-o-border-radius:100%;}.squarebanner ul li:hover {-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-o-border-radius:15%;-webkit-border-radius:15%;-moz-border-radius:15%;border-radius:15%;}.squarebanner ul li:active {-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;-o-border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}.squarebanner ul li a img{-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);padding:3px;}
</style>  
<div class="squarebanner ">
<ul>
<li style="background: blue !important;">
<a href="URL">
<img height="120" src="http://4.bp.blogspot.com/-CXrtKp4-nm0/T40RMqgmdTI/AAAAAAAAD6U/XwLFnnlCOSA/s1600/Advertise%2BHere.png" width="120" /></a></li>
</ul>
</div> 

Make sure to change the URL in Line 7 with your own

Scrolling Sticky Bar for Blogger

sticky header bar
In others word a On-Scroll Sticky Bar. A simple widget which appears in the upper part of your page as you scroll down and disappears again on reaching the top something similar to the Facebook header bar. It contains social sharing options as well as links to Home Page of your blog. Also present are the Slide to Top and Email subscribe options. This can be easily customized to include options according to your needs. Lets get started and see how to add it in your blog !

Demo
You can see the live demo on this very page itself !

Before we get started

We will be using the Old Interface for this tutorial as the New Interface throws up unexpected errors when editing the template. In case you are one of the people who joined Blogger recently then there might be a chance that you have no access to the Old Interface. To overcome this problem , type the following URL into the address bar

blogger URL

Replace the highlighted number with your Blog’s ID . To find the Blog ID , observe the Address Bar while surfing through the Stats , Layout , Template pages of your Blog . You will see a similar large number . That would be your Blog ID

Video Tutorial

Steps

1. Go to Blogger Dashboard and open up the Design Tab of the blog in which you want to add the Scrolling Sticky Bar. Now select the Edit HTML option

Blogger Dashboard Old



2. Now search for <body
tag  ( See Video tutorial for more details ) and add the following code just below it

<div id='SYB-Bar-Container'>
<div id='SYB-Bar-Content'>
<ul id='SYB-Bar-Left'>
<li class='Home'> <a href='http://www.stylifyyourblog.com/'>Home</a> </li>
<li class='Share'> <div id='share-top'>
<ul>
<li> <a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a> </li>
<li> <g:plusone size='medium'></g:plusone> </li>
<li> <div class='fb-like' data-font='verdana' data-layout='button_count' data-send='false' data-show-faces='false'>
</div></li></ul>
<div style='clear:both;'></div></div></li>
</ul>
<ul id='SYB-Bar-Right'>
<li class='Subscribe'> <div class='SYB-email'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=stylifyyourblog&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' style='padding:3px;text-align:center;' target='popupwindow'>
<input class='textarea' gtbfieldid='3' name='email' onblur='if (this.value == "") {this.value = "";}' onfocus='if (this.value == "") {this.value = "";}' placeholder=' Enter Your Email Address :)' type='text' value=''/> <input name='uri' type='hidden' value='stylifyyourblog'/><input name='loc' type='hidden' value='en_US'/> <input class='SYB-emailsubmit' type='submit' value='Subscribe'/> </form>
<a href="http://www.stylifyyourblog.com" title="Stylify Your Blog" ><img src="http://img1.blogblog.com/img/blank.gif" /></a> </div></li>
<li class='btt'> <a href='#top' title='Back to top'>Slide to Top &#8593;</a> </li>
</ul></div></div> 

Note: In Line 4 Replace the URL with your blog Address and In Line 15 and 16 replace instance of stylifyyourblog with your RSS Feed Name

3. Now search for </body> tag and add the following code just before it

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> 
<script>
//<![CDATA[
var b = $("#SYB-Bar-Container");var c = b.css("top");$(window).scroll(function (){if ($(this).scrollTop() > 50){b.stop().animate({top: "0px"}, 0)}else{b.stop().animate({top: "-100px"}, 0)}});
//]]>
</script> 
<script>
$(document).ready(function(){// fade in .btt
$(function () {$(window).scroll(function (){});// scroll body to 0px on click 
$('.btt a').click(function () {$('body,html').animate({scrollTop: 0}, 350);return false;});});});
</script>   
<script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs)}(document, 'script', 'facebook-jssdk'));</script>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'></script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script> 

Note: In case you have already included the jQuery library in your blog then remove Line 1 . The same applies for Line 12 ,13 and 14 as well if you have included Facebook , Google+ and Twitter scripts respectively.

4. Lastly add the following CSS just before ]]></b:skin> tag

#SYB-Bar-Container {
background-color:#f6f6f6;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));
background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));
}

 #SYB-Bar-Container , #SYB-Bar-Left .Home a, #SYB-Bar-Right .btt a,.SYB-emailsubmit {
 box-shadow: 0 5px 5px -5px #999;
 -webkit-box-shadow: 0 5px 5px -5px #999;
 -moz-box-shadow: 0 5px 5px -5px #999;
 }

 #SYB-Bar-Container{
margin: 0px 116px;
 top:-100px;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-radius:0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
 text-align:center;
 border-bottom: 1px solid #aaa;
 z-index:999;
padding:4px;
 height:33px;
  position:fixed;
  vertical-align: baseline;
  }

#SYB-Bar-Container *{
padding:0;
}

#SYB-Bar-Container a {
text-decoration:none;
}

#SYB-Bar-Content{
width:1024px;
margin:0 auto;
}

#SYB-Bar-Content li{
list-style:none;
float:left;
}

#SYB-Bar-Left{
float:left;
width:45%;
}

#SYB-Bar-Right{
float:right;
width55%;
}

#SYB-Bar-Left li{
margin-right:1%;
margin-top:-7px;
}

#SYB-Bar-Right li{
margin-top:-7px;
}

#SYB-Bar-Left .Home a, #SYB-Bar-Right .btt a,.SYB-emailsubmit{
font-size:9pt;
font-family:cambria;
font-weight:Bold;
text-transform:uppercase;
color:#fff;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
letter-spacing: 1px;
padding:6px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

#SYB-Bar-Left .Home a:active, #SYB-Bar-Right .btt a:active,.SYB-emailsubmit:active{
position: relative;
top: 1px;
box-shadow:none;
}

#SYB-Bar-Left .Home a{
background:#143eb4;
}

#SYB-Bar-Left .Home a:hover{
background:#1556fa;
}

#SYB-Bar-Right .Subscribe{
margin-top:-14px;
}



#SYB-Bar-Right .btt a{
background:#00810b;
margin-left:3px;
}

#SYB-Bar-Right .btt a:hover{
background:#06b421;
}

.SYB-emailsubmit{
background:#ce1527;
cursor:pointer;
border:none;
height:26px;
width:90px;
}
.SYB-emailsubmit:hover{
background: #f02a37;
}
.textarea{
border:1px solid #aaaaaa;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
resize:none;
font-size:8pt;
font-family:verdana;
width:170px;
height:25px;
color:#000000;
}

#share-top{
background: #f9f9f9;
border:1px solid #dddddd;
line-height: 1;
margin: -4px 0 0 60px;
padding: 10px 0 2px 5px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}

#share-top li {
display: block;
margin-right: 0;
}

#facebook-widget,#google-widget,#twitter-widget {display:none; }
@media only screen and (min-width : 768px) and (max-width : 1050px),only screen and (min-device-width : 768px) and (max-device-width : 1024px){
#SYB-Bar-Container{
display:none;
}
}

5. Hit the Save Template button and view your blog to see how the bar appears.

Thanks to Hacking University for creating this widget and also to Jafar Dhada insisting for creating a tutorial for this. In case you have any ideas for widgets or tutorials feel free to share them via comments

  • function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'View Random Post ★'; document.getElementById('Random-Posts').appendChild(a); }

  • Slide to Top ↑

// 50)
{
b.stop().animate(
{
top: “0px”
}, 0)
}
else
{
b.stop().animate(
{
top: “-100px”
}, 0)
}
});

//]]

$(document).ready(function(){// fade in .btt
$(function () {$(window).scroll(function (){});// scroll body to 0px on click
$(‘.btt a’).click(function () {$(‘body,html’).animate({scrollTop: 0}, 350);return false;});});});

(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = “//connect.facebook.net/en_US/all.js#xfbml=1”;fjs.parentNode.insertBefore(js, fjs)}(document, ‘script’, ‘facebook-jssdk’));

#SYB-Bar-Container {
background-color:#f6f6f6;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));
background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));
}

#SYB-Bar-Container , #SYB-Bar-Left .Home a,#SYB-Bar-Right .Random a,#SYB-Bar-Right .btt a,.SYB-emailsubmit {
box-shadow: 0 5px 5px -5px #999;
-webkit-box-shadow: 0 5px 5px -5px #999;
-moz-box-shadow: 0 5px 5px -5px #999;
}

#SYB-Bar-Container{
top:-100px;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-radius:0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
text-align:center;
border-bottom: 1px solid #aaa;
z-index:999;
padding:4px;
height:33px;
position:fixed;
vertical-align: baseline;
}

#SYB-Bar-Container *{
padding:0;
}

#SYB-Bar-Content{
width:1024px;
margin:0 auto;
}

#SYB-Bar-Content li{
list-style:none;
float:left;
}

#SYB-Bar-Left{
float:left;
width:45%;
}

#SYB-Bar-Right{
float:right;
width55%;
}

#SYB-Bar-Left li{
margin-right:1%;
margin-top:-7px;
}

#SYB-Bar-Right li{
margin-top:-7px;
}

#SYB-Bar-Left .Home a,#SYB-Bar-Right .Random a,#SYB-Bar-Right .btt a,.SYB-emailsubmit{
font-size:9pt;
font-family:cambria;
font-weight:Bold;
text-transform:uppercase;
color:#fff;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
letter-spacing: 1px;
padding:6px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

#SYB-Bar-Left .Home a:active,#SYB-Bar-Right .Random a:active,#SYB-Bar-Right .btt a:active,.SYB-emailsubmit:active{
position: relative;
top: 1px;
box-shadow:none;
}

#SYB-Bar-Left .Home a{
background:#143eb4;
}

#SYB-Bar-Left .Home a:hover{
background:#1556fa;
}

#SYB-Bar-Right .Subscribe{
margin-top:-14px;
}

#SYB-Bar-Right .Random a{
background:#f19904;
}

#SYB-Bar-Right .Random a:hover{
background:#ffc122;
}

#SYB-Bar-Right .btt a{
background:#00810b;
margin-left:3px;
}

#SYB-Bar-Right .btt a:hover{
background:#06b421;
}

.SYB-emailsubmit{
background:#ce1527;
cursor:pointer;
border:none;
height:26px;
width:90px;
}
.SYB-emailsubmit:hover{
background: #f02a37;
}
.textarea{
border:1px solid #aaaaaa;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
resize:none;
font-size:8pt;
font-family:verdana;
width:170px;
height:25px;
color:#000000;
}

#share-top{
background: #f9f9f9;
border:1px solid #dddddd;
line-height: 1;
margin: -4px 0 0 60px;
padding: 10px 0 2px 5px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}

#share-top li {
display: block;
margin-right: 0;
}

#facebook-widget,#google-widget,#twitter-widget {display:none; }
@media only screen and (min-width : 768px) and (max-width : 1050px),only screen and (min-device-width : 768px) and (max-device-width : 1024px){
#SYB-Bar-Container{
display:none;
}
}

Lazy Loading Social Buttons for Blogger

tweet like +1

Social Sharing buttons are known for there bad effects on the page load speed. For some time I was trying to find a solution to this problem on lines of the Lazy Load Plugin for images , I was inspired by way Blogger Dynamic Views handled the problem , loading buttons styles and scripts on mouse-hover. Then I came across Taylor Fausak solution and did a bit of tweaking for making them work in Blogger.

Demo

Features 

  • Asynchronous loading of all resources on hover 
  • Minimal CSS for styling the fake buttons
  • Page Size reduction by 200KB+
  • All major social networks like Facebook , Twitter , Google+ supported 
  • Currently supports Single Instance per page
  • Video Tutorial

    Steps

    1. Go to Blogger Dashboard ,and go to Templates page of a blog

    new blogger dashboard

    2. Now click the Edit HTML button and tick the Expand Widget Preview option

    Edit HTML Blogger dashboard

    3. Search for ]]></b:skin> tag and add the following CSS before it

    .fb-like {display:inline !important;}
    #facebook-widget, .twitter-widget, .google-widget, .facebook-widget,#google-widget,#twitter-widget {    color: #ffffff !important;    display: inline-block;    line-height: 22px;    text-align: center;    text-decoration: none;width: 55px;}
    #facebook-widget, .facebook-widget { background: #3b5b99; }
    #google-widget, .google-widget   { background: #dd4b39; }
    #twitter-widget ,.twitter-widget {background: #33ccff;}

    CSS related to Lazy load sharing buttons



    4. Now search for the </body> tag and add the following JavaScript before it

    <script type='text/javascript'>
    //<![CDATA[
    var element, script ;
    element = document.getElementById('google-widget');
    element.onmouseover = function () {
        this.onmouseover = null;
        this.parentNode.removeChild(this);
        script = document.createElement('script');
        script.async = true;
        script.src = '//apis.google.com/js/plusone.js';
        document.body.appendChild(script);
    };
    element = document.getElementById('facebook-widget');
    element.onmouseover = function () {
        this.onmouseover = null;
        this.parentNode.removeChild(this);
        script = document.createElement('script');
        script.async = true;
        script.src="//connect.facebook.net/en_US/all.js#xfbml=1&appId=133083533456136";
        document.body.appendChild(script);
    };
    element = document.getElementById('twitter-widget');
    element.onmouseover = function () {
        this.onmouseover = null;
        this.parentNode.removeChild(this);
        script = document.createElement('script');
        script.async = true;
        script.src = '//platform.twitter.com/widgets.js';
        document.body.appendChild(script);
    };
    //]]>
    </script>

    scripts related to lazy load sharing buttons



    5. Now we have two options , either show the Social Share buttons on the Post Page only or on Index pages as well ( like Home Page , Label Page ).

    For Post Page Only

    Search for <div class=’post-header-line-1’/> and add the following HTML just after it

    <div style="margin: 0px auto;text-align: center;" >
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <a href="#" id='twitter-widget' >Tweet</a> 
    <a class='twitter-share-button' data-count='horizontal' data-related="Your-Twitter-Handle" href='https://twitter.com/share'/>
    <a href="#" id='google-widget' >+1</a>    
    <span class='g-plusone' data-size='medium'/> 
    <a href="#" id='facebook-widget' >Like</a> 
    <div class='fb-like' data-layout='button_count' data-send='false'/>
    </b:if>
    </div>

    html related to lazy load sharing buttons



    For Index Pages as well as Post pages

    In this implementation , there are fallback buttons for all the pages except the Post page. When clicked they will give a Popup of the respective default sharing option.
    Search for <div class=’post-header-line-1’/> and add the following HTML just after it

    <div style="margin: 0px auto;text-align: center;" >
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <a href="#" id='twitter-widget' >Tweet</a> 
    <a class='twitter-share-button' data-count='horizontal' data-related="Your-Twitter-Handle" href='https://twitter.com/share'/>
    <a href="#" id='google-widget' >+1</a>    
    <span class='g-plusone' data-size='medium'/> 
    <a href="#" id='facebook-widget' >Like</a> 
    <div class='fb-like' data-layout='button_count' data-send='false'/>
    <b:else/> 
    <a class='twitter-widget' expr:href='&quot;http://twitter.com/share?url=&quot;   data:post.url   &quot;&amp;text=&quot;   data:post.title' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;'>Tweet</a> 
    <a class='google-widget' expr:href='&quot;https://plus.google.com/share?url=&quot;   data:post.url' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;'>+1</a> 
    <a class='facebook-widget' expr:href='&quot;http://www.facebook.com/share.php?u=&quot;   data:post.url   &quot;&amp;title=&quot;   data:post.title' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;'>Like</a>
    </b:if>
    </div>

    6. Hit the Save Template button

    Some Things to Take Care

    You can extend this script for other social sharing buttons like LinkedIn ,Pinterest ,Digg , etc

    For it to work effective ,make sure to all scripts related to Social Media buttons are removed from your template

    There is lot of scope for improvement here specially for multiple instance on a single page. I will be doing a followup tutorial soon, till then feel free to ask any difficulties you face while implementing this in the comments below

    Star Ratings in Blogger using JS-Kit

    star ratingsStar Ratings are graphical representation of the likability of a post generally measured on the scale of 5 and represented by stars. This can act as a useful alternative for collecting information about the likability of posts as many readers shy away from leaving comments. Not only is it faster than commenting also there is a added element of anonymity. In this tutorial we will be learning how to embed JS-Kit star rating in Blogger and some handy tricks related to it

    Demo

    Before we get started

    We will be using the Old Interface for this tutorial as the New Interface throws up unexpected errors when editing the template. In case you are one of the people who joined Blogger recently then there might be a chance that you have no access to the Old Interface. To overcome this problem , type the following URL into the address bar

    blogger URL

    Replace the highlighted number with your Blog’s ID . To find the Blog ID , observe the Address Bar while surfing through the Stats , Layout , Template pages of your Blog . You will see a similar large number . That would be your Blog ID

    Video Tutorial

    Steps

    1. Go to Blogger Dashboard and open up the Design Tab of the blog in which you want to add the Star Ratings

    Blogger Dashboard Old

    2. Now click the Edit HTML button and tick the Exapnd Widget Preview option

    Edit HTML Old Blogger Dashboard

    3. Now search for <div class=’post-header-line-1’/>
    and add the following code just after it

    <div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'>
    </div>

    JS-Kit related HTML

    4. Now search for </body> tag and add the following code just before it

    <script src='http://js-kit.com/ratings.js'/> 

    JS Kit rating script


    5. Lastly add the following CSS just before ]]></b:skin> tag

    .js-kit-rating {
    height:45px;
    text-indent: -9999px;
    overflow:hidden;
    text-indent: -9999px;
    width:85px !important;
    } 

    js kit ratings related css

    6. Hit the Save Template button and view your blog to see where the ratings widget appear

    Some handy tricks

    Removing Attribution

    js kit ratings attribution

    As you might have observed ,when you hover over the Ratings , there appears a attribution just besides it , to remove it add the following CSS

    .js-kit-rating {
    height:45px;
    overflow:hidden;
    width:85px !important;
    }

    Removing Total votes text


    js kit ratings votes text



    By default under the ratings , the total numbers of votes cast are shown , to remove it add the following CSS

    .js-kit-rating {
    height:45px;
    text-indent: -9999px;
    overflow:hidden;
    width:85px !important;
    }

    Showing the Thumbs Style

    Thumbs Up Thumbs Down

    In case you are a fan of the Thumbs up , Thumbs down style of rating ,then replace the code in the Step 3 above by the following code

    <div class='js-kit-rating' view="score"  expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'>
    </div>

    Feel free to share any tricks or problems that you face while implementing this Rating widget. Blogger also has a inbuilt Rating system , I will be doing a tutorial about it soon

    Google Web Fonts in Blogger

    web fonts

    Web fonts have been around since the CSS2 specification came out ,but in the recent years there has been a huge adoption due to lots of services coming up to cater to the users needs. One of the first on the scene was Typekit and was followed by lots of others. But they were all paid services and hence out of reach of the many ,then came Google Web Fonts and rest is history. Not only was it free but being hosted at Google’s servers it was the most reliable of them all. In this tutorial we will learn how to embed Google Web Fonts in Blogger .

    Getting started

    There are mainly two ways to embed Google Web Fonts into your blog , firstly you can simply use the Template Designer or you can include the specific font related Style-sheet directly to your template .

    Using the Template Designer


    Video Tutorial 

    Steps

    1. In your Blogger Dashboard ,go to the Template page of the specific blog

    blogger dashboard

    2. Click the Customise button present just adjacent to the Edit HTML button

    blogger dashboard template page

    3. In the Template Designer , go to the Advanced Tab and you are now free to select the fonts for the various parts of your blog like Page Text , Blog Title ,etc

    New Blogger Template Designer

    Cons
    – You don’t have access to all the fonts present in the Google Web Fonts Directory. Only a selected few are included in the Blogger’s Template Designer

    – An extra bit of JavaScript is added which is way more than the simple stylesheet added in the other method

    <script type="text/javascript">
    if (navigator.userAgent.indexOf('MSIE 6') == -1) {
      WebFontConfig = {
        google: { families: [ 'Pacifico' ],
        api: 'http://themes.googleusercontent.com/fonts/css?kit=YwEG9hvZkp55xA2jQoejfg'
        },
        loading: function() {
          if (window.jstiming) window.jstiming.load.tick('webfontLoading');
        },
        active: function() {
          if (window.jstiming) window.jstiming.load.tick('webfontActive');
        }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = '//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    } else {
      document.documentElement.className = 'wf-inactive';
    }
    </script>

    -This might not work if you are using a highly customized template the reason being the template designer would have removed the necessary CSS variables required for this to work. If you facing this problem then follow the other method below

    Pros
    – Simple to implement

    – Surprisingly faster than the other method even though extra JavaScript is added

    The Style-Sheet method

    This requires a bit of fiddling with the Edit HTML of the Blog but is the cleaner of the two. I suggest that you follow this method

    Video Tutorial 

    Steps

    1. Go to Google Web Fonts and browse through the various fonts . Once you have selected which font to use , click the Quick Use Button just in the right hand side.

    Google Web Fonts select

    2. Now scroll down a bit and you will see a link tag code , copy this code

    Web Fonts CSS copy

    3. Now in the Blogger Dashboard ,go to the Template page of the specific blog

    Blogger dashboard

    4. Click the Edit HTML button present just adjacent to the Customise button

    Edit HTML Blogger

    5. Paste the code you copied just after the <head> tag

    Font before b:skin tag

    6. Now to add the CSS to use this font, just before the ]]></b:skin> tag

     h1 {
    font-family: THE-WEB-FONT-FAMILY-NAME-YOU-EMBED ;
    }

    Embedding fonts is now a easy task, just don’t overdo it, can have some negative effects Feel free to ask problems or questions related to this tutorial in the comments below

    Related Post Widget for Blogger using OutBrain

    You Might LikeRelated Posts are conventionally shown at the end of a article to present interested readers with a choice of reading other similar stories to the one they just read. In Blogger there are no official widget for this purpose so you will have to rely on third party services or a simple JavaScript hack. In this post we will be discussing a step-by-step guide on how to integrate the OutBrain Related posts widget into your blog. Also with a bit of CSS we will make them look better.



    Lets get started: 

    1. Go to Outbrain.com and click the Register button on the upper right.

    outbrain homepage


    2.
    On the Registration page ,add all the relevant details and click the Register button 

    outbrain registration page


    3.
    Now you will be asked to confirm your email 

    outbrain confirmation page


    4.
    After confirming you will be redirected to the Dashboard , here in the left side, select the Manage Blog option and after that click the Add a Blog button 

    outbrain add a blog


    5. Now you will be asked information about your blog ,its platform (In this case set it to Blogger ) , its URL ,language ,etc.

    outbrain select a platform

    Note: Make sure to set the Install widget option to Yes


    6.
    After clicking the Continue button you will be presented with a option to Add the widget to your blog. Select your blog and click the Add Widget button 
    Pro Tip: By default the widget is added to all the pages in your blog including your HomePage. In case you want the widget to only appear in the Post pages then add the following code in the Edit Template option as shown in the image below

    <b:includable id='main'>
    <b:if cond='data:blog.pageType == "item"'>
    <data:content />
    </b:if>
    </b:includable>

    add widget to blogger


    7.
    The widget is installed but you will have to wait around 3-4 hours for OutBrain to index your posts and then only will they start displaying in below your a blog posts. Until then you can customize your widget by going to the Outbrain Dashboard > Manage Blog > Settings ( of the blog )

    outbrain settings page

    Enhancements 
    The widget you added gives such a formal and dull look which will in no way interest readers to click on these links. Lets Stylify it a bit using some CSS ! 

    Rounded Edges
    The square shapes are a bit too standard , lets round things up

    #ob_strip_container_rel_0_stripBox .strip-rec-link-img , #ob_strip_container_rel_0_stripBox .strip-img {border-radius: 100px !important;}


    Removing attribution
    Under each widget a link is added to the Outbrain service. To remove it add

    .what_is_container{display:none !important;}

    Changing Title Font 

    The “You might Like” font is a standard font , you can easily change it to another font by

    .strip-like {
    font-family: FONT-OF-YOUR-CHOICE ;
    font-weight: normal !important;
    }


    Adding background
     As you might observe that I have added a background to this blogs related post widget , you can do the same with the following

    #outbrain_widget_0 {
    background: url('http://2.bp.blogspot.com/-QWfcjpDDT6U/T9JHe-j4UEI/AAAAAAAAFTo/YHOE2Rojgmo/s1600/pattern.png');
    }

    Note: You might have to adjust the background a bit using padding and margin CSS property to make sure that it aligns well .

    Over to you


    Facing any problems while implementing this widget or have some nice trick to share. Feel free to ask/share them using the comments below

    The Official Google+ Stream Widget

    Google+ streamThe much awaited Google+ Stream Widget for Blogger and other platforms is on the way. It has not been made public yet but there is a working Demo present in one of the Blogger employee’s blog which I stumbled upon by chance. Its not ready for a public release yet as the profile thumbnails of users are not working correctly . This widget uses the Blogger API for its implementation but this can be easily integrated into any other platform with a simple Iframe.

    Here is a YouTube Video with the Demo

    The Code

    <script type="text/javascript">
            if (!window.gadgets || !gadgets.rpc) {
              document.write('<script type="text/javascript"'  
                      'src="//www-blogger-opensocial.googleusercontent.com/gadgets/js/rpc.js?containerx3dbloggerx26nocachex3d0x26debugx3d0x26cx3d1x26vx3dea8289bd3846c57bd64db8aa8a3f2928x26svx3d9">'  
                      '</scr'   'ipt>');
            }
          </script>
    <script type="text/javascript">
        
        function registerGetBlogUrls() {
          gadgets.rpc.register('getBlogUrls', function() {
            var holder = {};
            
              
              
              
                holder.postFeed = "http://www.blogger.com/feeds/2295610366269213074/posts/default";
              
              
              
                holder.commentFeed = "http://www.blogger.com/feeds/2295610366269213074/comments/default";
              
              holder.currentBlogUrl = "http://www.stylifyyourblog.com/";
              holder.currentBlogId = "2295610366269213074";
            
            return holder;
          });
        }
      </script>
    <script type="text/javascript">
      if (!window.registeredCommonBloggerCallbacks) {
        window.registeredCommonBloggerCallbacks = true;
    
        gadgets.rpc.register('resize_iframe', function(height) {
          var el = document.getElementById(this['f']);
          if (el) {
            el.style.height = height   'px';
          }
        });
    
        
        gadgets.rpc.register('set_pref', function() {});
    
        registerGetBlogUrls();
      }
      </script>
    <iframe src="//www-blogger-opensocial.googleusercontent.com/gadgets/ifr?url=http://gadgets-dev.appspot.com/static/googleplus/googleplus.xml&amp;container=blogger&amp;view=default&amp;lang=en&amp;country=ALL&amp;sanitize=0&amp;v=4a1aace2d5086225&amp;libs=core:setprefs&amp;parent=http://www.stylifyyourblog.com/&amp;up_userid=107070768564947881700&amp;mid=1#up_userid=107070768564947881700&amp;st=e%3DAFlCd0VF42RtsdEa50ZMThptAqYoiY%252BtiUhop4spI1D7lHNmW54jZGVNkAqmkOmzdiOCjtvp%252FoBuUthqBTlKd%252BM%252BjJVjk%252FsVBV5OCbVMo5ms9ao7aBBuv1VXpj5o6FiltBEZpXpVdMLN%26c%3Dblogger&amp;rpctoken=3600249869607945918" frameborder="0" style="width: 100%; display: block" height="422" id="sidebar-gadget1" name="sidebar-gadget1"></iframe>
    <script type="text/javascript">
            gadgets.rpc.setRelayUrl("sidebar-gadget1", '//www-blogger-opensocial.googleusercontent.com/gadgets/files/container/rpc_relay.html');
            gadgets.rpc.setAuthToken("sidebar-gadget1", "3600249869607945918");
          </script>
    </div>

    As you will observe in first few lines ,it is using the Blogger API for getting the Blog ID and URL . After that a iFrame is included ( Line 47 ) which is the Widget itself.

    All Blogger API widgets use IFrames for implementation and this is no different.

    After a bit of research I came to across a XML file which contained the information about the author of this widget inside Google.

    You can check the XML file here http://gadgets-dev.appspot.com/static/googleplus/googleplus.xml


    Demo

    if (!window.gadgets || !gadgets.rpc) {
    document.write(” +
    ”);
    }

    function registerGetBlogUrls() {
    gadgets.rpc.register(‘getBlogUrls’, function() {
    var holder = {};

    holder.postFeed = “http://www.blogger.com/feeds/2295610366269213074/posts/default”;

    holder.commentFeed = “http://www.blogger.com/feeds/2295610366269213074/comments/default”;

    holder.currentBlogUrl = “http://www.stylifyyourblog.com/”;
    holder.currentBlogId = “2295610366269213074”;

    return holder;
    });
    }

    if (!window.registeredCommonBloggerCallbacks) {
    window.registeredCommonBloggerCallbacks = true;

    gadgets.rpc.register(‘resize_iframe’, function(height) {
    var el = document.getElementById(this[‘f’]);
    if (el) {
    el.style.height = height + ‘px’;
    }
    });

    gadgets.rpc.register(‘set_pref’, function() {});

    registerGetBlogUrls();
    }

    gadgets.rpc.setRelayUrl(“sidebar-gadget1”, ‘//www-blogger-opensocial.googleusercontent.com/gadgets/files/container/rpc_relay.html’);
    gadgets.rpc.setAuthToken(“sidebar-gadget1”, “3600249869607945918”);

    Implementing it

    You can easily implement this using the following code in your websites ( its pretty long code ! ).

    <iframe src="//www-blogger-opensocial.googleusercontent.com/gadgets/ifr?url=http://gadgets-dev.appspot.com/static/googleplus/googleplus.xml&amp;container=blogger&amp;view=default&amp;lang=en&amp;country=ALL&amp;sanitize=0&amp;v=4a1aace2d5086225&amp;libs=core:setprefs&amp;up_userid=107070768564947881700&amp;mid=1#up_userid=107070768564947881700&amp;st=e%3DAFlCd0VF42RtsdEa50ZMThptAqYoiY%252BtiUhop4spI1D7lHNmW54jZGVNkAqmkOmzdiOCjtvp%252FoBuUthqBTlKd%252BM%252BjJVjk%252FsVBV5OCbVMo5ms9ao7aBBuv1VXpj5o6FiltBEZpXpVdMLN%26c%3Dblogger&amp;rpctoken=3600249869607945918" frameborder="0" style="width: 100%; display: block" height="422" id="sidebar-gadget1" name="sidebar-gadget1"></iframe>

    To display your Profile stream , just search for the word userid in the above code , it will look something like this

    Just replace the highlighted number above with your Google+ Profile ID

    Somethings to Remember

    This widget has not been officially released and might experience some unexpected problems. Other than that feel free to ask any problems that you come across while implementing it in your blog/websites.