Thursday, January 31, 2013

10 Steps to Jump Start Traffic to a New Blog

There are plenty of  ways to get  traffic  to your blog, but the tips on this article are concerned with getting traffic for your  blog  posts now,  as  oppose  to  later. That is why there is little  advice on  how to improve your blogs SEO, etc, because climbing up the search engines  results    pages   takes  time. These  tips  are things  you  can  try  today  in  order  to  get     traffic tomorrow.
blog-traffic

1 - Participate in forums and online chats

This is the first piece of advice that Google gives when you set up your first website and sign up
to their Google webmaster tools. That is why it is point number one, because as a new blog you
should be participating in online chatter. You may not gain a lot of direct traffic but it is a good
way of ingratiating yourself and your blog into the online community.

2 - Set up a Facebook Fan Page

This is a good way to get a little extra attention to your blog. People are going to stumble across
your Facebook fan page, and if you are good enough at promoting your blog on it then you will
gain extra traffic. The good thing is that unlike building up your blog’s search engine ranking,
your traffic from the Facebook Fan page can start pouring in immediately.

3 - Tweet about your Blog at least once per day


Tweets are great ways to grant a little bit of publicity to your blog. Most of your Tweets will be
ignored but some of them will get through and affect your traffic numbers if you post at least
once per day. Simply add an informative snippet of information about your blog post and try to
peak a few people’s curiosity.(Twitter Traffic Driver For Your Site)

4 - Upload at least five blog posts to start with

When you first create your blog you may start with the honorable idea of posting a new post
every week, however if you want to get your traffic score rising you will need to start off with
more than one post. Add five posts to begin with, and then start adding one post per week.

5 - Affiliate advertise your most shocking blog posts

It is going to cost you a lot of money if you wish to boost your blog attendance via affiliate
advertising; however, you could try advertising a few of your more shocking or high quality blog
posts. If you advertise the ones that you feel will turn viewers into loyal viewers, then it may act
as a good jump-start for your blog.

6 - Comment on other related blogs and link up

Other blogs that are related (in theme or genre) to your blog are going to be attended by
people interested in your blog topics. Add comments to other blogs, and if they allow links, you
should link to your website or blog. It is a good way to gain a little bit of direct traffic.

7 - Pay for links pointing towards your blog

There are legitimate directories that you can use to pay for a link to your blog. This will improve
your blogs SEO and help you gain a little bit of direct traffic too. You could also pay a private
blog owner to allow you to install a link on their blog.

8 - Participate in areas where your target audience gathers

There are forums and websites that your target audience are bound to congregate. If there are
any interactive elements at all then you must participate. Even if you cannot add a link into the
fray, you must at least try to stimulate a little bit of interest for your blog, and mention your
blogs name so that people search for it.

9 - Specifically target certain keywords in your blog

You are going to need to do a little bit of keyword research and pick between three and five
keywords. You then need to add each one at least three times to your blog post, as well as
trying to add a few synonyms too. You should also put these keywords in your tagged keyword
section. Targeting specific keywords may help to jump-start the traffic you gain from the search
engines (organic traffic).

10 - Use question and answer websites frequently

They allow you to answer questions whilst adding a link. If you pick the questions that relate to
the topic of your blog posts then there is a good chance that the people reading the questions
and answers will follow you link. The good thing is that you can answer questions that are
based around any of you blog topics. You can answer a question today about a topic you wrote
a blog post for years ago. You can point the new link to your old blog post and people may
follow it and read your blog posts that you posted years ago.

Author’s bio:
My name is Sonia Jackson. I represent the Australian web-site essay-bag.com. We’ll
help you to solve all problems with writing different essays and research papers according to the
rules of the universities and colleges in Australia.
If you would like to write for bloggertrix, check our guest posting guidelines
Read More

Wednesday, January 30, 2013

Vertical Hover Effect Css3 Menu Bar For Blogger

In this tutorial im gonna explain how to add vertical hover effect Css3   menu bar for your blog. You can change your  color  as your like. Im using juts  Css3 and HTML for these menu   bar.  In this tutorial You can  get my all  menu bar here

Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here bloggertrix.com */

ul li {
background:#000;
list-style: none;
height: 44px;
float:left;
padding:10px 5px;
}
ul li a {
width: 175px;
height: 40px;
line-height: 53px;
border-bottom: 4px solid #636393;
padding:0px;
color: #fff;
font-size:18px;
font-weight:lighter;
text-align:center;
text-decoration: none;
display: block;
-webkit-transition: .2s all linear;
-moz-transition: .2s all linear;
-o-transition: .2s all linear;
transition: .2s all linear;
}
li:nth-child(1) a {
border-color: #636393;
}
li:nth-child(2) a {
border-color: #B5222D;
}
li:nth-child(3) a {
border-color: #D4953C;
}
li:nth-child(4) a {
border-color: #609491;
}
li:nth-child(5) a {
border-color: #87A248;
}
li:nth-child(1) a:hover {
border-bottom: 35px solid #636393;
height: 9px;
}
li:nth-child(2) a:hover {
border-bottom: 35px solid #B5222D;
height: 9px;
}
li:nth-child(3) a:hover {
border-bottom: 35px solid #D4953C;
height: 9px;
}
li:nth-child(4) a:hover {
border-bottom: 35px solid #609491;
height: 9px;
}
li:nth-child(5) a:hover {
border-bottom: 35px solid #87A248;
height: 9px;
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<ul id="nav">
 <li class="home"><a href="#">Home</a></li>
 <li class="tutorials"><a href="#">Tutorials</a></li>
 <li class="about"><a href="#">Coding</a></li>
 <li class="news"><a href="#">WordPress</a></li>
 <li class="contact"><a href="#">Contact</a></li>
</ul>
Replace # with your links.

10. Now save your HTML/Javascript'.

    You are done...
Read More

Tuesday, January 29, 2013

SEO Resolutions for 2013 that can Make You a Better Blogger

It is that time of the year when most  of us  get engaged in   brainstorming  to  choose  something as  our New Year  resolutions. Whether or not we keep up with the  resolutions  each  year, we  still  start  off with high hopes  the  next  year. We  make  resolutions   related to our  persona, our  habits,  our  work, our    relationships and our hobby. Most probably blogging is either  your hobby or your work. As a blogger myself, I have made certain resolutions related  to   my blog’s  SEO,  that fit
well for  blogging in the  year  2013,  which happens to be  right  after  the year of  learning  and  surprises  for bloggers (2012). I’m going to share the list with you as I   believe  that       these  resolutions  if  followed  with dedication will ensure better search engine ranking of your blog.

SEO-2013

Before we proceed, it’s better to know what SEO is and how it matters in blogging (especially if you
are a newbie. If you are not, skip the next paragraph).

SEO is the process that helps you improve your website’s ranking in the search engine. In other
words SEO gets you to the first pages of a search result, thus improving your blog’s visibility. SEO
has grown through the years and is now one of the most important facets of blogging and requires
expertise. You need to either learn it through trial and error, or hire a SEO expert to handle it.

Now that you got a brief idea of SEO, let’s get into action. Jot down these SEO resolutions for 2013
for better blogging –

1.  Will Produce Better Content: Content is king. This is a famous saying in the field of
     blogging; the value of this saying has increased multifold after the Google Panda update last
     year. So it is undoubtedly the paramount resolution in any smart blogger’s mind for 2013.
     Your content can always be made better. There can be no end for that. So embark upon
     making better content every time as compared to your last time.

     Use bullets, header tags, paragraphs and fine tune your titles, grammar, writing style. Making
     people connect emotionally with your content is the key. All this forms a part of content SEO
     for long lasting ranking results.

     Also ensure that you provide wider range content; not just words, but go beyond words with
     images, videos and infographics.

2.  Will Be Really Social: Newbie bloggers often mistake being social to having accounts,
     groups and pages in various social networking sites and blogging directories; and then
     publicizing each post in those sites not caring to know if people really bother to see the posted
     content, only with the goal of doing well in SEO. Being social in the real sense is interacting
     with your fans and followers. Some ways to interact could be conducting captivating polls,
     offering giveaways, triggering interesting contests and sometimes simply asking them how
     they are doing.

     What is the point if your presence in social networks is no different from a newsletter leaving
     a chunk of posts? You need to differentiate between the two, Right?

     After all social networks are meant to be entertaining.

3.  Will Diverge My Links: The earlier a blogger learns this, the better he gets. This is a vital
     learning from the last year’s Google Penguin algorithmic update. Otherwise also, this strategy
     is a good choice, as it gets your blog link juice from various blogs (better be it from the same
     niche), through various links (posts/pages) and various keywords (I meant anchor text). If
     you feel that link building is not your cup of tea, better resort to SEO experts who can do the
     hard work for you, so that you can concentrate more on other aspects of blogging that you are
     good at.

4.  Will be Informed: It is always better to be informed about the latest news and happenings
     in (and to some extent out of) your niche. This helps you take informed decisions.

     Would you dare to buy unnatural links after being educated about the Penguin update? You
     may otherwise. So save yourself by keeping yourself updated about all that you and your blog
     are involved in. Taking uninformed decisions may land you in trouble. Some stuff you must
     follow as a blogger are- Google’s official blogs, PRO bloggers in your niche and newsletters
     of services you use for your blog (like plugins). It’s always better to follow updates from SEO
     experts because the valuable information shared by them can help you rank well in Google.

 These are some SEO resolutions I feel are immensely relevant to 2013 (due to major changes in
 the way search works). Do share your SEO or blogging resolutions in the comment box.

 If you are not much into SEO, your best SEO resolution could be hiring an SEO expert.

 Happy Blogging. Happy Ranking.

About author: Sandy Trevino is a SEO, PPC expert specialize in writing various topics about SEO
and ultimate tips for positive SEO results for small business to big organizational websites.
If you would like to write for bloggertrix, check our guest posting guidelines
Read More

Monday, January 28, 2013

Ice Cubes Social Sharing Widget For Blogger

In this post im gonna explain  how to add Ice Cubes social   sharing  buttons  for  your blog.  This is just widget.  you can  add  it  to  your blog easily.  I just using Css  with  HTML.  Check   below demo  link.You can get social media post with similar widgets.

Ice+Cubes+Social+Sharing+Widget+For+Blogger


Demo

1. Log in to blogger  Design > Page Element.

2. Click Add Gadget and select 'HTML/Javascript

3.Now Paste Below code.

<style>
/* Bloggertrix  */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}</style>

