BlogTrixz

Happy New Year

2014-01-01T11:47:00.001+05:30

When The Clock Strikes Twelve On December 31st,
People All Over The World Cheer And Wish Each Other A Very Happy New Year.
For Some, This Event Is No More Than A Change Of A Calendar.
For Others, The New Year Symbolizes The Beginning Of A Better Tomorrow.
So, If You Look Forward To A Good Year Ahead,
Spread Happiness With These Wonderful New Year Wishes.

We wish you a new year filled with wonder, peace, and meaning. Happy 2014!

Social Sharing Widget for Blogger Post

2013-06-04T14:43:00.000+05:30

This Post is about How to Add Social Sharing Widget in Blogger Post. In this tutorial I am gonna explain, how to add it to begin or end of blogger post. By using this widget, you can share your social networks with one click. It means, you can get some visitors to your blog if someone do sharing.So you can easily share your content within the social sites and increase your traffic to your blog. I am using HTML and Some JavaScript.
This is also widget like you have see the other social widget in older post.

Demo

I try it for a long time but in every time I have the long editing in template but it is simple code which gives the Amazing Social Widget to Post.Widget as shown in picture.

STEPS:

Log in to your blogger account and goto to "Template" link which you will find on your site dashboard sidebar.
After that Click On "Edit HTML" Button.
Find this tag by using CTRL+F <data:post.body/>
Paste Below code before <data:post.body/> tag.

<!-- Start of Social Widget by http://blogtrixz.blogspot.in/ -->

<center>
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<table border='0'> 
<tr> 
<td><a class='twitter-follow-button' data-show-count='false' href='https://twitter.com/dhavalkuku'>Follow @dhavalkuku</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script></td>
  <td><div style='padding-top:6px; padding-left:10px;'> 
<script type='text/javascript'> 
tweetmeme_style = &quot;compact&quot;; 
</script> 
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/> 
</div></td>
<td> 
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/> 
</td>
<td><div style='margin-left:35px;'> 
<script type='text/javascript'> 
(function() { 
var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0]; 
s.type = &#39;text/javascript&#39;; 
s.async = true; 
s.src = &#39;http://widgets.digg.com/buttons.js&#39;; 
s1.parentNode.insertBefore(s, s1); 
})(); 
</script> 
<a class='DiggThisButton DiggMedium'/> 
</div></td>
  <td> <iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FBlogtrixz&amp;send=false&amp;layout=box_count&amp;width=50&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=90&amp;appId=159872777520139' style='border:none; overflow:hidden; width:50px; height:90px; padding:40px 0 0 70px;'/>
</td> 
</tr> 
</table> </b:if>
</center>
<!-- Ending of Social Widget by http://blogtrixz.blogspot.in -->

After creating the significant changes save the Template and You are done.

Now you can see that Social Widget is appear after the Every Post of your Blog..
You can also Add This widget After the Post by adding the same code after the tag.Any problem related to this post then please give the query.

Notification Bar Widget to blogger

2013-05-28T14:12:00.001+05:30

Notification bar at the bottom of your blog is a great way to divert user attention on some of the links , For example you can manually insert your new post link so that it gets maximum user attention and page views or you can add popular post link or anything for which you want some user attention.you can also put social media sharing icons at the bottom in this notification bar so your posts gets more Facebook likes and plus one,well for social media sharing we have many other widgets like:-

There are many things to do with notification bat at the bottom of blog like , If you want to earn money then you can insert your affiliate links in the notification bar along with you can promote your other blogs through anchor text of your blog's keyword or add social bookmarking icon at the bottom so you get more page views and traffic. So it is your choice what to do with this notification bar.

Lets get started , Below is the code and method to add notification bar at the bottom of blog with this new widget for blogger.

How to add blog bottom notification bat widget to blogger

Go to blogger dashboard

Go to template and then click on Edit HTML.

Now hit CTRL+F.And search for this piece of code </body>

Now copy the below code and paste it before the </body> and you are done.

