Thursday, May 30, 2013

Css3 Navigation Bar With Google Custom Search Box

This is a unique tutorial.In this post im gonna explain How to add 3 in 1 Css3 navigation bar. It
include Social network profile like Facebook, twitter and Rss with Google custom Search box.
This Css3 navigation work fine with every modern internet browsers.You can link with your main pages by using this Css3 navigation bar.Im using Css3 and HTML Just check out demo.Its easy to add to blogger.lets give a try.
Css3+Navigation+Bar+With+Google+Custom+Search+Box



Add Css3 Navigation Bar With Google Custom Search Box


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. Find this tag by using Ctrl+F    ]]></b:skin>

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

#btrix1nav{border:none 5px #000000;
-moz-border-radius-topleft: 15px;-moz-border-radius-topright:14px;-moz-border-radius-bottomleft:14px;-moz-border-radius-bottomright:14px;-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:14px;-webkit-border-bottom-left-radius:14px;-webkit-border-bottom-right-radius:14px;
border-top-left-radius:15px;border-top-right-radius:14px;border-bottom-left-radius:14px;border-bottom-right-radius:14px;-moz-box-shadow: 2px 3px 5px #000000;-webkit-box-shadow: 2px 3px 5px #000000;box-shadow: 2px 3px 5px #000000;
        width:900px;   
 margin: 0 0 0 0px;
 padding: 12px 0 8px 0;
 clear: both; 
 background: #696969 left bottom no-repeat; }
#btrix1nav .catList{padding: 4px 0 0 35px;float: left;margin-top:-3px; }
#btrix1nav .pageList{padding: 8px 0px 0 0;float: right; }
#btrix1nav ul li{float: left;margin: 0 18px 0 0 ;}
#btrix1nav a{color: #fff;list-style:none;text-decoration: none;}
#btrix1nav a:hover{color: #919191;}
#btrix1nav li {list-style:none;text-decoration:none;}
#search{margin: -2px 20px 0 0;float: right;  }
#updatesBox { margin-left: 100px; }


6. Go to blogger and click Layout

7. Click Add Gadget and select 'HTML/Javascript

8. Paste below code.

<div class="clearfix" id="btrix1nav">
<ul class="catList">
<li class="cat-item cat-item-5"><a href="#">Home</a></li>
<li class="cat-item cat-item-3"><a href="#">Downloads</a></li>
<li class="cat-item cat-item-6"><a href="#">Tools</a></li>
<li class="cat-item cat-item-4"><a href="#">Css3</a></li>
<li class="cat-item cat-item-4"><a href="#">HTML</a></li>
<li class="cat-item cat-item-4"><a href="#">Tips</a></li>
<li class="cat-item cat-item-31"><a href="#">About</a></li>
<li class="cat-item cat-item-11"><a href="#">Contact Us</a></li>
</ul>
<div id="search">
<form action="http://www.google.com/cse" id="cse-search-box" target="_blank">
<div>
<input name="cx" type="hidden" value="004972222991511809341:kobh4_l5t3m" />
<input name="ie" type="hidden" value="ISO-8859-1" />
<input class="googleSearchField" name="q" size="20" style="background-color: white; background-image: url(http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif); background-position: 0% 50%; background-repeat: no-repeat no-repeat; border: 1px solid rgb(126, 157, 185); padding: 2px;" type="text" />
<input class="button" name="sa" type="submit" value="Search" /></div>
<input name="siteurl" type="hidden" value="bloggertrix.com/" /><input name="ref" type="hidden" value="" /><input name="ss" type="hidden" value="" /></form>
<script src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en" type="text/javascript"></script>
    </div>
<div id="updatesBox">
<a alt="Subscribe to RSS" class="updatesIcon" href="http://feeds.feedburner.com/bloggertrix" target="_blank" title="Subscribe to RSS" style="margin-left: 80px;"><img src="http://2.bp.blogspot.com/-iRYvrQpas4E/UacS9R6gOAI/AAAAAAAAAk0/lRxT1hf8nFE/s1600/btrix_RSS-icon.png" style=""></a>
<a alt="Follow Us" class="updatesIcon" href="http://twitter.com/bloggertrix" target="_blank" title="Follow Us"><img src="http://2.bp.blogspot.com/-T1BVHhy333A/UacS9QEmW0I/AAAAAAAAAk8/mr7iCzFgKkE/s1600/btrix-twitter-icon.png" /></a>
<a alt="Become a Fan" class="updatesIcon" href="http://www.facebook.com/bloggertrix" target="_blank" title="Become a Fan"><img src="http://1.bp.blogspot.com/-VPaDm54iQAo/UacS9Wdw4mI/AAAAAAAAAk4/THLdyrwGBpM/s1600/btrix-facebook-icon.png" /></a></div>
</div>
Replace # with your links.

Replace bloggertrix with your Feedburner ID
Replace bloggertrix with your Facebook username
Replace bloggertrix with your Twitter Username

9. Now save your HTML/Javascript'. You are done.

Hope this Css3 Navigation Bar helps to make your blog attractive.Leave a comment, if you need any help regarding this menu.
Read More

Wednesday, May 29, 2013

Below Post Social Sharing Widget for Blogger

This is a Below Post Social Sharing Widget. In this tutorial im gonna explain, how to add it to end of blogger post. It include nice title  hover effect too. By  using this social sharing widget, you can share your social networks with one click.It means, you can get some visitors to your blog if  someone do sharing. Im using Css3 and HTML, Just check out demo about this Social Sharing Widget .

You may Like these articles

Retro Style Rss Subscription Widget For Blogger
Unique Style V2 Social Sharing Box For Blogger
Peeling Stickers Social Media Widget For Blogger

Social+Sharing+Widget


How to add Social Sharing 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. Find this tag by using Ctrl+F    ]]></b:skin>

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