<br />
<center>
<br />
<ul class="bubblewrap">
<li><a href="http://www.linkedin.com/Username"><img src="http://1.bp.blogspot.com/-RnC3BKn17zo/UQaDHOWAovI/AAAAAAAAGhY/dc60NAQQWTw/s1600/bloggertrix_linkedin.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.facebook.com/bloggertrix"><img src="http://1.bp.blogspot.com/-Y0nktRRy55U/UQaDG9wOkwI/AAAAAAAAGhU/2sieeVzygRQ/s1600/bloggertrix_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.stumbleupon.com/username"><img src="http://2.bp.blogspot.com/-SHP-koUiNhw/UQaDIH2UqGI/AAAAAAAAGho/snk0w0AHqG8/s1600/bloggertrix_stumbleupon.png" title="Add to Digg" /></a></li>
<li><a href="http://www.twitter/bloggertrix"><img src="http://2.bp.blogspot.com/-4FqWnTweJKE/UQaDIZPUZ0I/AAAAAAAAGhw/b7t7Xgu9ONY/s1600/bloggertrix_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/bloggertrix"><img src="http://2.bp.blogspot.com/-Y1S9_OWv5pE/UQaDG2U9fqI/AAAAAAAAGhQ/qD0e5hQ6Kxs/s1600/bloggertrix_RSS.png" title="Add RSS Feed" /></a></li>
</ul>
</center>


After paste above code
* Replace bloggertrix with your facebook username
*Replace bloggertrix  with your  twitter Username
*Replace Username  Linkedin username
*Replace bloggertrix with feedburner username
*Replace bloggertrix with stumbleupon username

4. Now save your HTML/Javascript'.

    You are done...
Read More

Sunday, January 27, 2013

Should You Go For SEO or PPC?

SEO is the long  term  solution  but  this solution will rarely  generate   the   necessary   leads  fast   enough. Putting off SEO in favor of PPC can save you money initially,  but it isn’t  always the  right thing to do. It’s best to invest in both while keeping in mind that PPC is always more easily  measured  in terms  of CPA. It will always be the quicker solution.
PPC-Versus-SEO

For instance if you’re working on a startup that provides software development services for Android and iPhone apps and your goal is to obtain 10 projects a month in order to break even in about 3-4 months’ time. Assuming that each project will generate about $3000 and your marketing budget is limited to about $800 per month. You may have to rework your strategy.

Your relevant keywords would be iPhone app, iPhone app development, create Android app, hire iPad app developer etc. The problem is that these relevant keywords have an extremely high CPC and there is fierce competition for them.

Look at Things from an SEO & PPC Point of View


If you’re trying to target those specific keywords, you’re going to have to look at things from an SEO and PPC point of view. Evaluating your strategy with this in mind, you’ll most likely come to the conclusion that it might be difficult to gain at least 10 projects a month solely using an SEO strategy. You’ll be struggling just to get on page one and if this is the case, you’re going to almost have to force yourself to get on that page using PPC instead in order to make the feat more affordable.

The relevant keywords that you’ll need to get have about 10,000 searches per month in the US according to the Google Traffic Estimator—this information should be taken with a grain of salt.

If we are to assume that a 3% click through rate will occur for the top positions—and the competition for those spots appears to be fierce—this rate will end up being much lower. You’ll be getting about 300 clicks.
Now, you’ll want to apply a 5% conversion rate which will result in about 15 leads per month. You’ll need to use both SEO and PPC to ensure that you reach your goal. You’ll also want to make sure that you use targeted keywords and geo-targeted keywords to reduce wasted effort. You can use the data you collect through PPC to assist you in refining your SEO strategy.

Don’t Overlook a Solid Content Strategy

SEO and PPC are both effective strategies, but with recent updates, you’ll also want to consider investing in a solid content strategy to complement your SEO efforts.

● You’ll need an industry specific blog that is rich in content that will appeal to your ideal client.
● You’ll also want to write guest blog posts for established blogs.

Once you’ve generated quality content you’ll want to submit this content to social bookmarking directories
in the hopes that these links will go viral.
Don’t forget to engage in publicizing your efforts through social media networks. These steps should help you narrow down the most valuable strategies that will help you achieve your long-term business goals.

Author Bio:
Agency Platform provides white Label Inbound Marketing Software that suits for inbound marketing agency that helps to stay on track, share and collaborate, work faster and close more deals.
If you would like to write for bloggertrix, check our guest posting guidelines
Read More

Saturday, January 26, 2013

Css3 Smooth Slideout Menu Bar For Blogger

In this tutorial im gonna  explain how  to  add  Css3 slide-out menu ba r for  your blog. This   is  also act like jquery menu  bar. This  menu  will  useful  who try to add  more  pages  for your blog.Im using Css3 and HTML for creating this widget.You can  get my all  menu bar here