<!-- Start of notification bat by http://blogtrixz.blogspot.in/ -->
<style type="text/css">
#blogtrixzbar
{
background-color:#1b1a1c;
color:#fff;
text-align: center;
margin:0 auto;
border-top: 3px solid #0ebfe9;
height:28px;
font-size:13px;
position:fixed;
bottom:0;
z-index:999;
width:100%;
border-top-left-radius:15px;
border-top-right-radius:15px;
display:block;
font-weight: bold;
font-family: arial,&quot;Helvetica&quot;;
font-color:#fff;
}
#blogtrixzbar:hover
{background:#111;}
#blogtrixzbar p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}
#blogtrixzbar p a{ text-decoration:underline; color:#0ebfe9;}
.blogtrixzss{display:block; position:relative; right:15px; float:right;}
.blogtrixzss a{font-size:18px; font-weight:bold; font-family:&quot;Arial&quot;; color:#0ebfe9; line-height:30px;}
</style><center>
<div id="blogtrixzbar">
<blink>Get awesome and new</blink> <a href="http://blogtrixz.blogspot.in/search/label/blogging%20tips" target="_blank">Blogging Tips</a> | <blink>With all new and

creative </blink> <a href="http://blogtrixz.blogspot.in/search/label/Widget" target="_blank">Blogger widgets</a><br />
<div class="blogtrixzss">
<a href="javascript:hide_cross();">X</a></div>
</div>
</center>
<script language="JavaScript">
function hide_cross() {
crosstbox = document.getElementById(&quot;bssticky&quot;);
crosstbox.style.visibility = &#39;hidden&#39;;
}
</script>
<!-- End of notification bat by http://blogtrixz.blogspot.in/ -->

Here are some customization that you can make.Orange type highlighted text type your text.

Hover Style Social Media Widget for Blogger

2013-05-20T15:30:00.002+05:30

In post I am gonna explain how to add Hover Style social media widget for blogger. By using this widget you can link your social media profile Facebook ,Twitter , RSS, Google+ and YouTube.Check link for Demo.Click here.

STEPS:

Goto to the Layout Option which you can find on your blogger dashboard.

Click On Add Gadget and Select HTML/Javascript.

<style>
.StarsBloggingSocialButtonsBorder {
margin:0 auto;
padding:5px;
width:auto;
border-radius:5px;
border: 1px #BBBBBB solid;
}
#blogtrixz-SexySocialButtons{
list-style:none;
text-decoration:none;
font-size:0.9em;
font-family:trebuchet ms,sans-serif;
}
#blogtrixz-SexySocialButtons a{
text-decoration:none;
font-family:trebuchet ms,sans-serif;
}
#blogtrixz-SexySocialButtons li{
position:relative;
height:38px;
cursor:pointer;
padding: 0 !important;
}
#blogtrixz-SexySocialButtons .facebook, .googleplus, .YouTube, .rss, .twitter{
position:relative;
z-index:5;
display:block;
float:none;
margin:5px 0 0;
width:210px;
height:38px;
border-radius:5px; background:url(http://1.bp.blogspot.com/-JKq0eFFwx34/UGx39fhHO_I/AAAAAAAABE4/56i9phAS2do/s1600/NBT+Sprites+Social+Icons.png) no-repeat;
background-color:rgba(217,30,118,.42);
-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
box-shadow:rgba(0,0,0,.28) 0 2px 3px;
color:#141414;
text-align:left;
text-indent:50px;
text-shadow:#333 0 1px 0;
white-space:nowrap;
line-height:32px;
-webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-moz-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-ms-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-o-transition:width .25s ease-in-out,background-color .25s ease-in-out;
transition:width .25s ease-in-out,background-color .25s ease-in-out;
-o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
}
#blogtrixz-SexySocialButtons li:after{
position:absolute;
top:0;
left:50px;
z-index:2;
display:block;
height:38px; color:#ffffff;
content:attr(data-alt);
line-height:32px;
}
#blogtrixz-SexySocialButtons .icon{
overflow:hidden;
color:#fafafa;
}
#blogtrixz-SexySocialButtons .facebook{
width:32px;
height:32px;
background-color:rgba(59,89,152,0.42);
background-position:0 0;
}
#blogtrixz-SexySocialButtons .twitter{
width:32px;
height:32px;
background-color:rgba(64,153,255,0.42);
background-position:0 -33px;
}
#blogtrixz-SexySocialButtons .googleplus{
width:32px;
height:32px;
background-color:rgba(228,69,36,0.42);
background-position:-3px -66px;
}
#blogtrixz-SexySocialButtons .YouTube{
width:32px;
height:32px;
background-color:rgba(174,45,39,0.42);
background-position:-2px -95px;
}
#blogtrixz-SexySocialButtons .rss{
width:32px;
height:32px;
background-color:rgba(255,102,0,0.42);
background-position:-3px -126px;
}
#blogtrixz-SexySocialButtons li:hover .icon,
.touch #blogtrixz-SexySocialButtons li .icon{
width:210px;
}
.touch #blogtrixz-SexySocialButtons li .facebook, #blogtrixz-SexySocialButtons li:hover .facebook{
background-color:rgba(59,89,152,1);
}
.touch #blogtrixz-SexySocialButtons li .twitter, #blogtrixz-SexySocialButtons li:hover .twitter{
background-color:rgba(64,153,255,1);
}
.touch #blogtrixz-SexySocialButtons li .googleplus, #blogtrixz-SexySocialButtons li:hover .googleplus{
background-color:rgba(228,69,36,1);
}
.touch #blogtrixz-SexySocialButtons li .YouTube, #blogtrixz-SexySocialButtons li:hover .YouTube{
background-color:rgba(174,45,39,1);
}
.touch #blogtrixz-SexySocialButtons li .rss, #blogtrixz-SexySocialButtons li:hover .rss{
background-color:rgba(255,102,0,1);
}
</style>
<div class="blogtrixzSocialButtonsBorder">
<ul id="blogtrixz-SexySocialButtons">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="https://www.facebook.com/blogtrixz">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="https://twitter.com/dhavalkuku">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/103181909992661418479">Follow us on Google+</a></li>
<li data-alt="Subscribe us on YouTube"><a class="icon YouTube" href="https://youtube.com/Username">Subscribe us on YouTube</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/blogtrixz">Subscribe with RSS</a></li></ul></div>

Replace blogtrixz with your Facebook username
Replace dhavalkuku with your Twitter Username
Replace 103181909992661418479 with your Google+ ID
Replace Username with your YouTube Username
Replace blogtrixz with your Feed burner ID.

Now Save you HTML/JavaScript.

Now you can enjoy your hover style widget..:)

Add Small Image Besides Your Post Title

2013-05-19T11:33:00.000+05:30

