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?



  1. Go To Blogger > Design > Page Elements
  2. Choose HTML JavaScript Widget
  3. 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.











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

  1. Go To Blogger > Settings > Template
  2. Backup your template
  3. Click Edit HTML > Proceed
  4. Search for ]]></b:skin>
  5. 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 =)