Css Animated Menu Widget for Blogger

Blog navigate is very important. Readers loves to stay those blog that's have easy navigate Menu and if you put cool CSS Animated Menu to your blogger its attract the user mind totally in your blog.

You also read my previous article about Simple settings for Firefox and Internet Explorer on Blogger

Let's see how to add CSS Animated Menu in Blogger

Just Follow These Simple Steps

• Go to Blogger Dashboard
• Click on Drop & Down Menu of your blog
• Click layout >> and click Add a Gadget >> Html/Javascript 
• Then paste the below code on it

<style>
#fbt-nav {margin:0 auto;list-style: none;width: 965px;height: 86px;overflow-y: hidden;}
#fbt-nav li {float: left;}
#fbt-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;}
#fbt-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#fbt-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#fbt-nav li a:hover {cursor: pointer;}
#fbt-nav li a:hover img {top: -85px;}
#fbt-nav li a:hover .aname {top: 85px;}
#fbt-nav li:nth-child(1) a {background: #150517;border-radius: 5px 0 0 5px;}
#fbt-nav li:nth-child(2) a {background: #3E3535;}
#fbt-nav li:nth-child(3) a {background: #4A4344;}
#fbt-nav li:nth-child(4) a {background: #595454;}
#fbt-nav li:nth-child(5) a {background: #616D7E;}
#fbt-nav li:nth-child(6) a {background: #5E5A80;}
#fbt-nav li:nth-child(7) a {background: #2B60DE;}
#fbt-nav li:nth-child(8) a {background: #38ACEC;border-radius: 0 5px 5px 0;}
</style>

<div id="fbt-nav">
<li> <a href="/"><span class="aname">Homepage</span> <img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/48/Places-user-home-icon.png" /> </a> </li>

<li> <a href="#"> <span class="aname">Archive</span> <img src="http://icons.iconarchive.com/icons/kearone/comicons/48/zip-software-icon.png" /> </a> </li>

<li> <a href="#"> <span class="aname">About me</span> <img src="http://icons.iconarchive.com/icons/aha-soft/standard-portfolio/48/About-icon.png" /> </a> </li>

<li> <a href="#"> <span class="aname">Our Blog</span> <img src="http://icons.iconarchive.com/icons/scoyo/badge/48/My-Blog-icon.png" /> </a> </li>

<li> <a href="#"><span class="aname">Science</span> <img src="http://icons.iconarchive.com/icons/iconshock/real-vista-education/48/technology-icon.png" /> </a> </li>

<li> <a href="#"><span class="aname"> Sports  </span> <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/48/Games-Soccer-icon.png" /> </a> </li>

<li> <a href="#"><span class="aname">Photos</span> <img src="http://icons.iconarchive.com/icons/apathae/satellite/48/2-Pictures-icon.png" /> </a> </li>

<li> <a href="#"> <span class="aname">Contact</span> <img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/48/Email-Download-icon.png" /> </a> </li>
</div>

• Then Click Save
• View Your blog.

You have done!

If you need more help please hit a comment below i will reply you by same :)

Read More

Simple settings for Firefox and Internet Explorer on Blogger

You will have noticed , many of us are setting up our blogs with our standard , that the image of the pattern changes when you visit your page from another Browser. Many of us who deal with the Blogger work in Chrome. So far I consider him the most reliable ( I speak always about Blogger and not Pages on other platforms ) .

As a second option I prefer Firefox, but lately I realized that I do some thing . Some settings in relation to the dimensions of my change.

So we need to find some code that intervenes only in these specific Browsers .
It's very simple.
To make settings in Internet Explorer use the following code above the tag </ head>:

<! - [if IE]>
<style>
The CSS CODE WHO WANT TO MAKE A PARTICULAR SET
</ style>
<! [endif] ->

To make settings in Mozilla Firefox use the following code above the tag </ head>:

 <style>
@-moz-document url-prefix () {
The CSS CODE WHO WANT TO MAKE A PARTICULAR SET
}
</ style>

Read More

How To Add SEO friendly Meta tags for blogger

After my previous article about How To Add Favicon in Blogger Tutorial today i am going to share How To Add SEO Friendly Meta Tag For Blogger (Blogspot) Blog.

Meta tags are very important factor for blogger. It's provide our blog details to search engines crawler.It is like as a SEO work.

Lets See How To Put Meta Tags in Blogger For SEO

Step 1.
Login to Blogger >> Go to Dashboard >> Template >> Edit Html

Step 2.
Find the following code [Tip: Press  Ctrl+F anywhere in template editor]

<head>

Step 3.

After this tag paste the following code.

