Quotes Example

Let us sacrifice our today so that our children can have a better tomorrow.

By- APJ Abdul Kalam

How to Create Slug

Create Slug

<?php

function create_slug($string){

   $slug=preg_replace('/[^A-Za-z0-9-]+/', '-', $string);

   return $slug;

}

echo create_slug('does this thing work or not');

//returns 'does-this-thing-work-or-not'

?>

SEO Basics

Google Penalty Send Box
http://pixelgroove.com/serp/sandbox_checker/

Page Speed Testing Tool
Google Page Speed
Pingdom Tool

Link Analysis Tools
Majestic (formerly Majestic SEO)
Ahrefs
Open Site Explorer
Open Link Profiler
WebMeUp

Bootstrap Learning

Must Used Bootstrap Classes
class="lead"
class="col-lg-4-offset"
class="col-lg-4-pull"
class="col-lg-4-push"
class="text-left"
class="text-right"
class="text-center"
class="text-nowrap"
class="text-justify"
class="text-lowercase"
class="text-uppercase"
class="text-capitalize"
class="active"
class="success"
class="info"
class="warning"
class="danger"
class="input-lg"
class="text-hide"

Most Used Bootstrap tags
<abbr>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
<mark>
<code>
<small>
<em>
<blockquote>
<footer>

<blockquote class="blockquote-reverse">
  ...
</blockquote>

UL LI
==================
<ul class="list-inline">
  <li>...</li>
</ul>

Table
=================
<table class="table table-striped">
  ...
</table>

