Tricks2Blogging

How To Awesome Floating Sharing Horizontal Bar for blogger

1. Goto blogger dashboard 
2. Template ->Backup template [Recommended]
3. dashboard ->Template
4. Edit Template -> Expand  

<b:includable id='post' var='post'>

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.hb_social_floating {
    position: fixed;
    bottom: 10%;
    margin-left: -60px;
    float: left;
    width: 60px;
    background-color: #f7f7f7;
    padding: 5px 0 0px 0px;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    z-index: 9999px !important;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.hb_social_floating .hb_side_social_button {
    margin-bottom: 5px;
    float: none;
    height: auto;
    width: 60px;
}

.hb_social_floating .st_twitter_vcount, .hb_social_floating.st_plusone_vcount, .st_email {
    margin-left: 5px;
}

.hb_social_floating .st_fblike_vcount {
    margin-left: 5px;
}

.hb_social_floating .stButton_gradient {
    background: none !important;
    height: 21px !important;
    padding-left: 0 !important;
}

.hb_social_floating .chicklets, .hb_social_floating .stMainServices {
    background: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_rtuS9EexnXZFH3gTcRr9r7cZ44ogqN7kJgrBjLnh8hGu3HjjgrzWTmx6Ws-7o07qssKXdRn1opYbaSL1ahxnZxJH3fH76aMrTXfMSuyBP5yFt28WYDQ4F9CE9bvom-___VCmPpFQ6-U/s1600/gc_social_sprite.png&#39;
    ) no-repeat !important;
    height: 19px !important;
    width: 45px !important;
    padding: 0 !important;
}

.st_email .chicklets {
    background-position: 0 -77px !important;
    background-image: url(&#39;
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_rtuS9EexnXZFH3gTcRr9r7cZ44ogqN7kJgrBjLnh8hGu3HjjgrzWTmx6Ws-7o07qssKXdRn1opYbaSL1ahxnZxJH3fH76aMrTXfMSuyBP5yFt28WYDQ4F9CE9bvom-___VCmPpFQ6-U/s1600/gc_social_sprite.png&#39;
    ) !important;
}

.hb_social_floating .st_twitter_vcount .st-twitter-counter {
    background-position: 0 -58px !important;
}

.hb_social_floating  .stButton_gradient {
    border: none !important;
}

.hb_social_floating .stBubble_count {
    width: 44px !important;
    font-size: 15px !important;
    font-weight: normal !important;
    padding-top: 7px !important;
    height: 23px !important;
    background: none !important;
}

.hb_social_floating .st_twitter_vcount .stBubble_count {
    color: #00a6df;
    background-color: #f8fbfc !important;
}

.st_fblike_vcount {
    margin-bottom: 0px;
    display: block;
}

.st_twitter_vcount {
    margin-bottom: 3px;
    display: block;
}

.st_email {
    margin-bottom: 5px;
    margin-top: 3px;
    display: block;
}

.hb_social_floating .stBubble {
    background-position: 21px 31px !important;
    height: 35px !important;
}
</style>

<div class='hb_social_floating'>
 <script type='text/javascript'>var switchTo5x=true;</script>
 <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
    <script type='text/javascript'>stLight.options({onhover:false});</script>
 <span class='st_fblike_vcount' displaytext=''/>
 <span class='st_twitter_vcount' displaytext='' st_via='twitter_name'/>
 <div style='margin:5px 0 0px 0;'>
  <center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
  <a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
  <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
  </script>
  </center>
 </div>
 <div style='margin:0px 0 0 5px;'>
  <span class='st_plusone_vcount' displaytext=''/>
 </div>
 <div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
  <a class='addthis_counter'/>
 </div>
 <script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;Helper Blogger&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#CF152A&quot;
}
 </script>
 <span class='st_email' displaytext=''/>
 <p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'>
  <a href='http://www.tricks2blogging.blogspot.com/' style='color:#CAC8C8;'>Widgets</a>
 </p>
</div>
</b:if></b:if>

REplace the Twitter Name With Your Twitter NameComment If you have any suggestion Or problem