<meta content='Your Blog Description' name='description'/>
<meta content='Keyword1,Keyword2,Keyword3' name='keywords'/>
<meta content='Author Name' name='Author'/>
<meta content='Author Email Address' name='Email'/>
<meta content='all' name='robots'/>
<meta content='index, follow' name='robots'/>
<meta content='Language Name' name='language'/>
<meta content='Country Name' name='country'/>
<meta content='blogger' name='generator'/>

Step 4.
Replace all the RED words with your own need.
Click on Save Template .

You have done if you face any problem to intall this tag in your blogger blog please let me know in comment i am glad to see your comments here. :)

Read More

How To Add Favicon in Blogger Tutorial

After my previous articles about How To Add Author Bio Below Post in Blogger today i am going to share How to Add Custom Favicon in Blogger

Favicon is simply put a Icon or trademark that represents your blog or website. It is a unique logo that represents you and your brand all across the internet.

Lets See How To Add Custom Favicon in Blogger

• Go to blogger dashboard.
• Click the Drop-Down arrow and go to the layout of your blogger blog.
• Now in upper left corner layout you can see favicon button click on edit button.

• The new box appear and click on the brows button to insert the favicon to website.

Now you have to remember these things while adding favicon

Favicon site is not greater then 100kb

And your favicon sized should be square in pixel like 16x16 or 32x32

           (If the setting is not the same as i said then it may cause the problem in installing the icon)

• Now click on save.
• And next the box will close.

You must restart the browser to see the effect, if you still now seeing favicon the you must clear the firefox, google chrome or internet explorer history to see the changes you made.

You have done if you faced any problem to add favicon in your blog just hit a comment below i am glad to see your responses here. :)

Read More

How To Add Author Bio Below Post in Blogger

After my previous article TechPress Blogger Template today i am going to share how to add author bio below post in very simple step.

Author bio below post is very important because most of reader see author name first then read their article but you have to create your author ranking some of people only reads their favorite author post. i am researching in how to create author ranking when i got it complete i will share it to my readers.

So let's see how to put author bio below post in blogger

Follow these simple steps

• Go to Blogger dashboard >> Template >> Edit HTML and find below HTML code (to find code, just click anywhere on the HTML editor and press ctrl+f).

<div class='post-footer-line post-footer-line-1'>

Note: if you are seeing this code two time just see this code (<div class='post-footer-line post-footer-line-1'>) which is seen below this code - <div class='post-footer'>: 

• Now you need to the place the following code below the code that I have mentioned earlier. 