Colors
@brand-primary: darken(#428bca, 6.5%);

Scaffolding
===================
@body-bg:    #fff;
@text-color: @black-50;

Links
=======================
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

Understand Blogspot Basics

Blogger template has mainly three types of variables
one which controls the flow of the code
one which pulls data from the databases behind
third are expressions.

b:namespace
=========================
=========================
The variables in this namespace mainly control the layout and control flow of the template.

The template is mainly divided in sections
=>sections will include widgets
==>Widgets will have includables
====>includables are useless unless you use it by using the include tag.

Section
====================
<b:section [attribs] >
</b:section>

1. id (Required) A name identifying the section must be unique.
2. class (Optional) Common class names are 'navbar,' 'header,' 'main,' 'sidebar,' and 'footer.'
3. maxwidgets (Optional) The maximum number of widgets.
4. growth (Optional) Can be 'horizontal' or 'vertical,'.

Widgets
============================
<!--Simple form.-->
<b:widget [attribs] />

<!-- Expanded form. -->
<b:widget [attribs] >
</b:widget>
A widget may have the following attributes:
1. id (Required) May contain letters and numbers only, and each widget ID in your template should be unique.
2. type: (Required) Indicates what kind of a widget it is.
3. locked: (Optional) Can be 'yes' or 'no,' with 'no' as the default.
4. title: (Optional) A display title for the widget.
5. pageType: (Optional) Can be 'all,' 'archive,' 'main,' or 'item,' with 'all' as the default.

The includables Tag
===========================
<b:includable id='[some-unique-id]' [attribs] >
</b:includable>

The includable tag has the following attributes:
1. id: (Required) A unique identifier made up of letters and numbers.
2. var: (Optional) An identifier made up of letters and numbers, for referencing data within this section.

The include Tag
=============================
<b:include name='[the-includable-name]' data='[the-expression-for-var]'/>

The attributes name and data:
name: (Required) This name will be pointing to the includable which is to be included.
data: (Optional) Like a parameter is passed to function this data is passed to includable.

The if / else Tag
===============================
<!-- both if and else-->
<b:if cond='[some cond check]'>
 <!--  [Then do this]  -->
<b:else/>
 <!--  [else do this]  -->
</b:if>

Examples:
<!-- to check a boolean variable. -->
<b:if cond='data:useImage'>
 <!--  [execute if the header for your blog is image instead of text]  -->
</b:if>

<!-- to compare equivalence of two values-->
<b:if cond='data:blog.pageType == "item"'>
 <!--  [True if the current page is an item page (post page).]  -->
</b:if>

<!-- to compare non-equivalence -->
<b:if cond='data:displayname != "Fred"'>
 <!--  [True if this is not Fred's display name.]  -->
</b:if>

<!-- comparing greater than, less than-->
<b:if cond='data:post.numComments > 1'>
 <!--  [True if the current post has more than one comment.]  -->
</b:if>

The Loop Tag
=================================
<b:loop var='some-identifying-var' values='set-of-something'>
 <!--  [For every var in the values i.e., for every data in the set of data do something here]  -->
</b:loop>

data:namespace
=========================
=========================
<!--[The blog's title.]-->
<data:blog.title/>

<!--[
The type of the current page. One of 'item', 'archive', or 'index'.
This var is quite useful for selectively showing content on
different type of pages. Put an if and check if its index page or
item page and then display selective content
]-->
<data:blog.pageType/>

<!--  [The URL of the current page.]  -->
<data:blog.url/>

<!--  [The homepage of the blog.]  -->
<data:blog.homepageUrl/>

<!--[
The title of the current page. This is often the blog title,
but may contain additional information on archive or post pages.
]-->
<data:blog.pageTitle/>

<!--  [The encoding to use for the blog, e.g. UTF-8.]  -->
<data:blog.encoding/>

<!--[
Either "ltr" or "rtl" for left-to-right
and right-to-left languages, respectively.
]-->
<data:blog.languageDirection/>

<!--  [The autodiscovery feed links for the page header.]  -->
<data:blog.feedLinks/>


Widget Types
===========
Page Header
Blog Archives
Profile
Text / HTML / JavaScript
Feed
Picture
Labels
List
Link List
Logo
Blog Posts

Page Header
===============
<!--[The blog's title. ]-->
<data:title/>

<!-- [ The blog's description. ]-->
<data:description/>

Blog Archives in Blogger template
==================================
title: The title of the widget.
style: One of 'MENU', 'FLAT', or 'HIERARCHY'.
data: A list of each archive unit, each of which contains:
->-> name: The name of this archive interval or period.
->-> url: The link to the page containing posts from this interval.
->-> post-count: How many posts there are in this interval.

<!--[ Simple usage of title ]-->
<b:if cond='data:title'>
 <h2><data:title/></h2>
</b:if>

<!--[ For a includable flat type ]-->
<b:includable id='flat' var='data'>
 <ul>
  <b:loop values='data:data' var='i'>
   <li class='archivedate'>
    <a expr:href='data:i.url'>
     <data:i.name/>
    </a>
    (<data:i.post-count/>)
   </li>
  </b:loop>
 </ul>
</b:includable>


Profile Widget in Blogger template
=====================================
This is the profile of the author. There can be one author of a blog or maybe the blog has a team of authors.

For a blog with a single author, the profile widget contains the following information.
-> title The title of the widget.
-> userUrl The author's profile URL.
-> location The location from the author's profile.
-> aboutme The "About Me" information from the profile.
-> displayname The author's display name.
-> photo The user's profile photo, made up of the following:
-> -> url: The photo URL.
-> -> width: The photo's width, in pixels.
-> -> height: The photo's height, in pixels.
-> -> alt: The "alt" text for the photo.

Team blog widgets contain less information compare to single blog widgets. The tags are:
-> title: The title of the widget.
-> authors: The list of all authors, each of which contains the following:
-> -> displayname: The author's display name.
-> -> userURL: The author's profile URL.

If you want to design your template to handle both single- and multiple-author blogs, you can use the data:team variable to distinguish between the two cases as shown below.

<b:if cond='data:team=="true"'>
 <!--[display multiple authors] -->
</b:if>

Text / HTML / JavaScript Widget in Blogger template
=======================================
HTML / Javascript and Text widgets are very simple widgets and contain only two data elements.
-> title: The widget's title.
-> content: The content of the widget.

Source:
https://support.google.com/blogger/answer/47270

alert("HI"); //says HII

Digital Watch Creation Through Javascript

<script language="JavaScript"><br /> <!--<br /> function gettime() {<br />     var date= new Date();<br />     var hr = date.getHours();<br />     var m = date.getMinutes();<br />     var s = date.getSeconds();<br />     var ampm="AM";<br />     if (hr > 11)<br />     {<br />         ampm="PM"<br />     }<br />     if (hr > 12)<br />     {<br />         hr -= 12<br />     }<br />     if(m < 10)<br />     {<br />         m = "0" + m<br />     }<br />     if(s < 10)<br />     {<br />         s = "0" + s<br />     }<br />     document.clockform.clock.value = hr + ":" + m + ":" + s + " " +ampm;<br />     setTimeout("gettime()",100)<br /> }<br /> //  --><br /> </script><br /> </head><br /> <body onload="gettime()"><br /> <form name="clockform"> <br /> <input type="text" name="clock"><br /> </form>

Understand Regular Expression

Character	Description
\w	Matches any word character (alphanumeric).
\W	Matches any non-word character.
\s	Matches any whitespace character (tab, newline, carriage return, form feed, vertical tab).
\S	Matches any non-whitespace character.
\d	Matches any numerical digit.
\D	Matches any character that is not a number.
[\b]	Matches a backspace.
.	Matches any character except a newline.
[...]	Matches any one character within the brackets.
[^...]	Matches any one character not within the brackets.
[x-y]	Matches any character in the range of x to y.
[^x-y]	Matches any character not in the range of x to y.
{x,y}	Matches the previous item at least x times but not to exceed y times.
{x,}	Matches the previous item at least x times.
{x}	Matches the previous item exactly x times.
?	Matches the previous item once or not at all.
+	Matches the previous item at least once.
*	Matches the previous item any number of times or not at all.
|	Matches the expression to the left or the right of the | character.
(...)	Group everything inside parentheses into a subpattern.
\x	Matches the same characters that resulted from the subpattern in group number x. Groups, which are designated with parentheses, are numbered from left to right.
^	Matches the beginning of the string or beginning of a line, in multiline matches.
$	Matches the end of the string or end of a line, in multiline matches.
\b	Matches the position between a word character and a non-word character.
\B	Matches the position that is not between a word character and a non-word character.

Know More in Regular Expression
Character	Description
\f	Form feed
\n	Newline
\r	Carriage return
\t	Tab
\v	Vertical tab
\/	Forward slash (/)
\\	Backward slash (\)
\.	Period (.)
\*	Asterisk (*)
\+	Plus (+)
\?	Question Mark (?)
\|	Horizontal bar (|)
\(	Left parenthesis (
\)	Right parenthesis )
\[	Left bracket ([)
\]	Right bracket (])
\{	Left curly brace ({)
\}	Right curly brace (})
\XXX	ASCII character represented by the octal number XXX
\xHH	ASCII character represented by the hexadecimal number HH
\cX	The control character represented by X

Window Object Functions: Learn Here

Methods/Properties	Description
alert	Loads an alert dialog box with the text string passed.
back	Loads the previous page in place of the window instance.
blur	Removes the focus from a window.
captureEvents	Sets the window to capture all events of a specified type.
clearInterval	Clears the interval set with the setInterval method.
clearTimeout	Clears the timeout set with the setTimeout method.
close	Closes the instance of the window.
confirm	Displays a confirmation dialog box.
disableExternalCapture	Disables external event capturing.
enableExternalCapture	Enables external event capturing for the pages loaded from other servers.
find	Displays a Find dialog box where the user can enter text to search the _current page.
focus	Assigns the focus to the specified _window instance.
forward	Loads the next page in place of the window instance.
handleEvent	Invokes the handler for the event passed.
home	Loads the user's specified home page in place of the window instance.
moveBy	Moves the window by the amounts specified.
moveTo	Moves the window to the specified location.
open	Opens a new instance of a window.
print	Invokes the Print dialog box so the user can print the current window.
prompt	Displays a prompt dialog box.
releaseEvents	Releases the captured events of a specified type.
resizeBy	Resizes the window by the specified amount.
resizeTo	Resizes the window to the specified size.
routeEvent	Passes the events of a specified type to be handled natively.
scroll	Scrolls the document in the window to a specified location.
scrollBy	Scrolls the document in the window by a specified amount.
scrollTo	Scrolls the document, both width and height, in the window to a specified location.
setInterval	Invokes a function or evaluates an expression every time the number of milliseconds has passed.
setTimeout	Invokes a function or evaluates an expression when the number of milliseconds has passed.
stop	Stops the current window from loading other items within it.
closed	Specifies if the window instance has been closed.
defaultStatus	Is the default message in the window's status bar.
document	References all the information about the document within this window. See the Document object for more information.
frames	References all the information about the frames within this window. See the Frame object for more information.
history	References the URLs the user has _visited.
innerHeight	Contains the height of the display area of the current window in pixels.
innerWidth	Contains the width of the display area of the current window in pixels.
length	Represents the number of frames in the current window.
location	Contains the current URL loaded into the window.
locationbar	Reference to the browser's location bar.
menubar	Reference to the browser's menu bar.
name	Name of the window.
opener	Contains the name of the window from which a second window was opened.
outerHeight	Contains the height of the outer area of the current window in pixels.
outerWidth	Contains the width of the outer area of the current window in pixels.
pageXOffset	Contains the x-coordinate of the current window.
pageYOffset	Contains the y-coordinate of the current window.
parent	Reference to the upper most window that is displaying the current frame.
personalbar	Reference to the browser's personal bar.
scrollbars	Reference to the browser's scroll bars.
self	Reference for the current window.
status	Reference to the message in the window's status bar.
statusbar	Reference to the browser's status bar.
toolbar	Reference to the browser's tool bar.
top	Reference to the upper most window that is displaying the current frame.
window	Reference for the current window.

JavaScript String Functions: Learn Here

Method/Property	Description
anchor()	Creates an instance of the tag with the NAME attribute set to the string passed to the method.
big()	Converts the string into an instance of the tag.
blink()	Converts the string into an instance of the tag.
bold()	Converts the string into an instance of the tag.
charAt()	Returns the character at the index passed to the method.
charCodeAt()	Returns the ISO-Latin-1 number of the character at the index passed to the method.
concat()	Concatenates the two strings passed to return a new string. This method was added in JavaScript 1.2.
fixed()	Converts the string into an instance of the , fixed pitch font tag.
fontcolor()	Sets the COLOR attribute of an instance of the tag.
fontsize()	Sets the SIZE attribute of an instance of the tag.
fromCharCode()	Returns the string value of the ISO-Latin-1 number passed to the method.
indexOf()	Returns the index of the first occurrence of the string passed to the method within an instance of a String object.
italics()	Converts the string into an instance of the tag.
lastIndexOf()	Returns the index of the last occurrence of the string passed to the method within an instance of a String object.
link()	Converts the string into an instance of the tag and sets the HREF attribute with the URL that is passed to the method.
match()	Returns an array containing the matches found based on the regular expression passed to the method.
replace()	Performs a search and replace, using the regular expression and replace string passed to the method, on the instance of a String that calls it.
search()	Returns the index location of the match found in the string passed to the method. A -1 is returned if the string is not found.
slice()	Returns the string between the beginning and ending index passed to the method. If a negative number is passed, the index is referenced from the end of the string passed.
small()	Converts the string into an instance of the tag.
split()	Returns the string split into segments defined by the string and instance limit passed to the method.
strike()	Converts the string into an instance of the tag.
sub()	Converts the string into an instance of the tag.
substr()	Returns the string beginning with the indexed location and number of characters to return. If a negative number is passed, the index is referenced from the end of the string passed.
substring()	Returns the string between the beginning and ending index passed to the method.
sup()	Converts the string into an instance of the tag.
toLowerCase()	Converts all the characters in the string to lowercase.
toSource()	Returns the string representation of the String passed.
toString()	Returns the characters passed as type string.
toUpperCase()	Converts all the characters in the string to uppercase.
length	Returns the length of the string.
prototype	Provides the ability for a programmer to add properties to instances of the String object.

How to Create RSS Feed through PHP, MySQL

http://www.pontikis.net/blog/simple-rss-class-create-rss-feed

How to Use Google Map on Web Page

 <head><style>
      #map-canvas {
        width: 500px;
        height: 400px;
background-color: #CCC;
      }
    </style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
  function initialize() {
  var mapCanvas = document.getElementById('map-canvas');
    var mapOptions = {
      center: new google.maps.LatLng(28.38, 77.12),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
  <body>
  <div id="map-canvas"></div>
  </body>

Source to get Longitude and Latitude Values
http://www.latlong.net/

Must Use CSS

Body Right Side Image
body{
background: #FFFFFF url(http://3.bp.blogspot.com/-OmaZsi_XmgA/TzY787sKUrI/AAAAAAAABPg/xYSLXr8epZI/s1600/Gita+Blog+Side+Bar.jpg) repeat-y fixed top right;
}

Change Cursor for Site
<style>
body {
cursor: url('favicon.ico'), default;
}
</style>

Block Right Click Disable

tr

{

-ms-user-select:none;

-webkit-user-select:none;

-moz-user-select:none;

}

Use Google Font:

  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">

    <style>

      body {

        font-family: 'Open Sans', sans-serif;

      }

    </style>

Style to First Letter

<style type="text/css"> 

p:first-letter{

    font-size:200%;

    color:#8A2BE2;

}

Login Form Focus

:focus{

            border: thin black solid; 

            padding: 4px; 

        } 

</style>

Image Change on Mouseover
<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" /></a>

5 Steps to Mobile Friendly Sites

Facebook Advertisement

Ads Placements
=============
Desktop News Feed
Mobile News Feed
Right Hand Side Ads

Types of Advertisement
======================
Clicks to Website: Send people to your website.
Website Conversions: Increase conversions on your website. You'll need a conversion pixel for your website before you can create this ad.
Page Post Engagement: Boost your posts.
Page Likes: Promote your Page and get Page likes to connect with more of the people who matter to you.
App Installs: Get installs of your app.
App Engagement: Increase engagement in your app.
Offer Claims: Create offers for people to redeem in your store.
Local Awareness: Reach people near your business.
Event Responses: Raise attendance at your event.
Video Views: Create ads that get more people to view a video.

Campaign Structure of Facebook Ads
====================================
1. Campaign
2. Ads Set
3. Ads

Ads Set:
=======
An ad set contains one or more ads. You’ll set a budget and a schedule for each of your ad sets. You’ll also define your audience, placement, and bidding (bid type and bid value) at the ad set level. This way you can control how much you spend on each audience, schedule when they see your ads, and measure their response.

Create an Offer
================
If you have a Page for a local business/place with at least 50 likes, you can create an offer from ad creation without a budget and promote it later.
Source: https://www.facebook.com/help/www/102534329872055

Power Editor
============
To Create many ads
https://www.facebook.com/ads/manage/powereditor

Ads Guide
============
https://www.facebook.com/business/ads-guide/

Website Conversions
====================
Image size: 1,200 x 628 pixels
Image ratio: 1.9:1
Text: 90 characters
Headline: 25 characters
Link description: 30 characters
Your image may not include more than 20% text. See how much text is on your image.

Add
=======
Call to Action
e.g. Shop Now

Targeting Options
=================
Location
Gender
Age
Likes and Interests
Relationship Status
Workplace and Education

Facebook Remarketing
=====================
https://www.facebook.com/business/a/online-sales/custom-audiences-website
http://www.socialmediaexaminer.com/benefits-facebook-remarketing/

Google Alogorithm Updates

Panda - Search Filter
Penguin - Spam Filter
Pigeon - For Local Listing
Hummingbird - Meaning behind the words
Payday Update - pornographic and other heavily spammed queries
Pirate - prevent sites with many copyright infringement reports

http://www.blastam.com/resources/Blast-Google-Analytics-Reference-Guide.pdf

AJAX Learning

AJAX
========
html, css -> Presentation
DOM -> Interaction with data
XML, JSON -> Data Transfer
XMLHttpRequest -> Asynchronous communication b/w browser & server

XMLHttpRequest
=============
It performs following operations:

Sends data from the client in the background
Receives the data from the server
Updates the webpage without reloading it.

XMLHttpRequest Objects
onReadyStateChange
readyState (range 0 to 4)
reponseText
responseXML

XMLHttpRequest Methods
void open(method, URL)
void open(method, URL, async)
void open(method, URL, async, username, password)
void send()
void send(string)
setRequestHeader(header,value)