ul.social_btrix {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.social_btrix li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_btrix li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social_btrix li a strong {
font-weight:400;
position:absolute;
left:20px;
top:-1px;
color:#fff;
z-index:9999;
text-shadow:1px 1px 0 rgba(0,0,0,0.75);
background-color:rgba(0,0,0,0.7);
-moz-border-radius:3px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
-webkit-border-radius:3px;
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
border-radius:3px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
padding:3px;
}
ul.social_btrix li.abfacebook {
background-image:url(http://4.bp.blogspot.com/-nJMUyZUi2SM/UaXEnGYtwWI/AAAAAAAAAkM/SXrQ4Q8ASoA/s1600/btrix-facebook-icon.png);
}
ul.social_btrix li.abtwitter {
background-image:url(http://4.bp.blogspot.com/-_18_qzg7sHs/UaXEnVKS3aI/AAAAAAAAAkY/UYLCvEQuOEI/s1600/btrix-twitter-icon.png);
}
ul.social_btrix li.abgoogleplus {
background-image:url(http://2.bp.blogspot.com/-DpI_6iUH6GY/UaXEnB83lFI/AAAAAAAAAkQ/Q6QtGamgL_E/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(http://2.bp.blogspot.com/-tMeDXWRp5VY/UaXEmVQIGDI/AAAAAAAAAj0/FrLLKtGE8j0/s1600/btrix-Pinterest-icon.png);
}
ul.social_btrix li.abstumbleupon {
background-image:url(http://1.bp.blogspot.com/-NxzIC4d0ixE/UaXEmytFBoI/AAAAAAAAAkI/jmk72VMrnvA/s1600/btrix-StumbleUpon-icon.png);
}
ul.social_btrix li.abdig {background-image:url(http://4.bp.blogspot.com/-J2vYlohj8qw/UaXEmX-JDMI/AAAAAAAAAj8/QwSrbs1Md8w/s1600/btrix-Digg-icon.png);
}
ul.social_btrix li.ablinkedin {
background-image:url(http://2.bp.blogspot.com/-HaUpL3wjx3I/UaXEmf3UVSI/AAAAAAAAAj4/cHVj0FALvgk/s1600/btrix-Linkedin-icon.png);
}
#animation_btrix:hover li {
opacity:0.2;
}
#animation_btrix li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_btrix li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation_btrix li:hover {
opacity:1;
}
#animation_btrix li:hover a strong {
opacity:1;
top:-10px;
}

6.
Find this tag by using Ctrl+F    <data:post.body/>

7. Paste below code Before <data:post.body/> tag

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;'><b>Share this article with your friends.</b></div>
    <ul class='social_btrix' id='animation_btrix'>
    <li class='abfacebook'>
    <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>
    </li>
    <li class='abtwitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
    </li>
    <li class='abgoogleplus'>
<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
    </li>
    <li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
    </li>
    <li class='abstumbleupon'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
    </li>
    <li class='abdig'>
      <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
    </li>
    <li class='ablinkedin'>
    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
    </li>
    </ul>
</b:if>

8. Now save your template. You are done.
Hope this Social Sharing Widget helps to get more traffic from social networks.
Read More

Tuesday, May 28, 2013

All About Making Money From Blog

Blogging become a very regular and effective phenomenon today. Since, internet has taken over everything, it is very important to keep up the pace with internet.Thus, people make a lot of use of internet in their routine life in order to keep in touch with the latest trends. Incomplete gives a lot of  knowledge and information which can be easily used at your disposal. The world of  today depends on internet for every single thing. A lot of people benefit a lot from internet every day since they conduct their business online while others study through internet or play through internet. Everyone uses the internet according to their requirements. But everyone does use internet.There have lot of ways to make money from internet.

Make+Money+From+Blog

There is a lot of scope of making money from internet also. Like if your write blogs, you can earn huge profits. If you want to know more about make money from blog, you can go online and go through the reviews of people who have been benefitted with this. You can know the amount of profits they have earned with the help of blogging.

You may like this Articles
How to Make Money by Selling Your Photographs
Five Killer Ways to Make Money with your Personal Blog
7 Ways for Students to Make Money Online
How To Make Money Making Blog Posts

Most of the businesses today take help of blogs and online marketing strategies to advertise their business. Thus, there is a lot of competition in this field also. You need to be perfect in order to be a winner.

Thus, before you decide to adopt this strategy for your business also, you need know a lot about make money from blog. Learn from the experienced people how they have adopted and implied this technique. Once you are satisfied and confident that you know all the strategies, only then adopt and integrate this strategy in your business. The competition is very tough here and there is room for mistakes or mishappenings. Thus, before beginning, make sure that everything is in proper place. You should have a good knowledge about the subject and also a good plan to start with. It is very important to keep a check on your competitors. Keep a track of your competitors’ activities on a daily basis. What they are doing and how they are doing, everything you should know. Another very important thing which needs to be kept in mind is that you should not blindly follow your competitors. Someone must not be selling the same product as yours. Thus, if you follow such person, it will be a very foolish step. Thus, be very careful when you keep a check on them. Take up only those things from them which are relevant to your business and would be of some help to it.
Hope this article helps to gain your knowledge about make money from blogging.

You may like this ArticlesFive Effective Ways Students can make Money Online
Creative Ways to Earn Money Online this 2013
Tips to Make Money Online with Affiliate Programs
Make Money Online With PayPal

Author Bio:

Kathryn is the author for Chrisalexcorp. She writes for a website that sells scratchcards at scratch.net. If you would like to write for bloggertrix, check our guest posting guidelines
Read More

Monday, May 27, 2013

Social Media And Rss Subscribe Widget For Blogger

In this tutorial im gonna explain how to add Social Media And Rss Subscribe Widget. By using this Social Media widget you  can link your social media profile Facebook, Twitter and  Rss and  subscribe field. It Social Media will help to get the new updates by emails. You  can check it from below  demo link .If you want to look at other rss feed subscription widget,click this link. If you have any questions regarding to this.Let me know. I will help you.

Social+Media+And+Rss+Subscribe+Widget


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

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below code.

<style>
.subscribebtrix {
border: 2px solid #000000;
padding: 8px;
width: 310px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.subscribebtrix:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.btrixsubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.btrixsubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.btrixsubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>

<br />
<div class="subscribebtrix">
<div style="color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;">
Free Updates to your Inbox</div>
<div style="margin: 10px 0 0 6px;">
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow">
<input name="uri" type="hidden" value="bloggertrix" />
<input name="loc" type="hidden" value="en_US" />
<input class="tbimailbox" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email..." />
<input alt="" class="btrixsubmit" title="" type="submit" value="Subscribe" />
</form>
</div>
<div style="border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;">
Follow us:</div>
<div style="margin: -32px 0 0 120px;">
<a href="http://www.facebook.com/bloggertrix" target="_blank" title="Join us on Facebook"><img alt="facebook" src="http://1.bp.blogspot.com/-dWQ4WAgFEd4/UaOIdmxIstI/AAAAAAAAHow/1ER9XAAtr9s/s1600/facebook_btrix.png" /></a>
<a href="http://www.twitter.com/bloggertrix" rel="nofollow" target="_blank" title="Follow us on Twitter"><img alt="twitter" src="http://3.bp.blogspot.com/-iRgGtzjfUOo/UaOIe0vICII/AAAAAAAAHpM/yq0OufsX_Q0/s1600/twitter_btrix.png" /></a>
<a href="https://plus.google.com/UserId" rel="nofollow" target="_blank" title="Follow us on Google+"><img alt="gplus" src="http://4.bp.blogspot.com/-rhZjMQqQSwc/UaOId555AQI/AAAAAAAAHo0/v9qrnoB9LRU/s1600/googleplus_btrix.png" /></a>
<a href="http://www.pinterest.com/bloggertrix" rel="nofollow" target="_blank" title="Follow us on Pinterest"><img alt="pinterest" src="http://3.bp.blogspot.com/-MiOHuehf8Uo/UaOId1J8tjI/AAAAAAAAHo4/kCciO2il8R0/s1600/pinterest_btrix.png" /></a>
<a href="http://feeds2.feedburner.com/bloggertrix" rel="nofollow" target="_blank" title="Subscribe to RSS"><img alt="rss" src="http://1.bp.blogspot.com/--Oc6zcT_s9Y/UaOIen7YBwI/AAAAAAAAHpI/S8ut7PyNJHc/s1600/rss_btrix.png" /></a>
</div>
<div align="center">
<a href="http://feeds.feedburner.com/bloggertrix"><img alt="" height="26" src="http://feeds.feedburner.com/~fc/bloggertrix?bg=FF9900&amp;fg=444444&amp;anim=1" style="border: 0;" width="88" /></a></div>
</div>


Replace bloggertrix with your Feedburner ID
Replace bloggertrix with your Facebook username
Replace bloggertrix with your Twitter Username
Replace bloggertrix with your Pinterest Username
Replace UserId with your Twitter Username

5. Now save your HTML/Javascript'.You are done.
This is unique Social Media widget. Hope this helpful to you.
Read More

Saturday, May 25, 2013

Underline Hover Effect Css Navigation Bar for Blogger

This is a Underline Hover Effect Css Navigation Bar.In this tutorial im gonna explain, how to add it to blogger. Underline hover menu support for every modern internet  browsers.it helps to make your blog attractive. Im using Css3 and HTML, Just check  out demo. Its easy to add to blogger. Lets give a try.
Underline+Hover+Effect+Css+Navigation+Bar

Add Underline Hover Css Navigation bar


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. Find this tag by using Ctrl+F    ]]></b:skin>

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

/* The CSS Code for the menu starts here bloggertrix.com */
#arrowunderlinebtrix{
list-style-type:none;
margin:0;
padding:0;
text-align:center; 
font: bold 16px Georgia;
}
#arrowunderlinebtrix li{
display:inline;
margin-right:25px; 
}
#arrowunderlinebtrix li a{
position:relative;
color:black;
padding-bottom:8px; 
text-decoration:none;
}
#arrowunderlinebtrix li a:hover{
border-bottom:3px solid #25bd0d; 
}
#arrowunderlinebtrix li a:hover:after{ 
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px; 
bottom: 0;
border-width:5px; 
border-style:solid;
border-color: transparent transparent #25bd0d transparent; 
}