Want to add small image to your blog post title???

Today’s tutorial is about adding a little picture/icon beside the title of each post in your blog.Be sure that this addition will make your posts more attractive and better than before. This addition is one of the most additions that you might found in the biggest popular websites.
You can add your personal picture or a little image quoted from your header image.
For example it will look like this:

Go To Blogger » Design » Edit HTML.Don't forget to make a backup to your template.
Now search for the following tag .post h3 you can search for this tag also: .post h2 look CAREFULLY and you will see a code just like the following:

.post h3 {

color: #7C2345;

font-size: 20px;

font-family: Arial, sans-serif;;

font-weight: normal;

margin: 0px;

padding: 0px 10px 0 47px;

}

Now replace it with the following code:

.post h3 {

background:url(PUT HERE THE IMAGE LINK) no-repeat top left;

color: #981232;

font-size: 20px;

font-family: Arial, sans-serif;

font-weight: normal; height:45px;

margin: 0px;

padding: 0px 10px 0 47px;

line-height:1.1em;

}

Replace the green text with your image link. Make your avatar size to be 40px by 40px .Design your own avatar with white background and colored border.
Change this Color #981232 with the one that your title would like to appear.

After all save HTML.

And This is it, congratulations with the new addition. If you have any problem in any step, just put it in comment.

Page Optimization Blogging tips To Get Traffic From Google Search results

2013-05-16T12:52:00.000+05:30

On page optimization blogging tips plays an important role in getting traffic from Google search results and traffic from other search engines.Traffic that you receive from Google and search engines is called organic search results but what are those factors that enforces Google bots to send you traffic or to enlist in you Google search results .in this post we will be discussing those factors which enforces search engines like Google to send you traffic from their search results.blogging tips

Page rank and Alexa rank also depends on the amount of traffic that you receive for your blog.and if you have Google Adsense ads then earnings will also be higher if you receive Google search results.so below are those methods that i use to receive Google search results or say use to get traffic from Google search engines.

Use of H1 Tag

Use h1 tag when you write little description about your posts.Search engines likes Google Yahoo loves h1 tag and whatever you type in between h1 tags brings you traffic.You can check out many of the famous blogs who use h1 tags and it brings them traffic.Do not out too many keywords in h1 tags but use only 1 or 2 that matches with your post title and you will see getting traffic from search engines.

Post title before the Blog Homepage Title.

Use post title before the homepage title.many times you have seen your blog title appears before the homepage title which is not good from SEO point of view.If you want to receive traffic from search engines then put your post title before the homepage title .You can do this here I have written all the required codes which will put your post title before the homepage title. Post title before the homepage title.

Use Caption and Properties On images.

In order to receive traffic from Google images you need to put captions and also use properties on images which indicates search engines like Google and yahoo about the description of images.anytime a user types a keyword that matches with your images caption or properties then your images will start appearing in Google images search results. so use effective keywords in your image captions.

Make bolder your anchor text and link them in blog post.

Always use anchor text in your blog post and link them to your related posts and make them bold.Google bots finds bolder keywords in your blog post and if your anchor text matches with user query then you will start getting traffic from Google search results and the moral is make search engines easier to find the keywords in your blog posts.So always make them bold.for example my anchor text is blogging tips so see in above image I have made blogging tips bolder.

Bounce Rate

2013-05-09T10:17:00.001+05:30

Today I was going to write about why new websites can display very misleading bounce rates, but I realized I had never covered the bounce rate concept before, so I’ll stick to the basics today, and expand on the topic over the coming weeks.
If you already know the term, consider this post a refresher.

What Is Bounce Rate?

Bounce rate is a very important metric for website owners. It basically tells you what percentage of your visitors are “bouncing” away after landing on your site (e.g., they just visit one page and leave before clicking on to a second page inside your site). A bounce can occur for several reasons, including:

The visitor hit the “Back” button on his browser.
The visitor closed his browser.
The visitor clicked on one of your ads.
The visitor clicked on one of your external links.
The visitor used the search box on his browser.
The visitor typed a new URL on his browser.

All the actions above would cause the visitor to leave your site. Provided he did any of these actions right after arriving at your site (and before clicking on to a second page), it would be counted as a bounce. In fact the formula for finding the bounce rate on your website is:
Bounce rate = Visits that left after one page / Total number of visits

For example, if during a certain month your site received 120,000 visits, out of which 80,000 bounced after visiting just one page, your bounce rate for that month would be 80,000 divided by 120,000, which equals to 0.66 (or 66%). Notice that you can calculate the bounce rate of your whole website or of single pages inside it.
Obviously the lower the bounce rate on your website, the better, because it means that visitors are getting engaged by your content and design, and that they are clicking to visit a second (third and so on) page on your site.
How do you know the exact bounce rate on your site? A web analytics program like Google Analytics will automatically track the numbers for you.

JS For Quote everyday

2013-05-08T10:58:00.000+05:30

I have used a simple JavaScript to display a new Quote everyday. I was looking for something simple, and unfortunately a number of those I found online do not work.

In the end, I looked up books and came up with a simple JavaScript which stores quotes and authors in a format called “arrays”. I keyed in 10 quotes and the script will display a new quote every day of the month.

If you would like to add one, go to Template ->Page Elements and click “Add a Page Element” to the place you want your Quote of the Day to appear. Add a "HTML/JavaScript".

The JavaScript I have used for that is as follows:-

