Online Education

Friday, May 10, 2013

Where to add CSS in our blog ??

We can say CSS backbone for a blog/website. CSS makes our blog attractive and readable as well. If our blog will be beautiful good, Smart and attractive so reader will spend more time to view our blog.Without CSS our blog is nothing.... Without CSS our blog is like a Blank piece of paper. CSS give look to our blog and make it SEO friendly.And it is a first stage to workout with our template.CSS make our template beautiful and able to work in the beautiful blogging atmosphere. We saw many blog having beautiful look and widgets .. it is Just because of CSS.

What is CSS:

CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS file

Where to add CSS in our template:

In our blogger template a tag is used to add CSS called "<b:skin>...</b:skin>" tag.

In our template we add our CSS code just above </b:skin> tag :

<b:skin><![CDATA[
{
..........................................................................................................................
..........................................................................................................................
..........................................................................................................................
..........................................................................................................................
..........................................................................................................................
..........................................................................................................................
..........................................................................................................................
..........................................................................................................................
..........................................................................................................................
..........................................................................................................................
..........................................................................................................................
..........................................................................................................................
}
]]></b:skin>

We use CSS in the type of CLASS(.) or ID(#) to work with our HTML element
For example:
Class starts with

.class{
-----------------------------
-----------------------------
-----------------------------
-----------------------------
------------------
}

Id starts with # tag

# id{
----------------------------
----------------------------
----------------------------
----------------------------
}

Now stylizing our HTML element:

<div class="class"> HTML </div>
OR
<div id="id"> HTML </div>

2nd way to add CSS:

Just go to customize option from blogger template and after going there Template>Advanced>Add CSS look at the picture below:

Now after clicking this add your CSS code in the Box which is provided :

now click apply to blog DONE.

Or we can also add our CSS by hosting it such as on Google Drive and Google Code.
after hosting your CSS code just copy the link of file :
and it to the piece of code and paste this piece of code just Template » Edit HTML » Proceed.Now search for the starting <head> tag and just above it paste the following code.

<link href='https://googledrive.com/host/your-file-code' rel='stylesheet'/>

Need Help:

We will soon write another detailed article on this .. till then need any type of help please drop your all question below without any hesitation .. or for personal help please Use our contact page.till then peace and blessings.=)

How to add a Favicon to your site ??

Favicon is very necessary for a blog/website . It is Recognition of a website or blog and also give it attractive & professional look as well . Many people try to add favicon to their websites or blog many times but finally Unsuccessful. So we are going to show you how to add a attractive favicon to your site.

First create a beautiful Favicon:

Firstly you need to create a unique and attractive favicon for your blog or website using different software such as Adobe Photoshop (7.0 or Cs) or Ms paint.Remember your favicon should be in ".ico" (.ICO) format and less than 100 KB and size should be 16 x 16 px.
Convert your image file to .ICO

How to add your favicon:

layout>favicon

and after clicking EDIT a window will appear and their upload your .ICO/Favicon file. look at the image below:

And finally click save. And you are done visit your new blogging experience a professional look of your blog/website.

Need Help:

If you need any type of help so please kindly feel free to ask to your Question . Let's see your new blogging experience =) .

Monday, April 29, 2013

Create a Cute Subscription widget

Today we are going to share a beautiful RSS subscribe for blogger and WordPress. it is new in style cute and i am sure it will attract your readers.
so let's start ...

How to add Cute subscription widget to blogger?

Go To Blogger > Design > Page Elements
Choose HTML JavaScript Widget
Paste the following code in it,

<style>