how to build a nice-looking sliding photo gallery using JavaScript and jQuery. Full code download included.

Change the Height and width according to your necessities...This is for wordpress but can be used for any other website just change the codes according to your website..

Subscription Box With Social Networking Icons For Blogger

1. Go To Blogger - Design
2. In Page Elements choose Add a gadget
3. Choose HTML/JAVASCRIPT option

<div class='widget-content'>
<table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/tricks2Blogging"><img src="http://2.bp.blogspot.com/-qMRqkcoAT0s/Tz06uOJ0WII/AAAAAAAAAHY/
gLqbjiBuBfc/s1600/
woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/tricks2Blogging/" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwpAHmkzuxEuQJKZHbxmqndwYVfshLcZRy5XGywgn14VMrkNL4j0hOfWB713wOqGF_mciV_wYB9P6iwfOlGxvDMec9LI4IEZHHkyCDK95Mvk96CH8ZWtNLx7hGfBhlBYigm6Aw8m4Hbuk/s1600/
woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/tricks2Blogging" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk_koi-pUv1P14go_jKHhn9rFGbz3aUnExQo-Y1MHT9w_ZGWgnbTytIy38P2Zb-tRn6yJt72Ix8vYP_7RlbopUI3xGtVwuaL3Fk-tq0hZpQ7ZI7dKtFdNdbv_xT6hoCG7FQNo8z9F5CEQ/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a></td></tr></tbody></table>
<style type="text/css">
img.beintouch:hover{
    background: none repeat scroll 0 0 #D6D6D6;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 0 0 10px #565656;
}
.emailtext {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCsMkeZopSKLSpliAGh0uooMvBRQP-0C7N2W_ZrbVtEnss2kafQV6FIcMjHcsiSirRoVCT1XV5jtC4X4R3JGdb3uXWQHK7CRUeaK07n3TBGKzIWCWfxqnGL_eKvQN_uowWdp9ZzykOdFc/s1600/mailbox.png") no-repeat scroll 4px center transparent;
    border: 1px solid #D3D3D3;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 1px 1px 2px #CCCCCC inset;
    color: #444444;
    font-weight: bold;
    padding: 7px 15px 7px 35px;
    text-decoration: none;
width:176px;
margin-left:2px;
}
.ebutton {
   background: -moz-linear-gradient(center top , #FBFBFB 0%, #F4F4F4 100%) repeat scroll 0pt 0pt transparent;
background: -webkit-linear-gradient(top , #FBFBFB 0%, #F4F4F4 100%);
background: -o-linear-gradient(top , #FBFBFB 0%, #F4F4F4 100%);
background-color:#abab12;
     border-radius: 4px 4px 4px 4px;
     border: 1px solid #D3D3D3;
     color: #444444;
     cursor: pointer;
     font-weight: bold;
     margin-left: -18px;
     margin-top: 5px;
     padding: 6px 15px;
     text-decoration: none;
}
</style>
<div>Get Latest Tips via e-mail</div>
<form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FreeclassifiedsAndSeoSites', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="FreeclassifiedsAndSeoSites" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input type="text" value="Enter your email..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" name="email" class="emailtext" />
<input type="submit" value="Subscribe" title="" class="ebutton" alt="" />
</form>
</div>

Replace The Red Green Blue Codes with your Facebook, Twitter, feed burner codes

How to Add RSS And Email  Subscription Widget For Blogger

1. Go To Blogger - Design
2.  In Page Elements choose Add a gadget
3.  Choose HTML/JAVASCRIPT option

• And add the following code,

<style>
#submit_btn {float: right;}
.email-rss {
padding-top: 15px;
padding-right: 50px;
padding-bottom: 15px;
padding-left: 10px;
color: #333;
height: 200px;
height: auto;
min-height: 200px;
border: 1px solid #ccc;
background: #dfdfdf url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0_XrkW_RD7x4Aaj_WKLDeqigsHTc3Fbx9uYcuR_hODCRO0h_6FaWNqQ8NHaqMeZJEtJ0Zsixhs097z1q8FgJQAkLDUZHxyGIklKFqJAzDpXSvl7fRmpA01ze2CcYmRduEC5ZgRMWfoNyf/) center -20px no-repeat;
margin-bottom: 5px;
}
.email-rss .first {width: 150px;}

.sidebar-section .widget {
border: 1px solid #ccc;
padding: 10px 0 10px 10px;
margin: 5px 0;
}
.twitter-feed h2, .email-rss h2 {
margin-top: 0;
padding-bottom: 80px;
font-size: 28px;
}
.email-rss h2 {padding-bottom: 30px;}
.footer {
font-size: 13px;
margin-bottom: 0px;
padding-top: 15px;
padding-bottom: 10px;
font-weight: bold;
color: #FCFCFC;
padding-right: 50px;
}
.right-col-footer-inner {padding: 0 0 0 20px;}
#twitter_update_list li {
padding-top: 10px;
padding-bottom: 10px;
list-style-image: none;
list-style-type: none;
}
#twitter_update_list li a {
color: #FFFFFF;
}
.space {
padding-right: 5px;
padding-left: 15px;
}
.phone-email-wrap, .innards {
float: left;
padding: 5px;
background: #dfdfdf;
outline: 1px solid #ccc;
width: 680px;
color: #333;
}
.form-wrap {
position: relative;
float: right;
margin-right: 5px;
}
.form-bubble {
position: absolute;
left: -176px;
top: -70px;
background-color: transparent;
background-image: url(images/bubble-bg.png);
background-repeat: no-repeat;
background-position: left top;
height: 60px;
width: 280px;
font-size: 11px;
text-transform: uppercase;
color: #2B2B2B;
display: none;
padding-top: 5px;
padding-right: 50px;
padding-bottom: 15px;
padding-left: 10px;
}
input#email-element {
background-color: #FFFFFF;
background-image: url(images/form-bg.png);
background-repeat: repeat-x;
background-position: left top;
border: 1px solid #BABABA;
width: 200px;
padding-top: 5px;
padding-right: 2px;
padding-bottom: 5px;
padding-left: 2px;
margin-right: 10px;
}
.form-register {
line-height: 15px;
}
.email-submit {
background-image: url(images/send-but-on.png);
background-repeat: no-repeat;
background-position: left top;
display: inline-block;
height: 29px;
width: 55px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.email-submit:hover {
background-image: url(images/send-but.png);
cursor: pointer;
}
.update-button {
background-image: url(images/ud-button1.png);
background-repeat: no-repeat;
background-position: left top;
height: 29px;
width: 123px;
display: block;
margin-top: 1px;
}
.update-button:hover {
background-image: url(images/ud-button2.png);
}
.register-success {
font-size: 12px;
color: #009900;
}
.form-error {
color: #CC0000;
}
.sb-rss {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5PxGDkUyFaTKthdGdApciaWIrJoIKt5qR-9BAG0YXjDiQ35eKdlTfyezADWTiYmJVQDGWxUZTyq2RIkIaOWXBXvzeEEkS2orTLOuJ2NhLUjv28TeogaKBO4_IeY6jlosi0Wnf4iJivDY/s800/rss.png) left no-repeat; padding-left: 20px; margin-right: 1em; font-weight: bold;}
.sb-email {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAIeyeHw-gk1KuThyEl8eFNa9ScvAhsKjhgULLUpk-v8Dt7OGpFOEu0jJ_5h8jPCsR4iyLc1gP0U_BJCH3MyVXeuyHsVxEKoyWlXqGPvC1FML4MnGAvmsEG4H5dV0NsrkoD3O2Z11Unk0/s800/email.png) left no-repeat; padding-left: 20px; font-weight: bold;}
.phone-email-wrap {margin-right: 20px; width: 645px;}
</style>
<div class='clearfix email-rss'>