Update: <noscript> tag added. Readers like us who have disabled JavaScript in our browsers will see a statement instead of a blank space.



<table border="1" cellpadding="20" bordercolor="#ADD8E6">
<tr>
<td bgcolor="#E0FFFF">
<p></p>

<script language="javascript" type="text/javascript">

var d=new Date();

var quotes=new Array(31);

var authors=new Array(31);

quotes[0]="We cannot always build the future for our youth, but we can build our youth for the future.";

quotes[1]="Advice is like castor oil, easy enough to give but dreadful uneasy to take.F";

quotes[2]="If a man watches three football games in a row, he should be declared legally dead.";

quotes[3]="Politics is war carried out without bloodshed, while war is politics carried out with bloodshed.";

quotes[4]="Friendship is far more tragic than love. It lasts longer.";

quotes[5]="";

quotes[6]="";

quotes[7]="";

...

authors[0]="Franklin D. Roosevelt ";

authors[1]="Josh Billings";

authors[2]="Erma Bombeck";

authors[3]="Mao Zadong";

authors[4]="Oscar Wilde";

authors[5]=" ";

authors[6]=" ";

authors[7]=" ";
...

document.write(quotes[d.getDate()-1] + '<p style="text-align: right"><i>' + authors[d.getDate()-1] + '</i></p>');

</script>
<noscript>You need to enable JavaScript to read this.</noscript>
</td>
</tr>
</table>

What the script does.

1. I have defined a table for the Quote be displayed in. You can of course change the “bordercolor” and “bgcolor” (background color) to whatever suits you. For a complete list of color values, you may refer to the Color Chart.

2. If you do not want a table but just a line of the Quote, simply remove these elements from the above script:-

<table border="1" bordercolor="#ADD8E6" cellpadding="20" bgcolor="#E0FFFF">
<tr>
<td>

</td>
</tr>
</table>

3. The first element of the arrays are [0]. I have for the purpose of this example entered the first 3 Quotes together with the corresponding authors' names. You can enter your favorite Quotes to fill up the remaining arrays. I have used Quotes from this Famous Motivational and Inspirational Quotes site.

4. Towards the bottom you will see this script:-

document.write(quotes[d.getDate()-1] + '<p style="text-align: right"><i>' + authors[d.getDate()-1] + '</i></p>');

What it does is to call for the numerical date. For example, the date of this posting is 10th February. The script “quotes[d.getDate()-1]” will call for the number “10” and minus 1 from this number. The result is that the Quote displayed will be the one keyed in under “quotes[9]”. The reason for having to deduct 1 is because, as mentioned above, arrays must begin with [0]. Hence, if the date were the 1st February, deducting 1 will give you a value “0”, and the displayed quote will be the one that appears under “quotes[0]”.

Once you have saved the JavaScript, refresh your Blog page, and you should now have a quote automatically displayed on your Web Page.

Change Font type, size and color

Should you want to change the font face, size and color of the quotes, you can insert the <span style> tags. For those who are unfamiliar with these tags, what you can do is to create a new post under “Compose” mode. Enter a word, e.g., TEXT. Block the word and change the font size through the toolbar. All you want is the code, and you can therefore delete this draft post. Next, go to “Edit HTML” mode and you can see the span tags like this:-

<span style="color: rgb(255, 0, 0);">TEXT</span>

Insert these tags (highlighted in red) into the above JavaScript for quote at these places:-

<span style="color: rgb(255, 0, 0);">
<script language="javascript" type="text/javascript">
.
.
.

</script>
</span>

If you want to change the font type or color, you can do the same. Type any word in the “Compose” mode, highlight it and change the type or color through the toolbar. Go to “Edit HTML”, copy the <span style> code and insert that into the place shown above.

Add Favicon to Blogger site

2013-04-22T12:44:00.001+05:30

Have you wondered how these little icons appear next to the web addresses, like the one you see above? When you visit the sites or bookmark them, these icons will make these URLs stand out. These are “Favicons” or “Favorite Icons”.

First you need to have an icon which you would like to use. If you search your hard disk, you might find some icons which are generic. I would suggest that you create one to represent your own unique identity. There are quite a number of free icon editor software which you can download from the internet.

Once you have created an icon, save it into your hard disk.The only method to use will be to upload the icon into some web folder, and create a link. You can read about using free hosts like Google Page Creator and Google Groups.We have also a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and allows uploading of .ico files.

Now

Go to your Blogger dashboard and under the Template tab, go to “Edit HTML”. Near the top you will see a line like this:-

<title><data:blog.pageTitle/></title>

Update:

Remember to type in the “URL of your icon file”.

Save the template. When you refresh your blog site, you should see your nice little Favicon next to the blog address.

Other image types

The .ico image format has been used by many but you can also create an image under the .png or .gif format. Ensure that the size of the image is either 16x16 pixels or 32x32 pixels.

If you have a PNG format image, the link to insert is:-

If it is a GIF format image, the link is:-

External Domain

For those who have hosted sites in external domains, insert the link in the root directory as well. Otherwise, you can upload the file into the root directory and name it favicon.ico.

As an example, if your domain name is www.domain.com, the URL of the favicon will be www.domain.com/favicon.ico

This method is not preferred but a number of browser versions are able to process the icon. Since we do not have external domains to try out this alternative, you may want to see if it works for you.

Make Blog Unsearchable and Private