Css3+Smooth+Slideout+menu+bar+for+blogger
Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here bloggertrix.com */

ul.nav8 {
    list-style:none;
    height:120px;
    margin:0;
    padding:0;
}

ul.nav8 table {
    border-collapse:collapse;
    width:0;
    height:0;
    margin:-1px 0 -5px -1px;
}

ul.nav8 > li {
    float:right;
    height:120px;
    width:40px;
    position:relative;
    overflow:hidden;
    -webkit-transition-duration:.5s;
    -moz-transition-duration:.5s;
    -o-transition-duration:.5s;
}

* html ul.nav8 > li {
    width:auto;
}

ul.nav8 > li a.ie6 {
    float:left;
    height:120px;
    width:39px;
    position:relative;
    overflow:hidden;
}

ul.sub {
    list-style:none;
    height:120px;
    width:600px;
    background:url(http://www.script-tutorials.com/demos/107/images/panel.png) no-repeat right top;
    position:absolute;
    left:0;
    top:0;
    margin:0;
    padding:0;
}

ul.sub li {
    float:left;
}

ul.sub li:first-child {
    margin-left:45px;
}

ul.sub li a {
    display:block;
    width:110px;
    height:120px;
    float:left;
    overflow:hidden;
    position:relative;
    text-decoration:none;
    color:#000;
}

ul.sub li a b {
    font-size:14px;
    display:block;
    padding:15px 15px 5px;
}
ul.sub li a b:hover {
    font-size:16px;
    color:#FF0000;
    display:block;
    padding:15px 15px 5px;
}
ul.sub li a p {
    font-size:12px;
    display:block;
    margin:0;
    padding:0 10px;
}

ul.sub li a p:hover {
    font-size:13px;
    display:block;
    margin:0;
    padding:0 10px;
}

ul.nav8 > li:hover {
    width:600px;
}

ul.nav8 > li a.ie6:hover {
    direction:ltr;
    width:600px;
}

ul.sub li a:hover i {
    opacity:1.0;
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<ul class="nav8">
        <li>
        <!--[if lte IE 6]><a class="ie6" href="#url"><table><tr><td><![endif]-->
            <ul class="sub">
                <li><a href="http://www.bloggertrix.com/"><b>Home</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://www.bloggertrix.com/search/label/CSS"><b>Tutorials</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://www.bloggertrix.com/search/label/CSS"><b>Support</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://www.bloggertrix.com/search/label/CSS"><b>About</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://www.bloggertrix.com/search/label/CSS"><b>Back</b><p>custom description here</p><i></i></a></li>
            </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
    </ul>
Replace # with your links.

10. Now save your HTML/Javascript'.

    You are done...
Read More

Friday, January 25, 2013

Five Killer Ways to Make Money with your Personal Blog

Are you a blogger? If yes, then you  would have come across  the  question – ‘How to  make  money with my personal  blog?’  Sometimes,  even   you  would  have thought about  it. Haven’t you? Everybody would love to make  a  few  dollars  out  of their words. If you are also one  amongst  those  bloggers,  then  here are fivekiller ways to make money  with  your   personal blog

Make+Money+With+Blogging

Niche Concept:

Blogs about specific interests will have a steady stream of traffic and will make huge profits. Check out the top blogs and list out the niches that people are interested in. This is because people interested
in a particular topic like technology or entertainment will visit only the blogs related to that niche. So
choose a niche for your blog that you are passionate about, and start maintaining your blog with regular updates. This will make it easy for you to update your blog with latest news and stories.

Content is King:

Try updating your blog regularly to keep your readers engaged. When it comes to blogging, there’s
always a necessity for quality content and great writing skills. It’s not that you need to be an
experienced writer to make money, but you should be an excellent writer to attract readers. Choose
latest trending topics to discuss on your personal blog. While it’s true that you can do anything you
please on your personal blog, the fact that your audience should like it can't be denied. Do remember,
writing about hot news would attract visitors, but turning them to readers is possible only if your
content is unique. Allow your readers to comment on your posts, so that you get to know what your
readers are expecting from you.

Ads –Limit it:

It’s basically about Google Adsense here. Most bloggers ask the question - ‘How do I get my readers to click the ads?’ but it actually should be ‘What should I do to place relevant ads on my content to attract my readers?’ In simple words, if you place relevant ads, your readers are eventually going to click it. At the same time, remember the fact – ‘ads are to be between content, and not content between ads.’

Spring Clean Your Personal Blog:

Actually, this must have been the first one to be listed. Most bloggers have their sidebars cluttered and unorganized with almost all sorts of things. So, as a good start, go through all your widgets and check if those widgets really add some positive value to your blog, like drive traffic or is it important to have it. If you feel it to be unnecessary, then just delete it.

Be the Ultimate Affiliate!

Now that you are done with cleaning your side bars, start sharing affiliate links. Don’t include any
banners on your sidebar, footer or header, apart from the essential affiliate programs. Try including
the affiliate links in all the articles related to the links and also ensure you give a brief description of the service.

Have you edited your blog to adhere to the five killer ways to make money mentioned above? If yes,
then you can surely expect a substantial amount of income from your personal blog. But, you need to be patient. You can’t make money from your personal blog overnight unless you have a substantial amount of visitors every day. Yes, start playing the ‘Search Engine Optimization Game.’ Promote your personal blog through various optimizing techniques like social media marketing, forums, guest posting, etc. By promoting your blog, you get to attract many visitors, and ultimately you get to earn from your personal blog.

This guest post is brought to you by Chad Bauer of timewarnercable.wedocable.com, a site that offers
savings and current information on time warner cable bundles
If you would like to write for bloggertrix, check our guest posting guidelines
Read More

Thursday, January 24, 2013

Unique Style V2 Social Sharing Box For Blogger

Today  im  gonna  explain  how to add  unique style social media box for  your  blog.  Few  months  ago. i posted same  social media box.This is new version with  updated. It have  nice  style. you  can check it from demo Im  using  just  CSS and HTML for this tutorial you can  get  my  earlier  Social media post collection  by click here

V1 Social Sharing Box Here
Unique+Style+Social+Sharing+Box+For+Blogger
Demo


1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here bloggertrix.com */
div#socialbox, div#socialbox ul, div#socialbox ul li, div#socialbox ul li p, div#socialbox ul li p img, div#socialbox ul li p span, #socialbox ul li p a{
background: none;border: none;margin: 0;padding: 0;}

div#socialbox{
color: #768a96;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
width:300px;}

div#socialbox ul{
background: url() repeat;
border: 1px solid #d8dcdf !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 4px #dfe4e7;
-moz-box-shadow: 0px 2px 4px #dfe4e7;
box-shadow: 0px 2px 4px #dfe4e7;
list-style: none;
margin: 0 !important;
padding: 0;}
    
div#socialbox ul li{
background-image: none;
border-bottom: 1px solid #d8dcdf;
height: 59px;
list-style: none;}
    
div#socialbox ul li:last-child{
border-bottom: none;}
        
div#socialbox ul li p{
padding: 19px 9px 0 9px;}
        
div#socialbox ul li p img{
border: none;
margin-right: 10px;
position: relative;
top: 3px;
vertical-align: baseline;}
            
div#socialbox ul li p span{
color: #425763;
font-weight: bold;}
                
div#socialbox ul li p a.socialbox-button{
background: url(http://1.bp.blogspot.com/-E5QRdIByVg0/ULOer7YwB7I/AAAAAAAAF0Y/V5hNb7e7XLE/s1600/bloggertrix-button.png) no-repeat;
border: 1px solid #d8dcdf;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #425763;
float: right;
font-size: 11px;
font-weight: bold;
line-height: 11px;
padding: 6px 10px;
position: relative;
text-decoration: none;
text-transform: uppercase;
top: -2px;}
                
