Style3 Blogger9

.post ol{
counter-reset:li;
margin-left:0;
padding-left:0
}
.post ol li{
position:relative;    
margin:0 0 13px 2em !important;
padding:4px 8px !important;
list-style:none;
*list-style:decimal;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:0;
left:-2em;
width:27px;
margin-right:8px;
padding:3px 1px 4px 0 !important;
color:#fff; /* text color */
font-size:16px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuptVru0YCfVSDt1UINLhgmCCbt2kanMRDrcvGk1SJhzSY8YaA4bFd1KqeWSf1RqwggjkwcU_f6MDXSBURudhcGcVVlHDyWq0Kahva-bqLjUDzrOGvG0fU-gHO0csOUplQ-d2E0mko8Go/s1600/blue.png) no-repeat left top;
font-weight:bold;
text-align:center
}

Style No 02 Script

.post-outer ol{
counter-reset:li;
margin-left:0;
padding-left:0
}
.post ol li{ /* the style of each element */
position:relative;
margin:0 0 20px 2em !important;
padding:4px 8px !important;
list-style:none;
*list-style: decimal;
border:1px solid #e2e3e2; /* border color */
background:#f2f2f2; /* background color */
text-indent:10px;
}
.post ol li:before{ /* the numbers' style */
content:counter(li);
counter-increment:li;
position:absolute;
top:-5px;
left:-5px;
font-family:'Oswald', serif;
font-size:14px;
width:12px;
margin:0 0 10px 0;
padding:4px !important;
color:#727272; /* text color */
text-align:left;
background:#e2e2e2; /* background color */
text-indent:2px
}
.post ol li:after{
content:"";
position:absolute;
top:-5px;
left:14px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 5px 0 0 5px;
border-color: transparent transparent transparent #aeaeae; /* triangle color */
}

Style No 1 Script

.post-outer ol{
 counter-reset:li;
 margin-left:0;
 padding-left:0
}
.post ol li{
 position:relative;    
 margin:0 0 20px 2em !important;
 padding:4px 8px !important;
 list-style:none;
 *list-style: decimal;
}
.post ol li:before{
 content:counter(li);
 counter-increment:li;
 position:absolute;
 top:-8px;
 left:-39px;
 font-family:'Oswald', serif;
 font-size:40px; /* font size*/
 width:34px;
 margin:0 0 10px 0;
 padding:4px !important;
 color:#727272; /* font color */
 text-align:center;
}

3 in 1 Followers Widget Script

 <script src="http://code.jquery.com/jquery-latest.js"></script>  <script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script>  <link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/s/m4krejz6tw6sxlf/3%20in%201%20StyleSheet.css" />  <script src="https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/3%20in%201%20Widget.js"></script>    <div id="on">    <div id="facebook_right" style="top: 12%;">      <div id="facebook_div">        <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikGUVF59NdSa7rGKYm5v_3Hk65KHMoPoXMQ4uvhICowl7TnnDvt5i1-CPf4GohpOHXuqZrd0F_nsMHkQOOv0r-ASD1ju4n3wui3-8tCHzQlPBr6g8xcnCnb-etm5VdI1YWQqdHZRhm3Km-/s1600/NBTfacebook_right.png" />        <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FRoseNbushes&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false"        style="border: none; height: 346px; overflow: hidden; width: 200px;"></iframe>      </div>    </div>  </div>  <div id="on">    <div id="twitter_right" style="top: 28%;">      <div id="twitter_div">        <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvy3j0ELcRVj3FAoz-pWpi9w51E9W6V6GHq4WcRUDpxSqXvMmf-Pi3EpTMPm6Vt-fb0dQBvcV73uxAo-xG3w8KJa0B6wxoGsI_uykLOP87XkM_vuEXYBY7WTXL_ygQokKxlrqIz4vUhNnQ/s1600/NBTtwitter_right.png" />  <div style="width:248px;font-size:8px;text-align:right;"><script type="text/javascript">  document.write(unescape("%3Cscript src='http://twitterforweb.com/twitterbox.js?username=Blogger9&settings=0,1,2,248,279,ffffff,0,c4c4c4,101010,1,1,336699' type='text/javascript'%3E%3C/script%3E"));</script><a href="http://www.blogger9.net" target="_blank"></a></div>        </div>      </div>    </div>    <div id="on">      <div id="google_plus_right" style="top: 45%;">        <div id="google_plus_div">          <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiopf0hvcOnEU_Zp0eweOxu41_HhlzSa9h7lox2bLbVGkkgXHjCCJEkaJxsqqVpTiN-q8GmFM7-DVHTVAF713DYNdT1xnB19cGrjVLVfADg5O8_l5CstrJaqh1OeT7sZM5auXwu2TiZvFs/s1600/NBTgoogle_plus_right.png" />          <div style="float: left; margin: 10px 10px 10px 0;">            <a href='http://www.blogger9.net'>              <img alt='Blogging Tips and Tricks And Tutorials' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeXv7sOtwis5FFZmgPOByJSS4IHQVrfndctdLZbzydCf2Iu0a4_3BSzXpwUVVNhemRQNzFoh2ZXc2KzOvZUt417DEtkzD3ReyTeOOG-AMkvdPeYMXQNgh6nsROhQSc89hd9ijnw46W_xqZ/s1600/best+blogger+tips.png' />            </a>            <div class="g-plus" data-action="followers" data-height="250" data-href="https://plus.google.com/1119900919172" data-source="blogger:blog:followers" data-width="270"></div>            <script type="text/javascript">            (function () {              window.___gcfg = {                'lang': 'en'              };              var po = document.createElement('script');              po.type = 'text/javascript';              po.async = true;              po.src = 'https://apis.google.com/js/plusone.js';              var s = document.getElementsByTagName('script')[0];              s.parentNode.insertBefore(po, s);            })();            </script>          </div>        </div>      </div>