6. Go to blogger and click Layout

7. Click Add Gadget and select 'HTML/Javascript

8. Paste below code.

<div id="arrowunderline">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Download</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="http://www.bloggertrix.com/"><span>Contact Us</span></a></li>
</ul>
</div>
Replace # with your links.

9. Now save your HTML/Javascript'. You are done.
Leave a comment, if you need a help to add Underline Hover Css Navigation Bar.
Read More

Friday, May 24, 2013

Why Design Your Site For Mobile Platforms

Designing a site for mobile platforms should never be an afterthought, with mobile optimization becoming increasingly important.More and more people are accessing  the Internet on their phones, and are often looking for particular content or local services.Neglecting these  potential  audiences, and not going down the route of specializing your website, can mean that you fail to stay in line with the many companies that have already created mobile platforms sites,or that have optimized their sites using responsive design to make them more accessible to phones. Looking  at  these areas in more detail, it’s  possible to reinforce why designing a site for mobile platforms is so crucial.

Mobile Website Design

Why Need to Design Website for mobile platforms



Larger Potential Audiences and Specialisation


In general, mobile sites reach out to a growing audience of people that are using their  smartphones to browse and making purchases online. The kind of audience that can be found through mobiles may also be one that will remain loyal to a high quality site if they know that can receive a consistent level of service from it on a daily basis. The mobile audience is one that is growing all the time, and can’t be ignored as faster 4G speeds, and competitive prices for data storage and different speeds mean that websites will be able to provide more dynamic features.

A mobile version of a site can also be effective at breaking down your main website to be more specialised, and more able to deliver rapid conversions. A mobile site tends to be more driven by simple tasks and essential content, and can also be based around particular apps that deliver more interaction and opportunities for customers to access targeted content. The demographic profile of early mobile Internet users also tends towards those that already spend significant amounts online, and can continue to do so when on the go with their phones or tablets.

You may like this articles

   How to make ready your blog for mobile phones
   8 Important Tips to Fight Bounce Rate on Your Website

Responsive Design


When putting together a mobile version of a site, it’s important to recognise that you don’t necessarily have to design a completely new site, but rather that you can use responsive design to make a site work across different platforms. Responsive design uses CSS and other programming tools to ensure that a site will appear at the correct resolution and size depending on what device is being used to view it. Web developers can program a site to be more responsive, in this way, with the benefit of preventing users from getting frustrated with information not being accessible.

Better SEO


Not developing a site for mobile is also questionable when you consider the major Search Engine Optimisation (SEO) benefits that it brings. SEO can identify keywords that can be placed onto mobile sites, as well as links and prominent content that can be used to boost positions in a search. Having a mobile site, or a site that’s optimised for mobile, can allow you to tailor your business for mobile search engine queries, as well as for localised searches - getting in ahead of rivals on a local basis can help to build brand loyalty.

Improved Social Networking


Sites designed for mobiles also work well as a way of integrating social media and networking strategies for a business. Mobile platforms sites emphasise interaction, as well as up to date news and feeds from Twitter and other social networks; being able to make this content part of a site, but in a more prominent way on a mobile, can ultimately help to strengthen the connection between customers and a brand.

Author
Rob James is an online marketer, if you are looking for website design in Bristol he recommends Deep Blue Sky.  Rob can be found blogging about a variety of technology related subjects, including computer hardware, mobile apps, web development, and SEO techniques.
If you would like to write for bloggertrix, check our guest posting guidelines
Read More