.bordered {
    border: 10px solid rgba(82, 82, 82, 0.7);
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
    width:273px;
}
.bordered2 {
height: 25px;
     background-color: rgb(36, 39, 41);
     color: rgb(221, 221, 221);
     text-shadow: 1px 1px 2px rgb(0, 0, 0);
}
</style>
<div class="bordered">
<div class="bordered2">
<center>
<span style="color: #ffffff; font-size: 16px;"><b>Subscribe Now</b></span></center></div>
<a href="http://feeds2.feedburner.com/blogspot/UONsI" rel="alternate" title="Subscribe now to avail the unthinkable" type="application/rss+xml"><img border="0" alt="" style=" padding-bottom:20px; margin: 0pt 10px 10px 0pt; float: left; width:100px; height:100px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRzk004l3S8CI2C0dAvf43AqX310FFToEtyJ95g9N1uIPRdU3lICBhWlokOK0FglNYqsWpc34YVR3FME5lClMRwItiOAGkWLtM8OBWOZstjLsfEpcd5pgl6izcu-OllLIDv0okmQGPtDVc/s1600/rss_icon.png"/></a><p><a href="http://feeds2.feedburner.com/blogspot/UONsI" rel="alternate" title="Subscribe to my feed" type="application/rss+xml">Get free email updates </a><span style="color: rgb(36, 39, 41); font-weight: bold;">By submitting your email address here</span></p>
<style>
input.bt {
color:#fff;
font: bold 10px Arial, sans-serif;
background:#F39100;
border:0;
padding:3px;

}
input.bthov {
color:#fff;
font: bold 10px Arial, sans-serif;
border:2px solid #F39100;
padding:3px;
}
</style>
<form action="http://feedburner.google.com/fb/a/mailverify" style="padding: 5px; " target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/UONsI', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input style=" color:rgb(36, 39, 41); background: #fff; border:1px solid #ff7417; width: 90px;" name="email" type="text"/>
<input value="blogspot/UONsI" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/> <input onmouseover="this.className='bt bthov'" onmouseout="this.className='bt'" value="GO!" class="bt" type="submit"/></form><br/>
</div>

Now make these changes,

Now replace http://feedburner.google.com/fb/a/mailverify?uri=blogspot/UONsI with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.

Replace blogspot/UONsI with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=blogspot/UONsI

Save your widget and view your blog to see it showcasing live! :)

That’s All!

Do let me know if you needed any help in customizing the widget.

Google+ commenting system for blogger

Since blogger is spreading their services among the whole world.They are making such incredible/wonderful changes in their blogger atmosphere,system and look.After a Unique and Stylish HTML editor they are launching G+ comment system for blogger. However it is not so friendly yet but i am sure it will make a great change in blogger word.It will also help you increase your traffic and making your comment system beautiful ever before. Now today we are going to show you that How to add g+ commenting system to your blog.

What are the features?

a perfect and unique look without any doubt. your readers don't need to choose any profile and don't need to wait for approval(in some blogs) as well.
Share option in comment system fast loading and also have recommendations is this comment is publicaly recommended or your circles.
All activities at one place such as Activity feed.
Reply and delete option in the comments system which best ever. and delete the comments permanently without any backup such as comment is deleted by author or someone.

How to add Google plus comment box:

1. you need a account on Google plus.
2. Go to your blog click on Google+ as shown in the picture below:

Now after clicking on you just need to check the option "Use Google+ comments system on this blog" look at the picture below:

Just check it and congrats you are done :) .

Need help:

Not working? or having trouble while doing it just feel free to ask because by your question i also learn. Peace and blessing =) .

Tuesday, April 16, 2013

How to back up your blogger Template ?

It happens in a second that your are making changes in your template and it will say that "NOT DISPLAYING OR TEMPLATE IS BROKEN" so what will you do then or a You are making that kind of change which can't be Removed. Or a coding area you have deleted and don't have that code in your computer.Or changing template and after changing 2nd template is no satisfactory.So any thing can be happen so we must BACKUP our template and ready for every problem:
so just look over some easy steps.

How to backup your template

First log in to your blogger account and click Template>>Backup/Restore :

As you will click on that upper right backup button a dialog will appear

and from there you can download your template XML file safely and also upload your new template.

Need Help

Enjoy and play with the codes. I hope it helped for further you can ask Questions without any hesitation. peace and blessings