<div class="beh-entry-author">
<div class="author-header main-color-bg">
<h4 class="title">
<a rel="author" href="#">Admin Name Here</a>
</h4>
</div>
<div class="author-wrap">
<div class="author-avatar">
<img class="avatar avatar-80 photo" width="80" height="80" src="Your Image Link Here"/></div>
<div class="author-description">
Author Bio Here Write something about yourself.
<div class="author-link">
<a rel="author" href="#">
Facebook
<span class="meta-nav">?</span>
</a>
</div>
</div>
</div>
</div>
<div class="entry-social">
<div class="fb">
<a target="_blank" href="Your_Facebok_Page">Facebook</a>
</div>
<div class="twitter">
<a target="_blank" href="Your_twitter_Profile">Twitter</a>
</div>
<div class="gplus">
<a target="_blank" href="Your_Googleplus_Follow">Google+</a>
</div>
<div class="linkedin">
<a target="_blank" href="Your_Linkedin_Profile">Linkedin</a>
</div>
<div class="pinterest">
<a target="_blank" href="You_Pinterest_Page">Pinterest</a>
</div>
<div class="delicious">
<a target="_blank" href="Your_Delicious_Profile">Delicious</a>
</div>
<p style=" line-height:0px; font-size:7px; font-weight:bold; text-align:right"><a style="color:#D3D3D3;" href="http://www.tonyisright.blogspot.com">blogger widgets</a></p>
</div>
<style>
.entry-social {
    margin-bottom: 20px;
    overflow: hidden;
}
.entry-social a {
    color: #FFFFFF !important;
    display: block;
    font-family: "Open Sans","Tahoma","Verdana","Arial",sans-serif;
    font-weight: 600;
    padding-left: 20px;
}
.entry-social div {
    float: left;
    margin-right: 10px;
    width: 138px;
}
.entry-social .fb a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivDX6Jz9HSmdl1PvsGjDFyiUhSyqNiIG5RTjTBqaHOnS5T3vuIqIlOiK2JBgBHh7C4wervx-9QDJyBvcaIvnrfR6ma7-LZzXuN3ZrBjaPUHxZ9F3H3ps88rBII6I3OkBsR8fkLSupDwAKO/s1600/fb14.png") no-repeat scroll 10px center #3B5999;
    padding: 7px 10px 7px 26px;
}
.entry-social .fb a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivDX6Jz9HSmdl1PvsGjDFyiUhSyqNiIG5RTjTBqaHOnS5T3vuIqIlOiK2JBgBHh7C4wervx-9QDJyBvcaIvnrfR6ma7-LZzXuN3ZrBjaPUHxZ9F3H3ps88rBII6I3OkBsR8fkLSupDwAKO/s1600/fb14.png") no-repeat scroll 10px center #324B81;
}
.entry-social .twitter a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg5-4-U_BQA_g-EHJNCNVdZdHBfWHGQtbrdJ4xLG5RNBFewPNVK4SmRTBm9v1cV89BiHuKlwivbJtOMfm0P7CaO-afs4c3TeaPr88HWCjDfekohFd6DI4I7VKPel3KvMhyELUUAy5gEyRZ/s1600/twitter14.png") no-repeat scroll 8px center #01BBF6;
    padding: 7px 10px 7px 32px;
}
.entry-social .twitter a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg5-4-U_BQA_g-EHJNCNVdZdHBfWHGQtbrdJ4xLG5RNBFewPNVK4SmRTBm9v1cV89BiHuKlwivbJtOMfm0P7CaO-afs4c3TeaPr88HWCjDfekohFd6DI4I7VKPel3KvMhyELUUAy5gEyRZ/s1600/twitter14.png") no-repeat scroll 8px center #01A7DE;
}
.entry-social .gplus a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijJiAE9xLm49P7s0Q_NyZxx4aav-e5MxyFD9JteLSpStr1RzDJo2fBlsxDRGLhG551sZZIabPgJ9LoygJl1h9oGiQhDH_5iCdNu56wZ7bHU95-9K8comxt0FdZ4dxffpV0QT2JMszF79bi/s1600/gplus14.png") no-repeat scroll 10px center #D54135;
    padding: 7px 10px 7px 32px;
}
.entry-social .gplus a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijJiAE9xLm49P7s0Q_NyZxx4aav-e5MxyFD9JteLSpStr1RzDJo2fBlsxDRGLhG551sZZIabPgJ9LoygJl1h9oGiQhDH_5iCdNu56wZ7bHU95-9K8comxt0FdZ4dxffpV0QT2JMszF79bi/s1600/gplus14.png") no-repeat scroll 10px center #BA3227;
}
.entry-social .linkedin a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieOcTPeSfrtSW2Tr3EaAqXBp25PQeWGCHwdDk28cvs3KW7P86IOEhnObWIlCPVBRF1qdshefNNB88126r8cP0bRfhswCHK3UDg-qndG43cNC9UOlvVBqCA3h9sMTJqutvQ7-GsH5uD38A6/s1600/linkedin14.png") no-repeat scroll 10px center #167FB1;
    padding: 7px 10px 7px 35px;
}
.entry-social .linkedin a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieOcTPeSfrtSW2Tr3EaAqXBp25PQeWGCHwdDk28cvs3KW7P86IOEhnObWIlCPVBRF1qdshefNNB88126r8cP0bRfhswCHK3UDg-qndG43cNC9UOlvVBqCA3h9sMTJqutvQ7-GsH5uD38A6/s1600/linkedin14.png") no-repeat scroll 10px center #136F9B;
}
.entry-social .pinterest a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHMYc5s_CV6UqnDWCetXdI1ba3aYAQxpgTTYtsB5V-cOawdSXSKQK51y_pfGD4AelvzLc5qu_cyoXllLalMkoxHQZLgd0QmSZFGt2u425RyWuN2fl3uPGoUnu5hO_fCHeJ1dykNDQ3wqhr/s320/pinterest14.png") no-repeat scroll 10px center #CB2027;
    padding: 7px 10px 7px 32px;
}
.entry-social .pinterest a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHMYc5s_CV6UqnDWCetXdI1ba3aYAQxpgTTYtsB5V-cOawdSXSKQK51y_pfGD4AelvzLc5qu_cyoXllLalMkoxHQZLgd0QmSZFGt2u425RyWuN2fl3uPGoUnu5hO_fCHeJ1dykNDQ3wqhr/s320/pinterest14.png") no-repeat scroll 10px center #B01C23;
}
.entry-social .delicious a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk_Cwk726SGlWVWDh7LKPwTaKFBA5YMXVFsAnHF32pU-EwNrlADHYvY1h2tn3Q7PDj3eN76b2MbXoXi6eSGRwIPYurLz482-gFg-n_8GVXF87xhfRjuOPvxdpH8zP91dNIHXCFcmT4sM1_/s320/delicious14.png") no-repeat scroll 10px center #3173D1;
    padding: 7px 10px 7px 32px;
}
.entry-social .delicious a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk_Cwk726SGlWVWDh7LKPwTaKFBA5YMXVFsAnHF32pU-EwNrlADHYvY1h2tn3Q7PDj3eN76b2MbXoXi6eSGRwIPYurLz482-gFg-n_8GVXF87xhfRjuOPvxdpH8zP91dNIHXCFcmT4sM1_/s320/delicious14.png") no-repeat scroll 10px center #2963B8;
}
.entry-social .delicious {
    margin-right: 0;
}
.beh-entry-author {
    margin-bottom: 20px;
}
.beh-entry-author .author-header {
    padding: 1px 15px;
}
.beh-entry-author .author-header h4 a:hover {
    color: #000000;
}
.beh-entry-author .author-header h4 a {
    color: #FFFFFF;
}
.beh-entry-author .author-header h4 {
    color: #FFFFFF;
    font-size: 15px;
    text-transform: uppercase;
}
.beh-entry-author .author-wrap {
    border: 1px solid #EEEEEE;
    overflow: hidden;
    padding: 12px 15px;
}
.beh-entry-author .author-avatar {
    float: left;
    height: 80px;
    margin-right: 30px;
    width: 80px;
}
.beh-entry-author .author-link {
    margin-top: 5px;
}
.main-color-bg {
    background: none repeat scroll 0 0 #2BBFF6;
}
.beh-entry-author a {
    color: #3A3A3A;
    outline: 0 none;
    text-decoration: none;
    transition: all 0.2s ease 0s;
}
.entry-social a {
    color: #3A3A3A;
    outline: 0 none;
    text-decoration: none;
    transition: all 0.2s ease 0s;
}
</style>