Wednesday, May 22, 2013

12 Ways to Make Pinterest Work For Your Business

Should you use Pinterest to improve your business? Nowadays, pinterest has becoming  one of the best social  media tool for  business. when  it was first introduced in the market  most of the people were hesitant  of how flourishing it would be. But many businesses use  and  consider it as more visual structure of  marketing. In fact based on the latest statistic, Pinterest business is creating more traffic referral for businesses compared to LinkedIn,YouTube and Google +. That  simply says  more about the capability of the site.

12+Ways+to+Make+Pinterest+Work+For+Your+Business


How to make Pinterest work for your business



Know your Potential Customers In pinterest


The most dominant user of Pinterest today is women ages between 25 and 34 – this figure is very helpful for you to decide before moving forward with Pinterest business. Though men start joining but still women remain the foremost user of the site.

Have a Pinterest Business Account


To make your business known online you need to have a business account on Pinterest, that includes company and business profile. This will help potential client to easily find your business and to know more about your products and services.

Add “pin it” to your Bookmarks


Try to install “pin it” button to your browsers bookmarks toolbar, this allows you easily to pin images directly to your boards while browsing other websites.

Create Community In Pinterest


Create online community with Pinterest and try to include consumer based videos and images  to make feel the member of your community that they are part of your brand. As well it can  generate excitement to your followers, providing more direct type of marketing.

Have a Pinterest Friendly Business


In using Pinterest make sure that your business is Pinterest friendly. Usually businesses like  retail and restaurants are very suitable in marketing using Pinterest business. They have plenty of  opportunity to generate pins that surround their menu items, special offers, product launches and boards that are not openly narrated to their company but still catch customers involved.

You May Like these articles
     Show Pinterest Latest Pins Widget On Blogger
     How To Add Pinterest Follow Me Button To Blogger
     5 Most Baffling Aspects of Pinterest


Make sure that your Website, Images, and YouTube channel have “pin it” Button


Due to this people can easily pin from your website. The more visitors comment, share, pin and  repin your videos and images the more it become viral and expose to the community.

Have a Pinterest Friendly Website


It is important that your website is visually oriented and assure that your website offers a lot of  image content for visitors to share. Before creating account in Pinterest check your site first if it  is Pinterest friendly and ample of visual content.

Be active in Pinterest


Just like any other networking sites if you join Pinterest you should be an active user. You need  be active in following, pinning, repining, and commenting in regular basis. Just in case you don’t  have time to do such things you need to allocate someone doing such task. 

Think Related


Bear in mind that in creating pinboards and pinning images that are closely related to your  brands is a good idea and this give you the range to be more appealing and even more  appropriate to your potential customers.

Be Pinnable in Pinterest


Enrich your website with diagrams, infographics, pictures, videos and images. This gives your visitor something to pin; images and pictures makes your website easier to post to other social  media platforms like Facebook and Google+.

Use Infographics


Infographics is the attractive and efficient way to communicate information to your Pinterest followers with extremely visual platform.

Upgrade


Try to incorporate tools and applications in your Pinterest marketing campaign. Firstly, you  should install Pinterest’s toolbar button that let the user to pin images while surfing the web. As  well try to a have third party applications like PinPuff used to analyze “pinfluence” and know  how efficient your pins are; or a Google Chrome extension Pin Search that allows the user to  search related links basing on pinned images.

About the Author:
Stacy Carter is a tech/seo writer and professional blogger. She likes to cover tech and seo news  through online exposures She runs her own website: Phone Spy where you can find out much useful info how to use spy  software for your mobile device.
If you would like to write for bloggertrix, check our guest posting guidelines
Read More

Tuesday, May 21, 2013

Purple Cloud Label Widget For Blogger

In this post im gonna explain how to add attractive purple cloud  label widget for blogger. So this Purple Cloud labels are neat and nice looking, peoples can find the any categories easily. Few months ago i published few post with different style cloud labels  with various colors. If this is not match  for you. you can find best one from below list. I cant provide demo for this  tutorial.Just look at below purple cloud label style.

purple-Cloud-Label

You may like these articles.
Green Cloud Label widget for blogger
Orange Cloud Label widget for blogger
Blue Cloud Label widget for blogger

How to add Purple Cloud Label 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 dotted #FEB380;border: 1px rgba(0,0,0,0.2) solid;padding: 6px 8px 6px 14px;text-decoration:none;
color:black;white-space: nowrap;
font-family: arial,serif;text-transform:capitalize;
font-size: 12px;font-weight: bold;
position: relative !important;background: #aa00ff;
-moz-opacity:0.75;
-khtml-opacity:0.75;opacity:0.75;
filter:alpha(opacity:75%);
float:left;padding: 4px 3px;
margin: 0 5px 5px 0;
border-radius:4px 4px; -moz-border-radius:8px 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 {
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;
background:#A55A27;color:white;
-webkit-transition:all ease-in-out .5s;
-moz-transition:all ease-in-out .5s;
-o-transition:all ease-in-out .5s;
transition:all ease-in-out .5s;
}
#Label1 a:active {
background:#B24700;color:#80FFFE;
-webkit-transition:all linear .5s;
-moz-transition:all linear .5s;
-o-transition:all linear .5s;transition:all linear .5s;
}

7. Now Click  Save Template. You are done.
leave a comment, if you need  a help to add this Purple cloud Label Widget to your blog.
Read More

Monday, May 20, 2013

Stylish Rss Feed Subscription Box For Blogger

In this tutorial im gonna explain how to add stylish Rss Subscription widget with social  media   profile icons. By using this Rss Feed Subscription widget you can link your social  media profile  Facebook, Twitter and Rss and subscribe field. It will help to get the new updates by emails.You can check it from below demo link.

Stylish+Rss+Feed+Subscription
You may like these articles.
     Dark Style Rss Subscription Widget
     Social Media And Rss Subscribe Widget
     Awesome Rss Feed Subscription Widget

How to add Rss Feed Subscription Box For Blogger


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

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.

