<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Simple
Designer: Josh Peterson
URL: www.noaesthetic.com
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#ffffff"/>
<Group description="Page Text" selector="body">
<Variable name="body.font" description="Font" type="font"
default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px 'Trebuchet MS', Trebuchet, Verdana, sans-serif"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#222222" value="#666666"/>
</Group>
<Group description="Backgrounds" selector=".body-fauxcolumns-outer">
<Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#ffffff"/>
<Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="transparent"/>
</Group>
<Group description="Links" selector=".main-outer">
<Variable name="link.color" description="Link Color" type="color" default="#2288bb" value="#2288bb"/>
<Variable name="link.visited.color" description="Visited Color" type="color" default="#888888" value="#888888"/>
<Variable name="link.hover.color" description="Hover Color" type="color" default="#33aaff" value="#33aaff"/>
</Group>
<Group description="Blog Title" selector=".header h1">
<Variable name="header.font" description="Font" type="font"
default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 40px 'Trebuchet MS',Trebuchet,Verdana,sans-serif"/>
<Variable name="header.text.color" description="Title Color" type="color" default="#3399bb" value="#000000"/>
</Group>
<Group description="Blog Description" selector=".header .description">
<Variable name="description.text.color" description="Description Color" type="color"
default="#777777" value="#000000"/>
</Group>
<Group description="Tabs Text" selector=".tabs-inner .widget li a">
<Variable name="tabs.font" description="Font" type="font"
default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="$(body.font)"/>
<Variable name="tabs.text.color" description="Text Color" type="color" default="#999999" value="#000000"/>
<Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="#000000" value="#000000"/>
</Group>
<Group description="Tabs Background" selector=".tabs-outer .PageList">
<Variable name="tabs.background.color" description="Background Color" type="color" default="#f5f5f5" value="transparent"/>
<Variable name="tabs.selected.background.color" description="Selected Color" type="color" default="#eeeeee" value="#eeeeee"/>
</Group>
<Group description="Post Title" selector="h3.post-title, .comments h4">
<Variable name="post.title.font" description="Font" type="font"
default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px 'Trebuchet MS',Trebuchet,Verdana,sans-serif"/>
</Group>
<Group description="Date Header" selector=".date-header">
<Variable name="date.header.color" description="Text Color" type="color"
default="$(body.text.color)" value="#ffffff"/>
<Variable name="date.header.background.color" description="Background Color" type="color"
default="transparent" value="#bbbbbb"/>
</Group>
<Group description="Post Footer" selector=".post-footer">
<Variable name="post.footer.text.color" description="Text Color" type="color" default="#666666" value="#666666"/>
<Variable name="post.footer.background.color" description="Background Color" type="color"
default="#f9f9f9" value="#eeeeee"/>
<Variable name="post.footer.border.color" description="Shadow Color" type="color" default="#eeeeee" value="#eeeeee"/>
</Group>
<Group description="Gadgets" selector="h2">
<Variable name="widget.title.font" description="Title Font" type="font"
default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 11px 'Trebuchet MS',Trebuchet,Verdana,sans-serif"/>
<Variable name="widget.title.text.color" description="Title Color" type="color" default="#000000" value="#000000"/>
<Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#999999" value="#999999"/>
</Group>
<Group description="Images" selector=".main-inner">
<Variable name="image.background.color" description="Background Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="image.border.color" description="Border Color" type="color" default="#eeeeee" value="#eeeeee"/>
<Variable name="image.text.color" description="Caption Text Color" type="color" default="$(body.text.color)" value="$(body.text.color)"/>
</Group>
<Group description="Accents" selector=".content-inner">
<Variable name="body.rule.color" description="Separator Line Color" type="color" default="#eeeeee" value="transparent"/>
<Variable name="tabs.border.color" description="Tabs Border Color" type="color" default="$(body.rule.color)" value="#dddddd"/>
</Group>
<Variable name="body.background" description="Body Background" type="background"
color="$(body.background.color)" default="$(color) none repeat scroll top left" value="$(color) none repeat scroll top left"/>
<Variable name="body.background.override" description="Body Background Override" type="string" default="" value=""/>
<Variable name="body.background.gradient.cap" description="Body Gradient Cap" type="url"
default="url(//www.blogblog.com/1kt/simple/gradients_light.png)" value="none"/>
<Variable name="body.background.gradient.tile" description="Body Gradient Tile" type="url"
default="url(//www.blogblog.com/1kt/simple/body_gradient_tile_light.png)" value="none"/>
<Variable name="content.background.color.selector" description="Content Background Color Selector" type="string" default=".content-inner" value=".content-inner"/>
<Variable name="content.padding" description="Content Padding" type="length" default="10px" value="10px"/>
<Variable name="content.padding.horizontal" description="Content Horizontal Padding" type="length" default="$(content.padding)" value="40px"/>
<Variable name="content.shadow.spread" description="Content Shadow Spread" type="length" default="40px" value="0"/>
<Variable name="content.shadow.spread.webkit" description="Content Shadow Spread (WebKit)" type="length" default="5px" value="0"/>
<Variable name="content.shadow.spread.ie" description="Content Shadow Spread (IE)" type="length" default="10px" value="0"/>
<Variable name="main.border.width" description="Main Border Width" type="length" default="0" value="0"/>
<Variable name="header.background.gradient" description="Header Gradient" type="url" default="none" value="none"/>
<Variable name="header.shadow.offset.left" description="Header Shadow Offset Left" type="length" default="-1px" value="0"/>
<Variable name="header.shadow.offset.top" description="Header Shadow Offset Top" type="length" default="-1px" value="0"/>
<Variable name="header.shadow.spread" description="Header Shadow Spread" type="length" default="1px" value="0"/>
<Variable name="header.padding" description="Header Padding" type="length" default="30px" value="0"/>
<Variable name="header.border.size" description="Header Border Size" type="length" default="1px" value="1px"/>
<Variable name="header.bottom.border.size" description="Header Bottom Border Size" type="length" default="$(header.border.size)" value="0"/>
<Variable name="header.border.horizontalsize" description="Header Horizontal Border Size" type="length" default="0" value="1px"/>
<Variable name="description.text.size" description="Description Text Size" type="string" default="140%" value="18px"/>
<Variable name="tabs.margin.top" description="Tabs Margin Top" type="length" default="0" value="0"/>
<Variable name="tabs.margin.side" description="Tabs Side Margin" type="length" default="30px" value="30px"/>
<Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url"
default="url(//www.blogblog.com/1kt/simple/gradients_light.png)" value="none"/>
<Variable name="tabs.border.width" description="Tabs Border Width" type="length" default="1px" value="1px"/>
<Variable name="tabs.bevel.border.width" description="Tabs Bevel Border Width" type="length" default="1px" value="1px"/>
<Variable name="date.header.padding" description="Date Header Padding" type="string" default="inherit" value="0.4em"/>
<Variable name="date.header.letterspacing" description="Date Header Letter Spacing" type="string" default="inherit" value="3px"/>
<Variable name="date.header.margin" description="Date Header Margin" type="string" default="inherit" value="inherit"/>
<Variable name="post.margin.bottom" description="Post Bottom Margin" type="length" default="25px" value="45px"/>
<Variable name="image.border.small.size" description="Image Border Small Size" type="length" default="2px" value="2px"/>
<Variable name="image.border.large.size" description="Image Border Large Size" type="length" default="5px" value="5px"/>
<Variable name="page.width.selector" description="Page Width Selector" type="string" default=".region-inner" value=".region-inner"/>
<Variable name="page.width" description="Page Width" type="string" default="auto" value="auto"/>
<Variable name="main.section.margin" description="Main Section Margin" type="length" default="15px" value="1em"/>
<Variable name="main.padding" description="Main Padding" type="length" default="15px" value="0"/>
<Variable name="main.padding.top" description="Main Padding Top" type="length" default="30px" value="35px"/>
<Variable name="main.padding.bottom" description="Main Padding Bottom" type="length" default="30px" value="65px"/>
<Variable name="paging.background"
color="$(content.background.color)"
description="Background of blog paging area" type="background"
default="transparent none no-repeat scroll top center" value="transparent url(//www.blogblog.com/1kt/simple/paging_dot.png) repeat-x scroll top center"/>
<Variable name="footer.bevel" description="Bevel border length of footer" type="length" default="0" value="1px"/>
<Variable name="mobile.background.overlay" description="Mobile Background Overlay" type="string"
default="transparent none repeat scroll top left" value="transparent none repeat scroll top left"/>
<Variable name="mobile.background.size" description="Mobile Background Size" type="string" default="auto" value="auto"/>
<Variable name="mobile.button.color" description="Mobile Button Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left" value="left"/>
<Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"/>
*/
/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
html body $(page.width.selector) {
min-width: 0;
max-width: 100%;
width: $(page.width);
}
a:link {
text-decoration:none;
color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:underline;
color: $(link.hover.color);
}
.body-fauxcolumn-outer .fauxcolumn-inner {
background: transparent $(body.background.gradient.tile) repeat scroll top left;
_background-image: none;
}
.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;
height: 400px;
width: 100%;
background: $(body.background);
$(body.background.override)
}
.body-fauxcolumn-outer .cap-top .cap-left {
width: 100%;
background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
_background-image: none;
}
.content-outer {
-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
margin-bottom: 1px;
}
.content-inner {
padding: $(content.padding) $(content.padding.horizontal);
}
$(content.background.color.selector) {
background-color: $(content.background.color);
}
/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1 a {
color: $(header.text.color);
}
.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}
.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}
.header-inner .Header .descriptionwrapper {
padding: 0 $(header.padding);
}
/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}
.tabs-inner .section:first-child ul {
margin-top: -$(header.border.size);
border-top: $(header.border.size) solid $(tabs.border.color);
border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}
.tabs-inner .widget ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: $(tabs.border.width) solid $(tabs.border.color);
margin-top: $(tabs.margin.top);
margin-left: -$(tabs.margin.side);
margin-right: -$(tabs.margin.side);
}
.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: $(tabs.font);
color: $(tabs.text.color);
border-$startSide: $(tabs.border.width) solid $(content.background.color);
border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}
.tabs-inner .widget li:first-child a {
border-$startSide: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: $(tabs.selected.text.color);
background-color: $(tabs.selected.background.color);
text-decoration: none;
}
/* Columns
----------------------------------------------- */
.main-outer {
border-top: $(main.border.width) solid $(body.rule.color);
}
.fauxcolumn-left-outer .fauxcolumn-inner {
border-right: 1px solid $(body.rule.color);
}
.fauxcolumn-right-outer .fauxcolumn-inner {
border-left: 1px solid $(body.rule.color);
}
/* Headings
----------------------------------------------- */
h2 {
margin: 0 0 1em 0;
font: $(widget.title.font);
color: $(widget.title.text.color);
}
/* Widgets
----------------------------------------------- */
.widget .zippy {
color: $(widget.alternate.text.color);
text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
}
.widget .popular-posts ul {
list-style: none;
}
/* Posts
----------------------------------------------- */
.date-header span {
background-color: $(date.header.background.color);
color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
}
.main-inner {
padding-top: $(main.padding.top);
padding-bottom: $(main.padding.bottom);
}
.main-inner .column-center-inner {
padding: 0 $(main.padding);
}
.main-inner .column-center-inner .section {
margin: 0 $(main.section.margin);
}
.post {
margin: 0 0 $(post.margin.bottom) 0;
}
h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}
.post-body .tr-caption-container {
color: $(image.text.color);
}
.post-body .tr-caption-container img {
padding: 0;
background: transparent;
border: none;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}
.post-header {
margin: 0 0 1.5em;
line-height: 1.6;
font-size: 90%;
}
.post-footer {
margin: 20px -2px 0;
padding: 5px 10px;
color: $(post.footer.text.color);
background-color: $(post.footer.background.color);
border-bottom: 1px solid $(post.footer.border.color);
line-height: 1.6;
font-size: 90%;
}
#comments .comment-author {
padding-top: 1.5em;
border-top: 1px solid $(body.rule.color);
background-position: 0 1.5em;
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
.avatar-image-container {
margin: .2em 0 0;
}
#comments .avatar-image-container img {
border: 1px solid $(image.border.color);
}
/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
.comments .comments-content .loadmore a {
border-top: 1px solid $(widget.alternate.text.color);
border-bottom: 1px solid $(widget.alternate.text.color);
}
.comments .comment-thread.inline-thread {
background-color: $(post.footer.background.color);
}
.comments .continue {
border-top: 2px solid $(widget.alternate.text.color);
}
/* Accents
---------------------------------------------- */
.section-columns td.columns-cell {
border-$startSide: 1px solid $(body.rule.color);
}
.blog-pager {
background: $(paging.background);
}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: $(content.background.color);
padding: 5px;
}
.footer-outer {
border-top: $(footer.bevel) dashed #bbbbbb;
}
/* Mobile
----------------------------------------------- */
body.mobile {
background-size: $(mobile.background.size);
}
.mobile .body-fauxcolumn-outer {
background: $(mobile.background.overlay);
}
.mobile .body-fauxcolumn-outer .cap-top {
background-size: 100% auto;
}
.mobile .content-outer {
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
box-shadow: 0 0 3px rgba(0, 0, 0, .15);
}
body.mobile .AdSense {
margin: 0 -$(content.shadow.spread);
}
.mobile .tabs-inner .widget ul {
margin-left: 0;
margin-right: 0;
}
.mobile .post {
margin: 0;
}
.mobile .main-inner .column-center-inner .section {
margin: 0;
}
.mobile .date-header span {
padding: 0.1em 10px;
margin: 0 -10px;
}
.mobile h3.post-title {
margin: 0;
}
.mobile .blog-pager {
background: transparent none no-repeat scroll top center;
}
.mobile .footer-outer {
border-top: none;
}
.mobile .main-inner, .mobile .footer-inner {
background-color: $(content.background.color);
}
.mobile-index-contents {
color: $(body.text.color);
}
.mobile-link-button {
background-color: $(link.color);
}
.mobile-link-button a:link, .mobile-link-button a:visited {
color: $(mobile.button.color);
}
.mobile .tabs-inner .section:first-child {
border-top: none;
}
.mobile .tabs-inner .PageList .widget-content {
background-color: $(tabs.selected.background.color);
color: $(tabs.selected.text.color);
border-top: $(tabs.border.width) solid $(tabs.border.color);
border-bottom: $(tabs.border.width) solid $(tabs.border.color);
}
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
border-$startSide: 1px solid $(tabs.border.color);
}
]]></b:skin>
<b:template-skin>
<b:variable default='960px' name='content.width' type='length' value='960px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
<b:variable default='310px' name='main.column.right.width' type='length' value='310px'/>
<![CDATA[
body {
min-width: $(content.width);
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}
.main-inner .columns {
padding-left: $(main.column.left.width);
padding-right: $(main.column.right.width);
}
.main-inner .fauxcolumn-center-outer {
left: $(main.column.left.width);
right: $(main.column.right.width);
/* IE6 does not respect left and right together */
_width: expression(this.parentNode.offsetWidth -
parseInt("$(main.column.left.width)") -
parseInt("$(main.column.right.width)") + 'px');
}
.main-inner .fauxcolumn-left-outer {
width: $(main.column.left.width);
}
.main-inner .fauxcolumn-right-outer {
width: $(main.column.right.width);
}
.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}
.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
}
#layout {
min-width: 0;
}
#layout .content-outer {
min-width: 0;
width: 800px;
}
#layout .region-inner {
min-width: 0;
width: auto;
}
]]>
</b:template-skin>
<b:include data='blog' name='google-analytics'/>
<head>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Simple
Designer: Josh Peterson
URL: www.noaesthetic.com
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#ffffff"/>
<Group description="Page Text" selector="body">
<Variable name="body.font" description="Font" type="font"
default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px 'Trebuchet MS', Trebuchet, Verdana, sans-serif"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#222222" value="#666666"/>
</Group>
<Group description="Backgrounds" selector=".body-fauxcolumns-outer">
<Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#ffffff"/>
<Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="transparent"/>
</Group>
<Group description="Links" selector=".main-outer">
<Variable name="link.color" description="Link Color" type="color" default="#2288bb" value="#2288bb"/>
<Variable name="link.visited.color" description="Visited Color" type="color" default="#888888" value="#888888"/>
<Variable name="link.hover.color" description="Hover Color" type="color" default="#33aaff" value="#33aaff"/>
</Group>
<Group description="Blog Title" selector=".header h1">
<Variable name="header.font" description="Font" type="font"
default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 40px 'Trebuchet MS',Trebuchet,Verdana,sans-serif"/>
<Variable name="header.text.color" description="Title Color" type="color" default="#3399bb" value="#000000"/>
</Group>
<Group description="Blog Description" selector=".header .description">
<Variable name="description.text.color" description="Description Color" type="color"
default="#777777" value="#000000"/>
</Group>
<Group description="Tabs Text" selector=".tabs-inner .widget li a">
<Variable name="tabs.font" description="Font" type="font"
default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="$(body.font)"/>
<Variable name="tabs.text.color" description="Text Color" type="color" default="#999999" value="#000000"/>
<Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="#000000" value="#000000"/>
</Group>
<Group description="Tabs Background" selector=".tabs-outer .PageList">
<Variable name="tabs.background.color" description="Background Color" type="color" default="#f5f5f5" value="transparent"/>
<Variable name="tabs.selected.background.color" description="Selected Color" type="color" default="#eeeeee" value="#eeeeee"/>
</Group>
<Group description="Post Title" selector="h3.post-title, .comments h4">
<Variable name="post.title.font" description="Font" type="font"
default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px 'Trebuchet MS',Trebuchet,Verdana,sans-serif"/>
</Group>
<Group description="Date Header" selector=".date-header">
<Variable name="date.header.color" description="Text Color" type="color"
default="$(body.text.color)" value="#ffffff"/>
<Variable name="date.header.background.color" description="Background Color" type="color"
default="transparent" value="#bbbbbb"/>
</Group>
<Group description="Post Footer" selector=".post-footer">
<Variable name="post.footer.text.color" description="Text Color" type="color" default="#666666" value="#666666"/>
<Variable name="post.footer.background.color" description="Background Color" type="color"
default="#f9f9f9" value="#eeeeee"/>
<Variable name="post.footer.border.color" description="Shadow Color" type="color" default="#eeeeee" value="#eeeeee"/>
</Group>
<Group description="Gadgets" selector="h2">
<Variable name="widget.title.font" description="Title Font" type="font"
default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 11px 'Trebuchet MS',Trebuchet,Verdana,sans-serif"/>
<Variable name="widget.title.text.color" description="Title Color" type="color" default="#000000" value="#000000"/>
<Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#999999" value="#999999"/>
</Group>
<Group description="Images" selector=".main-inner">
<Variable name="image.background.color" description="Background Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="image.border.color" description="Border Color" type="color" default="#eeeeee" value="#eeeeee"/>
<Variable name="image.text.color" description="Caption Text Color" type="color" default="$(body.text.color)" value="$(body.text.color)"/>
</Group>
<Group description="Accents" selector=".content-inner">
<Variable name="body.rule.color" description="Separator Line Color" type="color" default="#eeeeee" value="transparent"/>
<Variable name="tabs.border.color" description="Tabs Border Color" type="color" default="$(body.rule.color)" value="#dddddd"/>
</Group>
<Variable name="body.background" description="Body Background" type="background"
color="$(body.background.color)" default="$(color) none repeat scroll top left" value="$(color) none repeat scroll top left"/>
<Variable name="body.background.override" description="Body Background Override" type="string" default="" value=""/>
<Variable name="body.background.gradient.cap" description="Body Gradient Cap" type="url"
default="url(//www.blogblog.com/1kt/simple/gradients_light.png)" value="none"/>
<Variable name="body.background.gradient.tile" description="Body Gradient Tile" type="url"
default="url(//www.blogblog.com/1kt/simple/body_gradient_tile_light.png)" value="none"/>
<Variable name="content.background.color.selector" description="Content Background Color Selector" type="string" default=".content-inner" value=".content-inner"/>
<Variable name="content.padding" description="Content Padding" type="length" default="10px" value="10px"/>
<Variable name="content.padding.horizontal" description="Content Horizontal Padding" type="length" default="$(content.padding)" value="40px"/>
<Variable name="content.shadow.spread" description="Content Shadow Spread" type="length" default="40px" value="0"/>
<Variable name="content.shadow.spread.webkit" description="Content Shadow Spread (WebKit)" type="length" default="5px" value="0"/>
<Variable name="content.shadow.spread.ie" description="Content Shadow Spread (IE)" type="length" default="10px" value="0"/>
<Variable name="main.border.width" description="Main Border Width" type="length" default="0" value="0"/>
<Variable name="header.background.gradient" description="Header Gradient" type="url" default="none" value="none"/>
<Variable name="header.shadow.offset.left" description="Header Shadow Offset Left" type="length" default="-1px" value="0"/>
<Variable name="header.shadow.offset.top" description="Header Shadow Offset Top" type="length" default="-1px" value="0"/>
<Variable name="header.shadow.spread" description="Header Shadow Spread" type="length" default="1px" value="0"/>
<Variable name="header.padding" description="Header Padding" type="length" default="30px" value="0"/>
<Variable name="header.border.size" description="Header Border Size" type="length" default="1px" value="1px"/>
<Variable name="header.bottom.border.size" description="Header Bottom Border Size" type="length" default="$(header.border.size)" value="0"/>
<Variable name="header.border.horizontalsize" description="Header Horizontal Border Size" type="length" default="0" value="1px"/>
<Variable name="description.text.size" description="Description Text Size" type="string" default="140%" value="18px"/>
<Variable name="tabs.margin.top" description="Tabs Margin Top" type="length" default="0" value="0"/>
<Variable name="tabs.margin.side" description="Tabs Side Margin" type="length" default="30px" value="30px"/>
<Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url"
default="url(//www.blogblog.com/1kt/simple/gradients_light.png)" value="none"/>
<Variable name="tabs.border.width" description="Tabs Border Width" type="length" default="1px" value="1px"/>
<Variable name="tabs.bevel.border.width" description="Tabs Bevel Border Width" type="length" default="1px" value="1px"/>
<Variable name="date.header.padding" description="Date Header Padding" type="string" default="inherit" value="0.4em"/>
<Variable name="date.header.letterspacing" description="Date Header Letter Spacing" type="string" default="inherit" value="3px"/>
<Variable name="date.header.margin" description="Date Header Margin" type="string" default="inherit" value="inherit"/>
<Variable name="post.margin.bottom" description="Post Bottom Margin" type="length" default="25px" value="45px"/>
<Variable name="image.border.small.size" description="Image Border Small Size" type="length" default="2px" value="2px"/>
<Variable name="image.border.large.size" description="Image Border Large Size" type="length" default="5px" value="5px"/>
<Variable name="page.width.selector" description="Page Width Selector" type="string" default=".region-inner" value=".region-inner"/>
<Variable name="page.width" description="Page Width" type="string" default="auto" value="auto"/>
<Variable name="main.section.margin" description="Main Section Margin" type="length" default="15px" value="1em"/>
<Variable name="main.padding" description="Main Padding" type="length" default="15px" value="0"/>
<Variable name="main.padding.top" description="Main Padding Top" type="length" default="30px" value="35px"/>
<Variable name="main.padding.bottom" description="Main Padding Bottom" type="length" default="30px" value="65px"/>
<Variable name="paging.background"
color="$(content.background.color)"
description="Background of blog paging area" type="background"
default="transparent none no-repeat scroll top center" value="transparent url(//www.blogblog.com/1kt/simple/paging_dot.png) repeat-x scroll top center"/>
<Variable name="footer.bevel" description="Bevel border length of footer" type="length" default="0" value="1px"/>
<Variable name="mobile.background.overlay" description="Mobile Background Overlay" type="string"
default="transparent none repeat scroll top left" value="transparent none repeat scroll top left"/>
<Variable name="mobile.background.size" description="Mobile Background Size" type="string" default="auto" value="auto"/>
<Variable name="mobile.button.color" description="Mobile Button Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left" value="left"/>
<Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"/>
*/
/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
html body $(page.width.selector) {
min-width: 0;
max-width: 100%;
width: $(page.width);
}
a:link {
text-decoration:none;
color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:underline;
color: $(link.hover.color);
}
.body-fauxcolumn-outer .fauxcolumn-inner {
background: transparent $(body.background.gradient.tile) repeat scroll top left;
_background-image: none;
}
.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;
height: 400px;
width: 100%;
background: $(body.background);
$(body.background.override)
}
.body-fauxcolumn-outer .cap-top .cap-left {
width: 100%;
background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
_background-image: none;
}
.content-outer {
-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
margin-bottom: 1px;
}
.content-inner {
padding: $(content.padding) $(content.padding.horizontal);
}
$(content.background.color.selector) {
background-color: $(content.background.color);
}
/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1 a {
color: $(header.text.color);
}
.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}
.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}
.header-inner .Header .descriptionwrapper {
padding: 0 $(header.padding);
}
/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}
.tabs-inner .section:first-child ul {
margin-top: -$(header.border.size);
border-top: $(header.border.size) solid $(tabs.border.color);
border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}
.tabs-inner .widget ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: $(tabs.border.width) solid $(tabs.border.color);
margin-top: $(tabs.margin.top);
margin-left: -$(tabs.margin.side);
margin-right: -$(tabs.margin.side);
}
.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: $(tabs.font);
color: $(tabs.text.color);
border-$startSide: $(tabs.border.width) solid $(content.background.color);
border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}
.tabs-inner .widget li:first-child a {
border-$startSide: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: $(tabs.selected.text.color);
background-color: $(tabs.selected.background.color);
text-decoration: none;
}
/* Columns
----------------------------------------------- */
.main-outer {
border-top: $(main.border.width) solid $(body.rule.color);
}
.fauxcolumn-left-outer .fauxcolumn-inner {
border-right: 1px solid $(body.rule.color);
}
.fauxcolumn-right-outer .fauxcolumn-inner {
border-left: 1px solid $(body.rule.color);
}
/* Headings
----------------------------------------------- */
h2 {
margin: 0 0 1em 0;
font: $(widget.title.font);
color: $(widget.title.text.color);
}
/* Widgets
----------------------------------------------- */
.widget .zippy {
color: $(widget.alternate.text.color);
text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
}
.widget .popular-posts ul {
list-style: none;
}
/* Posts
----------------------------------------------- */
.date-header span {
background-color: $(date.header.background.color);
color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
}
.main-inner {
padding-top: $(main.padding.top);
padding-bottom: $(main.padding.bottom);
}
.main-inner .column-center-inner {
padding: 0 $(main.padding);
}
.main-inner .column-center-inner .section {
margin: 0 $(main.section.margin);
}
.post {
margin: 0 0 $(post.margin.bottom) 0;
}
h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}
.post-body .tr-caption-container {
color: $(image.text.color);
}
.post-body .tr-caption-container img {
padding: 0;
background: transparent;
border: none;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}
.post-header {
margin: 0 0 1.5em;
line-height: 1.6;
font-size: 90%;
}
.post-footer {
margin: 20px -2px 0;
padding: 5px 10px;
color: $(post.footer.text.color);
background-color: $(post.footer.background.color);
border-bottom: 1px solid $(post.footer.border.color);
line-height: 1.6;
font-size: 90%;
}
#comments .comment-author {
padding-top: 1.5em;
border-top: 1px solid $(body.rule.color);
background-position: 0 1.5em;
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
.avatar-image-container {
margin: .2em 0 0;
}
#comments .avatar-image-container img {
border: 1px solid $(image.border.color);
}
/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
.comments .comments-content .loadmore a {
border-top: 1px solid $(widget.alternate.text.color);
border-bottom: 1px solid $(widget.alternate.text.color);
}
.comments .comment-thread.inline-thread {
background-color: $(post.footer.background.color);
}
.comments .continue {
border-top: 2px solid $(widget.alternate.text.color);
}
/* Accents
---------------------------------------------- */
.section-columns td.columns-cell {
border-$startSide: 1px solid $(body.rule.color);
}
.blog-pager {
background: $(paging.background);
}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: $(content.background.color);
padding: 5px;
}
.footer-outer {
border-top: $(footer.bevel) dashed #bbbbbb;
}
/* Mobile
----------------------------------------------- */
body.mobile {
background-size: $(mobile.background.size);
}
.mobile .body-fauxcolumn-outer {
background: $(mobile.background.overlay);
}
.mobile .body-fauxcolumn-outer .cap-top {
background-size: 100% auto;
}
.mobile .content-outer {
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
box-shadow: 0 0 3px rgba(0, 0, 0, .15);
}
body.mobile .AdSense {
margin: 0 -$(content.shadow.spread);
}
.mobile .tabs-inner .widget ul {
margin-left: 0;
margin-right: 0;
}
.mobile .post {
margin: 0;
}
.mobile .main-inner .column-center-inner .section {
margin: 0;
}
.mobile .date-header span {
padding: 0.1em 10px;
margin: 0 -10px;
}
.mobile h3.post-title {
margin: 0;
}
.mobile .blog-pager {
background: transparent none no-repeat scroll top center;
}
.mobile .footer-outer {
border-top: none;
}
.mobile .main-inner, .mobile .footer-inner {
background-color: $(content.background.color);
}
.mobile-index-contents {
color: $(body.text.color);
}
.mobile-link-button {
background-color: $(link.color);
}
.mobile-link-button a:link, .mobile-link-button a:visited {
color: $(mobile.button.color);
}
.mobile .tabs-inner .section:first-child {
border-top: none;
}
.mobile .tabs-inner .PageList .widget-content {
background-color: $(tabs.selected.background.color);
color: $(tabs.selected.text.color);
border-top: $(tabs.border.width) solid $(tabs.border.color);
border-bottom: $(tabs.border.width) solid $(tabs.border.color);
}
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
border-$startSide: 1px solid $(tabs.border.color);
}
]]></b:skin>
<b:template-skin>
<b:variable default='960px' name='content.width' type='length' value='960px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
<b:variable default='310px' name='main.column.right.width' type='length' value='310px'/>
<![CDATA[
body {
min-width: $(content.width);
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}
.main-inner .columns {
padding-left: $(main.column.left.width);
padding-right: $(main.column.right.width);
}
.main-inner .fauxcolumn-center-outer {
left: $(main.column.left.width);
right: $(main.column.right.width);
/* IE6 does not respect left and right together */
_width: expression(this.parentNode.offsetWidth -
parseInt("$(main.column.left.width)") -
parseInt("$(main.column.right.width)") + 'px');
}
.main-inner .fauxcolumn-left-outer {
width: $(main.column.left.width);
}
.main-inner .fauxcolumn-right-outer {
width: $(main.column.right.width);
}
.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}
.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
}
#layout {
min-width: 0;
}
#layout .content-outer {
min-width: 0;
width: 800px;
}
#layout .region-inner {
min-width: 0;
width: auto;
}
]]>
</b:template-skin>
<b:include data='blog' name='google-analytics'/>
</head>
<body>
<div class='navbar section' id='navbar'><div class='widget Navbar' id='Navbar1'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener('load',
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<div id="navbar-iframe-container"></div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
if (gapi.iframes gapi.iframes.getContext) {
gapi.iframes.getContext().openChild({
url: 'https://www.blogger.com/navbar.g?targetBlogID\75992226187759619576\46blogName\759lessons+Programming+Blog\46publishMode\75PUBLISH_MODE_HOSTED\46navbarType\75BLUE\46layoutType\75LAYOUTS\46searchRoot\75http://www.9lessons.info/search\46blogLocale\75en\46v\0752\46homepageUrl\75http://www.9lessons.info/\46blogFollowUrl\75https://plus.google.com/104100007347037324968\46vt\75-1790904038947021582',
where: document.getElementById("navbar-iframe-container"),
id: "navbar-iframe"
});
}
});
</script><script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
</div></div>
<div id='top-header'>
<div id='egglabs-header'>
<table style='width:100%'>
<tr><td style='width:220px'>
<a href='/' title='9lessons Programming Blog'><img alt='9lessons programming blog ' class='logoimg' src='https://lh5.googleusercontent.com/-9eQUIhjNafM/U5-vAp9bDMI/AAAAAAAAKrs/ksHFcrGbKIc/s230/9lessonsLogo.png'/></a>
</td>
<td class='countsocial' style='vertical-align:text-bottom;'>
<div class='logosocial'>
<span class='gap'><g:plusone href='http://www.9lessons.info' size='medium'></g:plusone></span><span class='gap'><a class='twitter-share-button' data-count='horizontal' data-text='9lessons Programming Blog' data-url='http://www.9lessons.info' data-via='9lessons' href='http://twitter.com/share'></a></span><span class='gap'>
</span>
</div>
</td>
<td>
<div class='searchgoogletop'>
<div class='search_google'>
<div id='cse-search-form'><img alt='Loading Search' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4US5lRvdMA1-fdoqILCA0pHOuA5SsNR4yY1XTTtns0HPxu4LQQ9xfArnKTx_g8OddQg8hVvwrax5QyApe3rFSSUZDnicRrK4qlfg44HugN4zTsuOZCnsHgfv2h6oYkEWtQKuEeogcRsuW/'/></div>
</div>
</div>
<span class='fbtopbutton'>
<a href='#fbinvites' onclick='FacebookInviteFriends();' title='Invite Your Facebook Friends'>
<img alt='9lessons Bring Friends' src='https://lh3.googleusercontent.com/-ESoug2foJBs/T-ntmH-Vs3I/AAAAAAAAGIM/FUQoD54w1oQ/s267/bringfriends.png' style='border:0px'/></a>
</span>
</td>
</tr>
</table>
</div>
<div class='menu'>
<div style='margin:0 auto; width:1000px;height: 2.5em;'>
<ul class='menu'>
<li><a class='home' href='http://www.9lessons.info/2008/08/table-of-contents.html' onclick='ga('send', 'event', 'Tutorials', 'click','Tutorials');' title='Tutorials'>Tutorials</a></li>
<li><a href='http://www.9lessons.info/2008/08/jquery-ajax-and-php-projects-9lessons.html' onclick='ga('send', 'event', 'Projects', 'click','Tutorials');' title='Projects'>
Projects</a></li>
<li><a href='http://www.9lessons.info/search/label/jQuery?max-results=14' onclick='ga('send', 'event', 'Jquery', 'click','Jquery');' title='Jquery Tutorials demos'>JQUERY</a></li>
<li><a href='http://www.9lessons.info/search/label/Facebook?max-results=14' onclick='ga('send', 'event', 'Facebook', 'click','Facebook');' title='Facebook like Tutorials'>Facebook Tutorials</a></li>
<li><a href='http://www.9lessons.info/2008/08/most-popular-articles.html' onclick='ga('send', 'event', 'Popular', 'click','Popular');' title='Most Popular Tutorials'>Popular</a></li>
<li><a href='http://demos.9lessons.info/' onclick='ga('send', 'event', 'Demos', 'click','Demos');' title='Demos'>Demos</a></li>
<li><a href='http://wall.9lessons.info' onclick='ga('send', 'event', 'WallScript', 'click','WallScript');' title='Facebook style wall script'>
Social Networking Script</a></li>
<li><a href='http://www.oauthlogin.com/' onclick='ga('send', 'event', 'OauthLogin', 'click','OauthLogin');' title='FGLogin'>Single Login</a></li>
<li><a href='http://labs.9lessons.info/' onclick='ga('send', 'event', 'Labs', 'click','Labs');' title='9lessons Labs'>Labs</a></li>
<li><a href='http://news.9lessons.info/' onclick='ga('send', 'event', 'TechNews', 'click','Tech News');' title='Tech News'>Tech News</a></li>
<li><a href='http://www.9lessons.info/p/request-tutorials-here.html' onclick='ga('send', 'event', 'Request Tutorials', 'click','Request Tutorials');' title='Request Tutorial'>Request Tutorial</a></li>
</ul>
</div>
</div>
<div class='menu-subvert'>
<div class='menu-ads'>
<div class='section' id='addsections3'><div class='widget AdSense' id='AdSense2'>
<div class='widget-content'>
<script type="text/javascript"><!--
google_ad_client="pub-6904774409601870";
google_ad_host="pub-1556223355139109";
google_ad_width=728;
google_ad_height=15;
google_ad_format="728x15_0ads_al_s";
google_ad_host_channel="0001+S0020+L0006";
google_color_border="325B6D";
google_color_bg="325B6D";
google_color_link="FFFFFF";
google_color_url="008000";
google_color_text="000000";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=992226187759619576&widgetType=AdSense&widgetId=AdSense2&action=editWidget§ionId=addsections3' onclick='return _WidgetManager._PopupConfig(document.getElementById("AdSense2"));' target='configAdSense2' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div>
</div></div>
</div>
</div>
</div>
<div id='container'>
<div class='topbannerad'>
<div class='section' id='addsectionsTopperHead'><div class='widget HTML' id='HTML6'>
<div class='widget-content'>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 9lessons_addsectionsFooter_AdSense1_728x90_as -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-6904774409601870"
data-ad-slot="6753952039"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=992226187759619576&widgetType=HTML&widgetId=HTML6&action=editWidget§ionId=addsectionsTopperHead' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML6"));' target='configHTML6' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div></div>
</div>
<table class='fixed_table' style='width:100%'>
<tr>
<td valign='top'>
<div style='margin-top:10px'>
<div id='follow_text'>Follow Me:</div>
<div id='facebook_follow'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/subscribe.php?href=https%3A%2F%2Fwww.facebook.com%2Fsrinivas.tamada&layout=button_count&show_faces=true&colorscheme=light&font&width=200&appId=223109594375281' style='border:none; overflow:hidden; width:150px;height:25px;margin-top:5px'></iframe>
</div>
<div id='twitter_follow'>
<a class='twitter-follow-button' data-show-count='true' data-width='256px' href='http://twitter.com/9lessons'>Follow @9lessons</a>
</div>
<div style='clear:both'></div>
</div>
<div id='main_left'>
<!-- Google ads -->
<div class='googleadsbig'>
<!-- Google Custom Search Element -->
<div id='cse'></div>
</div>
<div class='spacer'></div>
<div class='section' id='main_s'><div class='widget Blog' id='Blog1'>
<div class='blog-posts hfeed' itemscope='' itemtype='http://schema.org/Blog'>
<!-- google_ad_section_start -->
<div class='date-header date updated' itemprop='dateCreated'>
Wednesday, July 16, 2014
</div>
<div class='post hentry'>
<a name='7201128010428886438'></a>
<h2 itemprop='name'><a href='http://www.9lessons.info/2014/07/google-blogger-404-page-redirection.html'>
Google Blogger 404 Page Redirection
</a></h2>
<div class='socialicons'>
<div class='comment'>
{
<b><a class='comment-link' href='http://www.9lessons.info/2014/07/google-blogger-404-page-redirection.html#comment-form' onclick=''>
10
</a></b>
comments
}</div>
<div class='socialspace'>
<script data-counter='right' data-url='http://www.9lessons.info/2014/07/google-blogger-404-page-redirection.html' type='in/share'></script>
</div>
<div class='socialspace'>
<div class='g-plus' data-action='share' data-annotation='bubble' data-href='http://www.9lessons.info/2014/07/google-blogger-404-page-redirection.html'></div>
</div>
<div class='socialspace'>
<a class='twitter-share-button' data-count='horizontal' data-text='Google Blogger 404 Page Redirection ' data-url='http://www.9lessons.info/2014/07/google-blogger-404-page-redirection.html' data-via='9lessons' href='http://twitter.com/share'></a>
</div>
</div>
<div class='spacer'></div>
<div class='post-body-n'>
<span class='tweet'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http://www.9lessons.info/2014/07/google-blogger-404-page-redirection.html&layout=box_count&show_faces=false&width=450&action=like&colorscheme=light' style='border:none; overflow:hidden; width:60px; height:70px'></iframe>
</span>
<div class="bigInt" itemprop="description">If you are using Google blogger you must setup 404 page redirections, if not this will affect your organic search results. I am using blogger since 2009 for 9lessons.info and I am not paying any hosting charges till today, I suggest everyone should start a blog with blogger. This post will explain you how to setup a blogger 404 redirection page in a simple way, now you can try here with wrong URLs. </div><br>
<div class="cen"><img alt="Google Blogger 404 Page Redirection" class="sri" itemprop="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0i94n6dbaMZlh9KWYF6BwFtusdrExYWPW65B8cv6uc8KkGEgGLyVxQfdNZu6mzHECyBz_hhnPGfrr5zu6y6BrVxxL3Ck5Iy78bfJX6JoY3QH8f2NWzKTdAkebQp5V8swcHdj5GOqBbibL/s550/Blogger404.png"></div><br>
<div class='clearboth'></div>
</div>
</div>
<div class='date-header date updated' itemprop='dateCreated'>
Wednesday, July 9, 2014
</div>
<div class='post hentry'>
<a name='4257930952560885304'></a>
<h2 itemprop='name'><a href='http://www.9lessons.info/2014/07/ajax-php-login-page.html'>
Ajax PHP Login Page with Shake Animation Effect.
</a></h2>
<div class='socialicons'>
<div class='comment'>
{
<b><a class='comment-link' href='http://www.9lessons.info/2014/07/ajax-php-login-page.html#comment-form' onclick=''>
12
</a></b>
comments
}</div>
<div class='socialspace'>
<script data-counter='right' data-url='http://www.9lessons.info/2014/07/ajax-php-login-page.html' type='in/share'></script>
</div>
<div class='socialspace'>
<div class='g-plus' data-action='share' data-annotation='bubble' data-href='http://www.9lessons.info/2014/07/ajax-php-login-page.html'></div>
</div>
<div class='socialspace'>
<a class='twitter-share-button' data-count='horizontal' data-text='Ajax PHP Login Page with Shake Animation Effect. ' data-url='http://www.9lessons.info/2014/07/ajax-php-login-page.html' data-via='9lessons' href='http://twitter.com/share'></a>
</div>
</div>
<div class='spacer'></div>
<div class='post-body-n'>
<span class='tweet'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http://www.9lessons.info/2014/07/ajax-php-login-page.html&layout=box_count&show_faces=false&width=450&action=like&colorscheme=light' style='border:none; overflow:hidden; width:60px; height:70px'></iframe>
</span>
<div class="bigInt" itemprop="description">I received few tutorial requests from my readers that asked to me how to create Ajax PHP login script, in this post I want to discuss how to create a simple Ajax PHP login with welcome page using MySQL database. This will explain you creating user tables, posting form values and storing and destroying the session values. If you are a PHP beginner take a quick look at this live demo with Username: <i>9lessons</i> Password: <i>9lessons</i>. This post has been updated with mysqli. </div><br>
<div class="cen"><img alt="Ajax PHP Login Page " class="sri" itemprop="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxjKhaGzMGUhwgNVA8_5sAZfQyPa2KG7x5AuPzu8Ffdc0HkEuy1ZKzhKCybLyZPA5mXGCAb0AkbBv9mh1zdxQKrqFUKf0KqAOoihJkfWtJviPy5aCLDd_wKxgcSkV1LkvOfnIHSiO16vZq/s550/phplogin.png"></div><br>
<div class='clearboth'></div>
</div>
</div>
<div class='date-header date updated' itemprop='dateCreated'>
Monday, June 30, 2014
</div>
<div class='post hentry'>
<a name='8379825852754939095'></a>
<h2 itemprop='name'><a href='http://www.9lessons.info/2014/06/timeline-design-css-jquery.html'>
Timeline Design using CSS and Jquery
</a></h2>
<div class='socialicons'>
<div class='comment'>
{
<b><a class='comment-link' href='http://www.9lessons.info/2014/06/timeline-design-css-jquery.html#comment-form' onclick=''>
14
</a></b>
comments
}</div>
<div class='socialspace'>
<script data-counter='right' data-url='http://www.9lessons.info/2014/06/timeline-design-css-jquery.html' type='in/share'></script>
</div>
<div class='socialspace'>
<div class='g-plus' data-action='share' data-annotation='bubble' data-href='http://www.9lessons.info/2014/06/timeline-design-css-jquery.html'></div>
</div>
<div class='socialspace'>
<a class='twitter-share-button' data-count='horizontal' data-text='Timeline Design using CSS and Jquery' data-url='http://www.9lessons.info/2014/06/timeline-design-css-jquery.html' data-via='9lessons' href='http://twitter.com/share'></a>
</div>
</div>
<div class='spacer'></div>
<div class='post-body-n'>
<span class='tweet'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http://www.9lessons.info/2014/06/timeline-design-css-jquery.html&layout=box_count&show_faces=false&width=450&action=like&colorscheme=light' style='border:none; overflow:hidden; width:60px; height:70px'></iframe>
</span>
<div class="bigInt" itemprop="description">
Timeline design is the current web trend that visualizes the data in an interesting way. Today I want to discuss about how to design a timeline in a simple way with JSON data feed , that using CSS pseudo elements such as <i>:before</i> and <i>:after</i>. Pseudo elements are used to apply special effects to selectors. This post is a combination of my previous post, please take a quick look at this demo and try demo script with your WAMP server. </div>
<br>
<div class="cen">
<img alt="Timeline Design CSS and Jquery" class="sri" itemprop="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfCiNsO4zIUQIUXxQdikHrVcbYCNrBFyyIaDAd35qO_IIV3ZzahUYNCogruyEsql4Lc7cjd8hdEKaCu79vGRmypEQtp29VubWnFFNt6lnidYjRlKEQW3fGnrMvtAXBHHDjFVqZONgG5cJP/s550/csstimeline.png"></div>
<br>
<div class='clearboth'></div>
</div>
</div>
<div class='date-header date updated' itemprop='dateCreated'>
Tuesday, June 17, 2014
</div>
<div class='post hentry'>
<a name='958975153424821238'></a>
<h2 itemprop='name'><a href='http://www.9lessons.info/2014/06/css3-animation-effects-with-keyframes.html'>
CSS3 Animation Effects with Keyframes
</a></h2>
<div class='socialicons'>
<div class='comment'>
{
<b><a class='comment-link' href='http://www.9lessons.info/2014/06/css3-animation-effects-with-keyframes.html#comment-form' onclick=''>
19
</a></b>
comments
}</div>
<div class='socialspace'>
<script data-counter='right' data-url='http://www.9lessons.info/2014/06/css3-animation-effects-with-keyframes.html' type='in/share'></script>
</div>
<div class='socialspace'>
<div class='g-plus' data-action='share' data-annotation='bubble' data-href='http://www.9lessons.info/2014/06/css3-animation-effects-with-keyframes.html'></div>
</div>
<div class='socialspace'>
<a class='twitter-share-button' data-count='horizontal' data-text='CSS3 Animation Effects with Keyframes' data-url='http://www.9lessons.info/2014/06/css3-animation-effects-with-keyframes.html' data-via='9lessons' href='http://twitter.com/share'></a>
</div>
</div>
<div class='spacer'></div>
<div class='post-body-n'>
<span class='tweet'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http://www.9lessons.info/2014/06/css3-animation-effects-with-keyframes.html&layout=box_count&show_faces=false&width=450&action=like&colorscheme=light' style='border:none; overflow:hidden; width:60px; height:70px'></iframe>
</span>
<div class="bigInt" itemprop="description">Using CSS3 keyframe property, you can create cool animation effects without using any JavaScript frameworks, CSS3 & HTML5 is helping to solve many web problems in a simple way. In this article I want to discuss how to implement CSS3 animations in a better way, use these and enrich your web projects. Take a quick look at these demos and try all these with modern browsers like Chrome, Firefox and Safari, sure you will love these effects. </div><br>
<div class="cen"><img alt="CSS3 Animation Effects with Keyframes" class="sri" itemprop="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsUCa3vdyDqyIyHpaC8wi6YnLSDZYvfqOL2lQCFmV3FEjgyQSrJGbhxwA9lVR8PAkUMIsRYUso43n6fThvk62WbLMtNpIr1VrRMMoMmwQz5wP7Ogtr3MRnRcocLg9KWNuOm_kswO-n4DCU/s550/css3.png"></div><br>
<div class='clearboth'></div>
</div>
</div>
<div class='date-header date updated' itemprop='dateCreated'>
</div>
<div class='post hentry'>
<a name='3965255023441589181'></a>
<h2 itemprop='name'><a href='http://www.9lessons.info/2014/06/filegator-look-into-powerful-php-file.html'>
FileGator: A Look into The Powerful PHP File Management Tool.
</a></h2>
<div class='socialicons'>
<div class='comment'>
{
<b><a class='comment-link' href='http://www.9lessons.info/2014/06/filegator-look-into-powerful-php-file.html#comment-form' onclick=''>
1
</a></b>
comments
}</div>
<div class='socialspace'>
<script data-counter='right' data-url='http://www.9lessons.info/2014/06/filegator-look-into-powerful-php-file.html' type='in/share'></script>
</div>
<div class='socialspace'>
<div class='g-plus' data-action='share' data-annotation='bubble' data-href='http://www.9lessons.info/2014/06/filegator-look-into-powerful-php-file.html'></div>
</div>
<div class='socialspace'>
<a class='twitter-share-button' data-count='horizontal' data-text='FileGator: A Look into The Powerful PHP File Management Tool. ' data-url='http://www.9lessons.info/2014/06/filegator-look-into-powerful-php-file.html' data-via='9lessons' href='http://twitter.com/share'></a>
</div>
</div>
<div class='spacer'></div>
<div class='post-body-n'>
<span class='tweet'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http://www.9lessons.info/2014/06/filegator-look-into-powerful-php-file.html&layout=box_count&show_faces=false&width=450&action=like&colorscheme=light' style='border:none; overflow:hidden; width:60px; height:70px'></iframe>
</span>
<div class="bigInt">Forget the times of ‘There’s an app for that’, PHP scripts are now all the rage! Everyone wants to build their own little something special on the internet and mark their territory. With what we are witnessing on the internet front has been pretty moving and compelling enough to push us to try a few things ourselves. Thinking of file-sharing service for your friends, family, colleagues or business partners with all your rules? ‘There’s a script for that’!</div><br>
<div class='clearboth'></div>
</div>
</div>
<div class='date-header date updated' itemprop='dateCreated'>
Tuesday, June 10, 2014
</div>
<div class='post hentry'>
<a name='8977280608574630539'></a>
<h2 itemprop='name'><a href='http://www.9lessons.info/2014/06/web-pdf-viewer.html'>
Web PDF Viewer for Monetization.
</a></h2>
<div class='socialicons'>
<div class='comment'>
{
<b><a class='comment-link' href='http://www.9lessons.info/2014/06/web-pdf-viewer.html#comment-form' onclick=''>
27
</a></b>
comments
}</div>
<div class='socialspace'>
<script data-counter='right' data-url='http://www.9lessons.info/2014/06/web-pdf-viewer.html' type='in/share'></script>
</div>
<div class='socialspace'>
<div class='g-plus' data-action='share' data-annotation='bubble' data-href='http://www.9lessons.info/2014/06/web-pdf-viewer.html'></div>
</div>
<div class='socialspace'>
<a class='twitter-share-button' data-count='horizontal' data-text='Web PDF Viewer for Monetization. ' data-url='http://www.9lessons.info/2014/06/web-pdf-viewer.html' data-via='9lessons' href='http://twitter.com/share'></a>
</div>
</div>
<div class='spacer'></div>
<div class='post-body-n'>
<span class='tweet'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http://www.9lessons.info/2014/06/web-pdf-viewer.html&layout=box_count&show_faces=false&width=450&action=like&colorscheme=light' style='border:none; overflow:hidden; width:60px; height:70px'></iframe>
</span>
<div class="bigInt" itemprop="description">Are you working for eLearning projects? then you should know about Mozilla has launched PDF.js a web PDF viewer plugin. This plugin helps you to display PDF files inside HTML code. I did customized PDF.js prebuild structure for easy usage. Take a quick look at this post and it will explain you how to configure, tracking reports(Google Analytics) and monetize your PDF content with HTML page. </div><br>
<div class="cen"><img alt="Twitter OAuth Status Update using PHP. " class="sri" itemprop="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgai25BG8IXQicOXqrATSu2zUOCqnqmiiPWiz1NOv93CYA2dZk71lInqs1KjR_l4O7L3VgGdvqPdL8BwqJ5hPCTw3JIC2A-XUaQg7A67YYxdgUpnoNkzUzl-7L0FnoE-UDShO18E0UMurZq/s550/pdfjs.png"></div><br>
<div class='clearboth'></div>
</div>
</div>
<div class='date-header date updated' itemprop='dateCreated'>
Thursday, May 29, 2014
</div>
<div class='post hentry'>
<a name='105771446276389814'></a>
<h2 itemprop='name'><a href='http://www.9lessons.info/2014/05/seo-for-blogging.html'>
SEO for Blogging
</a></h2>
<div class='socialicons'>
<div class='comment'>
{
<b><a class='comment-link' href='http://www.9lessons.info/2014/05/seo-for-blogging.html#comment-form' onclick=''>
22
</a></b>
comments
}</div>
<div class='socialspace'>
<script data-counter='right' data-url='http://www.9lessons.info/2014/05/seo-for-blogging.html' type='in/share'></script>
</div>
<div class='socialspace'>
<div class='g-plus' data-action='share' data-annotation='bubble' data-href='http://www.9lessons.info/2014/05/seo-for-blogging.html'></div>
</div>
<div class='socialspace'>
<a class='twitter-share-button' data-count='horizontal' data-text='SEO for Blogging ' data-url='http://www.9lessons.info/2014/05/seo-for-blogging.html' data-via='9lessons' href='http://twitter.com/share'></a>
</div>
</div>
<div class='spacer'></div>
<div class='post-body-n'>
<span class='tweet'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http://www.9lessons.info/2014/05/seo-for-blogging.html&layout=box_count&show_faces=false&width=450&action=like&colorscheme=light' style='border:none; overflow:hidden; width:60px; height:70px'></iframe>
</span>
<div class="bigInt" itemprop="description">Search Engine Optimization is the most common term in the web industry, this system helps you to increase your websites organic traffic. Many are already discussed about topic, but I have been following few different ways for organic traffic. Take a look at the following steps I did shared all my blog SEO standards and implement these , sure you will improve your blog Google search results. </div><br>
<div class="cen"><img alt="SEO for Blogging . " class="sri" itemprop="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaH4dWiohTkm92JoKFlEeMx-Dp6zpli8GUFLMR9IyZKb9_ubY-9pAp35pkuKTNacBcRt7orY6iARut0Vgf2uU2paXvy-H45gPvvx5x3FlJCq9AIOiipwQxOyqcj2BRq9usR1HdJMlhiB5m/s550/blogSEO.png"></div><br>
<div class='clearboth'></div>
</div>
</div>
<!-- google_ad_section_end -->
</div>
<div class='blog-pager' id='blog-pager'>
<a class='blog-pager-older-link' href='http://www.9lessons.info/search?updated-max=2014-05-29T00:42:00%2B05:30&max-results=7' id='Blog1_blog-pager-older-link' title='Older Posts'>
Older Posts
</a>
</div>
<div class='clear'></div>
</div></div>
</div></td>
<td id='sideside'>
<div class='side_box'><div class='section-links' id='aboutme'><img alt='Srinivas Tamada' class='face' src='https://lh5.googleusercontent.com/-1pk4tCJjoxc/U5T1p4axWTI/AAAAAAAAKnk/KHSEvXys5PE/s90/SrinivasTamada.jpg' title='Srinivas Tamada'/>
<span class='vcard author'><a class='nametitle fn' href='https://plus.google.com/104100007347037324968?rel=author' itemprop='author' rel='author me'>Srinivas Tamada</a></span><br/>
Entrepreneur, Blogger, Thinker <br/> I love the WEB - INDIAN<br/>Invented <a href='http://wall.9lessons.info' style='color:#006699;'>The WALL SCRIPT</a><br/>Lives in Atlanta - United States<br/>
<a href='mailto:srinivas@9lessons.info' style='text-decoration:none; color:#006699;font-size:12px'>srinivas [at] 9lessons.info</a>
<a href='http://www.9lessons.info/p/about.html' rel='author' style='color:#f2f2f2;display:none' title='Srinivas Tamada'>more</a>
<div style='margin-top:-111px;height:32px;position: absolute;margin-left: 284px;margin-top:'>
<a class='profile_facebook profile_social profile_left' href='http://www.facebook.com/srinivas.tamada' rel='nofollow' style='display:none' target='_blank'></a>
<a class='profile_gplus profile_social profile_left' href='https://plus.google.com/+SrinivasTamada' rel='nofollow' target='_blank'></a>
<a class='profile_twitter profile_social profile_left' href='http://www.twitter.com/9lessons' rel='nofollow' target='_blank'></a>
<a class='profile_tumblr profile_social profile_left' href='http://www.srinivastamada.com' rel='nofollow' target='_blank'></a>
<a class='profile_rss profile_social profile_left' href='http://feeds2.feedburner.com/9lesson' rel='nofollow' target='_blank'></a>
<a class='profile_vimeo profile_social profile_left' href='http://www.vimeo.com/srinivas' rel='nofollow' target='_blank'></a>
<a class='profile_youtube profile_social' href='http://www.youtube.com/9lessons' rel='nofollow' target='_blank'></a>
</div>
<div style='margin-top:5px;'>
<a href='http://www.facebook.com/srinivas.tamada' onclick='ga('send', 'event', 'Sidebar', 'click','take a look');' target='_blank'><img alt='Srinivas Tamada Facebook Profile' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA5a8B5j5rFwogbHVaYDjPTnc3U8dkVxXxWdiS_9m9JN0KXTV3fLKnHK0rJqQBtityhD3gMRB60lPF0M4mGfN0npwUuds4c9UJtMDRznk8_Jn8aaDAs1jEXjTCvhE-f0mNTmY9FvaeABm3/s260/TakeMyLook.png' style='border:none'/></a>
</div>
<div style='clear:both'></div>
</div>
<div class='section-links'>
<div style='margin-bottom:6px'>
Subscribe my updates via <b>Email </b>
</div><div><form action='http://feedburner.google.com/fb/a/mailverify' method='post'><input class='feedinput' name='email' style='border:solid 1px #333333;width:170px;margin-right:4px' type='text'/><input name='uri' type='hidden' value='9lesson'/><input name='loc' type='hidden' value='en_US'/><input class='gsc-search-button' type='submit' value='Sign Up'/></form></div>
<div style='margin:0px 0px 5px 0px'>
<div style='float:left;width:90px'>
<a href='http://feeds2.feedburner.com/9lesson' title='9lessons feed'><img alt='feed' height='26' src='http://feeds2.feedburner.com/~fc/9lesson?bg=f2a0bb&fg=000000&anim=0&label=Readers' style='border:0;margin-right:10px;margin-top:6px' width='88'/></a>
</div>
</div>
<div style='clear:both'></div>
<!-- details end -->
</div>
<div class='section-links' style='padding-top:5px'>
<div class='centerclass'><div class='section' id='addsections99'></div></div>
<div style='clear:both;text-align:center'>
<div class='section' id='newadsblock'><div class='widget HTML' id='HTML8'>
<div class='widget-content'>
<div style="text-align:center" >
<a href="http://dashboard.webydo.com/landingpages/starta.aspx?&utm_source=9lessons&utm_medium=cpc&utm_content=facespoons250x250&utm_campaign=sidebarhigher" target="_blank" ><img src="https://lh6.googleusercontent.com/-d0cPzRChpkM/Ux3qHWZL8MI/AAAAAAAAJQc/jTL5U572ZTQ/s250/250_250E1%2520%25281%2529%25209less.jpg" style="border:solid 1px #333333;margin-top:5px" alt="WebyDo"/></a>
</div>
<!--
<script>
var totalCount = 4;
function myFunction()
{
var num = Math.ceil( Math.random()* totalCount );
var x=document.getElementById("banner250");
if(num%2)
{
x.innerHTML='<a href="http://themeforest.net/item/x-the-theme/5871901?ref=themeco" target="_blank" ><img src="https://lh3.googleusercontent.com/-zdGYAXEBrxk/U5i2EVhx2aI/AAAAAAAAKos/OVz90xLKoL4/s250/x.png.png" style="border:solid 1px #333333;margin-top:5px"/></a><a href="http://dashboard.webydo.com/landingpages/starta.aspx?utm_source=9lessons&utm_medium=cpc&utm_content=facespoons250x250&utm_campaign=sidebar" target="_blank" ><img src="https://lh6.googleusercontent.com/-d0cPzRChpkM/Ux3qHWZL8MI/AAAAAAAAJQc/jTL5U572ZTQ/s250/250_250E1%2520%25281%2529%25209less.jpg" style="border:solid 1px #333333;margin-top:5px" alt="WebyDo"/></a>';
}
else
{
x.innerHTML='<a href="http://dashboard.webydo.com/landingpages/starta.aspx?utm_source=9lessons&utm_medium=cpc&utm_content=facespoons250x250&utm_campaign=sidebar" target="_blank" ><img src="https://lh6.googleusercontent.com/-d0cPzRChpkM/Ux3qHWZL8MI/AAAAAAAAJQc/jTL5U572ZTQ/s250/250_250E1%2520%25281%2529%25209less.jpg" style="border:solid 1px #333333;margin-top:5px" alt="WebyDo"/></a><a href="http://themeforest.net/item/x-the-theme/5871901?ref=themeco" target="_blank" ><img src="https://lh3.googleusercontent.com/-zdGYAXEBrxk/U5i2EVhx2aI/AAAAAAAAKos/OVz90xLKoL4/s250/x.png.png" style="border:solid 1px #333333;margin-top:5px"/></a>';
}
}
//myFunction();
</script>
-->
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=992226187759619576&widgetType=HTML&widgetId=HTML8&action=editWidget§ionId=newadsblock' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML8"));' target='configHTML8' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div><div class='widget HTML' id='HTML3'>
<div class='widget-content'>
<!-- Dont Delete BuySellAds.com Ad Code -->
<script type="text/javascript">
(function(){
var bsa = document.createElement('script');
bsa.type = 'text/javascript';
bsa.async = true;
bsa.src = '//s3.buysellads.com/ac/bsa.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script>
<!-- END BuySellAds.com Ad Code -->
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=992226187759619576&widgetType=HTML&widgetId=HTML3&action=editWidget§ionId=newadsblock' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML3"));' target='configHTML3' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div></div>
</div>
<div id='buysellads_div' style='display:block;overflow:auto'>
<div class='bsarocks bsap_ce1cf9e0a1e44bafe65c4664385c08d7' id='bsap_1245205'></div>
</div>
</div>
<!-- <div class='section-links'><div> <b:section id='addsections_media'/></div></div> -->
<div class='section-links'><h3>Most Popular Posts</h3><div class='section' id='addsections7'><div class='widget PopularPosts' id='PopularPosts1'>
<div class='widget-content popular-posts'>
<ul>
<li>
<a href='http://www.9lessons.info/2011/02/login-with-facebook-and-twitter.html'>Login with Facebook and Twitter</a>
</li>
<li>
<a href='http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html'>Ajax Image Upload without Refreshing Page using Jquery.</a>
</li>
<li>
<a href='http://www.9lessons.info/2009/03/upload-and-resize-image-with-php.html'>Upload and Resize an Image with PHP</a>
</li>
<li>
<a href='http://www.9lessons.info/2009/09/php-login-page-example.html'>PHP Login Page Example.</a>
</li>
<li>
<a href='http://www.9lessons.info/2009/07/auto-load-refresh-every-10-seconds-with.html'>Auto Load and Refresh Div every 10 Seconds with jQuery.</a>
</li>
<li>
<a href='http://www.9lessons.info/2009/09/pagination-with-jquery-mysql-and-php.html'>Pagination with jQuery, MySQL and PHP.</a>
</li>
<li>
<a href='http://www.9lessons.info/2011/07/login-with-google-account.html'>Login with Google Account OpenID</a>
</li>
<li>
<a href='http://www.9lessons.info/2012/06/simple-drop-down-menu-with-jquery-and.html'>Simple Drop Down Menu with Jquery and CSS</a>
</li>
<li>
<a href='http://www.9lessons.info/2010/10/pagination-with-jquery-php-ajax-and.html'>Pagination with Jquery, PHP , Ajax and MySQL.</a>
</li>
</ul>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=992226187759619576&widgetType=PopularPosts&widgetId=PopularPosts1&action=editWidget§ionId=addsections7' onclick='return _WidgetManager._PopupConfig(document.getElementById("PopularPosts1"));' target='configPopularPosts1' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div>
</div></div></div>
<div class='section-links'><h3>Media Partner</h3>
<div class='section' id='mediaPartner'><div class='widget HTML' id='HTML4'>
<div class='widget-content'>
<div style='text-align:center'>
<a href="http://velocityconf.com/velocityny2014?cmp=mp-velocity-confreg-home-vlny14_9lessons" target="_blank"><img src="https://lh3.googleusercontent.com/-fMZYn81nnlw/U77j0jIm6-I/AAAAAAAALF0/9zOzFpS7CEQ/s256/VLNY14_9Lessons_256x125.jpg" alt="Velocity Conference"/></a>
<a href="http://www.webeedesigns.com/9les" style="margin-top:8px" target="_blank"><img src="https://lh5.googleusercontent.com/-gQrzuwZGYJc/U7wAbhIKMHI/AAAAAAAAK-k/VF88srYA5sI/s256/webee-gif%2520%25283%2529.gif" alt="Webeedesigns"/></a>
</div>
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=992226187759619576&widgetType=HTML&widgetId=HTML4&action=editWidget§ionId=mediaPartner' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML4"));' target='configHTML4' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div></div></div>
<div class='section-links' style='padding-right:7px;margin-bottom:10px'><h3>Categories</h3>
<div class='spacer'></div><div class='site-reviews' style='float:left;width:45%; '><ul><li><a href='http://www.9lessons.info/search/label/Facebook?max-results=6'><b>Facebook</b></a></li><li><a href='http://www.9lessons.info/search/label/Database?max-results=6'>Database</a></li><li><a href='http://www.9lessons.info/search/label/jQuery?max-results=6'><b>jQuery</b></a></li><li><a href='http://www.9lessons.info/search/label/google?max-results=6'>Google</a></li><li><a href='http://www.9lessons.info/2008/08/table-of-contents.html'>Tutorials</a></li><li><a href='http://www.9lessons.info/search/label/WebDesign?max-results=6'>Web Design</a></li></ul></div>
<div class='site-reviews' style='float:right;width:45%'><ul><li><a href='http://www.9lessons.info/search/label/Jsp?max-results=6'>JSP</a></li><li><a href='http://www.9lessons.info/search/label/Technology?max-results=6'>Technology</a></li><li><a href='http://www.9lessons.info/search/label/Twitter%20API?max-results=6'><b>Twitter API</b>(new)</a></li><li><a href='http://www.9lessons.info/search/label/Mysql?max-results=6'>MySQL</a></li><li><a href='http://www.9lessons.info/search/label/Ajax?max-results=6'><b>Ajax</b></a></li><li><a href='http://www.9lessons.info/2008/08/most-popular-articles.html'><b>Most Popular</b></a></li></ul></div><div class='spacer' style='height:1px'></div></div>
<div class='section-links'>
<a href='http://www.oauthlogin.com' onClick='ga('send', 'event', 'Sidebar', 'click', 'OAuth Login');'>
<img alt='Facebook and Google Login' src='https://lh6.googleusercontent.com/-qcHEDVk049I/UTOqMjMAcjI/AAAAAAAAHWI/0SkDJdch6JM/s400/OauthBanner.gif' style='border:none'/></a>
</div>
<div class='section-links'><h3>Recent Posts</h3><script src='http://feeds2.feedburner.com/9lesson?format=sigpro' type='text/javascript'></script></div>
<div class='section-links'>
<div class='section' id='addsections71'><div class='widget HTML' id='HTML5'>
<div class='widget-content'>
<div style='text-align:center'>
<a href='http://wall.9lessons.info/#videoAd' onclick='ga('send', 'event', 'Sidebar', 'click', 'Video Banner');'><img src='https://lh5.googleusercontent.com/-4GeBuaoqs64/UxtNStRDdeI/AAAAAAAAJPM/0-9s-kAURYQ/s250/WallScriptAd.png' border='0'/></a>
</div>
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=992226187759619576&widgetType=HTML&widgetId=HTML5&action=editWidget§ionId=addsections71' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML5"));' target='configHTML5' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div></div>
</div>
</div>
<div id='googleplus' style='margin-top:5px;'>
<!-- Place this tag where you want the widget to render. -->
<div class='g-person' data-href='//plus.google.com/104100007347037324968' data-rel='author'></div>
<!-- Place this tag after the last widget tag. -->
<script type='text/javascript'>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div style='margin-top:10px;'>
<div class='section' id='addsections31'><div class='widget HTML' id='HTML2'>
<div class='widget-content'>
<div style='margin:10px 0px 10px 0px;'>
<a class="twitter-timeline" href="https://twitter.com/9lessons" data-widget-id="444174574024810496">Tweets by @9lessons</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div style='margin:10px 0px 10px 0px;text-align:right'>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Big Banner 600X300 -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-6904774409601870"
data-ad-slot="9830233637"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=992226187759619576&widgetType=HTML&widgetId=HTML2&action=editWidget§ionId=addsections31' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML2"));' target='configHTML2' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div></div>
</div>
</td>
</tr>
</table>
<!-- google ads -->
<div>
<div class='section' id='addsectionsFooterTop'></div>
</div>
<!--google end -->
</div>
<!-- Footer part -->
<div id='container-footer2'>
<div id='container-footer' style='text-align: center;'>
<div class='counterstat'><script type='text/javascript'>
var sc_project=3967696;
var sc_invisible=0;
var sc_partition=46;
var sc_click_stat=1;
var sc_security="6979b175";
var sc_text=1;
</script>
<script src='http://www.statcounter.com/counter/counter.js' type='text/javascript'></script><noscript><div class='statcounter'><img alt='free html hit counter' class='statcounter' src='http://c.statcounter.com/3967696/0/6979b175/0/'/></div></noscript></div>
<div id='footer'>
<table style='width:100%'>
<tr>
<td>
<span style='float:left'><a href='http://egglabs.in' onClick='ga('send', 'event', 'Footer', 'click', 'Egglabs');' title='Egglabs'><img alt='egglabs' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbNwtMG-FUl0twSErE4QaTiyMnKu7MW276XYDD_My3uGl-93VHUJpwJUu73khjfgY0S_RqBGkNLeYK92h89iLEkcFiWRAXQvdEeedlrPGF1EEcI1AvFm7jzwbKqPshA1GrhD0usOr7eyLO/' style='border:none'/></a></span>
<span class='cpright'>
© 2009-2014 9lessons.info. All rights reserved the content is copyrighted to Srinivas Tamada - <a href='http://www.9lessons.info/2009/05/advertising-on-9lessons.html' title='9lessons Advertisement'>Advertise</a>
</span>
</td>
<td style='text-align:right'>
<span style='float:right; '>
<a href='http://creativecommons.org/licenses/by-nc-nd/3.0/' rel='license'><img alt='Creative Commons License' src='http://i.creativecommons.org/l/by-nc-nd/3.0/80x15.png' style='border-width:0'/></a>
</span>
</td>
</tr>
</table>
</div>
</div></div>
<!-- Footer end -->
<!-- <script src='http://www.google-analytics.com/urchin.js' type='text/javascript'> </script> <script type='text/javascript'> _uacct = "UA-4783102-2"; urchinTracker(); </script> -->
<!-- ads end <script type='text/javascript'> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> -->
<script type='text/javascript'>
try {
var pageTracker = _gat._getTracker("UA-10999810-1");
pageTracker._trackPageview();
} catch(err) {}</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-4783102-2', '9lessons.info');
ga('send', 'pageview');
</script>
<!--Page Navigation Starts-->
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord =' Next ';
</script>
<!--Page Navigation Ends -->
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></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>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'></script>
<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('search', '1');
google.setOnLoadCallback(function(){
var customSearchControl = new google.search.CustomSearchControl();
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.setSearchFormRoot('cse-search-form');
customSearchControl.enableAds('pub-6904774409601870');
customSearchControl.draw('cse', options);
}, true);
</script>
<script type='text/javascript'>
if (top.location!= self.location) {
top.location = self.location
}
FB.init({
appId:'110166500203',
cookie:true,
status:true,
xfbml:true
});
function FacebookInviteFriends()
{
FB.ui({
method: 'apprequests',
message: '9lessons Programming Blog Topics focused on Web Programming.'
});
}
</script>
<script type='text/javascript'>
window.___gcfg = {lang: 'en'};
(function()
{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 id='fb-root'></div>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
</script><script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2423294629-widgets.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type='text/javascript'>
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '992226187759619576';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d992226187759619576','//www.9lessons.info/','992226187759619576');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '992226187759619576', 'bloggerUrl': 'http://www.blogger.com', 'title': '9lessons Programming Blog', 'pageType': 'index', 'url': 'http://www.9lessons.info/', 'canonicalUrl': 'http://www.9lessons.info/', 'canonicalHomepageUrl': 'http://www.9lessons.info/', 'homepageUrl': 'http://www.9lessons.info/', 'blogspotFaviconUrl': 'http://www.9lessons.info/favicon.ico', 'enabledCommentProfileImages': true, 'adultContent': false, 'disableAdSenseWidget': false, 'analyticsAccountNumber': '', 'searchLabel': '', 'searchQuery': '', 'pageName': '', 'pageTitle': '9lessons Programming Blog', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'languageDirection': 'ltr', 'feedLinks': '\74link rel\75\42alternate\42 type\75\42application/atom+xml\42 title\75\429lessons Programming Blog - Atom\42 href\75\42http://www.9lessons.info/feeds/posts/default\42 /\76\n\74link rel\75\42alternate\42 type\75\42application/rss+xml\42 title\75\429lessons Programming Blog - RSS\42 href\75\42http://www.9lessons.info/feeds/posts/default?alt\75rss\42 /\76\n\74link rel\75\42service.post\42 type\75\42application/atom+xml\42 title\75\429lessons Programming Blog - Atom\42 href\75\42http://www.blogger.com/feeds/992226187759619576/posts/default\42 /\76\n', 'meTag': '', 'openIdOpTag': '\74link rel\75\42openid.server\42 href\75\42http://www.blogger.com/openid-server.g\42 /\76\n\74link rel\75\42openid.delegate\42 href\75\42http://www.9lessons.info/\42 /\76\n', 'latencyHeadScript': '\74script type\75\42text/javascript\42\76(function() { var b\75window,f\75\42chrome\42,g\75\42tick\42,k\75\42jstiming\42;(function(){function d(a){this.t\75{};this.tick\75function(a,d,c){var e\75void 0!\75c?c:(new Date).getTime();this.t[a]\75[e,d];if(void 0\75\75c)try{b.console.timeStamp(\42CSI/\42+a)}catch(h){}};this[g](\42start\42,null,a)}var a;b.performance\46\46(a\75b.performance.timing);var n\75a?new d(a.responseStart):new d;b.jstiming\75{Timer:d,load:n};if(a){var c\75a.navigationStart,h\75a.responseStart;0\74c\46\46h\76\75c\46\46(b[k].srt\75h-c)}if(a){var e\75b[k].load;0\74c\46\46h\76\75c\46\46(e[g](\42_wtsrt\42,void 0,c),e[g](\42wtsrt_\42,\42_wtsrt\42,h),e[g](\42tbsd_\42,\42wtsrt_\42))}try{a\75null,\nb[f]\46\46b[f].csi\46\46(a\75Math.floor(b[f].csi().pageT),e\46\0460\74c\46\46(e[g](\42_tbnd\42,void 0,b[f].csi().startE),e[g](\42tbnd_\42,\42_tbnd\42,c))),null\75\75a\46\46b.gtbExternal\46\46(a\75b.gtbExternal.pageT()),null\75\75a\46\46b.external\46\46(a\75b.external.pageT,e\46\0460\74c\46\46(e[g](\42_tbnd\42,void 0,b.external.startE),e[g](\42tbnd_\42,\42_tbnd\42,c))),a\46\46(b[k].pt\75a)}catch(p){}})();b.tickAboveFold\75function(d){var a\0750;if(d.offsetParent){do a+\75d.offsetTop;while(d\75d.offsetParent)}d\75a;750\76\75d\46\46b[k].load[g](\42aft\42)};var l\75!1;function m(){l||(l\75!0,b[k].load[g](\42firstScrollTime\42))}b.addEventListener?b.addEventListener(\42scroll\42,m,!1):b.attachEvent(\42onscroll\42,m);\n })();\74/script\076', 'mobileHeadScript': '', 'adsenseClientId': 'pub-6904774409601870', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/76f25a6f2e06af76', 'plusOneApiSrc': 'https://apis.google.com/js/plusone.js', 'sf': 'n'}}, {'name': 'skin', 'data': {'vars': {}, 'override': ''}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\75classic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\75flipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\75magazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\75mosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\75sidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\75snapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\75timeslide'}}}]);
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML5', 'addsections71', null, document.getElementById('HTML5'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main_s', null, document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/1845872262-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/2392111094-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML4', 'mediaPartner', null, document.getElementById('HTML4'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense2', 'addsections3', null, document.getElementById('AdSense2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'addsections31', null, document.getElementById('HTML2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML6', 'addsectionsTopperHead', null, document.getElementById('HTML6'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts1', 'addsections7', null, document.getElementById('PopularPosts1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', null, document.getElementById('Navbar1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML8', 'newadsblock', null, document.getElementById('HTML8'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'newadsblock', null, document.getElementById('HTML3'), {}, 'displayModeFull'));
</script>
</body>
</html>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Simple
Designer: Josh Peterson
URL: www.noaesthetic.com
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#ffffff"/>
<Group description="Page Text" selector="body">
<Variable name="body.font" description="Font" type="font"
default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px 'Trebuchet MS', Trebuchet, Verdana, sans-serif"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#222222" value="#666666"/>
</Group>
<Group description="Backgrounds" selector=".body-fauxcolumns-outer">
<Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#ffffff"/>
<Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="transparent"/>
</Group>
<Group description="Links" selector=".main-outer">
<Variable name="link.color" description="Link Color" type="color" default="#2288bb" value="#2288bb"/>
<Variable name="link.visited.color" description="Visited Color" type="color" default="#888888" value="#888888"/>
<Variable name="link.hover.color" description="Hover Color" type="color" default="#33aaff" value="#33aaff"/>
</Group>
<Group description="Blog Title" selector=".header h1">
<Variable name="header.font" description="Font" type="font"
default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 40px 'Trebuchet MS',Trebuchet,Verdana,sans-serif"/>
<Variable name="header.text.color" description="Title Color" type="color" default="#3399bb" value="#000000"/>
</Group>
<Group description="Blog Description" selector=".header .description">
<Variable name="description.text.color" description="Description Color" type="color"
default="#777777" value="#000000"/>
</Group>
<Group description="Tabs Text" selector=".tabs-inner .widget li a">
<Variable name="tabs.font" description="Font" type="font"
default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="$(body.font)"/>
<Variable name="tabs.text.color" description="Text Color" type="color" default="#999999" value="#000000"/>
<Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="#000000" value="#000000"/>
</Group>
<Group description="Tabs Background" selector=".tabs-outer .PageList">
<Variable name="tabs.background.color" description="Background Color" type="color" default="#f5f5f5" value="transparent"/>
<Variable name="tabs.selected.background.color" description="Selected Color" type="color" default="#eeeeee" value="#eeeeee"/>
</Group>
<Group description="Post Title" selector="h3.post-title, .comments h4">
<Variable name="post.title.font" description="Font" type="font"
default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px 'Trebuchet MS',Trebuchet,Verdana,sans-serif"/>
</Group>
<Group description="Date Header" selector=".date-header">
<Variable name="date.header.color" description="Text Color" type="color"
default="$(body.text.color)" value="#ffffff"/>
<Variable name="date.header.background.color" description="Background Color" type="color"
default="transparent" value="#bbbbbb"/>
</Group>
<Group description="Post Footer" selector=".post-footer">
<Variable name="post.footer.text.color" description="Text Color" type="color" default="#666666" value="#666666"/>
<Variable name="post.footer.background.color" description="Background Color" type="color"
default="#f9f9f9" value="#eeeeee"/>
<Variable name="post.footer.border.color" description="Shadow Color" type="color" default="#eeeeee" value="#eeeeee"/>
</Group>
<Group description="Gadgets" selector="h2">
<Variable name="widget.title.font" description="Title Font" type="font"
default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 11px 'Trebuchet MS',Trebuchet,Verdana,sans-serif"/>
<Variable name="widget.title.text.color" description="Title Color" type="color" default="#000000" value="#000000"/>
<Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#999999" value="#999999"/>
</Group>
<Group description="Images" selector=".main-inner">
<Variable name="image.background.color" description="Background Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="image.border.color" description="Border Color" type="color" default="#eeeeee" value="#eeeeee"/>
<Variable name="image.text.color" description="Caption Text Color" type="color" default="$(body.text.color)" value="$(body.text.color)"/>
</Group>
<Group description="Accents" selector=".content-inner">
<Variable name="body.rule.color" description="Separator Line Color" type="color" default="#eeeeee" value="transparent"/>
<Variable name="tabs.border.color" description="Tabs Border Color" type="color" default="$(body.rule.color)" value="#dddddd"/>
</Group>
<Variable name="body.background" description="Body Background" type="background"
color="$(body.background.color)" default="$(color) none repeat scroll top left" value="$(color) none repeat scroll top left"/>
<Variable name="body.background.override" description="Body Background Override" type="string" default="" value=""/>
<Variable name="body.background.gradient.cap" description="Body Gradient Cap" type="url"
default="url(//www.blogblog.com/1kt/simple/gradients_light.png)" value="none"/>
<Variable name="body.background.gradient.tile" description="Body Gradient Tile" type="url"
default="url(//www.blogblog.com/1kt/simple/body_gradient_tile_light.png)" value="none"/>
<Variable name="content.background.color.selector" description="Content Background Color Selector" type="string" default=".content-inner" value=".content-inner"/>
<Variable name="content.padding" description="Content Padding" type="length" default="10px" value="10px"/>
<Variable name="content.padding.horizontal" description="Content Horizontal Padding" type="length" default="$(content.padding)" value="40px"/>
<Variable name="content.shadow.spread" description="Content Shadow Spread" type="length" default="40px" value="0"/>
<Variable name="content.shadow.spread.webkit" description="Content Shadow Spread (WebKit)" type="length" default="5px" value="0"/>
<Variable name="content.shadow.spread.ie" description="Content Shadow Spread (IE)" type="length" default="10px" value="0"/>
<Variable name="main.border.width" description="Main Border Width" type="length" default="0" value="0"/>
<Variable name="header.background.gradient" description="Header Gradient" type="url" default="none" value="none"/>
<Variable name="header.shadow.offset.left" description="Header Shadow Offset Left" type="length" default="-1px" value="0"/>
<Variable name="header.shadow.offset.top" description="Header Shadow Offset Top" type="length" default="-1px" value="0"/>
<Variable name="header.shadow.spread" description="Header Shadow Spread" type="length" default="1px" value="0"/>
<Variable name="header.padding" description="Header Padding" type="length" default="30px" value="0"/>
<Variable name="header.border.size" description="Header Border Size" type="length" default="1px" value="1px"/>
<Variable name="header.bottom.border.size" description="Header Bottom Border Size" type="length" default="$(header.border.size)" value="0"/>
<Variable name="header.border.horizontalsize" description="Header Horizontal Border Size" type="length" default="0" value="1px"/>
<Variable name="description.text.size" description="Description Text Size" type="string" default="140%" value="18px"/>
<Variable name="tabs.margin.top" description="Tabs Margin Top" type="length" default="0" value="0"/>
<Variable name="tabs.margin.side" description="Tabs Side Margin" type="length" default="30px" value="30px"/>
<Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url"
default="url(//www.blogblog.com/1kt/simple/gradients_light.png)" value="none"/>
<Variable name="tabs.border.width" description="Tabs Border Width" type="length" default="1px" value="1px"/>
<Variable name="tabs.bevel.border.width" description="Tabs Bevel Border Width" type="length" default="1px" value="1px"/>
<Variable name="date.header.padding" description="Date Header Padding" type="string" default="inherit" value="0.4em"/>
<Variable name="date.header.letterspacing" description="Date Header Letter Spacing" type="string" default="inherit" value="3px"/>
<Variable name="date.header.margin" description="Date Header Margin" type="string" default="inherit" value="inherit"/>
<Variable name="post.margin.bottom" description="Post Bottom Margin" type="length" default="25px" value="45px"/>
<Variable name="image.border.small.size" description="Image Border Small Size" type="length" default="2px" value="2px"/>
<Variable name="image.border.large.size" description="Image Border Large Size" type="length" default="5px" value="5px"/>
<Variable name="page.width.selector" description="Page Width Selector" type="string" default=".region-inner" value=".region-inner"/>
<Variable name="page.width" description="Page Width" type="string" default="auto" value="auto"/>
<Variable name="main.section.margin" description="Main Section Margin" type="length" default="15px" value="1em"/>
<Variable name="main.padding" description="Main Padding" type="length" default="15px" value="0"/>
<Variable name="main.padding.top" description="Main Padding Top" type="length" default="30px" value="35px"/>
<Variable name="main.padding.bottom" description="Main Padding Bottom" type="length" default="30px" value="65px"/>
<Variable name="paging.background"
color="$(content.background.color)"
description="Background of blog paging area" type="background"
default="transparent none no-repeat scroll top center" value="transparent url(//www.blogblog.com/1kt/simple/paging_dot.png) repeat-x scroll top center"/>
<Variable name="footer.bevel" description="Bevel border length of footer" type="length" default="0" value="1px"/>
<Variable name="mobile.background.overlay" description="Mobile Background Overlay" type="string"
default="transparent none repeat scroll top left" value="transparent none repeat scroll top left"/>
<Variable name="mobile.background.size" description="Mobile Background Size" type="string" default="auto" value="auto"/>
<Variable name="mobile.button.color" description="Mobile Button Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left" value="left"/>
<Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"/>
*/
/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
html body $(page.width.selector) {
min-width: 0;
max-width: 100%;
width: $(page.width);
}
a:link {
text-decoration:none;
color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:underline;
color: $(link.hover.color);
}
.body-fauxcolumn-outer .fauxcolumn-inner {
background: transparent $(body.background.gradient.tile) repeat scroll top left;
_background-image: none;
}
.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;
height: 400px;
width: 100%;
background: $(body.background);
$(body.background.override)
}
.body-fauxcolumn-outer .cap-top .cap-left {
width: 100%;
background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
_background-image: none;
}
.content-outer {
-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
margin-bottom: 1px;
}
.content-inner {
padding: $(content.padding) $(content.padding.horizontal);
}
$(content.background.color.selector) {
background-color: $(content.background.color);
}
/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1 a {
color: $(header.text.color);
}
.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}
.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}
.header-inner .Header .descriptionwrapper {
padding: 0 $(header.padding);
}
/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}
.tabs-inner .section:first-child ul {
margin-top: -$(header.border.size);
border-top: $(header.border.size) solid $(tabs.border.color);
border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}
.tabs-inner .widget ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: $(tabs.border.width) solid $(tabs.border.color);
margin-top: $(tabs.margin.top);
margin-left: -$(tabs.margin.side);
margin-right: -$(tabs.margin.side);
}
.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: $(tabs.font);
color: $(tabs.text.color);
border-$startSide: $(tabs.border.width) solid $(content.background.color);
border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}
.tabs-inner .widget li:first-child a {
border-$startSide: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: $(tabs.selected.text.color);
background-color: $(tabs.selected.background.color);
text-decoration: none;
}
/* Columns
----------------------------------------------- */
.main-outer {
border-top: $(main.border.width) solid $(body.rule.color);
}
.fauxcolumn-left-outer .fauxcolumn-inner {
border-right: 1px solid $(body.rule.color);
}
.fauxcolumn-right-outer .fauxcolumn-inner {
border-left: 1px solid $(body.rule.color);
}
/* Headings
----------------------------------------------- */
h2 {
margin: 0 0 1em 0;
font: $(widget.title.font);
color: $(widget.title.text.color);
}
/* Widgets
----------------------------------------------- */
.widget .zippy {
color: $(widget.alternate.text.color);
text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
}
.widget .popular-posts ul {
list-style: none;
}
/* Posts
----------------------------------------------- */
.date-header span {
background-color: $(date.header.background.color);
color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
}
.main-inner {
padding-top: $(main.padding.top);
padding-bottom: $(main.padding.bottom);
}
.main-inner .column-center-inner {
padding: 0 $(main.padding);
}
.main-inner .column-center-inner .section {
margin: 0 $(main.section.margin);
}
.post {
margin: 0 0 $(post.margin.bottom) 0;
}
h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}
.post-body .tr-caption-container {
color: $(image.text.color);
}
.post-body .tr-caption-container img {
padding: 0;
background: transparent;
border: none;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}
.post-header {
margin: 0 0 1.5em;
line-height: 1.6;
font-size: 90%;
}
.post-footer {
margin: 20px -2px 0;
padding: 5px 10px;
color: $(post.footer.text.color);
background-color: $(post.footer.background.color);
border-bottom: 1px solid $(post.footer.border.color);
line-height: 1.6;
font-size: 90%;
}
#comments .comment-author {
padding-top: 1.5em;
border-top: 1px solid $(body.rule.color);
background-position: 0 1.5em;
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
.avatar-image-container {
margin: .2em 0 0;
}
#comments .avatar-image-container img {
border: 1px solid $(image.border.color);
}
/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
.comments .comments-content .loadmore a {
border-top: 1px solid $(widget.alternate.text.color);
border-bottom: 1px solid $(widget.alternate.text.color);
}
.comments .comment-thread.inline-thread {
background-color: $(post.footer.background.color);
}
.comments .continue {
border-top: 2px solid $(widget.alternate.text.color);
}
/* Accents
---------------------------------------------- */
.section-columns td.columns-cell {
border-$startSide: 1px solid $(body.rule.color);
}
.blog-pager {
background: $(paging.background);
}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: $(content.background.color);
padding: 5px;
}
.footer-outer {
border-top: $(footer.bevel) dashed #bbbbbb;
}
/* Mobile
----------------------------------------------- */
body.mobile {
background-size: $(mobile.background.size);
}
.mobile .body-fauxcolumn-outer {
background: $(mobile.background.overlay);
}
.mobile .body-fauxcolumn-outer .cap-top {
background-size: 100% auto;
}
.mobile .content-outer {
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
box-shadow: 0 0 3px rgba(0, 0, 0, .15);
}
body.mobile .AdSense {
margin: 0 -$(content.shadow.spread);
}
.mobile .tabs-inner .widget ul {
margin-left: 0;
margin-right: 0;
}
.mobile .post {
margin: 0;
}
.mobile .main-inner .column-center-inner .section {
margin: 0;
}
.mobile .date-header span {
padding: 0.1em 10px;
margin: 0 -10px;
}
.mobile h3.post-title {
margin: 0;
}
.mobile .blog-pager {
background: transparent none no-repeat scroll top center;
}
.mobile .footer-outer {
border-top: none;
}
.mobile .main-inner, .mobile .footer-inner {
background-color: $(content.background.color);
}
.mobile-index-contents {
color: $(body.text.color);
}
.mobile-link-button {
background-color: $(link.color);
}
.mobile-link-button a:link, .mobile-link-button a:visited {
color: $(mobile.button.color);
}
.mobile .tabs-inner .section:first-child {
border-top: none;
}
.mobile .tabs-inner .PageList .widget-content {
background-color: $(tabs.selected.background.color);
color: $(tabs.selected.text.color);
border-top: $(tabs.border.width) solid $(tabs.border.color);
border-bottom: $(tabs.border.width) solid $(tabs.border.color);
}
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
border-$startSide: 1px solid $(tabs.border.color);
}
]]></b:skin>
<b:template-skin>
<b:variable default='960px' name='content.width' type='length' value='960px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
<b:variable default='310px' name='main.column.right.width' type='length' value='310px'/>
<![CDATA[
body {
min-width: $(content.width);
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}
.main-inner .columns {
padding-left: $(main.column.left.width);
padding-right: $(main.column.right.width);
}
.main-inner .fauxcolumn-center-outer {
left: $(main.column.left.width);
right: $(main.column.right.width);
/* IE6 does not respect left and right together */
_width: expression(this.parentNode.offsetWidth -
parseInt("$(main.column.left.width)") -
parseInt("$(main.column.right.width)") + 'px');
}
.main-inner .fauxcolumn-left-outer {
width: $(main.column.left.width);
}
.main-inner .fauxcolumn-right-outer {
width: $(main.column.right.width);
}
.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}
.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
}
#layout {
min-width: 0;
}
#layout .content-outer {
min-width: 0;
width: 800px;
}
#layout .region-inner {
min-width: 0;
width: auto;
}
]]>
</b:template-skin>
<b:include data='blog' name='google-analytics'/>
<head>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Simple
Designer: Josh Peterson
URL: www.noaesthetic.com
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#ffffff"/>
<Group description="Page Text" selector="body">
<Variable name="body.font" description="Font" type="font"
default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px 'Trebuchet MS', Trebuchet, Verdana, sans-serif"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#222222" value="#666666"/>
</Group>
<Group description="Backgrounds" selector=".body-fauxcolumns-outer">
<Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#ffffff"/>
<Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="transparent"/>
</Group>
<Group description="Links" selector=".main-outer">
<Variable name="link.color" description="Link Color" type="color" default="#2288bb" value="#2288bb"/>
<Variable name="link.visited.color" description="Visited Color" type="color" default="#888888" value="#888888"/>
<Variable name="link.hover.color" description="Hover Color" type="color" default="#33aaff" value="#33aaff"/>
</Group>
<Group description="Blog Title" selector=".header h1">
<Variable name="header.font" description="Font" type="font"
default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 40px 'Trebuchet MS',Trebuchet,Verdana,sans-serif"/>
<Variable name="header.text.color" description="Title Color" type="color" default="#3399bb" value="#000000"/>
</Group>
<Group description="Blog Description" selector=".header .description">
<Variable name="description.text.color" description="Description Color" type="color"
default="#777777" value="#000000"/>
</Group>
<Group description="Tabs Text" selector=".tabs-inner .widget li a">
<Variable name="tabs.font" description="Font" type="font"
default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="$(body.font)"/>
<Variable name="tabs.text.color" description="Text Color" type="color" default="#999999" value="#000000"/>
<Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="#000000" value="#000000"/>
</Group>
<Group description="Tabs Background" selector=".tabs-outer .PageList">
<Variable name="tabs.background.color" description="Background Color" type="color" default="#f5f5f5" value="transparent"/>
<Variable name="tabs.selected.background.color" description="Selected Color" type="color" default="#eeeeee" value="#eeeeee"/>
</Group>
<Group description="Post Title" selector="h3.post-title, .comments h4">
<Variable name="post.title.font" description="Font" type="font"
default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px 'Trebuchet MS',Trebuchet,Verdana,sans-serif"/>
</Group>
<Group description="Date Header" selector=".date-header">
<Variable name="date.header.color" description="Text Color" type="color"
default="$(body.text.color)" value="#ffffff"/>
<Variable name="date.header.background.color" description="Background Color" type="color"
default="transparent" value="#bbbbbb"/>
</Group>
<Group description="Post Footer" selector=".post-footer">
<Variable name="post.footer.text.color" description="Text Color" type="color" default="#666666" value="#666666"/>
<Variable name="post.footer.background.color" description="Background Color" type="color"
default="#f9f9f9" value="#eeeeee"/>
<Variable name="post.footer.border.color" description="Shadow Color" type="color" default="#eeeeee" value="#eeeeee"/>
</Group>
<Group description="Gadgets" selector="h2">
<Variable name="widget.title.font" description="Title Font" type="font"
default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 11px 'Trebuchet MS',Trebuchet,Verdana,sans-serif"/>
<Variable name="widget.title.text.color" description="Title Color" type="color" default="#000000" value="#000000"/>
<Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#999999" value="#999999"/>
</Group>
<Group description="Images" selector=".main-inner">
<Variable name="image.background.color" description="Background Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="image.border.color" description="Border Color" type="color" default="#eeeeee" value="#eeeeee"/>
<Variable name="image.text.color" description="Caption Text Color" type="color" default="$(body.text.color)" value="$(body.text.color)"/>
</Group>
<Group description="Accents" selector=".content-inner">
<Variable name="body.rule.color" description="Separator Line Color" type="color" default="#eeeeee" value="transparent"/>
<Variable name="tabs.border.color" description="Tabs Border Color" type="color" default="$(body.rule.color)" value="#dddddd"/>
</Group>
<Variable name="body.background" description="Body Background" type="background"
color="$(body.background.color)" default="$(color) none repeat scroll top left" value="$(color) none repeat scroll top left"/>
<Variable name="body.background.override" description="Body Background Override" type="string" default="" value=""/>
<Variable name="body.background.gradient.cap" description="Body Gradient Cap" type="url"
default="url(//www.blogblog.com/1kt/simple/gradients_light.png)" value="none"/>
<Variable name="body.background.gradient.tile" description="Body Gradient Tile" type="url"
default="url(//www.blogblog.com/1kt/simple/body_gradient_tile_light.png)" value="none"/>
<Variable name="content.background.color.selector" description="Content Background Color Selector" type="string" default=".content-inner" value=".content-inner"/>
<Variable name="content.padding" description="Content Padding" type="length" default="10px" value="10px"/>
<Variable name="content.padding.horizontal" description="Content Horizontal Padding" type="length" default="$(content.padding)" value="40px"/>
<Variable name="content.shadow.spread" description="Content Shadow Spread" type="length" default="40px" value="0"/>
<Variable name="content.shadow.spread.webkit" description="Content Shadow Spread (WebKit)" type="length" default="5px" value="0"/>
<Variable name="content.shadow.spread.ie" description="Content Shadow Spread (IE)" type="length" default="10px" value="0"/>
<Variable name="main.border.width" description="Main Border Width" type="length" default="0" value="0"/>
<Variable name="header.background.gradient" description="Header Gradient" type="url" default="none" value="none"/>
<Variable name="header.shadow.offset.left" description="Header Shadow Offset Left" type="length" default="-1px" value="0"/>
<Variable name="header.shadow.offset.top" description="Header Shadow Offset Top" type="length" default="-1px" value="0"/>
<Variable name="header.shadow.spread" description="Header Shadow Spread" type="length" default="1px" value="0"/>
<Variable name="header.padding" description="Header Padding" type="length" default="30px" value="0"/>
<Variable name="header.border.size" description="Header Border Size" type="length" default="1px" value="1px"/>
<Variable name="header.bottom.border.size" description="Header Bottom Border Size" type="length" default="$(header.border.size)" value="0"/>
<Variable name="header.border.horizontalsize" description="Header Horizontal Border Size" type="length" default="0" value="1px"/>
<Variable name="description.text.size" description="Description Text Size" type="string" default="140%" value="18px"/>
<Variable name="tabs.margin.top" description="Tabs Margin Top" type="length" default="0" value="0"/>
<Variable name="tabs.margin.side" description="Tabs Side Margin" type="length" default="30px" value="30px"/>
<Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url"
default="url(//www.blogblog.com/1kt/simple/gradients_light.png)" value="none"/>
<Variable name="tabs.border.width" description="Tabs Border Width" type="length" default="1px" value="1px"/>
<Variable name="tabs.bevel.border.width" description="Tabs Bevel Border Width" type="length" default="1px" value="1px"/>
<Variable name="date.header.padding" description="Date Header Padding" type="string" default="inherit" value="0.4em"/>
<Variable name="date.header.letterspacing" description="Date Header Letter Spacing" type="string" default="inherit" value="3px"/>
<Variable name="date.header.margin" description="Date Header Margin" type="string" default="inherit" value="inherit"/>
<Variable name="post.margin.bottom" description="Post Bottom Margin" type="length" default="25px" value="45px"/>
<Variable name="image.border.small.size" description="Image Border Small Size" type="length" default="2px" value="2px"/>
<Variable name="image.border.large.size" description="Image Border Large Size" type="length" default="5px" value="5px"/>
<Variable name="page.width.selector" description="Page Width Selector" type="string" default=".region-inner" value=".region-inner"/>
<Variable name="page.width" description="Page Width" type="string" default="auto" value="auto"/>
<Variable name="main.section.margin" description="Main Section Margin" type="length" default="15px" value="1em"/>
<Variable name="main.padding" description="Main Padding" type="length" default="15px" value="0"/>
<Variable name="main.padding.top" description="Main Padding Top" type="length" default="30px" value="35px"/>
<Variable name="main.padding.bottom" description="Main Padding Bottom" type="length" default="30px" value="65px"/>
<Variable name="paging.background"
color="$(content.background.color)"
description="Background of blog paging area" type="background"
default="transparent none no-repeat scroll top center" value="transparent url(//www.blogblog.com/1kt/simple/paging_dot.png) repeat-x scroll top center"/>
<Variable name="footer.bevel" description="Bevel border length of footer" type="length" default="0" value="1px"/>
<Variable name="mobile.background.overlay" description="Mobile Background Overlay" type="string"
default="transparent none repeat scroll top left" value="transparent none repeat scroll top left"/>
<Variable name="mobile.background.size" description="Mobile Background Size" type="string" default="auto" value="auto"/>
<Variable name="mobile.button.color" description="Mobile Button Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left" value="left"/>
<Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"/>
*/
/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
html body $(page.width.selector) {
min-width: 0;
max-width: 100%;
width: $(page.width);
}
a:link {
text-decoration:none;
color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:underline;
color: $(link.hover.color);
}
.body-fauxcolumn-outer .fauxcolumn-inner {
background: transparent $(body.background.gradient.tile) repeat scroll top left;
_background-image: none;
}
.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;
height: 400px;
width: 100%;
background: $(body.background);
$(body.background.override)
}
.body-fauxcolumn-outer .cap-top .cap-left {
width: 100%;
background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
_background-image: none;
}
.content-outer {
-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
margin-bottom: 1px;
}
.content-inner {
padding: $(content.padding) $(content.padding.horizontal);
}
$(content.background.color.selector) {
background-color: $(content.background.color);
}
/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1 a {
color: $(header.text.color);
}
.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}
.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}
.header-inner .Header .descriptionwrapper {
padding: 0 $(header.padding);
}
/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}
.tabs-inner .section:first-child ul {
margin-top: -$(header.border.size);
border-top: $(header.border.size) solid $(tabs.border.color);
border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}
.tabs-inner .widget ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: $(tabs.border.width) solid $(tabs.border.color);
margin-top: $(tabs.margin.top);
margin-left: -$(tabs.margin.side);
margin-right: -$(tabs.margin.side);
}
.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: $(tabs.font);
color: $(tabs.text.color);
border-$startSide: $(tabs.border.width) solid $(content.background.color);
border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}
.tabs-inner .widget li:first-child a {
border-$startSide: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: $(tabs.selected.text.color);
background-color: $(tabs.selected.background.color);
text-decoration: none;
}
/* Columns
----------------------------------------------- */
.main-outer {
border-top: $(main.border.width) solid $(body.rule.color);
}
.fauxcolumn-left-outer .fauxcolumn-inner {
border-right: 1px solid $(body.rule.color);
}
.fauxcolumn-right-outer .fauxcolumn-inner {
border-left: 1px solid $(body.rule.color);
}
/* Headings
----------------------------------------------- */
h2 {
margin: 0 0 1em 0;
font: $(widget.title.font);
color: $(widget.title.text.color);
}
/* Widgets
----------------------------------------------- */
.widget .zippy {
color: $(widget.alternate.text.color);
text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
}
.widget .popular-posts ul {
list-style: none;
}
/* Posts
----------------------------------------------- */
.date-header span {
background-color: $(date.header.background.color);
color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
}
.main-inner {
padding-top: $(main.padding.top);
padding-bottom: $(main.padding.bottom);
}
.main-inner .column-center-inner {
padding: 0 $(main.padding);
}
.main-inner .column-center-inner .section {
margin: 0 $(main.section.margin);
}
.post {
margin: 0 0 $(post.margin.bottom) 0;
}
h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}
.post-body .tr-caption-container {
color: $(image.text.color);
}
.post-body .tr-caption-container img {
padding: 0;
background: transparent;
border: none;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}
.post-header {
margin: 0 0 1.5em;
line-height: 1.6;
font-size: 90%;
}
.post-footer {
margin: 20px -2px 0;
padding: 5px 10px;
color: $(post.footer.text.color);
background-color: $(post.footer.background.color);
border-bottom: 1px solid $(post.footer.border.color);
line-height: 1.6;
font-size: 90%;
}
#comments .comment-author {
padding-top: 1.5em;
border-top: 1px solid $(body.rule.color);
background-position: 0 1.5em;
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
.avatar-image-container {
margin: .2em 0 0;
}
#comments .avatar-image-container img {
border: 1px solid $(image.border.color);
}
/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
.comments .comments-content .loadmore a {
border-top: 1px solid $(widget.alternate.text.color);
border-bottom: 1px solid $(widget.alternate.text.color);
}
.comments .comment-thread.inline-thread {
background-color: $(post.footer.background.color);
}
.comments .continue {
border-top: 2px solid $(widget.alternate.text.color);
}
/* Accents
---------------------------------------------- */
.section-columns td.columns-cell {
border-$startSide: 1px solid $(body.rule.color);
}
.blog-pager {
background: $(paging.background);
}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: $(content.background.color);
padding: 5px;
}
.footer-outer {
border-top: $(footer.bevel) dashed #bbbbbb;
}
/* Mobile
----------------------------------------------- */
body.mobile {
background-size: $(mobile.background.size);
}
.mobile .body-fauxcolumn-outer {
background: $(mobile.background.overlay);
}
.mobile .body-fauxcolumn-outer .cap-top {
background-size: 100% auto;
}
.mobile .content-outer {
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
box-shadow: 0 0 3px rgba(0, 0, 0, .15);
}
body.mobile .AdSense {
margin: 0 -$(content.shadow.spread);
}
.mobile .tabs-inner .widget ul {
margin-left: 0;
margin-right: 0;
}
.mobile .post {
margin: 0;
}
.mobile .main-inner .column-center-inner .section {
margin: 0;
}
.mobile .date-header span {
padding: 0.1em 10px;
margin: 0 -10px;
}
.mobile h3.post-title {
margin: 0;
}
.mobile .blog-pager {
background: transparent none no-repeat scroll top center;
}
.mobile .footer-outer {
border-top: none;
}
.mobile .main-inner, .mobile .footer-inner {
background-color: $(content.background.color);
}
.mobile-index-contents {
color: $(body.text.color);
}
.mobile-link-button {
background-color: $(link.color);
}
.mobile-link-button a:link, .mobile-link-button a:visited {
color: $(mobile.button.color);
}
.mobile .tabs-inner .section:first-child {
border-top: none;
}
.mobile .tabs-inner .PageList .widget-content {
background-color: $(tabs.selected.background.color);
color: $(tabs.selected.text.color);
border-top: $(tabs.border.width) solid $(tabs.border.color);
border-bottom: $(tabs.border.width) solid $(tabs.border.color);
}
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
border-$startSide: 1px solid $(tabs.border.color);
}
]]></b:skin>
<b:template-skin>
<b:variable default='960px' name='content.width' type='length' value='960px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
<b:variable default='310px' name='main.column.right.width' type='length' value='310px'/>
<![CDATA[
body {
min-width: $(content.width);
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}
.main-inner .columns {
padding-left: $(main.column.left.width);
padding-right: $(main.column.right.width);
}
.main-inner .fauxcolumn-center-outer {
left: $(main.column.left.width);
right: $(main.column.right.width);
/* IE6 does not respect left and right together */
_width: expression(this.parentNode.offsetWidth -
parseInt("$(main.column.left.width)") -
parseInt("$(main.column.right.width)") + 'px');
}
.main-inner .fauxcolumn-left-outer {
width: $(main.column.left.width);
}
.main-inner .fauxcolumn-right-outer {
width: $(main.column.right.width);
}
.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}
.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
}
#layout {
min-width: 0;
}
#layout .content-outer {
min-width: 0;
width: 800px;
}
#layout .region-inner {
min-width: 0;
width: auto;
}
]]>
</b:template-skin>
<b:include data='blog' name='google-analytics'/>
</head>
<body>
<div class='navbar section' id='navbar'><div class='widget Navbar' id='Navbar1'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener('load',
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<div id="navbar-iframe-container"></div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
if (gapi.iframes gapi.iframes.getContext) {
gapi.iframes.getContext().openChild({
url: 'https://www.blogger.com/navbar.g?targetBlogID\75992226187759619576\46blogName\759lessons+Programming+Blog\46publishMode\75PUBLISH_MODE_HOSTED\46navbarType\75BLUE\46layoutType\75LAYOUTS\46searchRoot\75http://www.9lessons.info/search\46blogLocale\75en\46v\0752\46homepageUrl\75http://www.9lessons.info/\46blogFollowUrl\75https://plus.google.com/104100007347037324968\46vt\75-1790904038947021582',
where: document.getElementById("navbar-iframe-container"),
id: "navbar-iframe"
});
}
});
</script><script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
</div></div>
<div id='top-header'>
<div id='egglabs-header'>
<table style='width:100%'>
<tr><td style='width:220px'>
<a href='/' title='9lessons Programming Blog'><img alt='9lessons programming blog ' class='logoimg' src='https://lh5.googleusercontent.com/-9eQUIhjNafM/U5-vAp9bDMI/AAAAAAAAKrs/ksHFcrGbKIc/s230/9lessonsLogo.png'/></a>
</td>
<td class='countsocial' style='vertical-align:text-bottom;'>
<div class='logosocial'>
<span class='gap'><g:plusone href='http://www.9lessons.info' size='medium'></g:plusone></span><span class='gap'><a class='twitter-share-button' data-count='horizontal' data-text='9lessons Programming Blog' data-url='http://www.9lessons.info' data-via='9lessons' href='http://twitter.com/share'></a></span><span class='gap'>
</span>
</div>
</td>
<td>
<div class='searchgoogletop'>
<div class='search_google'>
<div id='cse-search-form'><img alt='Loading Search' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4US5lRvdMA1-fdoqILCA0pHOuA5SsNR4yY1XTTtns0HPxu4LQQ9xfArnKTx_g8OddQg8hVvwrax5QyApe3rFSSUZDnicRrK4qlfg44HugN4zTsuOZCnsHgfv2h6oYkEWtQKuEeogcRsuW/'/></div>
</div>
</div>
<span class='fbtopbutton'>
<a href='#fbinvites' onclick='FacebookInviteFriends();' title='Invite Your Facebook Friends'>
<img alt='9lessons Bring Friends' src='https://lh3.googleusercontent.com/-ESoug2foJBs/T-ntmH-Vs3I/AAAAAAAAGIM/FUQoD54w1oQ/s267/bringfriends.png' style='border:0px'/></a>
</span>
</td>
</tr>
</table>
</div>
<div class='menu'>
<div style='margin:0 auto; width:1000px;height: 2.5em;'>
<ul class='menu'>
<li><a class='home' href='http://www.9lessons.info/2008/08/table-of-contents.html' onclick='ga('send', 'event', 'Tutorials', 'click','Tutorials');' title='Tutorials'>Tutorials</a></li>
<li><a href='http://www.9lessons.info/2008/08/jquery-ajax-and-php-projects-9lessons.html' onclick='ga('send', 'event', 'Projects', 'click','Tutorials');' title='Projects'>
Projects</a></li>
<li><a href='http://www.9lessons.info/search/label/jQuery?max-results=14' onclick='ga('send', 'event', 'Jquery', 'click','Jquery');' title='Jquery Tutorials demos'>JQUERY</a></li>
<li><a href='http://www.9lessons.info/search/label/Facebook?max-results=14' onclick='ga('send', 'event', 'Facebook', 'click','Facebook');' title='Facebook like Tutorials'>Facebook Tutorials</a></li>
<li><a href='http://www.9lessons.info/2008/08/most-popular-articles.html' onclick='ga('send', 'event', 'Popular', 'click','Popular');' title='Most Popular Tutorials'>Popular</a></li>
<li><a href='http://demos.9lessons.info/' onclick='ga('send', 'event', 'Demos', 'click','Demos');' title='Demos'>Demos</a></li>
<li><a href='http://wall.9lessons.info' onclick='ga('send', 'event', 'WallScript', 'click','WallScript');' title='Facebook style wall script'>
Social Networking Script</a></li>
<li><a href='http://www.oauthlogin.com/' onclick='ga('send', 'event', 'OauthLogin', 'click','OauthLogin');' title='FGLogin'>Single Login</a></li>
<li><a href='http://labs.9lessons.info/' onclick='ga('send', 'event', 'Labs', 'click','Labs');' title='9lessons Labs'>Labs</a></li>
<li><a href='http://news.9lessons.info/' onclick='ga('send', 'event', 'TechNews', 'click','Tech News');' title='Tech News'>Tech News</a></li>
<li><a href='http://www.9lessons.info/p/request-tutorials-here.html' onclick='ga('send', 'event', 'Request Tutorials', 'click','Request Tutorials');' title='Request Tutorial'>Request Tutorial</a></li>
</ul>
</div>
</div>
<div class='menu-subvert'>
<div class='menu-ads'>
<div class='section' id='addsections3'><div class='widget AdSense' id='AdSense2'>
<div class='widget-content'>
<script type="text/javascript"><!--
google_ad_client="pub-6904774409601870";
google_ad_host="pub-1556223355139109";
google_ad_width=728;
google_ad_height=15;
google_ad_format="728x15_0ads_al_s";
google_ad_host_channel="0001+S0020+L0006";
google_color_border="325B6D";
google_color_bg="325B6D";
google_color_link="FFFFFF";
google_color_url="008000";
google_color_text="000000";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=992226187759619576&widgetType=AdSense&widgetId=AdSense2&action=editWidget§ionId=addsections3' onclick='return _WidgetManager._PopupConfig(document.getElementById("AdSense2"));' target='configAdSense2' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div>
</div></div>
</div>
</div>
</div>
<div id='container'>
<div class='topbannerad'>
<div class='section' id='addsectionsTopperHead'><div class='widget HTML' id='HTML6'>
<div class='widget-content'>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 9lessons_addsectionsFooter_AdSense1_728x90_as -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-6904774409601870"
data-ad-slot="6753952039"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=992226187759619576&widgetType=HTML&widgetId=HTML6&action=editWidget§ionId=addsectionsTopperHead' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML6"));' target='configHTML6' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div></div>
</div>
<table class='fixed_table' style='width:100%'>
<tr>
<td valign='top'>
<div style='margin-top:10px'>
<div id='follow_text'>Follow Me:</div>
<div id='facebook_follow'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/subscribe.php?href=https%3A%2F%2Fwww.facebook.com%2Fsrinivas.tamada&layout=button_count&show_faces=true&colorscheme=light&font&width=200&appId=223109594375281' style='border:none; overflow:hidden; width:150px;height:25px;margin-top:5px'></iframe>
</div>
<div id='twitter_follow'>
<a class='twitter-follow-button' data-show-count='true' data-width='256px' href='http://twitter.com/9lessons'>Follow @9lessons</a>
</div>
<div style='clear:both'></div>
</div>
<div id='main_left'>
<!-- Google ads -->
<div class='googleadsbig'>
<!-- Google Custom Search Element -->
<div id='cse'></div>
</div>
<div class='spacer'></div>
<div class='section' id='main_s'><div class='widget Blog' id='Blog1'>
<div class='blog-posts hfeed' itemscope='' itemtype='http://schema.org/Blog'>
<!-- google_ad_section_start -->
<div class='date-header date updated' itemprop='dateCreated'>
Wednesday, July 16, 2014
</div>
<div class='post hentry'>
<a name='7201128010428886438'></a>
<h2 itemprop='name'><a href='http://www.9lessons.info/2014/07/google-blogger-404-page-redirection.html'>
Google Blogger 404 Page Redirection
</a></h2>
<div class='socialicons'>
<div class='comment'>
{
<b><a class='comment-link' href='http://www.9lessons.info/2014/07/google-blogger-404-page-redirection.html#comment-form' onclick=''>
10
</a></b>
comments
}</div>
<div class='socialspace'>
<script data-counter='right' data-url='http://www.9lessons.info/2014/07/google-blogger-404-page-redirection.html' type='in/share'></script>
</div>
<div class='socialspace'>
<div class='g-plus' data-action='share' data-annotation='bubble' data-href='http://www.9lessons.info/2014/07/google-blogger-404-page-redirection.html'></div>
</div>
<div class='socialspace'>
<a class='twitter-share-button' data-count='horizontal' data-text='Google Blogger 404 Page Redirection ' data-url='http://www.9lessons.info/2014/07/google-blogger-404-page-redirection.html' data-via='9lessons' href='http://twitter.com/share'></a>
</div>
</div>
<div class='spacer'></div>
<div class='post-body-n'>
<span class='tweet'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http://www.9lessons.info/2014/07/google-blogger-404-page-redirection.html&layout=box_count&show_faces=false&width=450&action=like&colorscheme=light' style='border:none; overflow:hidden; width:60px; height:70px'></iframe>
</span>
<div class="bigInt" itemprop="description">If you are using Google blogger you must setup 404 page redirections, if not this will affect your organic search results. I am using blogger since 2009 for 9lessons.info and I am not paying any hosting charges till today, I suggest everyone should start a blog with blogger. This post will explain you how to setup a blogger 404 redirection page in a simple way, now you can try here with wrong URLs. </div><br>
<div class="cen"><img alt="Google Blogger 404 Page Redirection" class="sri" itemprop="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0i94n6dbaMZlh9KWYF6BwFtusdrExYWPW65B8cv6uc8KkGEgGLyVxQfdNZu6mzHECyBz_hhnPGfrr5zu6y6BrVxxL3Ck5Iy78bfJX6JoY3QH8f2NWzKTdAkebQp5V8swcHdj5GOqBbibL/s550/Blogger404.png"></div><br>
<div class='clearboth'></div>
</div>
</div>
<div class='date-header date updated' itemprop='dateCreated'>
Wednesday, July 9, 2014
</div>
<div class='post hentry'>
<a name='4257930952560885304'></a>
<h2 itemprop='name'><a href='http://www.9lessons.info/2014/07/ajax-php-login-page.html'>
Ajax PHP Login Page with Shake Animation Effect.
</a></h2>
<div class='socialicons'>
<div class='comment'>
{
<b><a class='comment-link' href='http://www.9lessons.info/2014/07/ajax-php-login-page.html#comment-form' onclick=''>
12
</a></b>
comments
}</div>
<div class='socialspace'>
<script data-counter='right' data-url='http://www.9lessons.info/2014/07/ajax-php-login-page.html' type='in/share'></script>
</div>
<div class='socialspace'>
<div class='g-plus' data-action='share' data-annotation='bubble' data-href='http://www.9lessons.info/2014/07/ajax-php-login-page.html'></div>
</div>
<div class='socialspace'>
<a class='twitter-share-button' data-count='horizontal' data-text='Ajax PHP Login Page with Shake Animation Effect. ' data-url='http://www.9lessons.info/2014/07/ajax-php-login-page.html' data-via='9lessons' href='http://twitter.com/share'></a>
</div>
</div>
<div class='spacer'></div>
<div class='post-body-n'>
<span class='tweet'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http://www.9lessons.info/2014/07/ajax-php-login-page.html&layout=box_count&show_faces=false&width=450&action=like&colorscheme=light' style='border:none; overflow:hidden; width:60px; height:70px'></iframe>
</span>
<div class="bigInt" itemprop="description">I received few tutorial requests from my readers that asked to me how to create Ajax PHP login script, in this post I want to discuss how to create a simple Ajax PHP login with welcome page using MySQL database. This will explain you creating user tables, posting form values and storing and destroying the session values. If you are a PHP beginner take a quick look at this live demo with Username: <i>9lessons</i> Password: <i>9lessons</i>. This post has been updated with mysqli. </div><br>
<div class="cen"><img alt="Ajax PHP Login Page " class="sri" itemprop="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxjKhaGzMGUhwgNVA8_5sAZfQyPa2KG7x5AuPzu8Ffdc0HkEuy1ZKzhKCybLyZPA5mXGCAb0AkbBv9mh1zdxQKrqFUKf0KqAOoihJkfWtJviPy5aCLDd_wKxgcSkV1LkvOfnIHSiO16vZq/s550/phplogin.png"></div><br>
<div class='clearboth'></div>
</div>
</div>
<div class='date-header date updated' itemprop='dateCreated'>
Monday, June 30, 2014
</div>
<div class='post hentry'>
<a name='8379825852754939095'></a>
<h2 itemprop='name'><a href='http://www.9lessons.info/2014/06/timeline-design-css-jquery.html'>
Timeline Design using CSS and Jquery
</a></h2>
<div class='socialicons'>
<div class='comment'>
{
<b><a class='comment-link' href='http://www.9lessons.info/2014/06/timeline-design-css-jquery.html#comment-form' onclick=''>
14
</a></b>
comments
}</div>
<div class='socialspace'>
<script data-counter='right' data-url='http://www.9lessons.info/2014/06/timeline-design-css-jquery.html' type='in/share'></script>
</div>
<div class='socialspace'>
<div class='g-plus' data-action='share' data-annotation='bubble' data-href='http://www.9lessons.info/2014/06/timeline-design-css-jquery.html'></div>
</div>
<div class='socialspace'>
<a class='twitter-share-button' data-count='horizontal' data-text='Timeline Design using CSS and Jquery' data-url='http://www.9lessons.info/2014/06/timeline-design-css-jquery.html' data-via='9lessons' href='http://twitter.com/share'></a>
</div>
</div>
<div class='spacer'></div>
<div class='post-body-n'>
<span class='tweet'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http://www.9lessons.info/2014/06/timeline-design-css-jquery.html&layout=box_count&show_faces=false&width=450&action=like&colorscheme=light' style='border:none; overflow:hidden; width:60px; height:70px'></iframe>
</span>
<div class="bigInt" itemprop="description">
Timeline design is the current web trend that visualizes the data in an interesting way. Today I want to discuss about how to design a timeline in a simple way with JSON data feed , that using CSS pseudo elements such as <i>:before</i> and <i>:after</i>. Pseudo elements are used to apply special effects to selectors. This post is a combination of my previous post, please take a quick look at this demo and try demo script with your WAMP server. </div>
<br>
<div class="cen">
<img alt="Timeline Design CSS and Jquery" class="sri" itemprop="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfCiNsO4zIUQIUXxQdikHrVcbYCNrBFyyIaDAd35qO_IIV3ZzahUYNCogruyEsql4Lc7cjd8hdEKaCu79vGRmypEQtp29VubWnFFNt6lnidYjRlKEQW3fGnrMvtAXBHHDjFVqZONgG5cJP/s550/csstimeline.png"></div>
<br>
<div class='clearboth'></div>
</div>
</div>
<div class='date-header date updated' itemprop='dateCreated'>
Tuesday, June 17, 2014
</div>
<div class='post hentry'>
<a name='958975153424821238'></a>
<h2 itemprop='name'><a href='http://www.9lessons.info/2014/06/css3-animation-effects-with-keyframes.html'>
CSS3 Animation Effects with Keyframes
</a></h2>
<div class='socialicons'>
<div class='comment'>
{
<b><a class='comment-link' href='http://www.9lessons.info/2014/06/css3-animation-effects-with-keyframes.html#comment-form' onclick=''>
19
</a></b>
comments
}</div>
<div class='socialspace'>
<script data-counter='right' data-url='http://www.9lessons.info/2014/06/css3-animation-effects-with-keyframes.html' type='in/share'></script>
</div>
<div class='socialspace'>
<div class='g-plus' data-action='share' data-annotation='bubble' data-href='http://www.9lessons.info/2014/06/css3-animation-effects-with-keyframes.html'></div>
</div>
<div class='socialspace'>
<a class='twitter-share-button' data-count='horizontal' data-text='CSS3 Animation Effects with Keyframes' data-url='http://www.9lessons.info/2014/06/css3-animation-effects-with-keyframes.html' data-via='9lessons' href='http://twitter.com/share'></a>
</div>
</div>
<div class='spacer'></div>
<div class='post-body-n'>
<span class='tweet'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http://www.9lessons.info/2014/06/css3-animation-effects-with-keyframes.html&layout=box_count&show_faces=false&width=450&action=like&colorscheme=light' style='border:none; overflow:hidden; width:60px; height:70px'></iframe>
</span>
<div class="bigInt" itemprop="description">Using CSS3 keyframe property, you can create cool animation effects without using any JavaScript frameworks, CSS3 & HTML5 is helping to solve many web problems in a simple way. In this article I want to discuss how to implement CSS3 animations in a better way, use these and enrich your web projects. Take a quick look at these demos and try all these with modern browsers like Chrome, Firefox and Safari, sure you will love these effects. </div><br>
<div class="cen"><img alt="CSS3 Animation Effects with Keyframes" class="sri" itemprop="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsUCa3vdyDqyIyHpaC8wi6YnLSDZYvfqOL2lQCFmV3FEjgyQSrJGbhxwA9lVR8PAkUMIsRYUso43n6fThvk62WbLMtNpIr1VrRMMoMmwQz5wP7Ogtr3MRnRcocLg9KWNuOm_kswO-n4DCU/s550/css3.png"></div><br>
<div class='clearboth'></div>
</div>
</div>
<div class='date-header date updated' itemprop='dateCreated'>
</div>
<div class='post hentry'>
<a name='3965255023441589181'></a>
<h2 itemprop='name'><a href='http://www.9lessons.info/2014/06/filegator-look-into-powerful-php-file.html'>
FileGator: A Look into The Powerful PHP File Management Tool.
</a></h2>
<div class='socialicons'>
<div class='comment'>
{
<b><a class='comment-link' href='http://www.9lessons.info/2014/06/filegator-look-into-powerful-php-file.html#comment-form' onclick=''>
1
</a></b>
comments
}</div>
<div class='socialspace'>
<script data-counter='right' data-url='http://www.9lessons.info/2014/06/filegator-look-into-powerful-php-file.html' type='in/share'></script>
</div>
<div class='socialspace'>
<div class='g-plus' data-action='share' data-annotation='bubble' data-href='http://www.9lessons.info/2014/06/filegator-look-into-powerful-php-file.html'></div>
</div>
<div class='socialspace'>
<a class='twitter-share-button' data-count='horizontal' data-text='FileGator: A Look into The Powerful PHP File Management Tool. ' data-url='http://www.9lessons.info/2014/06/filegator-look-into-powerful-php-file.html' data-via='9lessons' href='http://twitter.com/share'></a>
</div>
</div>
<div class='spacer'></div>
<div class='post-body-n'>
<span class='tweet'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http://www.9lessons.info/2014/06/filegator-look-into-powerful-php-file.html&layout=box_count&show_faces=false&width=450&action=like&colorscheme=light' style='border:none; overflow:hidden; width:60px; height:70px'></iframe>
</span>
<div class="bigInt">Forget the times of ‘There’s an app for that’, PHP scripts are now all the rage! Everyone wants to build their own little something special on the internet and mark their territory. With what we are witnessing on the internet front has been pretty moving and compelling enough to push us to try a few things ourselves. Thinking of file-sharing service for your friends, family, colleagues or business partners with all your rules? ‘There’s a script for that’!</div><br>
<div class='clearboth'></div>
</div>
</div>
<div class='date-header date updated' itemprop='dateCreated'>
Tuesday, June 10, 2014
</div>
<div class='post hentry'>
<a name='8977280608574630539'></a>
<h2 itemprop='name'><a href='http://www.9lessons.info/2014/06/web-pdf-viewer.html'>
Web PDF Viewer for Monetization.
</a></h2>
<div class='socialicons'>
<div class='comment'>
{
<b><a class='comment-link' href='http://www.9lessons.info/2014/06/web-pdf-viewer.html#comment-form' onclick=''>
27
</a></b>
comments
}</div>
<div class='socialspace'>
<script data-counter='right' data-url='http://www.9lessons.info/2014/06/web-pdf-viewer.html' type='in/share'></script>
</div>
<div class='socialspace'>
<div class='g-plus' data-action='share' data-annotation='bubble' data-href='http://www.9lessons.info/2014/06/web-pdf-viewer.html'></div>
</div>
<div class='socialspace'>
<a class='twitter-share-button' data-count='horizontal' data-text='Web PDF Viewer for Monetization. ' data-url='http://www.9lessons.info/2014/06/web-pdf-viewer.html' data-via='9lessons' href='http://twitter.com/share'></a>
</div>
</div>
<div class='spacer'></div>
<div class='post-body-n'>
<span class='tweet'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http://www.9lessons.info/2014/06/web-pdf-viewer.html&layout=box_count&show_faces=false&width=450&action=like&colorscheme=light' style='border:none; overflow:hidden; width:60px; height:70px'></iframe>
</span>
<div class="bigInt" itemprop="description">Are you working for eLearning projects? then you should know about Mozilla has launched PDF.js a web PDF viewer plugin. This plugin helps you to display PDF files inside HTML code. I did customized PDF.js prebuild structure for easy usage. Take a quick look at this post and it will explain you how to configure, tracking reports(Google Analytics) and monetize your PDF content with HTML page. </div><br>
<div class="cen"><img alt="Twitter OAuth Status Update using PHP. " class="sri" itemprop="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgai25BG8IXQicOXqrATSu2zUOCqnqmiiPWiz1NOv93CYA2dZk71lInqs1KjR_l4O7L3VgGdvqPdL8BwqJ5hPCTw3JIC2A-XUaQg7A67YYxdgUpnoNkzUzl-7L0FnoE-UDShO18E0UMurZq/s550/pdfjs.png"></div><br>
<div class='clearboth'></div>
</div>
</div>
<div class='date-header date updated' itemprop='dateCreated'>
Thursday, May 29, 2014
</div>
<div class='post hentry'>
<a name='105771446276389814'></a>
<h2 itemprop='name'><a href='http://www.9lessons.info/2014/05/seo-for-blogging.html'>
SEO for Blogging
</a></h2>
<div class='socialicons'>
<div class='comment'>
{
<b><a class='comment-link' href='http://www.9lessons.info/2014/05/seo-for-blogging.html#comment-form' onclick=''>
22
</a></b>
comments
}</div>
<div class='socialspace'>
<script data-counter='right' data-url='http://www.9lessons.info/2014/05/seo-for-blogging.html' type='in/share'></script>
</div>
<div class='socialspace'>
<div class='g-plus' data-action='share' data-annotation='bubble' data-href='http://www.9lessons.info/2014/05/seo-for-blogging.html'></div>
</div>
<div class='socialspace'>
<a class='twitter-share-button' data-count='horizontal' data-text='SEO for Blogging ' data-url='http://www.9lessons.info/2014/05/seo-for-blogging.html' data-via='9lessons' href='http://twitter.com/share'></a>
</div>
</div>
<div class='spacer'></div>
<div class='post-body-n'>
<span class='tweet'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http://www.9lessons.info/2014/05/seo-for-blogging.html&layout=box_count&show_faces=false&width=450&action=like&colorscheme=light' style='border:none; overflow:hidden; width:60px; height:70px'></iframe>
</span>
<div class="bigInt" itemprop="description">Search Engine Optimization is the most common term in the web industry, this system helps you to increase your websites organic traffic. Many are already discussed about topic, but I have been following few different ways for organic traffic. Take a look at the following steps I did shared all my blog SEO standards and implement these , sure you will improve your blog Google search results. </div><br>
<div class="cen"><img alt="SEO for Blogging . " class="sri" itemprop="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaH4dWiohTkm92JoKFlEeMx-Dp6zpli8GUFLMR9IyZKb9_ubY-9pAp35pkuKTNacBcRt7orY6iARut0Vgf2uU2paXvy-H45gPvvx5x3FlJCq9AIOiipwQxOyqcj2BRq9usR1HdJMlhiB5m/s550/blogSEO.png"></div><br>
<div class='clearboth'></div>
</div>
</div>
<!-- google_ad_section_end -->
</div>
<div class='blog-pager' id='blog-pager'>
<a class='blog-pager-older-link' href='http://www.9lessons.info/search?updated-max=2014-05-29T00:42:00%2B05:30&max-results=7' id='Blog1_blog-pager-older-link' title='Older Posts'>
Older Posts
</a>
</div>
<div class='clear'></div>
</div></div>
</div></td>
<td id='sideside'>
<div class='side_box'><div class='section-links' id='aboutme'><img alt='Srinivas Tamada' class='face' src='https://lh5.googleusercontent.com/-1pk4tCJjoxc/U5T1p4axWTI/AAAAAAAAKnk/KHSEvXys5PE/s90/SrinivasTamada.jpg' title='Srinivas Tamada'/>
<span class='vcard author'><a class='nametitle fn' href='https://plus.google.com/104100007347037324968?rel=author' itemprop='author' rel='author me'>Srinivas Tamada</a></span><br/>
Entrepreneur, Blogger, Thinker <br/> I love the WEB - INDIAN<br/>Invented <a href='http://wall.9lessons.info' style='color:#006699;'>The WALL SCRIPT</a><br/>Lives in Atlanta - United States<br/>
<a href='mailto:srinivas@9lessons.info' style='text-decoration:none; color:#006699;font-size:12px'>srinivas [at] 9lessons.info</a>
<a href='http://www.9lessons.info/p/about.html' rel='author' style='color:#f2f2f2;display:none' title='Srinivas Tamada'>more</a>
<div style='margin-top:-111px;height:32px;position: absolute;margin-left: 284px;margin-top:'>
<a class='profile_facebook profile_social profile_left' href='http://www.facebook.com/srinivas.tamada' rel='nofollow' style='display:none' target='_blank'></a>
<a class='profile_gplus profile_social profile_left' href='https://plus.google.com/+SrinivasTamada' rel='nofollow' target='_blank'></a>
<a class='profile_twitter profile_social profile_left' href='http://www.twitter.com/9lessons' rel='nofollow' target='_blank'></a>
<a class='profile_tumblr profile_social profile_left' href='http://www.srinivastamada.com' rel='nofollow' target='_blank'></a>
<a class='profile_rss profile_social profile_left' href='http://feeds2.feedburner.com/9lesson' rel='nofollow' target='_blank'></a>
<a class='profile_vimeo profile_social profile_left' href='http://www.vimeo.com/srinivas' rel='nofollow' target='_blank'></a>
<a class='profile_youtube profile_social' href='http://www.youtube.com/9lessons' rel='nofollow' target='_blank'></a>
</div>
<div style='margin-top:5px;'>
<a href='http://www.facebook.com/srinivas.tamada' onclick='ga('send', 'event', 'Sidebar', 'click','take a look');' target='_blank'><img alt='Srinivas Tamada Facebook Profile' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA5a8B5j5rFwogbHVaYDjPTnc3U8dkVxXxWdiS_9m9JN0KXTV3fLKnHK0rJqQBtityhD3gMRB60lPF0M4mGfN0npwUuds4c9UJtMDRznk8_Jn8aaDAs1jEXjTCvhE-f0mNTmY9FvaeABm3/s260/TakeMyLook.png' style='border:none'/></a>
</div>
<div style='clear:both'></div>
</div>
<div class='section-links'>
<div style='margin-bottom:6px'>
Subscribe my updates via <b>Email </b>
</div><div><form action='http://feedburner.google.com/fb/a/mailverify' method='post'><input class='feedinput' name='email' style='border:solid 1px #333333;width:170px;margin-right:4px' type='text'/><input name='uri' type='hidden' value='9lesson'/><input name='loc' type='hidden' value='en_US'/><input class='gsc-search-button' type='submit' value='Sign Up'/></form></div>
<div style='margin:0px 0px 5px 0px'>
<div style='float:left;width:90px'>
<a href='http://feeds2.feedburner.com/9lesson' title='9lessons feed'><img alt='feed' height='26' src='http://feeds2.feedburner.com/~fc/9lesson?bg=f2a0bb&fg=000000&anim=0&label=Readers' style='border:0;margin-right:10px;margin-top:6px' width='88'/></a>
</div>
</div>
<div style='clear:both'></div>
<!-- details end -->
</div>
<div class='section-links' style='padding-top:5px'>
<div class='centerclass'><div class='section' id='addsections99'></div></div>
<div style='clear:both;text-align:center'>
<div class='section' id='newadsblock'><div class='widget HTML' id='HTML8'>
<div class='widget-content'>
<div style="text-align:center" >
<a href="http://dashboard.webydo.com/landingpages/starta.aspx?&utm_source=9lessons&utm_medium=cpc&utm_content=facespoons250x250&utm_campaign=sidebarhigher" target="_blank" ><img src="https://lh6.googleusercontent.com/-d0cPzRChpkM/Ux3qHWZL8MI/AAAAAAAAJQc/jTL5U572ZTQ/s250/250_250E1%2520%25281%2529%25209less.jpg" style="border:solid 1px #333333;margin-top:5px" alt="WebyDo"/></a>
</div>
<!--
<script>
var totalCount = 4;
function myFunction()
{
var num = Math.ceil( Math.random()* totalCount );
var x=document.getElementById("banner250");
if(num%2)
{
x.innerHTML='<a href="http://themeforest.net/item/x-the-theme/5871901?ref=themeco" target="_blank" ><img src="https://lh3.googleusercontent.com/-zdGYAXEBrxk/U5i2EVhx2aI/AAAAAAAAKos/OVz90xLKoL4/s250/x.png.png" style="border:solid 1px #333333;margin-top:5px"/></a><a href="http://dashboard.webydo.com/landingpages/starta.aspx?utm_source=9lessons&utm_medium=cpc&utm_content=facespoons250x250&utm_campaign=sidebar" target="_blank" ><img src="https://lh6.googleusercontent.com/-d0cPzRChpkM/Ux3qHWZL8MI/AAAAAAAAJQc/jTL5U572ZTQ/s250/250_250E1%2520%25281%2529%25209less.jpg" style="border:solid 1px #333333;margin-top:5px" alt="WebyDo"/></a>';
}
else
{
x.innerHTML='<a href="http://dashboard.webydo.com/landingpages/starta.aspx?utm_source=9lessons&utm_medium=cpc&utm_content=facespoons250x250&utm_campaign=sidebar" target="_blank" ><img src="https://lh6.googleusercontent.com/-d0cPzRChpkM/Ux3qHWZL8MI/AAAAAAAAJQc/jTL5U572ZTQ/s250/250_250E1%2520%25281%2529%25209less.jpg" style="border:solid 1px #333333;margin-top:5px" alt="WebyDo"/></a><a href="http://themeforest.net/item/x-the-theme/5871901?ref=themeco" target="_blank" ><img src="https://lh3.googleusercontent.com/-zdGYAXEBrxk/U5i2EVhx2aI/AAAAAAAAKos/OVz90xLKoL4/s250/x.png.png" style="border:solid 1px #333333;margin-top:5px"/></a>';
}
}
//myFunction();
</script>
-->
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=992226187759619576&widgetType=HTML&widgetId=HTML8&action=editWidget§ionId=newadsblock' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML8"));' target='configHTML8' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div><div class='widget HTML' id='HTML3'>
<div class='widget-content'>
<!-- Dont Delete BuySellAds.com Ad Code -->
<script type="text/javascript">
(function(){
var bsa = document.createElement('script');
bsa.type = 'text/javascript';
bsa.async = true;
bsa.src = '//s3.buysellads.com/ac/bsa.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script>
<!-- END BuySellAds.com Ad Code -->
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=992226187759619576&widgetType=HTML&widgetId=HTML3&action=editWidget§ionId=newadsblock' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML3"));' target='configHTML3' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div></div>
</div>
<div id='buysellads_div' style='display:block;overflow:auto'>
<div class='bsarocks bsap_ce1cf9e0a1e44bafe65c4664385c08d7' id='bsap_1245205'></div>
</div>
</div>
<!-- <div class='section-links'><div> <b:section id='addsections_media'/></div></div> -->
<div class='section-links'><h3>Most Popular Posts</h3><div class='section' id='addsections7'><div class='widget PopularPosts' id='PopularPosts1'>
<div class='widget-content popular-posts'>
<ul>
<li>
<a href='http://www.9lessons.info/2011/02/login-with-facebook-and-twitter.html'>Login with Facebook and Twitter</a>
</li>
<li>
<a href='http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html'>Ajax Image Upload without Refreshing Page using Jquery.</a>
</li>
<li>
<a href='http://www.9lessons.info/2009/03/upload-and-resize-image-with-php.html'>Upload and Resize an Image with PHP</a>
</li>
<li>
<a href='http://www.9lessons.info/2009/09/php-login-page-example.html'>PHP Login Page Example.</a>
</li>
<li>
<a href='http://www.9lessons.info/2009/07/auto-load-refresh-every-10-seconds-with.html'>Auto Load and Refresh Div every 10 Seconds with jQuery.</a>
</li>
<li>
<a href='http://www.9lessons.info/2009/09/pagination-with-jquery-mysql-and-php.html'>Pagination with jQuery, MySQL and PHP.</a>
</li>
<li>
<a href='http://www.9lessons.info/2011/07/login-with-google-account.html'>Login with Google Account OpenID</a>
</li>
<li>
<a href='http://www.9lessons.info/2012/06/simple-drop-down-menu-with-jquery-and.html'>Simple Drop Down Menu with Jquery and CSS</a>
</li>
<li>
<a href='http://www.9lessons.info/2010/10/pagination-with-jquery-php-ajax-and.html'>Pagination with Jquery, PHP , Ajax and MySQL.</a>
</li>
</ul>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=992226187759619576&widgetType=PopularPosts&widgetId=PopularPosts1&action=editWidget§ionId=addsections7' onclick='return _WidgetManager._PopupConfig(document.getElementById("PopularPosts1"));' target='configPopularPosts1' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div>
</div></div></div>
<div class='section-links'><h3>Media Partner</h3>
<div class='section' id='mediaPartner'><div class='widget HTML' id='HTML4'>
<div class='widget-content'>
<div style='text-align:center'>
<a href="http://velocityconf.com/velocityny2014?cmp=mp-velocity-confreg-home-vlny14_9lessons" target="_blank"><img src="https://lh3.googleusercontent.com/-fMZYn81nnlw/U77j0jIm6-I/AAAAAAAALF0/9zOzFpS7CEQ/s256/VLNY14_9Lessons_256x125.jpg" alt="Velocity Conference"/></a>
<a href="http://www.webeedesigns.com/9les" style="margin-top:8px" target="_blank"><img src="https://lh5.googleusercontent.com/-gQrzuwZGYJc/U7wAbhIKMHI/AAAAAAAAK-k/VF88srYA5sI/s256/webee-gif%2520%25283%2529.gif" alt="Webeedesigns"/></a>
</div>
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=992226187759619576&widgetType=HTML&widgetId=HTML4&action=editWidget§ionId=mediaPartner' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML4"));' target='configHTML4' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div></div></div>
<div class='section-links' style='padding-right:7px;margin-bottom:10px'><h3>Categories</h3>
<div class='spacer'></div><div class='site-reviews' style='float:left;width:45%; '><ul><li><a href='http://www.9lessons.info/search/label/Facebook?max-results=6'><b>Facebook</b></a></li><li><a href='http://www.9lessons.info/search/label/Database?max-results=6'>Database</a></li><li><a href='http://www.9lessons.info/search/label/jQuery?max-results=6'><b>jQuery</b></a></li><li><a href='http://www.9lessons.info/search/label/google?max-results=6'>Google</a></li><li><a href='http://www.9lessons.info/2008/08/table-of-contents.html'>Tutorials</a></li><li><a href='http://www.9lessons.info/search/label/WebDesign?max-results=6'>Web Design</a></li></ul></div>
<div class='site-reviews' style='float:right;width:45%'><ul><li><a href='http://www.9lessons.info/search/label/Jsp?max-results=6'>JSP</a></li><li><a href='http://www.9lessons.info/search/label/Technology?max-results=6'>Technology</a></li><li><a href='http://www.9lessons.info/search/label/Twitter%20API?max-results=6'><b>Twitter API</b>(new)</a></li><li><a href='http://www.9lessons.info/search/label/Mysql?max-results=6'>MySQL</a></li><li><a href='http://www.9lessons.info/search/label/Ajax?max-results=6'><b>Ajax</b></a></li><li><a href='http://www.9lessons.info/2008/08/most-popular-articles.html'><b>Most Popular</b></a></li></ul></div><div class='spacer' style='height:1px'></div></div>
<div class='section-links'>
<a href='http://www.oauthlogin.com' onClick='ga('send', 'event', 'Sidebar', 'click', 'OAuth Login');'>
<img alt='Facebook and Google Login' src='https://lh6.googleusercontent.com/-qcHEDVk049I/UTOqMjMAcjI/AAAAAAAAHWI/0SkDJdch6JM/s400/OauthBanner.gif' style='border:none'/></a>
</div>
<div class='section-links'><h3>Recent Posts</h3><script src='http://feeds2.feedburner.com/9lesson?format=sigpro' type='text/javascript'></script></div>
<div class='section-links'>
<div class='section' id='addsections71'><div class='widget HTML' id='HTML5'>
<div class='widget-content'>
<div style='text-align:center'>
<a href='http://wall.9lessons.info/#videoAd' onclick='ga('send', 'event', 'Sidebar', 'click', 'Video Banner');'><img src='https://lh5.googleusercontent.com/-4GeBuaoqs64/UxtNStRDdeI/AAAAAAAAJPM/0-9s-kAURYQ/s250/WallScriptAd.png' border='0'/></a>
</div>
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=992226187759619576&widgetType=HTML&widgetId=HTML5&action=editWidget§ionId=addsections71' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML5"));' target='configHTML5' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div></div>
</div>
</div>
<div id='googleplus' style='margin-top:5px;'>
<!-- Place this tag where you want the widget to render. -->
<div class='g-person' data-href='//plus.google.com/104100007347037324968' data-rel='author'></div>
<!-- Place this tag after the last widget tag. -->
<script type='text/javascript'>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div style='margin-top:10px;'>
<div class='section' id='addsections31'><div class='widget HTML' id='HTML2'>
<div class='widget-content'>
<div style='margin:10px 0px 10px 0px;'>
<a class="twitter-timeline" href="https://twitter.com/9lessons" data-widget-id="444174574024810496">Tweets by @9lessons</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div style='margin:10px 0px 10px 0px;text-align:right'>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Big Banner 600X300 -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-6904774409601870"
data-ad-slot="9830233637"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=992226187759619576&widgetType=HTML&widgetId=HTML2&action=editWidget§ionId=addsections31' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML2"));' target='configHTML2' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div></div>
</div>
</td>
</tr>
</table>
<!-- google ads -->
<div>
<div class='section' id='addsectionsFooterTop'></div>
</div>
<!--google end -->
</div>
<!-- Footer part -->
<div id='container-footer2'>
<div id='container-footer' style='text-align: center;'>
<div class='counterstat'><script type='text/javascript'>
var sc_project=3967696;
var sc_invisible=0;
var sc_partition=46;
var sc_click_stat=1;
var sc_security="6979b175";
var sc_text=1;
</script>
<script src='http://www.statcounter.com/counter/counter.js' type='text/javascript'></script><noscript><div class='statcounter'><img alt='free html hit counter' class='statcounter' src='http://c.statcounter.com/3967696/0/6979b175/0/'/></div></noscript></div>
<div id='footer'>
<table style='width:100%'>
<tr>
<td>
<span style='float:left'><a href='http://egglabs.in' onClick='ga('send', 'event', 'Footer', 'click', 'Egglabs');' title='Egglabs'><img alt='egglabs' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbNwtMG-FUl0twSErE4QaTiyMnKu7MW276XYDD_My3uGl-93VHUJpwJUu73khjfgY0S_RqBGkNLeYK92h89iLEkcFiWRAXQvdEeedlrPGF1EEcI1AvFm7jzwbKqPshA1GrhD0usOr7eyLO/' style='border:none'/></a></span>
<span class='cpright'>
© 2009-2014 9lessons.info. All rights reserved the content is copyrighted to Srinivas Tamada - <a href='http://www.9lessons.info/2009/05/advertising-on-9lessons.html' title='9lessons Advertisement'>Advertise</a>
</span>
</td>
<td style='text-align:right'>
<span style='float:right; '>
<a href='http://creativecommons.org/licenses/by-nc-nd/3.0/' rel='license'><img alt='Creative Commons License' src='http://i.creativecommons.org/l/by-nc-nd/3.0/80x15.png' style='border-width:0'/></a>
</span>
</td>
</tr>
</table>
</div>
</div></div>
<!-- Footer end -->
<!-- <script src='http://www.google-analytics.com/urchin.js' type='text/javascript'> </script> <script type='text/javascript'> _uacct = "UA-4783102-2"; urchinTracker(); </script> -->
<!-- ads end <script type='text/javascript'> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> -->
<script type='text/javascript'>
try {
var pageTracker = _gat._getTracker("UA-10999810-1");
pageTracker._trackPageview();
} catch(err) {}</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-4783102-2', '9lessons.info');
ga('send', 'pageview');
</script>
<!--Page Navigation Starts-->
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord =' Next ';
</script>
<!--Page Navigation Ends -->
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></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>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'></script>
<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('search', '1');
google.setOnLoadCallback(function(){
var customSearchControl = new google.search.CustomSearchControl();
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.setSearchFormRoot('cse-search-form');
customSearchControl.enableAds('pub-6904774409601870');
customSearchControl.draw('cse', options);
}, true);
</script>
<script type='text/javascript'>
if (top.location!= self.location) {
top.location = self.location
}
FB.init({
appId:'110166500203',
cookie:true,
status:true,
xfbml:true
});
function FacebookInviteFriends()
{
FB.ui({
method: 'apprequests',
message: '9lessons Programming Blog Topics focused on Web Programming.'
});
}
</script>
<script type='text/javascript'>
window.___gcfg = {lang: 'en'};
(function()
{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 id='fb-root'></div>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
</script><script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2423294629-widgets.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type='text/javascript'>
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '992226187759619576';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d992226187759619576','//www.9lessons.info/','992226187759619576');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '992226187759619576', 'bloggerUrl': 'http://www.blogger.com', 'title': '9lessons Programming Blog', 'pageType': 'index', 'url': 'http://www.9lessons.info/', 'canonicalUrl': 'http://www.9lessons.info/', 'canonicalHomepageUrl': 'http://www.9lessons.info/', 'homepageUrl': 'http://www.9lessons.info/', 'blogspotFaviconUrl': 'http://www.9lessons.info/favicon.ico', 'enabledCommentProfileImages': true, 'adultContent': false, 'disableAdSenseWidget': false, 'analyticsAccountNumber': '', 'searchLabel': '', 'searchQuery': '', 'pageName': '', 'pageTitle': '9lessons Programming Blog', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'languageDirection': 'ltr', 'feedLinks': '\74link rel\75\42alternate\42 type\75\42application/atom+xml\42 title\75\429lessons Programming Blog - Atom\42 href\75\42http://www.9lessons.info/feeds/posts/default\42 /\76\n\74link rel\75\42alternate\42 type\75\42application/rss+xml\42 title\75\429lessons Programming Blog - RSS\42 href\75\42http://www.9lessons.info/feeds/posts/default?alt\75rss\42 /\76\n\74link rel\75\42service.post\42 type\75\42application/atom+xml\42 title\75\429lessons Programming Blog - Atom\42 href\75\42http://www.blogger.com/feeds/992226187759619576/posts/default\42 /\76\n', 'meTag': '', 'openIdOpTag': '\74link rel\75\42openid.server\42 href\75\42http://www.blogger.com/openid-server.g\42 /\76\n\74link rel\75\42openid.delegate\42 href\75\42http://www.9lessons.info/\42 /\76\n', 'latencyHeadScript': '\74script type\75\42text/javascript\42\76(function() { var b\75window,f\75\42chrome\42,g\75\42tick\42,k\75\42jstiming\42;(function(){function d(a){this.t\75{};this.tick\75function(a,d,c){var e\75void 0!\75c?c:(new Date).getTime();this.t[a]\75[e,d];if(void 0\75\75c)try{b.console.timeStamp(\42CSI/\42+a)}catch(h){}};this[g](\42start\42,null,a)}var a;b.performance\46\46(a\75b.performance.timing);var n\75a?new d(a.responseStart):new d;b.jstiming\75{Timer:d,load:n};if(a){var c\75a.navigationStart,h\75a.responseStart;0\74c\46\46h\76\75c\46\46(b[k].srt\75h-c)}if(a){var e\75b[k].load;0\74c\46\46h\76\75c\46\46(e[g](\42_wtsrt\42,void 0,c),e[g](\42wtsrt_\42,\42_wtsrt\42,h),e[g](\42tbsd_\42,\42wtsrt_\42))}try{a\75null,\nb[f]\46\46b[f].csi\46\46(a\75Math.floor(b[f].csi().pageT),e\46\0460\74c\46\46(e[g](\42_tbnd\42,void 0,b[f].csi().startE),e[g](\42tbnd_\42,\42_tbnd\42,c))),null\75\75a\46\46b.gtbExternal\46\46(a\75b.gtbExternal.pageT()),null\75\75a\46\46b.external\46\46(a\75b.external.pageT,e\46\0460\74c\46\46(e[g](\42_tbnd\42,void 0,b.external.startE),e[g](\42tbnd_\42,\42_tbnd\42,c))),a\46\46(b[k].pt\75a)}catch(p){}})();b.tickAboveFold\75function(d){var a\0750;if(d.offsetParent){do a+\75d.offsetTop;while(d\75d.offsetParent)}d\75a;750\76\75d\46\46b[k].load[g](\42aft\42)};var l\75!1;function m(){l||(l\75!0,b[k].load[g](\42firstScrollTime\42))}b.addEventListener?b.addEventListener(\42scroll\42,m,!1):b.attachEvent(\42onscroll\42,m);\n })();\74/script\076', 'mobileHeadScript': '', 'adsenseClientId': 'pub-6904774409601870', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/76f25a6f2e06af76', 'plusOneApiSrc': 'https://apis.google.com/js/plusone.js', 'sf': 'n'}}, {'name': 'skin', 'data': {'vars': {}, 'override': ''}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\75classic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\75flipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\75magazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\75mosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\75sidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\75snapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\75timeslide'}}}]);
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML5', 'addsections71', null, document.getElementById('HTML5'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main_s', null, document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/1845872262-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/2392111094-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML4', 'mediaPartner', null, document.getElementById('HTML4'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense2', 'addsections3', null, document.getElementById('AdSense2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'addsections31', null, document.getElementById('HTML2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML6', 'addsectionsTopperHead', null, document.getElementById('HTML6'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts1', 'addsections7', null, document.getElementById('PopularPosts1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', null, document.getElementById('Navbar1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML8', 'newadsblock', null, document.getElementById('HTML8'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'newadsblock', null, document.getElementById('HTML3'), {}, 'displayModeFull'));
</script>
</body>
</html>