2013-04-21T14:39:00.001+05:30

Many people write blogs to share their thoughts with everybody and anybody. However, you may also use your Blog as an online diary, penning very personal and private thoughts.Also, you may not want it to be indexed by search engines, so that people searching for it on the net will not find it in the search results.

This post lets you know how to create private Blogs. If your intentions are the exact opposite, and you want to publicize your Blog to the whole world, follow our other guides to submit your Blog to Blog Directories, Google, Yahoo and Feed Directories.

Note that these steps are to be taken BEFORE you create the blog. If you already have an existing Blog, it has in all likelihood been indexed. These tips will at best prevent future contents from being seen.

Title and Blog URL

When you create a new Blog, select a Blog URL and Title carefully; choose words that have no bearing or relation to you or what you do. After the Blog is created, DO NOT post. Post only after you have completed all steps.

Permission

We start with the most important and necessary step. Blogger has made it easy for you to create private Blogs. When you are logged in, go to Settings -> Permissions. You can restrict your Blog Readers to only people you choose or only the blog authors.

People who enter the Blog URL into their browsers can still see the Blog Title but will be prompted to enter their Google account particulars and password. If they are not given the rights to view the Blog, a message will be shown: “It doesn't look like you have been invited to read this blog. If you think this is a mistake, you might want to contact the blog author and request an invitation.”

Listing on Blogger.com

These are the further steps to take, just to be sure. Under Settings -> Basic, you can see a “Add your Blog to our listings?” option. Choose “No”. Click “Save Settings” at the bottom. This will do three things –

i) Your Blog will not appear when people search Blogger.com.

ii) This Blog will not be shown in the Blog List on your Profile page.

iii) The Blogger homepage showcases a list of recently updated blogs but this Blog will not be shown.

Ping Setting

Go to Settings -> Publishing and under the “Send Ping” option, choose “No”. Save the Setting. Whenever a Blog is updated, Google will notify some of the tracking services of the updates. If your Blog is private, there is no reason why these services should to know of your Blog updates.

Site Feed

Your Blog contents can be read through your Site's Atom and RSS Feeds. People can catch up on news and articles by subscribing to these Feeds and viewing the material using their Feed readers. If you do not want your contents to be read or syndicated, go to Settings -> Site Feed and to the question “Allow Blog Feed?” select “None” and click “Save Settings”.

Meta Tag

Now that we have altered the settings for the Blog, we can add a further meta tag into our template to tell search engines not to index the site. Click Template ->Edit HTML and you can see the source code. Somewhere at the top, just below <head>, insert this line (shown in red):-

Leave this tag there. Search engine robots which visit your site will not index the Blog pages and contents.

Profile

We thought we should cover this for completeness. In the top right corner of your Dashboard, you can go to the “Edit Profile” page. Under “Show my blogs”, if you see a blog that you do not want people to know about, remove it from the listing. People who view your Profile will not know about the Blog. You can also choose not to share information about your Profile by not ticking the box next to “Share my profile”.

External Links

The steps outlined above are within your control but this one is not. It is also the reason why we said we can only minimize but not eliminate the possibility that people know of your Blog. Anybody can link to your Blog URL since it is a valid URL. If your friends happen to know about your Blog and write a post mentioning your Blog or linking to your Blog, there will be an external link to your Blog. Whatever they write about it will be public knowledge. Hence, to have an online diary that only you know about, remember that a secret shared by two persons is no longer a secret.

Add Search Box To Blogger

2013-03-30T21:32:00.000+05:30

Hello guys you have see that Navigation bar at the top of your Blogger blogs has an embedded search box. However, you may want to include a similar box in body of your blog (like what I have done), or the sidebar.

Under Layout->Page Elements tab, click “Add a Page Element” at the place where you want your search box to appear. Select “HTML/JavaScript”.

There are several HTML codes posted on the net. I tried a few, and found the one that works as follows:-

Remember to change YOUR BLOG URL to the URL or web address of your Blog. Also, change the NAME OF YOUR BLOG to that which you want to call your site. For instance, if your Blog Name is long, you may want to write something like “Search Here” or “Search this site”.

You can also change the “Search” button to say, “Hit” or “Go”, by changing the Value.

Save the code and refresh your page. If you want a longer or shorter search box, you can play around with the size. The above example of a width size="20" and value="Hit" will give you this:-

Search Here

Whereas a width size="30" and value="Go" will give you this:-

Search Here

'

The size of the search box is a matter of appearance. You may have noticed that the maxlength="255". This indicates that a user may enter up to 255 characters in the search box, which I think is sufficient and need not be altered.

Image instead of Search button

Search BlogTrixz

Just for the fun of it, if you want readers to click an image instead of a button, you will first need to do up a small picture. You can also resize a picture you already have with photo editing tools like Google's Picasa. After creating a picture, upload it onto a free server like GooglePages or Google Groups, or other free hosts that offer direct links to the image files. Take note of this IMAGE URL.

The HTML code to insert is this:-

Remember to insert into the code the IMAGE URL, where your picture is uploaded. You can align the image to the top, bottom or set a horizontal space between the bar and the image by using a hspace tag. For more examples on alignment of images, you may refer to the article Hyperlinks and Image Links (II).

Hide / Remove NavBar in blogger

2013-03-26T23:46:00.002+05:30