<center>
<div align="center" id="bloggertrix1-Subscribe-wrapper">
<div id="ig-subscription-optin" style="border: 3px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55AAEE', endColorstr='#003366',GradientType=0 ); width: 250px;">
<h3 id="bloggertrix1-title-text" style="color: white; font-size: 20px;">
GET FREE EMAIL UPDATES</h3>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<a class="social-icons" href="https://facebook.com/bloggertrix"><img src="http://2.bp.blogspot.com/-0UOzHUdczG4/USDjuyJCndI/AAAAAAAAAY8/5nN8AcBcvHs/s1600/Bloggertrix-facebook.png" /></a>
<a class="social-icons" href="https://twitter.com/bloggertrix"><img src="http://2.bp.blogspot.com/-H-E4Ll7i2-0/USDjw3bxgVI/AAAAAAAAAZc/a2kMp8rGRVU/s1600/bloggertrix-twitter.png" /></a>
<a class="social-icons" href="https://plus.google.com/userId"><img src="http://3.bp.blogspot.com/--KlnPhT6pRA/USDjvgwOluI/AAAAAAAAAZM/_O8TI0WivQk/s1600/Bloggertrix-Googleplus.png" /></a>
<a class="social-icons" href="http://www.feedburner.com/bloggertrix"><img src="http://2.bp.blogspot.com/-kXhnrJzlA_A/USDju5hXjPI/AAAAAAAAAZA/x6NdMR0JFhQ/s1600/Bloggertrix-Rss.png" /></a>

<input class="email" id="bloggertrix_Subscriber_email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Enter Email Address" /><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<input name="uri" type="hidden" value="bloggertrix" /><input name="loc" type="hidden" value="en_US" /> <input id="digitalhubinc_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Get Access Today!" /></form>
</div>
</div>
</center>
<style>
a.social-icons {margin-right: 5px; height:40px;width:40px;}
a.social-icons:hover {opacity: .7;filter:alpha(opacity=70); }
#ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9;
background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036));height: auto!important;color: white !important;padding: 20px 15px !important;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px;
margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;
padding: 5px;border: none;}#ig-subscription-optin input.name {
background: white url(http://3.bp.blogspot.com/-Jl2lcnXe42Y/UOb49YMFH8I/AAAAAAAAAiA/hOnOANR83gc/s1600/subscribe-name.png) no-repeat center right;}
#ig-subscription-optin input[type="text"] {border: 1px solid #111 !important;
font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}
#ig-subscription-optin input.email {background: white url(http://2.bp.blogspot.com/-dcien5QLnB8/UOb4N7eNU1I/AAAAAAAAAhw/NxzO8UXjgG4/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input {
font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important;
font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;
text-transform: none;text-decoration: none;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif;
border: none;padding: 0px !important;float: none;}input:hover[type="submit"] {
background-color: #0094D2;border: 1px solid #0094D2;color: white;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2;
color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {
color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #960E17 url(http://2.bp.blogspot.com/-nmlWGnTX5y4/UOb44zqKGBI/AAAAAAAAAh4/Aaa-E2D0Umk/s1600/subscribe-red.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;
padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;}
#ig-subscription-optin input[type="submit"]:hover {color: #FFA5A5;}</style>
You have to change the counters manually, just change red color number according to profile.

Replace bloggertrix with your Feedburner ID
Replace bloggertrix with your Facebook username
Replace bloggertrix with your Twitter Username
Replace UserId with your Twitter Username

5. Now save your HTML/Javascript'. You are done.
If you need a help for adding Rss Feed Subscription Box, Just leave a comment.
Read More

Sunday, May 19, 2013

Web Design – Seven Top drifts to watch out in 2013

The latest trends in the field  of web design mirrors the ever-changing  online  world. With the change in the world around, the world of  internet should  also keep changing to meet up with the
requirements of people. All of us desire to find something that is crisp, fresh and new in addition
to clean when it comes to the genre of web design. There were many shifts seen in the year 2012 but here in this article we will delve with the top drifts that you should watch out in 2013 in the field of web design.
Web-Design-tips


7 Web Design tips For Blogger 2013


Responsive Web Design

With the influx of innovative and new mobile devices, we are also visualising the growth of responsive web design.  Responsive web design facilitates the users for better read and experience the web from their laptop, desktop and cell phone. These responsive web templates are created so that they look brilliant on all kind of screen sizes. Therefore, it won’t be a problem for anyone to view it in a crisp manner.

Flat Design

A site with flat design lacks gradient but includes white spaces, solid colours and crisp topography. Windows 8 will give you a complete crisp and flat design.

Parallax

The Parallax website design trends has grown immensely as it creates an illusion of depth as you scroll through the web pages.

Full Screen Photo Launch Pages

If you plan to convey a powerful message on your website you can make use of full screen photo launch page. The viewers will automatically be shifted to another world of creation.

Advanced Page Scrolling and Navigation

The navigation panel that we have found on various applications are now integrated on different sites. This is only because of their interactive nature. There are many sites that offers this enhanced scrolling in addition to these navigation panels to facilitate the users navigate the sites in an effective way.

Add Social Media Badges

Marketing is considered to be an ultimate determining factor that will determine the success or failure of any site. Social media or viral marketing is getting explored in various sites. You need to check out any social community for sharing the badges. You can also position these badges to any blog posts.

Detailed Illustrations

Bring in new design trends which are quite catching and can get in one’s attention easily. But, you need to find out a designer who can create such impeccable work of art. You can bring in illustrations to get and hold different kinds of mood in your site. If you look at the different sites on the Internet you will find various site galleries focusing digital illustrations.

Infinite Scrolling

Infinite scrolling trend has been around for a couple of years now. This loading technique will work beautifully. Pagination is usually a non-issue and therefore it doesn’t even work as a detriment in terms of the user.

So, these are the seven top drifts that you can watch out in the year 2013 that is being followed by Web Design Development Company. Therefore, to make your site look trendy and attractive you need to keep these above trends in mind or get in touch with a designer who can create your website using attractive layouts and keeping in mind these above mentioned techniques.

Author Bio: Diyana Lobo has been associated with the IT industry for a long time. In her leisure, she loves writing articles. Through her articles, you can obtain knowledge on various factors that the web design development company should consider in the year 2013. Web Design Development Company.
If you would like to write for bloggertrix, check our guest posting guidelines
Read More

Friday, May 17, 2013

Awesome Circle Style Navigation Menu for Blogger

This is a Circle Style navigation bar. Im gonna explain how to add it to blogger. Circle navigation  menu work fine with every modern internet browsers.You can link with your main pages by using wire frame navigation Im using  Css3 and HTML, Just check out demo.Its easy to add to blogger


You may like these article.
     Css3 Shadow Style Vertical Menu
     Round Corners Popular Post Widget
     Classic Style Css3 Navigation Bar

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. Find this tag by using Ctrl+F    ]]></b:skin>

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