Friday, March 15, 2013

Finally we have moved to google+ profile!!!

now finally we have moved/convert our profile tog+ profile from old blogger profile. As blogger is going towards latest features and interfaces and dynamic view so we thought that we should look forward and move a step ahead. we changed our profile g+ because it has too many features and more attractive then old blogger profile.

old blogger profile

It has no features and not stylish
no updates

g+ profile
but this new google+ profile feauture is much unique as you can thought ....
it is unique it will be updated automatically just need a click.It features are so attractive and helpful such as you can share automatically to your profile or fan page it will cause a great traffic on your blog

what's next
so what are you are you thinking about just login to blogger and move your profile to google+ plus profile and get rid of "old blogger profile". having difficulty contact us friendly and ask your questions in comments tomorrow i will publish a detailed article upon it that how to change your default profile yo g+ profile. peace and blessings =)

Tuesday, March 12, 2013

We soon going to host our blog at host gator

At last 2013 by the grace of almighty Allah we have complete new transformation.Online Education OE is now wearing a new dress , certainly version 2.0 of its theme transformation. The blue and silver layout has been replaced with a far better solid structure, colored in silver and grayish black.With Google's great emphasis on a better core HTML structure and fast loading content, we had to make some serious changes to the template by replacing every single bit of the old user interface with something more favorable and interesting.The template is a result of one week of continuous Graphic and Coding exercise. In order to add further fun to this new OE environment and especially to better promote our idea of a blog class room and its informative periods, I spared few more working hours in giving birth to an extremely helpful partner, called "sir O.E" :)

JUST take a look at our changes:
Previous Design: v1.0

New Design: v2.0

we soon going to host our blog... after this perfect,solid,beautiful and desirable layout we have decided or thinking to host our blog and i think host gator will be perfect because they don't demand very high just as other hosting companies they keep on giving special discount offers.They are perfect,reliable and desirable services and packages lets see and compare by your self why i am saying this all

Lets take a look their packages

we are going to compare it with "Go Daddy"

-
HOST GATOR:

There are three business plans that HostGator offers which are:

1. Hatchling Pan (The plan that we soon going to use)

Single Domain
UNLIMITED Disk Space
UNLIMITED Bandwidth
Shared SSL Certificate
Starting at $3.96/month Which means $48 per year This will decrease further after applying our 25% discount coupon

2. Baby Plan

UNLIMITED Domains
UNLIMITED Disk Space
UNLIMITED Bandwidth
Shared SSL Certificate
Starting at $6.36/month which means $76 per year. Would further decrease with Discount coupon

3. Business Plan (Obviously Not for bloggers)

UNLIMITED Domains
UNLIMITED Disk Space
UNLIMITED Bandwidth
FREE Private SSL & IP
FREE Toll Free Number
Starting at $10.36 Discount Coupon Applies

_
Go daddy:

There are three business plans that HostGator offers which are:

1. Economy plan ($2.99) /month

Single Domain
100 GB Disk Space LIMITED
UNLIMITED Bandwidth
10 Data base
100 Email addresses Which means $35.88 per year

2. Deluxe plan ($4.49) /month

UNLIMITED Domains
UNLIMITED Disk Space
UNLIMITED Bandwidth
25 database 100 email adresses
NEW! Customizable mobile site
Starting at $4.49/month which means $53.88 per year. No discount coupon included

3. Ultimate Plan $7.49 /month (Obviously Not for bloggers)

UNLIMITED Domains
UNLIMITED Disk Space
UNLIMITED Bandwidth
UNLIMITED database
UNLIMITED email adresses
NEW! Customizable mobile site
PREMIUM DNS
SSL certificates
Malware Scanner
Starting at $7.49 No Discount Coupon will be Applied

We are choosing hostgator

because of their reliability and coupons of discount and they are serving a Number of millions domains so it is Good and proud to choose Host gator in the future ...

so what is your plan