Now just paste your social profile Links in the above code and write your name and description in the above code and hit save the template. Wasn't it easy and simple? Remember to change the above links with your own links and write a small info about yourself.

If you face any problem to install this widget in your blog please leave a comment below i am glad to see your comments here. :) 

Read More

TechPress Blogger Template

TechPress is a Responsive, 3 Columns Blogger Template for Technology Blogs. TechPress Blogger Template has a jQuery Slider, Dropdown Menus, 468x60 Header Banner, Related Posts, Breadcrumb, 3 Columns Footer, Tabbed Widget and More Features.

DEMO    |    DOWNLOAD

Template name: TechPress

Template type: 2 Sidebar, 3 Column, 3 Column footer, Adapted from WordPress, Blue, Breadcrumb, Elegant, Featured Section, Fixed width, Responsive, Fresh, Header Banner, Magazine, Premium, Related Posts, Right Sidebar, Slider, Tabbed widget, Technology, Top Navigation Bar, Web 2.0, White

Release date: April 20, 2014

Author Name and URL: Muhammad Irfan / http://www.tonyisright.blogspot.com

Original Designer URL: http://newwpthemes.com/techpress-free-wordpress-theme/

Basic Instructions: How to install a Blogger template

Shortcodes

Added extra options to your post editing page to make it easier to display tables, tabs, buttons and more without learning code.

SEO Optimized

Get an advantage over the competition on search engines with a Search Engine Optimized theme.

Theme Options

Customize your theme with our comprehensive theme options. Everything is organized into tabs to make it easy to use.

Custom Widgets

Get some exclusive widgets that allow you to display adverts, link to your social networks and display site content in the sidebar.

Responsive Design

A growing number of users are browsing the web on mobiles and tablets. Your theme comes with a built-in mobile friendly version.

Localization Ready

Translate the theme with the included .po file. I18n has never been so easy.

Featured Posts Slider

Capture your user's attention with a customizable and interactive slideshow. You'll find loads of ways to edit it in the theme options.

WordPress Compatibility

Every theme is updated and compatible with the latest WordPress version. We don't use any deprecated functions.

Cleaned Code

Uncompressed and organized code makes the theme easy to edit. Your theme follows WordPress' best practices.

Page Templates

A selection of the page template is available with your theme. This gives you the option to have Sitemaps, contact forms and pages without sidebars.

Contacts Page Template

The built-in contact form makes it easy for users to communicate with you. Just enter your email address and it's ready.

WooCommerce Ready

Start selling online quickly with WooCommerce. There's no need to install or edit your theme to display your products online.

Read More

How To Install/Upload Custom Blogger Template

This article has explained how to upload a blogger template into your blog.

First download your new blogger template to your computer. If the template is contained in a zip file, ensure you have extracted the XML template.

1. Login to your Blogger Account.

2. Click on your blog name.

You can see an overview of your blog.

3. Click on "Template".

4. Click on "Backup / Restore" button.

"Backup / Restore" window will appear.

If you want to download your previous template, click on Download Full Template.

5. Browse your template file (XML file) and click open.

6. Finally click on "Upload" button.

You are done.

Go to "Layout" to rearrange your widget positions correctly.

If you face any problem to upload a custom blogger template, please leave a comment below I am glad to see your comments here. :)

Read More