The Blogger or Blogspot Navbar is a default feature that appears at the top of every Blogger powered blog. It is a useful navigation tool which allows readers to search the blog for targeted content, mark the blog as objectionable, and randomly view other member blogs.

The Navbar can be disabled for users who publish contents via FTP, but it will appear on all freely hosted BlogSpot blogs. While the feature is undeniably useful, some people find that its position at the top of the page looks obtrusive even with a choice of 4 colors. Some therefore pick a template with a black background to blend well with a black navigation bar. There are also parents and educators who find the 'view random blogs' feature inappropriate, as their children may inadvertently view objectionable blogs.

Nevertheless, this article is not a discussion on the merits or demerits of a Navbar. That is for you to decide. Here, I am assuming that you have made a conscious decision to hide or remove the Navbar. Having so decided, this is the guide on how you can do it.

Log into your dashboard, go to Template -> Edit HTML. Scroll to anywhere on the template and insert the following CSS style definition in red within the head section.

#navbar-iframe {
display: none;
}
</head>

Preview the template. You will notice that the Navbar is no longer displayed, and (depending on your template) your contents might shift upwards to take up the space reserved for the Navbar.

Now, try this style definition:-

#navbar-iframe {
height: 0px;
}

This will reduce the Navbar height to zero, effectively removing the Navbar. You can also explore this other style:-

#navbar-iframe {
visibility: hidden;
}

You will notice that your contents do not shift upwards. The space is still reserved for the Navbar, but the Navbar is now hidden and not visible.

Either one of the above codes would do. You can also combine them if you'd like. For example, giving a numerical value for the height of the Navbar and hiding the visibility will give you a margin at the top and yet without the Navbar. Choose one that best fits your blog design. If you change your mind in future, and wish to have back your Navbar, simply remove the style definition.

Search Box

If you decide to remove the Navbar, you can still place a Blogger Search Box within your site. This is one of the great features in the Blogger Navbar.

Create your first blog with blogger

2013-03-19T21:34:00.004+05:30

Navigate to Blogger.com.
If you have a Google account, then log in. If you don't have a Google account, click on the red "Sign Up" button in the top right corner and register for a Google account.

Click the "New Blog" button.
Fill in your blog name and your desired blog address

You can choose a template from the options on the screen, or you can choose a template later if you want to see more options.
Click the orange "Create Blog!" button.

Select the "Start blogging" link.
Enter your title and your text. When you're done, click "Publish."

Now you check your blog and you will find the post is updated on your blog.Enjoy...:)

Difference HTML-XHTML

2013-03-17T21:26:00.003+05:30

Hello guys you may have seen that when inserting codes into the Blogger template, page element, or blog post, error messages that the code could not be parsed, was not well-formed, was broken, or that the elements were not closed properly. These errors can be corrected if you understand the rules that must be adhered to in XHTML documents. Blogger templates use the XHTML 1.0 Strict Document Type. In this article, we shall explain some of the XHTML syntax or rules, so that you may troubleshoot and resolve the problems if these error messages should occur.

XML, HTML and XHTML

We shall keep this short. Just so as you understand what we said about document type, view the Page Source or Source of your Blogger blog. You should see this document type declaration at the very top:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The terms – XML, HTML and XHTML - refer to the markup language used to write the web pages. Many of us would have heard of HTML (Hypertext Markup Language), invented by Tim Berners-Lee, and used since the early days of internet. XML (Extensible Markup Language) is a meta-language, used to create other markup languages. The traditional HTML was later recast to use the rules of XML and that resulted in a new XML application, called XHTML (Extensible Hypertext Markup Language). Because XHTML rules are strict and unforgiving, not conforming to them when attempting to modify the template would result in error messages. So, what are these rules that Bloggers like us should take note of?

Basic Rules of XHTML

1. Codes to be in lowercase

Since XML is case sensitive, all the element keywords and attribute names used in XHTML should be in the lowercase. For example, the template code is not this:-

<TITLE>BlogTrixz</TITLE>

but this:-

<title>BlogTrixz</title>

If you have noticed, the elements and attribute names between the lesser than (<) and greater than (>) signs have to be in the lowercase. However, the value, which in this case is “BlogTrixz”, can be in the uppercase, lowercase, or mixed case.

2. Attribute values to be in quotation marks

All the attribute values have to be enclosed either in single or double quotation marks. The following examples are not accepted by XHTML:-

<div id=header-wrapper>

<a href="http://blogtrixz.blogspot.com">Text Link</a>

<table width=200 border=0 cellpadding=2>

Instead, they should be written as such:-

<div id='header-wrapper'>

<a href="http://blogtrixz.blogspot.com">Text Link</a>

<table width="200" border="0" cellpadding="2">

3. Container elements must have closing tags

This is not correct:-

<p>A paragraph.

In XHTML, there must be a closing tag with a forward slash (/) at the end:-

<p>A paragraph.</p>

Examples of the many non-empty elements that have opening and corresponding closing tags are:-

<ul> ... </ul>
<li> ... </li>
<table> ... </table>
<h2> ... </h2>
<div> ... </div>
<span> ... </span>
<dt> ... </dt>
<dd> ... </dd>
<a href> ... </a>

4. Standalone elements to be closed

Some of the elements are empty or standalone. They do not have associated closing tags. Common examples are:-

<br>
<img>
<input>
<frame>
<hr>
<meta>
<link>