div#socialbox ul li p a.socialbox-button:hover{
background: url(http://1.bp.blogspot.com/-E5QRdIByVg0/ULOer7YwB7I/AAAAAAAAF0Y/V5hNb7e7XLE/s1600/bloggertrix-button.png) 0 -27px no-repeat;}
                
div#socialbox ul li p a.socialbox-button:active{
background: url(http://1.bp.blogspot.com/-E5QRdIByVg0/ULOer7YwB7I/AAAAAAAAF0Y/V5hNb7e7XLE/s1600/bloggertrix-button.png) 0 -54px no-repeat;}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<br />
<div id="socialbox">
<ul>
<li><a href="http://www.facebook.com/bloggertrix" target="_blank" title="Like on Facebook"><img alt="Facebook" src="http://3.bp.blogspot.com/-k-i66-3QRac/ULOabPh5-dI/AAAAAAAAFzo/8_T6Ux7XwDg/s1600/bloggertrix-facebook.png" /></a>2,563 Fans                                    
<a class="socialbox-button" href="http://www.facebook.com/bloggertrix" target="_blank" title="Like on Facebook">Like</a><br />

</li>
<li><a href="http://twitter.com/bloggertrix" target="_blank" title="Follow on Twitter"><img alt="Twitter" src="http://1.bp.blogspot.com/-O8gKTilqhO4/ULOadDY-vjI/AAAAAAAAFz4/7BB73bOJTOU/s1600/bloggertrix-twitter.png" /></a>5,365 Followers                                    
<a class="socialbox-button" href="http://twitter.com/bloggertrix" target="_blank" title="Follow on Twitter">Follow</a>
</li>
<li><a href="http://feeds.feedburner.com/bloggertrix" target="_blank" title="Subscribe to Feed"><img alt="Feedburner" src="http://1.bp.blogspot.com/-d751wABGYCc/ULOacKr4HaI/AAAAAAAAFzs/z0JUCRsHe1E/s1600/bloggertrix-feedburner.png" /></a>1,094 Subscribers                                    
<a class="socialbox-button" href="http://feeds.feedburner.com/bloggertrix" target="_blank" title="Subscribe to Feed">Subscribe</a>
</li>
<li><a href="http://www.plus.google.com/107955298793879607964" target="_blank" title="Subscribe to Feed"><img alt="Feedburner" src="http://3.bp.blogspot.com/-5mINxCqjyNQ/UQCzDgwa6nI/AAAAAAAAGeA/d1ce45hB7F8/s1600/Google-plus-icon.png" /></a>1,151 Followers                                    
<a class="socialbox-button" href="http://www.plus.google.com/107955298793879607964" target="_blank" title="Subscribe to Feed">Follow</a>
</li>
<li><a href="http://pinterest.com/bloggertrix/" target="_blank" title="Subscribe to Feed"><img alt="Feedburner" src="http://1.bp.blogspot.com/-7vq3ELxtVCQ/UQCzDt7K9rI/AAAAAAAAGeE/H1EGkFh2i8g/s1600/Pinterest-icon.png" /></a>112 Pinterest                                    
<a class="socialbox-button" href="http://pinterest.com/bloggertrix/" target="_blank" title="Subscribe to Feed">Pinterest</a>
</li>
</ul>
</div>

Replace bloggertrix with your usernames.


10. Now save your HTML/Javascript'.

    You are done...
Read More

Wednesday, January 23, 2013

Css3 Green Cloud Label Widget For Blogger

In this post im gonna explain how to add nice label/ category widget  for blogger.This labes looks great, visitors   can  find  what  category  they  needs. few months  ago i  was  posted   about    Attractive Css3 Labels /  Category   Widget For  Blogger.  However this is also same trick with different style. Im using CSS3 for  this  trick  check blow image for example.Follow below steps to add it to your blog. Its easy.
Css3+Green+Cloud+Lable+Widget+For+Blogger


1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag
/*-----Custom Labels widget by www.bloggertrix.com----*/

#Label1 a{outline: 1px rgba(255,255,255,0.4) dashed;
    border: 1px rgba(0,0,0,0.3) dashed;
    padding: 4px 10px 4px 20px;
    text-decoration: none;
    color:#000000;
    white-space: nowrap;
font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    position: relative !important;
    background: #8dc63f;
    float: left;
    padding: 5px 3px;
    margin: 0 5px 5px 0;
   border-radius:4px 4px; -moz-border-radius:4px 4px 4px 4px; -khtml-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px; border-radius:4px 4px 4px 4px;
}
#Label1 a:hover{color: rgba(0,0,0,0.5);}
.label-size{line-height:1.5;align:left;}

7. Now Click  Save Template.

    You are done...
Read More

Tuesday, January 22, 2013

Modern Ribbon Style Navigation Bar For Blogger

We can do more thing  by  using Css3. This  is also another cool work by using Css3.Actually Its  easy to create Ribbon navigation  bar  with  Using  Css3 Just look at the  code,  you  will  figure  out,How it work.I  added  demo  page  for  those  who want  to check it  before  add to  your  blog. You can  get my all  menubar here
Ribbon+Style+navigation+bar
Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here bloggertrix.com */

#navigation_container {
 margin: 0 auto;
 width: 900px;
}
#navigation2 li {
        list-style: none;
        display: block;
        float: left;
  margin: 1em 0.8em;
}
#navigation2 li a {
        text-shadow: 0 2px 1px rgba(0,0,0,0.5);
        display: block;
        text-decoration: none;
        color: #f0f0f0;
        font-size: 1.6em;
        margin: 0;
        line-height: 28px;
}
#navigation2 li.active a:hover,
#navigation2 li a:hover {
        margin-top: 2px;
}

#navigation2 li.active {
        font-style: italic;
}
#navigation2 li.active a {
}
.rectangle {
   background: #e5592e;
   height: 62px;
   position: relative;
   -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
   -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
   box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
   
   -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
 border-radius: 2px;
 
   z-index: 500; /* the stack order: foreground */
   margin: 3em 0;
}
.l-triangle-top {
   border-color: #d9542b transparent transparent;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
   float: left;
   top: -5px;
   left: -50px;
}