/* The CSS Code for the menu starts here bloggertrix.com */
.circlemenu{
width: 100%;
overflow:hidden;
}
.circlemenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center; 
}
.circlemenu li{
display: inline;
margin: 0;
}
.circlemenu li a{
display:inline-block;
text-align:center;
text-decoration: none;
color: white;
background:#b30707;
margin: 0;
margin-right:5px; 
width:100px;
height:100px;
border-radius: 400px; 
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}
.circlemenu a span{
position:relative;
top:40%;
}
.circlemenu li a:visited{
color: white;
}
.circlemenu a:hover{
background: #ff1774;
}



6. Go to blogger and click Layout

7. Click Add Gadget and select 'HTML/Javascript

8. Paste below code.

<div class="circlemenu">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Download</span></a></li>
<li><a href="h#"><span>CSS</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="http://www.bloggertrix.com/"><span>Contact Us</span></a></li>
</ul>
</div>
Replace # with your links.

9. Now save your HTML/Javascript'. You are done.
Hope this helps who like to add circle navigation menu for blog.
Read More

Thursday, May 16, 2013

SEO vs PPC: Which One is Better for Your Business

Generating organic traffic is not so easy now days.You have to make your website SEO friendly so
that it can rank high in search results. High SERP (Search Engine Result Position) means high organic traffic will come to your website. There are two major options for webmasters to increase traffic to their website: SEO (Search Engine Optimization) and  PPC (Pay per Click)  advertising  programs. In this article we’ll discuss which is better for your online business.

SEO+vs+PPC


SEO vs PPC: Which One is Better for Your Business



Let First Discuss About PPC:

PPC, which stands for Pay per Click, is a paid advertising program. The advertisers must need to pay some amount for every single click they receive to the advertising company like Google Adwords, Yahoo Search Marketing and others. When you setup your ads, they will start appearing in sponsored results on search engine result pages based on users search query. In that way you will get traffic to your site in a fast and easy manner.


SEO (Search Engine Optimization)


SEO is a long term process that takes time to get the results. By using proper SEO techniques you can rank your website in top results. You will be able to gain organic traffic which will be really targeted and absolutely free. If you can SEO for your website yourself then this is best way to be success in your online business. But if you are not aware with SEO strategies, then there is no need to worry. You can hire any professional SEO Services provider. Hiring SEO expert is onetime investment and in return you will get targeted organic traffic for long period.


Which One is better for you?


SEO and PPC both have their own importance. SEO can bring free organic traffic for your website where PPC is the best way to get instant result. Suppose if you want to promote any product for short time, then surely you can go with PPC. If you have budget and you are willing to pay to promote your business then no doubt you can go with PPC. But if you not want to invest money for long way then I recommend you to choose SEO for your business success because only SEO can bring decent organic traffic to your website.

Author’s Bio: This amazing article is written by Pradeep Singh, a 23 Yrs old professional Sr. SEO Executive, who is working for Sunrise Web Services in Delhi, a leading Web Services Company in India.
If you would like to write for bloggertrix, check our guest posting guidelines
Read More

Wednesday, May 15, 2013

Smooth Sliding Social Media Widget For Blogger

In this tutorial im gonna explain how to add Smooth Sliding social media widget for blogger.By using
Sliding Social widget you can link your social media profile Facebook,Twitter and Rss Google plus and pinterest. Check the demo from below link.

Smooth+Sliding+Social+Widget

You may like these articles.
     Awesome 8 tips to Increase Google Plus Followers
     Flipboard Style Social Media Widget
     Below Post Social Sharing Widget

Add Smooth Sliding Social Widget to Blogger


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

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below code.

<style>
.btrix-social-slidebox {
    font: 16px normal 'Denk One', sans-serif;
    display: inline-block;
    position: relative;
    width: 95%;
    max-width: 200px; 
    padding: 12px;
}
.btrix-social-slide {
    width: 95%;
    max-width: 280px;
    padding-top: 8px;
    padding-left: 8px;
    padding-right: 8px;
}
.btrix-social-slide a {
    text-decoration: none !important; 
   }