Nonetheless, in XHTML, these elements must be terminated or closed. There are two ways to do that. One way to terminate the element is to put a forward slash (/) at the end like this:-

<br/>
<img/>
<input/>
<frame/>
<hr/>
<meta/>
<link/>

The second way is to add a corresponding closing tag like this:-

<br> ... </br>
<img> ... </img>
<input> ... </input>
<frame> ... </frame>
<hr> ... </hr>
<meta> ... </meta>
<link> ... </link>

5. Elements to be properly nested

This means that elements must be closed in the reverse order. For example, this code is not accepted in XHTML:-

<form><table> ... </form></table>

It is improperly nested because the form was created first followed by the table. To close them in the proper order, the table must be closed before the form, like this:-

<form><table> ... </table></form>

6. Document to have only one root element

In the XHTML document, you will see that except for the document type declaration, all the codes are nested between <html> and </html>. This is the root element and all other elements or sub elements are in between. The document structure will look like this:-

<html>
<head> ... </head>
<body> ... </body>
</html>

7. Attribute minimization is not allowed

In XHTML, all attributes should be in the form name="value". Even if the value is the same as the name, it cannot be minimized to one word. Hence, in our Add Text Box and Textarea article, the textarea code is not this:-

<textarea readonly>Hyperlink Code</textarea>

but this:-

<textarea readonly="readonly">Hyperlink Code</textarea>

XHTML Character Entities

Quite a number of readers had asked why they were unable to display HTML codes in their blog posts or why their codes were not well-parsed when inserted into the template. If you have noticed by now, the codes are wrapped in the lesser than (<) and greater than (>) signs. The moment these are posted, they will be interpreted as codes and will trigger an action by the browser. Should you want to display these as part of the text, use their character entities instead.

" "
& &
< <
> >

The next time you see an error message to the effect that the code is not well formed, not well parsed, not properly closed, etc., take a look at this guide, troubleshoot the problem and try out the possible solutions.

Comparison Chart Blogger vs WordPress

2013-03-12T22:32:00.000+05:30

Feature	Blogger.com	WordPress.com
Themes and Customization	Google's Dynamic Views will replace customized templates unless users set their Blog feed to 'None' or 'Short	NO template editing. Style sheet editing only as a paid upgrade.Most of the themes have user-selectable options.
Languages	50 Languages	120+ Languages
JS	you can include third party scripts.	No scripts allowed.
Domain Names	Transfer your domain name for free or buy one.	A paid upgrade is required to transfer an existing domain name.
Import	Only from another BlogSpot blog.However,a third party tool can convert it.	Import from blogger Yahoo!360 ,TypePad,Tumblr,Vrox,Posterous,LiveJournal,Blogli other WP blogs.
Visitor Stats	Built-in visitor stats.	Built-in visitor stats.
Image Storage	1 GB.There is no dashboard interface to browse through uploaded images,which get stored in Picasa Web Albums..	3 GB.Paid upgrades are available to add more space.You can also upload .ppt, .doc, .odt and .pdf files and more.
Galleries	Slideshow widget.	Simply add tag to any post or page.
Static Pages	Create up to 10 pages,but unlike WordPress no static front page.	Create posts or 'pages;.Static pages are listed in separate menus.
Categories	Labels	Categories and tags
Share buttons	In the Navbar ,plus a "Share" buttons option.	Configure any of your favorite "Share" buttons.
Post excerpts	Yes. Inlcude jump breaks in your posts	yes , post excerpts with a "more" tag.
Post by email	Yes.You can receive new posts by email too.	Submit your posts by email.Images can be attached.
Contact forms	Not avialbe. You could add a third party contact form.	Simply add the tag to any post or page.
Private blogs	you can restrict access to 100 invited Google accounts users.	An unlimited number of invited WordPress account holders.
Password Protection	Not available.	Individual posts can be password protected.
Favicons	Yes	Yes its called "blavatars".
Comments	Visula confirmation,spam filtering and moderation options but no editing.	Moderation,comment editing and spam protection.
Feedback	"Reactions"-a mini poll option for reader ratings.	A "Like" button.Visitors can put a link to their Profile page in your post.
Team Blogs	Administrators and non-administrators only.	Administrator, Editors, Authors & Contributors.

Which One is Better WordPress or Blogger?

2013-03-11T23:58:00.001+05:30

Can you just pass up the opportunity of establishing yourself as an expert in the field and promotinh your products or knowledge to your customers?

Blogging has been around for almost 15 years now. Blogs have evolved advertising,business and social media tools.Websites have changed self expression has evolved from personal story telling to video blogs, and new blogging outlets have emerged. The most widely used platforms right now are Blogger and Wordpress.As the social media report for 2012 showed that Blogger was the second most used social network in US,while Wordpress came in as fourth.But let's see differences between them.

Running a site is enjoyable , but you have to determine certain things for yourself from a professional perspective.If you are a started,it is always suggested to opt Blogger.If you are serious about your blogging ,then you are suggested to choose WordPress self -hosting domain and there are many other WordPress hosting service available.You can enjoy the power of WordPress with these self hosted blogs.

Though Blogger gained more recognition early on;WordPress is also one among the best CMS available on the internet.Bloggers can create free blogs on WordPress.com or run their blogs on their blogs domains,by making use of the WordPress CMS.

Key Differences Between Blogger and WordPress

Some of the differences between Blogger and WordPress are listed below:

Dashboard