<h2>Get Updates!</h2>
<p class='first'>Subscribe to Tricks2Blogging title by email for updates to your inbox:</p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=Tricks2Blogging&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'><p><input name='email' style='width:258px; border: 1px solid #ccc; padding: 5px; font-size: 1.2em; color: #434343; font-weight: bold;' type='text' value='Enter your email address'/></p><input name='uri' type='hidden' value='
Tricks2Blogging'/><input name='loc' type='hidden' value='en_US'/></form>

<p>Be informed of new posts by <a href='http://feeds.feedburner.com/Tricks2Blogging'>subscribing to the RSS feed in your feed reader or by email</a>.</p>
<p><a class='sb-rss' href='http://feeds.feedburner.com/Tricks2Blogging'>RSS</a>
<a class='sb-email' href='http://feedburner.google.com/fb/a/mailverify?uri=Tricks2Blogging&loc=en_U'>Email</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class='right'><a href='http://feeds.feedburner.com/Tricks2Blogging
'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/Tricks2Blogging
?bg=C98E71&fg=000033&anim=0' style='border:0' width='88'/></a></span></p>
</div>

Now Save It

How to Add Label Name next to Blogger Post Title

1. Go to Dashboard - 
2. Design - 
3. Edit HTML -
4. Expand Widget Template (make a backup)