.btrix-social-slide ul {margin-top:-5px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.btrix-social-slide ul li {margin-bottom:15px;
    display: inline;
    margin: 0;
    padding: 0;
    text-indent: 0;
 margin-left:10px;
}
.btrix-social-slide ul li a.facebook {
    border-left: 65px solid rgba(59, 89, 152, 1);
    color: rgba(59, 89, 152, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.facebook p {
    margin: 2px 20px 0 -60px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.facebook:hover {
    background: rgba(59, 89, 152, 1);
    border-left: 0px solid rgba(59, 89, 152, 0.1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.facebook:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.btrix-social-slide ul li a.twitter {
    border-left: 65px solid rgba(64, 153, 255, 1);
    color: rgba(64, 153, 255, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.twitter p {
    margin: 2px 20px 0 -60px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.twitter:hover {
    background: rgba(64, 153, 255, 1);
    border-left: 0px solid rgba(64, 153, 255, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.twitter:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.btrix-social-slide ul li a.gplus {
    border-left: 65px solid rgba(219, 74, 57, 1);
    color: rgba(219, 74, 57, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.gplus p {
    margin: 2px 20px 0 -50px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.gplus:hover {
    background: rgba(219, 74, 57, 1);
    border-left: 0px solid rgba(219, 74, 57, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.gplus:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.btrix-social-slide ul li a.pinterest {
    border-left: 65px solid rgba(174, 45, 39, 1);
    color: rgba(174, 45, 39, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.pinterest p {
    margin: 2px 20px 0 -50px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}

.btrix-social-slide ul li a.pinterest:hover {
    background: rgba(174, 45, 39, 1);
    border-left: 0px solid rgba(174, 45, 39, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}

.btrix-social-slide ul li a.pinterest:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}

.btrix-social-slide ul li a.rss {
    border-left: 65px solid rgba(255, 102, 0, 1);
    color: rgba(255, 102, 0, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}

.btrix-social-slide ul li a.rss p {
    margin: 2px 20px 0 -60px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}

.btrix-social-slide ul li a.rss:hover {
    background: rgba(255, 102, 0, 1);
    border-left: 0px solid rgba(255, 102, 0, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}

.btrix-social-slide ul li a.rss:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
</style>

<div class="btrix-social-slide">
    <ul>
        <li><a class="btrix-social-slidebox facebook" href="https://www.facebook.com/bloggertrix"><p>12K+</p>Facebook </a></li>
        <li><a class="btrix-social-slidebox twitter" href="https://twitter.com/bloggertrix"><p>5K+</p>Twitter</a></li>
        <li><a class="btrix-social-slidebox gplus" href="https://plus.google.com/107955298793879607964"><p>4K+&nbsp;</p>Google+</a></li>
        <li><a class="btrix-social-slidebox pinterest" href="http://pinterest/bloggertrix"><p>2K+&nbsp;</p>Pinterest</a></li>
        <li><a class="btrix-social-slidebox rss" href="http://feeds.feedburner.com/bloggertrix"><p>11K+</p>RSS</a></li>
    </ul>
</div>


You have to change the counters manually, just change red color number according to profile.

Replace bloggertrix with your Facebook username
Replace bloggertrix with your Twitter Username
Replace 107955298793879607964 with your Google plus ID
Replace Username with your Youtube Username
Replace bloggertrix with your Feedburner ID

5. Now save your HTML/Javascript'. You are done.
Hope this Smooth Sliding Social Media Widget helps to make your blog attractive.
Read More

Tuesday, May 14, 2013

First 5 Actions to Take When Your Blog Has Suffered A Security Breach

A security breach of your blog is no  small thing; if you’ve been running your blog for a long time and it’s loaded with content, videos and other information while also being part of your overall online
business presence, a hack attack can be downright catastrophic.

Blog-Secure

5 Actions to When Blog Has Suffered A Security Breach


Thus, given the potential damage that having your crucial blog pages get hacked wide open can bring, you need to know how to take action as quickly as possible after the fact and save both your data and forensic information about the hack itself while minimizing the downtime your blog suffers before it’s back up and running robustly again

Let’s go over the five crucial steps you should take right after you realize that you’ve been breached.

Check With Your Hosting Provider


This is the most basic step you should take after discovering that your site is either not working or is acting very strangely.

For one thing, you may not even be the victim of an actual hack; sometimes accidents do happen and either something your hosting provider did wrong (ie: a server crash) or something you did  wrong (ie: outdated software or badly written code) could be the cause of your problem. This applies especially in situations where a page simply doesn’t load or shows an error message.

Thus, take a deep breath, calm down and contact your hosting provider to see if they can inform you of any mistakes on their part or at least help you go through your own work with your server data to see if you may have done something wrong with your site. Also, if you’ve recently been editing code, go through your latest changes line by line and remove them to see if something there is the cause of odd blog behavior.

Finally, even if you’re sure you’ve been hacked, you should talk to your webhost so that they can explain what they know about the hack to you, or tell you if your blog is alone or one amongst many others that have been attacked.

Start Making a Record of Everything


As soon as you start to notice the effects of what you suspect to be a breach, start recording everything that happens after that. Record the names of any suspicious exe files, all odd blog behavior, any lines of strange code you found and pretty much everything you see and do that has to do with your blogs problem.

By doing this, you’ll be creating a chain of digital forensic evidence that will not only help you keep track of how you’re resolving the hack, but will also let you learn from your progress for when it comes to dealing with future incidents.

Make Copies of All Suspect Data


In conjunction with making a record of everything you do and see, also make copies of all suspect files, code and EXEs that you encounter. Even though you’re in the process of eliminating them as part of your cleaning efforts, you should first copy each piece of data as part of your attempt to record and understand the hack you’ve suffered. You might even want to go as far as creating a forensic mirror copy of your entire hard drive if you think that the source of your hack was your own computer.

Again, these files represent evidence that will give you a chance to use digital forensics and figure out what had happened to you so that you can better understand it and root out its source.

Save all copies of corrupted files on a remote storage unit such as a flash drive or an external hard drive.

Close Down all Server Access Accounts and Change Every Password


This means that, if you’ve given access to your blog’s servers to anyone else via FTP, you should shut down all of these accounts right away and change their passwords just to be sure about security. Additionally, change all of your other server passwords such as those for MySQL accounts, CMS dashboards and even your blog’s hosting control panel password.

This may seem a bit extreme but until you know how someone breached your blog, it’s better to eliminate all possible sources for the hack systematically.

Backup All Your Data and Reinstall


We’re sort of covering two steps here, but they go in tandem with each other: First, start backing up all of your blog data from your servers and MySQL databases as fast as you can. The quicker you do this the less likely you are to suffer even worse losses. You should have already been practicing a general policy of regular blog backups anyhow, but, well, some people just don’t. Thus, now that you’ve finally been hacked, get busy with this.

It doesn’t matter if you’re also backing up infected files or malicious code; you can clean both out later in a localhost environment; for now the key is to do a full backup.

Once you’ve backed up your data, erase everything from your active server and reinstall fresh software for all of your blogs components. These will include your CMS software if you’re using a CMS (such as WordPress), your addons, plugins and your third party site addons such as Adobe, Flash or any other blog extras.

Afterwards, make sure that all your passwords have been changed, your site secured with any needed patches and start adding your backed up content back in piece by piece.

About the author: Stephan Jukic is a freelance writer who generally covers a variety of subjects relating to the latest changes in white hat SEO, mobile technology, marketing tech and digital security. He also loves to read and write about location-free business, portable business management and finance. When not busy writing or consulting on technology and digital security, he spends his days enjoying life’s adventures either in Canada or Mexico, where he spends part of the year. Connect with Stephan on LinkedIn. digital forensics
If you would like to write for bloggertrix, check our guest posting guidelines
Read More

Friday, May 10, 2013

Curved Glossy Navigation Bar for Blogger

This is a curved glossy navigation bar. Im gonna explain how to add it to blogger.curved glossy navigation  menu work  fine with every modern internet  browsers.You can link with your main pages by using wire frame navigation. Just check out demo. Its easy to add to blogger.lets give a try.

Curved+Glossy+Navigation+Bar

Add Glossy Navigation Bar


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. Find this tag by using Ctrl+F    ]]></b:skin>

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

/* The CSS Code for the menu starts here bloggertrix.com */
.btrix_glossymenu1{
 position: relative;padding: 0 0 0 34px;margin: 0 auto 0 auto;
 background: url(http://4.bp.blogspot.com/-kqOgUTfKaSM/UY0EbFl_pdI/AAAAAAAAHks/7Qsu8KrtUIY/s1600/btrix_menupu_bg.gif) repeat-x; 
 height: 46px;
 list-style: none;
}
.btrix_glossymenu1 li{
 float:left;
}
.btrix_glossymenu1 li a{
 float: left;display: block;color:#000;
 text-decoration: none;
 font-family: sans-serif;
 font-size: 13px;
 font-weight: bold;
 padding:0 0 0 16px; 
 height: 46px;
 line-height: 46px;
 text-align: center;
 cursor: pointer; 
}
.btrix_glossymenu1 li a b{
 float: left;display: block;padding: 0 24px 0 8px; 
}
.btrix_glossymenu1 li.current a, .btrix_glossymenu1 li a:hover{
 color: #fff;
 background: url(http://3.bp.blogspot.com/-2qcXpJCPRAc/UY0EbFOeEKI/AAAAAAAAHkc/ECR16Fm83Y0/s1600/btrix_menupu_hover_left.gif) no-repeat;
 background-position: left;
}
.btrix_glossymenu1 li.current a b, .btrix_glossymenu1 li a:hover b{
 color: #fff;
 background: url(http://4.bp.blogspot.com/-NUA9US-LDW4/UY0EbNUECQI/AAAAAAAAHkg/2TLQ5C2MLEQ/s1600/btrix_menupu_hover_right.gif) no-repeat right top;
}

6. Go to blogger and click Layout

7. Click Add Gadget and select 'HTML/Javascript

8. Paste below code.

<ul class="btrix_glossymenu1">
 <li class="current"><a href="#"><b>Home</b></a></li>
 <li><a href="#"><b>CSS</b></a></li>
 <li><a href="#"><b>Forums</b></a></li> 
 <li><a href="#"><b>Webmaster Tools</b></a></li> 
 <li><a href="#"><b>JavaScript</b></a></li> 
 <li><a href="#"><b>Contact Us</b></a></li> 
</ul>
Replace # with your links.

9. Now save your HTML/Javascript'. You are done.
If you have any problem regarding this curved glossy navigation. leave a comment.
Read More

Thursday, May 9, 2013

Guest Blogging Post-Penguin 2.0

Any website owner that uses guest blogging as a means to which they try to move  themselves up the Google ladder has seen the many changes that have developed throughout the last few years. During the golden days of blogging, it was easy to  share and repeat information on blogs because the word was out: “as long as you have links posted all throughout the internet, Google sees you as a viable website of interest for higher rankings in searches.” Guest blogging quickly became the way to do this. Although this is still the case to a small degree, a tactful approach must be made if you are  still a strong advocate of guest  blogging for your internet marketing campaign.
Guest+Blogging+Post-Penguin+2.0

Guest Blogging Post-Penguin 2.0



The Penguin 2.0 launch has brought a lot of uncertainty as to whether guest blogging will thrive or die, but it does seem that Google still puts a high price on guest blogging. It’s what goes on within these posts that Google monitors more closely. Here are some tips to ensure you will keep guest blogging alive for everyone else and benefit from it yourself:

Raise the quality of guest posts


The guest blogging market has been flooded with overwhelming amounts of repetitive content and countless spammy links. This is to blame in part on Google. If Google had been more particular before their system had been taken advantage of, there could have been an internet full of heavy, fulfilling content. If content really had been treated as king, would the blogosphere have the same amount of intelligence that it currently has today?

If the quality of guest blogging or the value upon which it is developed and used stays at a high level, the effects of backlinks may be able to gain a higher assessed worth again. Since websites are pulling back their openness to guest bloggers, a natural pruning is already in order, but if the general writing public takes this matter seriously, the grip could potentially loosen and guest blogging would be able to take a more prominent role for traffic creation once again.

Stop using the same backlinks over and over.


The more often a website is backlinked, the more that it falls into the “spam” category. Let’s face it; if you are putting your site’s link onto 5 posts a day, you are officially a spammer. There is no other description. You may not have the intentions of being a spammer, but that is what you have become. There is a loophole around this, however, and it is to create what I am coining as “cyclical linkage.” Cyclical linkage is creating a link system that is developed due to having multiple interconnected sites that commonly and uniformly link to each other in multiple ways.

Many talk about the benefits of having multiple blogs, but who in their right mind grew up thinking that it would be a great idea to have 4 blogs? The goal is to spread the wealth in one aspect, but in another aspect we can focus directly on the issue of avoiding spam. To Google, it looks like you have your readers from your guest post discussing SEO written by you along with a link to your personal blog, but you have actually inconspicuously taken them there to connect them to a secondary link to your SEO site. Then on the next post, you write another great blog post discussing SEO and send them to your actual SEO site. By doing this, you are taking the focus off of the overuse of that one particular link but still keeping your audience linked up. The key is to make sure that all of your sites are so interconnected that a potential client wouldn’t miss the link to your other site(s).

Although this is not a perfect approach, the key here is to remove the potential of being downgraded due to having too many backlinks for one particular site. By interconnecting your sites, you are creating cyclical linkage between your own sites (which can enhance sales and traffic on all of the sites), and avoid the degradation of your site at the same time.

Get the content right, already.


This should not even be a discussion anymore, but it seems to still be the everlasting issue. Even the guest posts that discuss “how to become a guest blogger” have the same, repetitive content issue. Without fail each one will discuss how you should have great, new content. There are plenty of posts discussing how to become a guest blogger and few that discuss how to be a great guest blogger.

One key to get the content right is to create relatable, interesting, fresh, and most importantly, longer content. The lengths of posts are beginning to shift because if it is necessary for you to write 2000 words instead of 750, there very well should be some decent content to keep yourself writing for that long. Tim Ferriss, bestselling author and writer of “The 4-Hour Workweek” writes on his website, “Nearly ALL of my most viral posts are more than 3,000 words.” Enjoy the days of 1000 word posts while they last.

Get the word out, and keep it out.


Let’s be honest. It takes a couple of hours to put this post together. By the time I formulate my ideas, get them on paper, beef them up, edit them and re-edit them, it’s easily about 2 hours. Then I spend my time emailing sites to get the post posted. Depending on how long that takes, I could easily have invested 3 hours into a single post. If you don’t spend at least half of that much time promoting your post, I would argue that you are wasting your time. Can you imagine what kind of effect your post could have if you were (hardcore) promoting the post for an hour and a half? Now your link is becoming more valuable because you’re getting more traffic from more sources to that post. On top of that, when the site manager sees how much traffic you have brought to their site, you can almost guarantee another writing opportunity.

Be sure to follow up with comments and spend time talking to fellow readers on twitter, Google +, and Facebook. The discussion should be taking place all over the internet. I promise you, if you are taking the writing process seriously, the link process seriously and the social process seriously, your ROI will pay out.

Chris Gunn is the owner of Guest Post Sharks, a guest-blogging company developed to help businesses build successful internet marketing campaigns. He enjoys traveling with his wife Jessica as well as pouring into others in ways that help them further their strengths. You can find him on Facebook, Twitter, or Google +.
If you would like to write for bloggertrix, check our guest posting guidelines
Read More