Online Education: 2013

Sunday, June 16, 2013

Customize Author Profile In Blogger

Today i was working on my blog playing with the codes .. then i found some thing really unique ,stylish and attractive.It was a Great customization of "AUTHOR PROFILE WIDGET"as i started working upon it, i found it successful and something unique with some great features such as author profile picture style and as well as hover effect , border style, shadow box and a cool admin badge.So i thought why i should not share it with you all so take a look at new and customized official "AUTHOR PROFILE WIDGET".

Remember!!!: Don't forget to hover it .

Live Demo

How To Customize Author/Admin Profile Using Simple CSS

To add this effect to your personal profile follow these steps,

Go To Blogger > Layout
Click Add a Page element or Add a gadget
Select Author Profile Widget
Now Go to Edit HTML
Backup your template
Search For ]]></b:skin>
Just above ]]></b:skin> paste this code

/*--- OE Author profile widget --- */
.profile-img {
    float: left;
    margin: 5px 5px 5px 8px;
    padding: 4px;
    box-shadow: 0px 1px 9px rgb(102, 102, 102);
    border-radius: 50px 50px 50px 50px;
    border: 1px solid rgb(255, 255, 255);
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
.profile-img:hover {
opacity: 0.5;
}
.profile-data {
    margin: 5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgb(0, 0, 0);
    font-weight: bold;
    line-height: 1.6em;
}
.profile-datablock {
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXFJjjvw79RQrMv-FX4AVw_CuIQG9kbo04vMV54tbLiVPQHx0jC9qhh2ApTgCUfwW3ZW7h7xdsNKH41m3gwtcWOusJCYxaumEql1EL4yR0Yj8aenKYsvrG4BerDGMj7mxCyoNrL85W_ydh/s1600/aDMIN.png');
    background-repeat:no-repeat;
    background-position:244px -5px;
    margin: 0.5em 0px;
    border: 1px solid rgb(221, 221, 221);
}

8. Save your template and Done!
Preview your blog to see your profile standing out!

Customization Guide

(1) Customize border

border-radius: 50px 50px 50px 50px;
border: 1px solid rgb(255, 255, 255);

to change the border of Author profile Picture profile pic to the square shape just remove border-radius: 50px 50px 50px 50px; and to change the border color just change the code rgb(255, 255, 255) as your wish.

(2) Change author Badge
to change the author badge image just replace your image code with

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXFJjjvw79RQrMv-FX4AVw_CuIQG9kbo04vMV54tbLiVPQHx0jC9qhh2ApTgCUfwW3ZW7h7xdsNKH41m3gwtcWOusJCYxaumEql1EL4yR0Yj8aenKYsvrG4BerDGMj7mxCyoNrL85W_ydh/s1600/aDMIN.png

(3) Customize the content block

border: 1px solid rgb(221, 221, 221);

To change the border change the rgb(221, 221, 221) as you like and to change the style of border just change solid to Dashed or Dotted .

How to show or hide the link in Author Profile

To Hide the Author profile Link Just add

.profile-link {
display:none;
}

That’s All!

I hope you will find it easy and interesting. Any question is welcomed :>

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

Saturday, February 16, 2013

Password protect your google chrome for more security

we are here with a new and unique trick which is simple but helpful. We are going to protect our google chrome and save our personal work.It is unique and quite simple too.

In this when someone will open your it will ask for as password goes wrong it will automatically be closed. so let's start.

Follow these steps:

1.Go to google chrome web store and install a extension name SIMPLE START UP PASSWORD
2.Click on the upper option icon of crome and go to Tools>Extensions.

3. Now find the installed Extension(SIMPLE START UP PASSWORD) which you installed and then click on options and write your desired password in the box and hit "Save".

Restart Your and see it is working perfecrtly.

4. You are all done !

NEED HELP :

if you are having any difficulty so please feel free to ask question. And you can also ask the Question related to your studies or tips or any help visit our contact page. or ask your Questions on comments peace =)

Friday, February 15, 2013

Create a Slick Menu using CSS3

Today we are going to add a navigation menu named Slick Menu using css3 as it is going towards success day by day. It is quite simple to add this it is clear from any thing no ~~Javascript~~ no ~~images~~ and as well as ~~Jquery~~ simple just Css.

Live Demo

Follow the steps:
The entire process involves simple steps. Follow these instructions:

Go To Blogger > Settings > Template
Backup your template
Click Edit HTML > Proceed
Search for ]]></b:skin>
Just above it paste the following code:

.wrapper {
    width: 100%;
    height: 80px;
    background : #464646;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    border-top: 2px solid #939393;
    position: relative;
    margin-bottom: 30px;
}
ul {
    margin: 0;
    padding: 0;
}
ul.menu {
    height: 80px;
    border-left: 1px solid rgba(0,0,0,0.3);
    border-right: 1px solid rgba(255,255,255,0.3);
    float:left;
}
ul.menu li {
    list-style: none;
    float:left;
    height: 79px;
    text-align: center;
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
    }
ul li a {
    display: block;
    padding: 0 20px;
    border-left: 1px solid rgba(255,255,255,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    text-align: center;
    line-height: 79px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    -webkit-transition-property: background;
    -webkit-transition-duration: 700ms;
    -moz-transition-property: background;
    -moz-transition-duration: 700ms;
    }
ul li a:hover {
    background: transparent none;
}
ul li.active a{
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}

6. Now search for <body> and just below it paste it paste the following code:

<div class="wrapper">
<div class="container"><ul class="menu" rel="sam1">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li ><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Twitter @insic</a></li>
</ul>
</div>
</div>

Tips:

Replace'#' with your desired link

7. Save your template and all done!
Visit the new page and see if things are as you planned. :)

NEED HELP:
if you so please kindly ask your questions we will share a lot of other things with you in up coming tutorials take care peace buddies =)