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,

1. Go To Blogger > Layout
2. Click Add a Page element or Add a gadget
3. Select Author Profile Widget
4. Now Go to Edit HTML
5. Backup your template
6. Search For ]]></b:skin>
7. 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/AVvXsEicdiTkh3QEvC3861GKy7HSLOuc3aTsDDI27jsDqvvJNSB-mVnKUaRpoqfNiaj3idF-Po8pSAaaFAZnoQF7uy7J8UI1GnEXRJWwbYZJ4BKEoW_WqJvJWiH6OuU6XA_xLcqLcTBuMa9glEfn/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/AVvXsEicdiTkh3QEvC3861GKy7HSLOuc3aTsDDI27jsDqvvJNSB-mVnKUaRpoqfNiaj3idF-Po8pSAaaFAZnoQF7uy7J8UI1GnEXRJWwbYZJ4BKEoW_WqJvJWiH6OuU6XA_xLcqLcTBuMa9glEfn/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 :>

Read More

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.=)

Read More

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:

1. sign in to your blog


2. 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 =) .

Read More

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/AVvXsEgUAagEBO2p1P4P8xHbyzC1YKcQ9KPRMkp80XsRI1qGMIO03PDr7mse1EQ5M60KfPI6jdgu7zhmnQGeDu2S8jGTGcMczdh7Skl4FVins74b569oDlf78Her5eZjaJEA5VM4uKn748u6XKGK/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.

Read More

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 =) .

Read More

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

Read More

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 =) 

Read More