.l-triangle-bottom {
   border-color: transparent transparent #d9542b;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
   float: left;
   top: -45px;
   left: -150px;
}
.r-triangle-top {
   border-color: #d9542b transparent transparent;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
        float: right;
        right: -45px;
        top: -107px;
}
.r-triangle-bottom {
   border-color: transparent transparent #d9542b;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
        float: right;
        top: -149px;
        right: -145px;
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<div id="navigation_container">

<!-- the left side of the fork effect -->
   <div class="l-triangle-top"></div>
   <div class="l-triangle-bottom"></div>

<!-- the ribbon body -->

   <div class="rectangle">
   
<!-- the navigation links -->
    
  <ul id="navigation2">
       <li><a href="#"> Home</a></li>
       <li><a href="#"> About</a></li>
       <li><a href="#"> Downloads</a></li>
       <li><a href="#"> Contact</a></li>
       <li><a href="http://www.bloggertrix.com/"> Services</a></li>
     </ul>
   
<!-- end the ribbon body -->
   </div>
   
<!-- the right side of the fork effect -->
   <div class="r-triangle-top"></div>
   <div class="r-triangle-bottom"></div>

<!-- end container -->
</div>
Replace # with your links.

10. Now save your HTML/Javascript'.

    You are done...
Read More

Monday, January 21, 2013

Tips to Make Money Online with Affiliate Programs

There is a lot of money to be made in affiliate programs; that no one can deny. But if you thought it is going to be easy money, then you are badly mistaken. It simply does not happen that way. It is like any other job  and  tougher still. The advantage however is,  it gives you  the  liberty to work. You can  work when  you  want, how much you want and even how much money  you plan  to make. It is
all up to you.



Whichever affiliate program you may want to join, the prerequisite is always the same; a website (or
blog) and lots of content. Make your website very interesting by including videos and images, and your path to monetizing your website will be clear. Before you set your imaginations on fire after reading all those rosy articles about people who made millions in affiliate programs, take a little time off and start thinking if that can really be possible.

Websites who subscribe to one or more affiliate programs do make money in millions, but the efforts
they put in are very substantial. It is almost like running a big office with dozens of men and women
working on a dozen websites producing articles and developing other content. Most entrepreneurs
don’t really start that way, remember, and perhaps you aren’t either. Chances are that you have a day
job to care about, and you want to make some extra money for your family.

It is not the objective of this article to give you an elaborate treatise on how to start a website or select
the right affiliate program. Of course you will see some affiliate programs being mentioned here and
there. When it comes to signing for the right affiliate program, you will have to use your own discretion and information. Not all affiliate programs will suit everyone. For most part, what you choose will be your preference and the domain knowledge you have already in you. For example, if your domain knowledge is in fashion, what use do you think will your joining a hosting service affiliate program do for you? Domain knowledge will help you write the content for your website, and don’t forget that your visitors came here looking for it.

Here are some tips you may want to implement. Of course you are always free to decide on the actual
tactics and the way you go about it. Of the few things you must however remember is, give value to
your readers who spend time on your website. They are the real cash bags, don’t forget.

Tip # 1: Spend Time Researching the Products of the Affiliate
Keep yourself to a niche; something that you know and understand well. Never try selling everything
that hits your eyes. At least in affiliate, too much of everything does not work well. If you don’t have any special domain specializations think about acquiring it.

Tip # 2: Promote Your Website Actively

The biggest mistake that budding affiliates do is, thinking that once a website is created it is going to be a wait and watch game in which their job is to collect money. There can be nothing farther away than this in reality. You will have to promote your website actively by posting in websites and directories, and even doing some keyword researches to take your rank higher in search engines.

Tip #3: Tracking Progress is Compulsory

As with any other businesses, there is a learning curve to affiliate marketing too. That means you will
have to find where your visitors are coming from, how long they are staying there and finally what
actions they take at your site. Consider using some specialized software that is available on the Internet. The algorithms can be really complex enough to send your head spinning.

Tip # 4: Choose Your Merchant Carefully

Finally, your merchants, for whom you will be working, should be of impeccable character. Choose the better known ones like Amazon or EBay. The commissions you receive for driving traffic to their sites may be among the lowest, but, that you shouldn’t mind, because you can more than make up for it with high volume traffic.

Author :
Heather Protz, a freelance writer for USAheadlines.com - offers full home security
to help protect your family, assets from burglary and other crimes. usaheadlines.com
Read More

Sunday, January 20, 2013

Retro Style Social Sharing Widget For Blogger

In this post  im  gonna  explain  how to add Retro social   sharing  buttons  for  your blog. This is just
widget.  you can  add  it  to  your blog easily. I just using Css  with  HTML.  Check   below demo  link. You can get social media post with similar widgets.
Retro+Style+Social+Sharing+Widget+For+Blogger
Demo

1. Log in to blogger  Design > Page Element.

2. Click Add Gadget and select 'HTML/Javascript

3.Now Paste Below code.

<style>
/* Bloggertrix  */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}</style>

<br />
<center>
<br />
<ul class="bubblewrap">
<li><a href="http://www.plus.google.com/UserID"><img src="http://2.bp.blogspot.com/-LffgfsHnAj0/UPwQ23I0QAI/AAAAAAAAGas/-0InJDs-Cew/s1600/bloggertrix-google-icon.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.facebook.com/bloggertrix"><img src="http://2.bp.blogspot.com/-7w_IO2RiuAE/UPwQ2SXEnYI/AAAAAAAAGak/6PxOch3eQ44/s1600/bloggertrix-facebook-icon.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.pinterest.com/bloggertrix"><img src="http://3.bp.blogspot.com/-1otZEseg04g/UPwUW46qq-I/AAAAAAAAGbk/ycvQIf9iKdI/s1600/bloggertrix-pinterest-icon.png" title="Add to Digg" /></a></li>

<li><a href="http://www.twitter/bloggertrix"><img src="http://2.bp.blogspot.com/-3x7cybjuGY0/UPwQ3_mdIKI/AAAAAAAAGa0/2S7L05Wssv4/s1600/bloggertrix-twitter-icon.png" title="Add to Twitter" /></a></li>

<li><a href="http://feeds2.feedburner.com/bloggertrix"><img src="http://3.bp.blogspot.com/-4JDhfVVlW1U/UPwQ2iEcPtI/AAAAAAAAGao/kDO6rfj_-sg/s1600/bloggertrix-rss-feed-icon.png" title="Add RSS Feed" /></a></li>
</ul>

After paste above code
* Replace bloggertrix with your facebook username
*Replace bloggertrix  with your  twitter Username
*Replace UserId with Google plus id
*Replace bloggertrix with feedburner username
*Replace bloggertrix with pinterest username

4. Now save your HTML/Javascript'.

    You are done...
Read More

Saturday, January 19, 2013

LSI Keywords for SEO: Importance, Selection & Usage

How do these  web  search  engines work? And what is it that  makes some  programs  less inefficient than others? When one enters a key  phrase  or a keyword in  a  web  search  portal  and  hits the  enter key,  the internet   search  engine  throws  up  a  list  of results containing the terms in  the  inquiry. Generally  users visit those internet sites  that  are  highest  on this list as  they  think  that   those  sites  are  central    to  the question. This  happens  due to    a     powerful   web marketing method called Search Engine Optimization (SEO).
LSI+Keywords+for+SEO+Importance,+Selection

SEO is a method that aids search engines locate and rank one’s website higher than the other websites
that respond to a keyword. Generally, the higher the position on the results page more the visitors
viewing that page. Thus SEO aids in increasing visitors from search engines. And the basic in SEO is
utilizing keywords and Latent Semantic Indexing (LSI) keywords.

LSI also known as latent semantic analysis (LSA) is a process of listing similar terms or idioms with
related meaning to an internet site’s keywords, i.e. equivalent words or equivalent phrases. The main
trait of LSI is its capability to only select the real subject matter from a phrase by creating relations
between those terms that appear in related situation.

LSI overcomes two of the most difficult problems of Boolean keyword inquiries: synonymy (synonymous words) and polysemy (several meanings for a single word). Since synonymy causes discrepancies in the language used by the authors and the information recovery systems, Boolean or keyword inquiries frequently give unrelated outcomes and fail to spot significant information.

Importance

While the significance, impact and necessity of excellent web content are unquestionable the quality of the subject matter will ultimately decide the fate of the company site that pop up in the web search. The content of its internet site is the primary impression that any company creates on its clients. LSI helps internet search engines like Google to get an idea about the websites in order to establish its position in the search engine. While it is impossible to perfect any website without correct keyword study, and every keyword comes with numerous related keywords, LSI helps to decide applicable keywords, which in turn assist in making the text more suitable.

Selection

While creating an internet site the choice of the correct keywords and key phrases is extremely
important. One should choose the keywords that internet users are aggressively searching for. In order to get an elevated ranking without often replicating identical keywords, a site can use LSI key phrases or words to get a higher position in a web search. The effect of utilizing LSI keywords is a predictable flow to the website’s content for internet clients and search engines alike. In addition, using LSI key phrases provides one more reason for search engine results pages (SERP), i.e. it places the website in perspective.