1. Go to Dashboard - 
2. Template - 
3. Edit HTML - 
4. Proceed - 
5. Expand Widget Template (make a backup)

<b:includable id='post' var='post'>
  <div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

<b:includable id='post' var='post'>
  <div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <a expr:name='data:post.id'/>
        <b:if cond='data:post.labels'>
         <b:loop values='data:post.labels' var='label'>
          <script type='text/javascript'>
            var SS = &#39;<data:label.name/>&#39;;
            var PrintSS = SS + &quot; | &quot;;
          </script>
         </b:loop>
        <b:else/>
         <script type='text/javascript'>
         var PrintSS = &quot;&quot;;
         </script>        
        </b:if>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><span class='pre-postss'><script>document.write(PrintSS);</script></span><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><span class='pre-postss'><script>document.write(PrintSS);</script></span><data:post.title/></a>
          <b:else/>
           <span class='pre-postss'><script>document.write(PrintSS);</script></span><data:post.title/>
          </b:if>
        <b:else/>
         <span class='pre-postss'><script>document.write(PrintSS);</script></span><data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

How to Change Default Avatar in Blogger Comments

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(&quot;img[src=&#39;http://img1.blogblog.com/img/anon36.png&#39;]&quot;)
.attr(&#39;src&#39;, &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLmeA86zkkBeBsDbBDJJyS_gHcpJZXZIQ6M7UnJDIw99k0z51bnoU2bGjwmIAP9Qio2zzbfowjkRHTYSc-Zdu6BajQbHOGopGd5xSdK2LcCSDOG_UK1i51zXAAuSe0yR5ta9I6vcvbqFA/s1600/default_avatar.gif&#39;)
.ssyby(&#39;blank&#39;)
</script>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(&quot;img[src=&#39;http://img2.blogblog.com/img/b36-rounded.png&#39;]&quot;)
.attr(&#39;src&#39;, &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaihJ-D4zYXxr3t4CHVq_GgNCZjGTgz7t2YsdHqt-2dPKzQJrSkwe9Cy8UwipG1ushqkDVSBusbuPZXQC9oweOQWHQZiOXbADb8BiEXqJK4J7g9hzcMe17NV5wdXaoZ1RynH-FCxbzk2g/s1600/blogger-user.png&#39;)
.ssyby(&#39;blank&#39;)
</script>

Save the Template

For Anonymous users: Replace the code in red with the url address of the image you like below
For Blogger users: Replace the URL in blue with the image you like below

STYLE-1

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLmeA86zkkBeBsDbBDJJyS_gHcpJZXZIQ6M7UnJDIw99k0z51bnoU2bGjwmIAP9Qio2zzbfowjkRHTYSc-Zdu6BajQbHOGopGd5xSdK2LcCSDOG_UK1i51zXAAuSe0yR5ta9I6vcvbqFA/s200/default_avatar.gif

STYLE-2

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht1pd-Lm92e5l56Egyw_KEBAf5T21Rgs158FwNSC9lWhH4ZHZxUM9sM888CrMNKuqVj134nsm5tnTN0Ho9YGbEAHIQxLyXwK8lH_Z9yb4hyphenhyphenqWt6v3A8X65a3prnKt2ysXSefCOUxumi_A/s1600/facebook.gif

STYLE-3

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNz6v5lNmhlwMQ5tX1aMeNfX7yJORA71zNOjFXxseKlkWghuCZX6y8MNbK6-uFBbeh7OCG7toCWbQfw76-Vl3IA1EJnaxx9CWIm8D434sbVqICDjzd53mqz1wx3rZZTs-s6_mZ_nBSYzo/s1600/anonymous3.png

STYLE-4

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB7eEmSROy-Hcjub35ygBS15j281QfKw3hdW1gD-5oafXdve2v8J-Yskg-bGq_LlBuC0lOA4XMs1a0e4K1RUVbMOK9N0pHCDLX3E1ZTNhSQWCpfE7WOVrNAVjyocoqhHYyR42ct0Gba-M0/s1600/blogger-user.png

related post widget for blogger

related posts widget for blogger

• Go to Blogger DashBoard -->Design --> Edit HTML
• backup your Template before making any changes to your blog
• Now   Expand Widget Templates
• Find the code shown below  using {ctrl+F}
• </head>
• copy the codes and paste it before/above it

<script type='text/javascript'>var relatedpoststitle="Related Posts";</script>
<script src='http://tricks2blogging.googlecode.com/files/Related-Posts.js' type='text/javascript'/>

• suggestion ---find these codes first and then follow line1
• <div class='post-footer-line post-footer-line-2'>
• <div class='post-footer-line post-footer-line-3'>
• </div>
• </div>

1. Now copy the below codes and paste it in your website where you want to show the related 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5; <!-- Increase To Show More Then 5 Related Post -->
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

• Find the code shown below  using {ctrl+F}
• </b:skin>

NOw Choose Any 1 style

#Style-1

#related-posts {clear: both;}
#related-posts ul{margin: 20px 0; padding: 0;list-style: none;}
#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {padding: 10px;display: block;color: #222;text-decoration: none;cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */}
#related-posts ul li a:hover {padding-left: 20px;}

#Style - 2

#related-posts {clear: both;}
#related-posts h2{color: #fff;}
#related-posts ul{margin: 20px 0; padding: 0;list-style: none;}
#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;background: #222;}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {padding: 10px;display: block;color: #fff;text-decoration: none;cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */}
#related-posts ul li a:hover {padding-left: 20px;background: #111;}

How to Make the Blogger Posts Have a Date

1. Go to Settings >
2.  Formatting ->
3.  look for the Date Header Format option and change the date so that it is the first day,
4.  then the month and finally the year, for example: 24 Nov 2012 

1. go to Settings >
2.  Language and Formatting -
3.  Date Header Format and change the date format

• Go to Blogger DashBoard -->Design --> Edit HTML
• backup your Template before making any changes to your blog
• Now   Expand Widget Templates
• Finf the code shown below  using {ctrl+F}

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

<div id='Date'>
<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate(&#39;&#39;);</script>
</div>

<script type='text/javascript'>
//<![CDATA[
var DateCalendar;
function changeDate(d){
if (d == "") {
d = DateCalendar;
}
var da = d.split(' ');
day = "<strong class='date_day'>"+da[0]+"</strong>";
month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";
year = "<strong class='date_year'>"+da[2]+"</strong>";
document.write(month+day+year);
DateCalendar = d;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Calendar style date
----------------------------------------------- */
#Date {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ATrc-zBCY1PNk1uD1BXwSCva8er7fJ76bRM2iI_LPqFG_MB99IDZ2JHkDx7t8Q9oYxM9I_m0RTyNZ2iEinTm86083Et2rJxNIpijF_I9q5PlHL6oVianTWhgMWmBBk7kXcOL3yWRGX1b/s1600/calendar07.png) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 15px 2px 0 -108px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}
.date_month {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#ffffff; /* Month's color */
}
.date_day {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-8px;
text-align:center;
color:#282828; /* Day's color */
}
.date_year {
display: block;
font-size: 10px;
margin-top:-8px;
text-align:center;
color:#282828; /* Year's color */
}
</style>
</b:if>

How to add a Email Subscription Form to Blogger

<style>.hl-email{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB4Gxz_SptUio-by_TO68A5Rv8UZr5wmrd1bf0UKHzaJI-XoAx3mHS_RDv0Fcj3byD5yoQN1b4ZRLzkqBa7T234xa758_gE7WqLwlVYjDVV_IWQli8qDz_7D88LbT1QvXRBTqhb8C1lEc/s1600/mail.png) no-repeat 0px 12px ;width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.hl-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;}
.hl-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;width:130px;color:#666;}</style><div class="hl-email">Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Tricks2Blogging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="Tricks2Blogging" name="uri"/><input type="hidden" name="loc" value="en_US"/><input class="hl-emailsubmit" value="Submit" type="submit" /></form></div> 

Multi-colored popular post widget

• 3.Expand widgets  box.
• Find the code 

/* Variable definitions 
   ====================

<Group description="PopularPosts Backgrounds" selector="#PopularPosts1"> 
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/> 
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/> 
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/> 
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/> 
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/> 
<Variable name="PopularPosts.background.color6" description="background color6" type="color" default="#ff0" value="#7ee3c7"/> 
<Variable name="PopularPosts.background.color7" description="background color7" type="color" default="#ff0" value="#f6993d"/> 
</Group>

]]></b:skin>

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none} 
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px} 
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%} 
#PopularPosts1 ul li:first-child:after{content:"1"} 
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%} 
#PopularPosts1 ul li:first-child + li:after{content:"2"} 
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%} 
#PopularPosts1 ul li:first-child + li + li:after{content:"3"} 
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%} 
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} 
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%} 
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} 
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:$(PopularPosts.background.color6);width:65%} 
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} 
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:$(PopularPosts.background.color7);width:60%} 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} 
#PopularPosts1 ul li:first-child:after, 
#PopularPosts1 ul li:first-child + li:after, 
#PopularPosts1 ul li:first-child + li + li:after, 
#PopularPosts1 ul li:first-child + li + li + li:after, 
#PopularPosts1 ul li:first-child + li + li + li + li:after, 
#PopularPosts1 ul li:first-child + li + li + li + li + li:after, 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} 
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px} 
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none} 
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> 
<b:includable id='main'> 
   <b:if cond='data:title'> 
    <h2><data:title/></h2> 
   </b:if> 
   <div class='widget-content popular-posts'> 
    <ul> 
     <b:loop values='data:posts' var='post'> 
      <li> 
       <b:if cond='data:showThumbnails == &quot;false&quot;'> 
        <b:if cond='data:showSnippets == &quot;false&quot;'> 
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a> 
        <b:else/> 
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a> 
        </b:if> 
       <b:else/> 
        <b:if cond='data:showSnippets == &quot;false&quot;'> 
         <b:if cond='data:post.thumbnail'> 
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/> 
         <b:else/> 
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV3xb6Z4hDIxd0yOKk_A_UU5c8gjXGiU1s_O2JGsO8_VdM86oqBjP7U7HZxWo3qJTInuLasNSosAZU5HKUxjXERndUWPEQ7uxOfEJ4yrfGjKhTkHwPOd2ffNtUjhFDAqDCmWp7Bw1BCCE/s1600/defaultimage.jpg'/> 
         </b:if> 
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a> 
         <div class='clear'/> 
        <b:else/> 
         <b:if cond='data:post.thumbnail'> 
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/> 
         <b:else/> 
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV3xb6Z4hDIxd0yOKk_A_UU5c8gjXGiU1s_O2JGsO8_VdM86oqBjP7U7HZxWo3qJTInuLasNSosAZU5HKUxjXERndUWPEQ7uxOfEJ4yrfGjKhTkHwPOd2ffNtUjhFDAqDCmWp7Bw1BCCE/s1600/defaultimage.jpg'/> 
         </b:if> 
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a> 
         <div class='clear'/> 
        </b:if> 
       </b:if> 
      </li> 
     </b:loop> 
    </ul> 
   </div> 
  </b:includable> 
</b:widget>