Facebook Like Box with Light Script

<!--FB Like Box with Light Effect by Blogger9.net ---!>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGzBuNYWiAB3zzUhSLhs9dTLom4RvZTJvgs8NMAoXf4aueh8x9xaLvRRvBlLTH6p5fhjqpGHcYrFIYm9qQH0_I8YVqy0ENEBbbKz6jBqHl3DaL6K0E0myWxcQOzmzByBjvJ4rUgIDXqv8-/s1600/fanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
</style>


<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {

// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);

if (value === null || value === undefined) {
options.expires = -1;
}

if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}

value = String(value);

return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}

// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(100).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>

<div id='fanback'><div id='fan-exit'></div><div id='fanbox'><div id='fanclose'></div><div class='remove-borda'></div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?

href=http://www.facebook.com/thatsblogging&width=402&height=255&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false'

style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>
</div></div>

HTML Script For Contact us Form -Blogger Widgets

<div id="contact_wrap">
<h3>Contact Us</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

<style type="text/css">
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

CSS Script For Contact Form - Blogger9

#ContactForm1{
display:none;
}
#contact_wrap {
margin: auto;
width: 321px;
height: 380px;
padding: 25px;
border-radius: 1em;
border-top:1px solid #dbdbdb;
border-right:1px solid #b2b2b2;
border-left:1px solid #dbdbdb;
border-bottom:1px solid #9d9d9d;
background-color:#cccccc;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
box-shadow: 1px 1px 5px #ccc;
}
#contact_wrap h3{
color: #e8f3f9;
font-family:Georgia;
font-size: 20px;
font-style:italic;
font-weight:bold;
margin: 0 -36px 20px -36px;
padding: 12px;
text-align: center;
text-shadow: 2px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
position: relative;
}
#contact_wrap h3:before {
content: ' ';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: #333 transparent transparent transparent;
}
#contact_wrap h3:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent #333;
}
#ContactForm1_contact-form-name{
width: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHXYj9Cem-3Tb-YB0ubHVIQ0_rTReZB3Bx6lOGP3-9AKOwyA94OfS7ah8t6h8Jd10g__qK3gB3Nvpmim17MJbSUdXsWYKzaCxuQQsIL_4Ydcmd_CkYAvyDQjujKwjt8T3mBnsUAJpua7I/s1600/user.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email{
width: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuH04K-SnrLUgvEKmbwgmP2nVg3QFwzmcVLb9Hz1D3jBBjSADkxn95DEprcGeR5nAyhaOpX-Ij2tN4foJjocuoi8mdEAnBYfrUiDQxaLRyHonmW7M_fOrvLSDjLw5CVvEpLMTwE-UeMnY/s1600/pen.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email-message{
width: 270px;
height: 150px;
margin: 5px auto;
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgqYpWWjww2j4pwlHM2jUmlVWeBCQdSkFMxoQGuxgHetEyVPwN8o8CyeDmm3338YukJAqL9MsX75lLu3n6VnZ5xWD3MY2CADcL4353GnlWD_7i0SzUJ54wldlPPKY-Qc62smZieOehoRY/s1600/msg2.png)no-repeat 10px 10px;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-submit {
width: 95px;
height: 30px;
float: right;
color: #FFF;
padding: 0;
cursor:pointer;
margin: 25px 0 3px 0 0;
background-color:#005a8a;
border-radius:4px;
text-shadow: 1px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
border:1px solid #194f6d;
}
#ContactForm1_contact-form-submit:hover {
background:#4c9bc9;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 320px;
margin-top:35px;
}

Animated Loading Effect Script

<style>
#blogger9-page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4cLAPHw4XrZCyXm2Fdx0piGQdZd8RmkentykhlFo4xNhgRHtWYIp59hYrdaZiKJjIVfWvs8_OK7nZFXOWLmxCpdYf26u-nR-8ipZIFrSHizfZGPhqfQaL_SBkgwYecQVqgy6q8yE07yw/s200/load6.gif') no-repeat 50% 30%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="blogger9-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#blogger9-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Yeah , it's Blogger9 Lab

How are You Guys , Hope you doing well . Here is a testing Demos of Blogger9 widgets , templates , and tools etc.

• Lorem
• Lorem
• Blogger9
• Test
• Cool
• Done!