Usage

LSI key phrases are utilized in a similar way as normal keywords. The density and positioning of
keywords and the LSI equivalents in the content are very important. For a website to appear
indigenous, key phrases and LSI keywords should only be 2-5% of the entire content. If it is lower than 2% the website will be improperly indexed and if it is in excess of 5%, then it is considered saturated. This is damaging to the SEO as the use of the same keywords too many times is termed as keyword stuffing and search engines takes off the sites that are liable of keyword stuffing.

In conclusion, the SEO scenario in so unstable that the use of good and original subject matter is very
vital and one should be very cautious as to not use one’s keywords frequently, instead one can use
accepted synonyms like those recommended by the Google keywords device.

This is a guest post by Celestine Mayer of xfinityonline, a site that offers savings and current
information on xfinity tv. Click here for more info.
If you would like to write for bloggertrix, check our guest posting guidelines
Read More

Friday, January 18, 2013

Attractive Css3 Sleek Menu Bar For Blogger

Today, im gonna  explain about nice Css3 menubar and how to add it to  your blogger. Im  already provided lot of menu bar tutorials.This is also  awesome menu  with Css3 with  HTML.Actually  its just like a jquery  effect. However  we  can  make  lot of  effects   by  using Css3. Check the demo link for example.lets go for the tutorial. You can  get my  all  menubar here
Attractive+Css3+Sleek+Menu+Bar+For+Blogger
Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here bloggertrix.com */
#container1 {
width: 960px;
margin: 0 auto;}
.menu33{height:40px;border-right:1px solid rgba(255,255,255,0.3);float:left;}a{text-decoration:none;color:#FFFFFF;text-transform:uppercase;font-size:15px;font-weight:bold;}ul{margin:0;padding:10px 10px ;}
a:link {color:#ffffff;}
a:hover {color:#ffffff;text-decoration: none;}
a:visited {color: #FFFDFD;text-decoration: none;}
ul.menu33 li{list-style:none;float:left;height:40px;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:40px;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[rel=sam1] li a{background:#606060;}
ul[rel=sam1] 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%);}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<div id="container1">
<ul class="menu33" rel="sam1">
<li class="active"><a href="http://bloggertrix.com">Home</a></li>
<li><a href="http://bloggertrix.com">About</a></li>
<li><a href="http://bloggertrix.com">Blog</a></li>
<li><a href="http://bloggertrix.com">Services</a></li>
<li><a href="http://bloggertrix.com">Support</a></li>
<li><a href="http://bloggertrix.com">Sales</a></li>
<li><a href="http://bloggertrix.com">Contacts</a></li>
</ul>
</div>
Replace # with your links.

10. Now save your HTML/Javascript'.

    You are done...
Read More

Thursday, January 17, 2013

Tips to Create a Sustainable Social Media Strategy

Technology is changing rapidly and so is the socializing of business. People ‘like’ your  business page as long as you  are  compatible     to  be    engaging,   relevant  and consistent. So, whether   you   run a small  or  large firm, the  capability  to  sustain  your  followers  of  fans   and create  brand  awareness  in  the  social  media  world  is crucial. So, how  are  you  going  to  sustain  your  social media strategy?

social-media-strategy

Always remember, in terms of reaching the targeted audience, your social media strategy should
include clear goals, a well thought-out approach with the help of other communication channels and
creating new things for your fans or followers. Sustainability of social media strategy is also adding
new followers.

Here are some tips that could make an impact:

Call to action content: Post content that has a call-to-action appeal. The language should be
    so much interesting that can get the audience involved. To keep them involved, you can also
    ask their opinions or views through the social media platforms. While posting, ensure that
    your language is crispy, concise, precise and simple so that readers can easily digest them
    and love to share. Experts advice to summarize the post between 100-250 characters.

Post consistently: Post links of articles, blogs and other interesting and relevant pieces of
    information on a regular basis. Such actions reflect your professionalism and also act as one
    of the keys to success. Simply post something they want or need.

Use good images: Images make a good impact and also people like to share them as they
   are easier to download. So, try to upload some good images that are capable of creating a
   strong response that is both relevant to your brand and are captivating.

Videos: They are highly effective and people love to share. Post captivating and short videos
    which are of length of 90 seconds at most. A good video can instantly go viral across the
    social media network and are sure to propel your existence in the social media world.

Networking: Learn how to communicate with audience with the help of multiple online
   mediums. The best idea is to target the popular social media websites and communities to
   increase visibility and empower social marketing channels.

Social media communication is important in the contemporary times because it helps to reach the
audience easily and engage consumers where traditional marketing tools fail. For sustainability, you
should have a well thought-out social media strategy and have an integrated approach with other
communication strategy. Many social media experts seek for innovative approaches to social media
success with the support of best skills and try to establish a network.

Social media has changed the marketing approach and businesses are now trying to harness this
customer-centric technology through sustainable programs. They are trying to reach the audience
and establish a communication or effective-dialogue through the platforms such as YouTube,
Facebook, Twitter and more. Sustainability can be slow but it should be interactive. Many firms are
trying to showcase their offline achievements on social media which is sure to help them sustain in
the social media world for long.

Author Bio: I Vinay Kumar writes about social media marketing and card game like Rummy
online at adda52.com.
If you would like to write for bloggertrix, check our guest posting guidelines
Read More

Wednesday, January 16, 2013

Attractive Css3 Cycling Slideshow For Blogger

Today, im  gonna  explain   How  to  add attractive Cycling slideshow for   blogger.Its   included back
loading bar for every image.So  it will  make  your blog attractive.You can change your image link as your link. make sure  you  have to use some  pixel images.Try to add to your blog. its easy. Get my
earlier slideshow post here

Attractive+Css3+Cycling+Slideshow+For+Blogger
Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* fade slider www.bloggertrix.com*/
.content h1 {
 font-size:48px;
 color:#000;
 text-shadow:0px 1px 1px #f4f4f4;
 text-align:center;
 padding:60px 0 30px; 
}

/* LAYOUT */
.container {
 margin:0 auto;
 overflow:hidden;
 width:960px;
}

/* CONTENT SLIDER */
#content-slider {
 width:100%;
 height:360px;
 margin:10px auto 0;
}
/* SLIDER */
#slider {
 background:#000;
 border:5px solid #eaeaea;
 box-shadow:1px 1px 5px rgba(0,0,0,0.7);
 height:320px;
 width:680px;
 margin:40px auto 0;
 overflow:visible;
 position:relative;
}
#mask {
 overflow:hidden;
 height:320px;
}
#slider ul {
 margin:0;
 padding:0;
 position:relative;
}
#slider li {
 width:680px;
 height:320px;
 position:absolute;
 top:-325px;
 list-style:none;
}

#slider li.firstanimation {
 -moz-animation:cycle 25s linear infinite; 
 -webkit-animation:cycle 25s linear infinite;  
}
#slider li.secondanimation {
 -moz-animation:cycletwo 25s linear infinite;
 -webkit-animation:cycletwo 25s linear infinite;  
}
#slider li.thirdanimation {
 -moz-animation:cyclethree 25s linear infinite;
 -webkit-animation:cyclethree 25s linear infinite;  
}
#slider li.fourthanimation {
 -moz-animation:cyclefour 25s linear infinite;
 -webkit-animation:cyclefour 25s linear infinite;  
}
#slider li.fifthanimation {
 -moz-animation:cyclefive 25s linear infinite;
 -webkit-animation:cyclefive 25s linear infinite;  
}