Blogger:It has an updated dashboard design .More features are available ,but to make use of all of them ,it is compulsory to enable Javascript.

WordPress:The Dashboard in WordPress increases the speed for the dial-up users so that they can easily post an entry without facing too much difficulty, or wasting time.

Languages

Blogger: Blogger by Google supports only 50 languages.
WordPress: WordPress supports nearly 120+ languages.

Domain Names

Blogger: You can transfer your domain for free or you can buy one through the BlogSpot interface. And, once again free blogs are created as sub-domains with URLs like xyz.blogspot.com.
WordPress: The user has to pay some amount in order to transfer an existing domain in case of the paid service, but of course you can create free blogs on wordpress.com in form of a sub-domain like abc.wordpress.com.

Mobile Access

Blogger: You can access the help pages of Blogger, but there's no mobile-specific version. But you can publish your post by sending SMS or MMS, for more information read this – http://www.blogger.com/mobile-start.g.
WordPress: You can be accessed through mobile on m.wordpress.com.

Customizing Themes

Blogger: There are many blogger templates (themes) that can be customized without any hassle. You can edit the HTML and CSS directly.
WordPress: There are extremely high numbers of free WordPress themes available over the internet. Using the WordPress.com version of WordPress you can not fully customize the template, you can only customize the options available to you or switch to a new template.

Image Storage

Blogger: When you upload photos to Blogger they are stored in Google’s photo system, Picasa. There you can browse your images and much more. In blogger there is 1 GB of storage space (images under 2048×2048 do not count towards that limit, so it’s actually MUCH more than 1 gig) for storing images. If you required more space, you’ve to pay for more space.
WordPress: It has 3GB of storage space. But, if you want more space then you’ll have to upgrade by paying some money.

Team Blogs

Blogger: Only 2 types-either Administrators or Non-Administrators.
WordPress: Various accounts for Editors, Authors and Contributors can be created.

Static Pages

Blogger: You can create up to twenty static pages, but like WordPress those static pages cannot be placed on the home page easily. If you want to show such static page as homepage, you’ve to edit the template HTML which is painfully complex for many users.
WordPress: You can create as many pages or posts that can be listed in the home page.

WordPress Vs Blogger SEO

If you take the suggestions of 100 bloggers on which platform to use – Blogger or WordPress, then the chances are high that 90 of them will blindly say WordPress. First of all, Google does not consider meta-tags and keywords. Another point is Blogger owned by Google makes things easier to support the blogger blogs. As there are many more changes to come in future, you will be safe if you are within Google's backyard.

For your information, there are tons of Blogger Blogs ranking in the top page in Google for various keywords, but you won’t see too many WordPress.com blogs ranking high (of course we aren't saying that there aren't any, but rather we're saying there aren't many!). On the other hand, there is literally millions of blogs set-up with the WordPress CMS.

Popular Blogging Applications

2013-02-22T19:20:00.000+05:30

Popular Blogging Applications

Many Online tools and applications allow you to create a blog, but not all these tools are equal.Some offer far more customization and functionality than others. Following are some of the most popular and feature-rich blogging applications:

WordPress.com: An easy-to-use ,free blogging application with limited functionality and additional feature available for a free.
WordPress.org: The most feature-rich and customization blogging application.It's free but does require an investment in a separate web host and more technical knowledge than other blogging applications require.
Blogger.com: An easy-to-use and fairly feature-rich blogging application that is completely free.
TypePad.com: A fairly feature-rich blogging application, but users must pay monthly fee to use it.
Tumblr.com: A simple blogging tool for publishing text, video , images , audio, and quotes without all of features of more comprehensive blogging applications.

Welcome to BlogTrixz

2013-02-21T11:02:00.001+05:30

Welcome to BlogTrixz

"Knowledge is good only if it is shared." WABSA35TJ46A

As a new blogger, I have learned to change the Web template,and found out the tips,tricks,hack,and tweaks of Blogger template,customizing CSS, widgets, layout, blog design, Javascripts, Google Ad Sense and other related thing through many trials and errors. Adobe

BlogTrixz

Happy New Year

We wish you a new year filled with wonder, peace, and meaning. Happy 2014!

Social Sharing Widget for Blogger Post

Demo

Notification Bar Widget to blogger

How to add blog bottom notification bat widget to blogger

Go to blogger dashboard Go to template and then click on Edit HTML.

Hover Style Social Media Widget for Blogger

STEPS:

Add Small Image Besides Your Post Title

Want to add small image to your blog post title???

Page Optimization Blogging tips To Get Traffic From Google Search results

Use of H1 Tag

Post title before the Blog Homepage Title.

Use Caption and Properties On images.

Make bolder your anchor text and link them in blog post.

Bounce Rate

JS For Quote everyday

Add Favicon to Blogger site

Make Blog Unsearchable and Private

Add Search Box To Blogger

Hide / Remove NavBar in blogger

Create your first blog with blogger

Difference HTML-XHTML

Comparison Chart Blogger vs WordPress

Which One is Better WordPress or Blogger?

Key Differences Between Blogger and WordPress

Dashboard

Languages

Domain Names

Mobile Access

Customizing Themes

Image Storage

Categories

Team Blogs

Static Pages

WordPress Vs Blogger SEO

Popular Blogging Applications

Welcome to BlogTrixz

Go to blogger dashboard

Go to template and then click on Edit HTML.