#slider .tooltip {
 background:rgba(0,0,0,0.7);
 width:300px;
 height:60px;
 position:relative;
 bottom:75px;
 left:-320px;
 -moz-transition:all 0.3s ease-in-out;
 -webkit-transition:all 0.3s ease-in-out;  
}
#slider .tooltip h1 {
 color:#fff;
 font-size:24px;
 font-weight:300;
 line-height:60px;
 padding:0 0 0 20px;
}
#slider li#first:hover .tooltip, 
#slider li#second:hover .tooltip, 
#slider li#third:hover .tooltip, 
#slider li#fourth:hover .tooltip, 
#slider li#fifth:hover .tooltip {
 left:0px;
}
#slider:hover li, 
#slider:hover .progress-bar {
 -moz-animation-play-state:paused;
 -webkit-animation-play-state:paused;
}

/* PROGRESS BAR */
.progress-bar { 
 position:relative;
 top:-5px;
 width:680px; 
 height:5px;
 background:#000;
 -moz-animation:fullexpand 25s ease-out infinite;
 -webkit-animation:fullexpand 25s ease-out infinite;
}

/* ANIMATION */
@-moz-keyframes cycle {
 0%  { top:0px; }
 4%  { top:0px; } 
 16% { top:0px; opacity:1; z-index:0; } 
 20% { top:325px; opacity:0; z-index:0; } 
 21% { top:-325px; opacity:0; z-index:-1; }
 92% { top:-325px; opacity:0; z-index:0; }
 96% { top:-325px; opacity:0; }
 100%{ top:0px; opacity:1; }
 
}
@-moz-keyframes cycletwo {
 0%  { top:-325px; opacity:0; }
 16% { top:-325px; opacity:0; }
 20% { top:0px; opacity:1; }
 24% { top:0px; opacity:1; } 
 36% { top:0px; opacity:1; z-index:0; } 
 40% { top:325px; opacity:0; z-index:0; }
 41% { top:-325px; opacity:0; z-index:-1; } 
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
 0%  { top:-325px; opacity:0; }
 36% { top:-325px; opacity:0; }
 40% { top:0px; opacity:1; }
 44% { top:0px; opacity:1; } 
 56% { top:0px; opacity:1; } 
 60% { top:325px; opacity:0; z-index:0; }
 61% { top:-325px; opacity:0; z-index:-1; } 
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
 0%  { top:-325px; opacity:0; }
 56% { top:-325px; opacity:0; }
 60% { top:0px; opacity:1; }
 64% { top:0px; opacity:1; }
 76% { top:0px; opacity:1; z-index:0; }
 80% { top:325px; opacity:0; z-index:0; }
 81% { top:-325px; opacity:0; z-index:-1; }
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
 0%  { top:-325px; opacity:0; }
 76% { top:-325px; opacity:0; }
 80% { top:0px; opacity:1; }
 84% { top:0px; opacity:1; }
 96% { top:0px; opacity:1; z-index:0; }
 100%{ top:325px; opacity:0; z-index:0; }
}

@-webkit-keyframes cycle {
 0%  { top:0px; }
 4%  { top:0px; }
 16% { top:0px; opacity:1; z-index:0; } 
 20% { top:325px; opacity:0; z-index:0; }
 21% { top:-325px; opacity:0; z-index:-1; }
 50% { top:-325px; opacity:0; z-index:-1; }
 92% { top:-325px; opacity:0; z-index:0; }
 96% { top:-325px; opacity:0; }
 100%{ top:0px; opacity:1; }
 
}
@-webkit-keyframes cycletwo {
 0%  { top:-325px; opacity:0; }
 16% { top:-325px; opacity:0; }
 20% { top:0px; opacity:1; }
 24% { top:0px; opacity:1; } 
 36% { top:0px; opacity:1; z-index:0; } 
 40% { top:325px; opacity:0; z-index:0; }
 41% { top:-325px; opacity:0; z-index:-1; }  
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
 0%  { top:-325px; opacity:0; }
 36% { top:-325px; opacity:0; }
 40% { top:0px; opacity:1; }
 44% { top:0px; opacity:1; } 
 56% { top:0px; opacity:1; z-index:0; } 
 60% { top:325px; opacity:0; z-index:0; } 
 61% { top:-325px; opacity:0; z-index:-1; }
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
 0%  { top:-325px; opacity:0; }
 56% { top:-325px; opacity:0; }
 60% { top:0px; opacity:1; }
 64% { top:0px; opacity:1; }
 76% { top:0px; opacity:1; z-index:0; }
 80% { top:325px; opacity:0; z-index:0; }
 81% { top:-325px; opacity:0; z-index:-1; }
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
 0%  { top:-325px; opacity:0; }
 76% { top:-325px; opacity:0; }
 80% { top:0px; opacity:1; }
 84% { top:0px; opacity:1; }
 96% { top:0px; opacity:1; z-index:0; }
 100%{ top:325px; opacity:0; z-index:0; }
}

/* ANIMATION BAR */
@-moz-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } 
}
@-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } 
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<div class="container">
 <div id="content-slider">
     <div id="slider">
         <div id="mask">
            <ul>
            <li id="first" class="firstanimation">
            <a href="#">
             <img src="http://2.bp.blogspot.com/-eIFV4mgnvS8/UPZfZeK8InI/AAAAAAAAAWo/Sc9IzuZSg2A/s1600/green.jpg" alt="Green"/>
            </a>
            <div class="tooltip">
            <h1>Green</h1>
            </div>
            </li>

            <li id="second" class="secondanimation">
            <a href="#">
            <img src="http://4.bp.blogspot.com/-LAId9crAMHU/UPZfauR4U3I/AAAAAAAAAW0/Xoz6c56OW5E/s1600/wallpapers-1.jpg" alt="Car"/>
            </a>
            <div class="tooltip">
            <h1>Car</h1>
            </div>
            </li>
            
            <li id="third" class="thirdanimation">
            <a href="#">
            <img src="http://1.bp.blogspot.com/-Osowv8MfTos/UPZfZkKsQkI/AAAAAAAAAWk/0RHmUER7TIo/s1600/nature2.jpg" alt="Nature"/>
            </a>
            <div class="tooltip">
            <h1>Nature</h1>
            </div>
            </li>
                        
            <li id="fourth" class="fourthanimation">
            <a href="#">
             <img src="http://4.bp.blogspot.com/-Yx_NYwwA2_s/UPZfZoWAExI/AAAAAAAAAWs/i16cwNzeFso/s1600/nature.jpg" alt="Nature"/>
            </a>
            <div class="tooltip">
            <h1>Nsture</h1>
            </div>
            </li>
                        
            <li id="fifth" class="fifthanimation">
            <a href="#">
            <img src="http://4.bp.blogspot.com/-LxolmfrLTrE/UPZfav_xFOI/AAAAAAAAAW4/i8dymawywVs/s1600/nature3.jpg" alt="Yellow"/>
            </a>
            <div class="tooltip">
            <h1>Yellow</h1>
            </div>
            </li>
            </ul>
            </div>
            <div class="progress-bar"></div>
        </div>
    </div>
</div>
Replace image links.
10. Now save your HTML/Javascript'.

    You are done...
Read More

Tuesday, January 15, 2013

Animated Drop Down Vertical Menu Bar For Blogger

Today im  gonna  explain, how to add drop down vertical  menu bar  for  blogger.  Its include  with icons.you can check it demo link below.Im using Css3 and   HTML for this tutorial.You can get my
all vertical here

Animated+Drop+Down+Vertical+Menu+Bar+For+Blogger


Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>
D
6. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here bloggertrix.com */
.container {
    background: url("../images/robot.png") no-repeat scroll 90px 35px rgba(255, 255, 255, 0.6);
    border: 1px solid #FFFFFF;
    height:400px;
    margin:20px auto;
    padding:10px;
    position:relative;
    width:715px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
#nav {
    border:3px solid #3e4547;

    box-shadow:2px 2px 8px #000000;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
#nav, #nav ul {
    list-style:none;
    padding:0;
    width:200px;
}
#nav ul {
    position:relative;
    z-index:-1;
}
#nav li {
    position:relative;
    z-index:100;
}
#nav ul li {
    margin-top:-23px;

    -moz-transition:  0.4s linear 0.4s;
    -ms-transition: 0.4s linear 0.4s;
    -o-transition: 0.4s linear 0.4s;
    -webkit-transition: 0.4s linear 0.4s;
    transition: 0.4s linear 0.4s;
}
#nav li a {
    background-color:#d4d5d8;
    color:#000;
    display:block;
    font-size:12px;
    font-weight:bold;
    line-height:28px;
    outline:0;
    padding-left:15px;
    text-decoration:none;
}
#nav li a.sub {
    background:#d4d5d8 url("http://2.bp.blogspot.com/-CQRhWo7NgtE/UPT5PCgUVpI/AAAAAAAABPE/rWKD25HSsFQ/s1600/down.gif") no-repeat;
}
#nav li a + img {
    cursor:pointer;
    display:none;
    height:28px;
    left:0;
    position:absolute;
    top:0;
    width:200px;
}
#nav li a img {
    border-width:0px;
    height:24px;
    line-height:28px;
    margin-right:8px;
    vertical-align:middle;
    width:24px;
}
#nav li a:hover {
    background-color:#bcbdc1;
}
#nav ul li a {
    background-color:#eee;
    border-bottom:1px solid #ccc;
    color:#000;
    font-size:11px;
    line-height:22px;
}
#nav ul li a:hover {
    background-color:#ddd;
    color:#444;
}
#nav ul li a img {
    background: url("http://3.bp.blogspot.com/-Gl3HYXAYqek/UPT5PKXBsII/AAAAAAAABPI/gGCjbqvLl0Y/s1600/bulb.png") no-repeat;
    border-width:0px;
    height:16px;
    line-height:22px;
    margin-right:5px;
    vertical-align:middle;
    width:16px;
}
#nav ul li:nth-child(odd) a img {
    background:url("http://4.bp.blogspot.com/-QwcQcz6Cl5k/UPT5PAaj-lI/AAAAAAAABPM/YwHiGAFWjv0/s1600/bulb2.png") no-repeat;
}
#nav a.sub:focus {
    background:#bcbdc1;
    outline:0;
}
#nav a:focus ~ ul li {
    margin-top:0;
    -moz-transition:  0.4s linear;
    -ms-transition: 0.4s linear;
    -o-transition: 0.4s linears;
    -webkit-transition: 0.4s linears;
    transition: 0.4s linear;
}
#nav a:focus + img, #nav a:active + img {
    display:block;
}
#nav a.sub:active {
    background:#bcbdc1;
    outline:0;
}
#nav a:active ~ ul li {
    margin-top:0;
}
#nav ul:hover li {
    margin-top:0;
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<div class="container">

            <ul id="nav">
                <li><a href="#"><img src="http://2.bp.blogspot.com/-gXxZaEaclJc/UPVrciSg-HI/AAAAAAAAAVg/Fh80wkwhwf8/s1600/arrow.png" /> Home</a></li>
                <li><a href="#" class="sub" tabindex="1"><img src="http://2.bp.blogspot.com/-gXxZaEaclJc/UPVrciSg-HI/AAAAAAAAAVg/Fh80wkwhwf8/s1600/arrow.png" />HTML</a><img src="http://2.bp.blogspot.com/-0dKHxAPWFL8/UPT5RFa085I/AAAAAAAABPs/Q-SkFdquAY4/s1600/up.gif" alt="" />
                    <ul>
                        <li><a href="#"><img src="http://1.bp.blogspot.com/-p8KUEBs1_Pg/UPT5P1kIAAI/AAAAAAAABPc/8dzVWMFcctI/s1600/empty.gif" />Link 1</a></li>
                        <li><a href="#"><img src="http://1.bp.blogspot.com/-p8KUEBs1_Pg/UPT5P1kIAAI/AAAAAAAABPc/8dzVWMFcctI/s1600/empty.gif" />Link 2</a></li>
                        <li><a href="#"><img src="http://1.bp.blogspot.com/-p8KUEBs1_Pg/UPT5P1kIAAI/AAAAAAAABPc/8dzVWMFcctI/s1600/empty.gif" />Link 3</a></li>
                        <li><a href="#"><img src="http://1.bp.blogspot.com/-p8KUEBs1_Pg/UPT5P1kIAAI/AAAAAAAABPc/8dzVWMFcctI/s1600/empty.gif" />Link 4</a></li>
                        <li><a href="#"><img src="http://1.bp.blogspot.com/-p8KUEBs1_Pg/UPT5P1kIAAI/AAAAAAAABPc/8dzVWMFcctI/s1600/empty.gif" />Link 5</a></li>
                    </ul>
                </li>
                <li><a href="#" class="sub" tabindex="1"><img src="http://2.bp.blogspot.com/-gXxZaEaclJc/UPVrciSg-HI/AAAAAAAAAVg/Fh80wkwhwf8/s1600/arrow.png" />jQuery</a><img src="http://1.bp.blogspot.com/-p8KUEBs1_Pg/UPT5P1kIAAI/AAAAAAAABPc/8dzVWMFcctI/s1600/empty.gif" alt="" />
                    <ul>
                        <li><a href="#"><img src="http://1.bp.blogspot.com/-p8KUEBs1_Pg/UPT5P1kIAAI/AAAAAAAABPc/8dzVWMFcctI/s1600/empty.gif" />Link 6</a></li>
                        <li><a href="#"><img src="http://1.bp.blogspot.com/-p8KUEBs1_Pg/UPT5P1kIAAI/AAAAAAAABPc/8dzVWMFcctI/s1600/empty.gif" />Link 7</a></li>
                        <li><a href="#"><img src="http://1.bp.blogspot.com/-p8KUEBs1_Pg/UPT5P1kIAAI/AAAAAAAABPc/8dzVWMFcctI/s1600/empty.gif" />Link 8</a></li>
                        <li><a href="#"><img src="http://1.bp.blogspot.com/-p8KUEBs1_Pg/UPT5P1kIAAI/AAAAAAAABPc/8dzVWMFcctI/s1600/empty.gif" />Link 9</a></li>
                        <li><a href="#"><img src="http://1.bp.blogspot.com/-p8KUEBs1_Pg/UPT5P1kIAAI/AAAAAAAABPc/8dzVWMFcctI/s1600/empty.gif" />Link 10</a></li>
                    </ul>
                </li>
                <li><a href="#"><img src="http://2.bp.blogspot.com/-gXxZaEaclJc/UPVrciSg-HI/AAAAAAAAAVg/Fh80wkwhwf8/s1600/arrow.png" />PHP</a></li>
                <li><a href="#"><img src="http://2.bp.blogspot.com/-gXxZaEaclJc/UPVrciSg-HI/AAAAAAAAAVg/Fh80wkwhwf8/s1600/arrow.png" />MySQL</a></li>
                <li><a href="http://www.bloggertrix.com/"><img src="http://2.bp.blogspot.com/-gXxZaEaclJc/UPVrciSg-HI/AAAAAAAAAVg/Fh80wkwhwf8/s1600/arrow.png" />XSLT</a></li>
            </ul>

        </div>
Replace # with your links.

10. Now save your HTML/Javascript'.

    You are done...
Read More