How To Use Google Analytic Tool ? Tips For New Bloggers

Google Analytic is one of the most useful tool by Google. It's free and always will be. It includes variety of small tools which helps you to manage your website or blog. It is basically tool which tells you about your daily Visitors, their demographic, their loyalty and many more things. You can access all these things free of cost and using this data you can do best for your blog and site. First of all i will tell you how to create account for your Blog/Website in Google Analytic. How to verify yourself as owner of Blog/website and how to use different tools in Analytic. Let's see step by step method.

Create Account For your Blog

(1):-Go to Google Analytics. Sign in in with your Gmail account or Create new Gmail account.

(2):-Now Signup for New Google Analytics Account.

(3):-Just fill up the form and You will be on the Admin page of Analytics account.

(4):-Now Select All Accounts Tab and select your named profile in which you have added your Blog/Website.

 

(5):- Now You are on the main page where you can see all information about your Blog/Website.

(6):-To view all data you need to add tracking code in your Blog/Website HTML.

(7):-For this Click on Admin and after it opens select tracking code. Just Explained below!

(8):-Copy this code and paste it in Your HTML session before closing head tags i-e .

For Bloggers

(9):-Now save your template and go back to Analytic account. Click on verify your account and you are all done.

How To Use Google Analytics ?

(1):-Now again go back to your main page. Select your account and You will be on your main page.

(2):-You have these options on your right side.

(3):-Select Audience to view in details of your daily visitors, their loyalty and number of page views.

(4):-Traffic sources tells you about from where visitor come to your site. Their location, operating system they use and pages from where your traffic comes.

Its very beautiful tool. You can link this tool with your Google Adsense account and Google Webmasters account. In the next tutorial i will guide you about using Google Webmasters tool and Applying for your Google adsense account. Stay tuned. Get subscribes to receive daily updates in your in box. Have a nice Day.

Read More

Back to Top Button For Bloggers

Sometimes your sidebar/Post goes to long and it is very annoying for visitor to scroll up manually. For the ease of your visitors you can add this small button on extreme bottom right of your blog. Its very simple to add this. You can choose custom images for this button. Let's see how to add this button.

Add Back to Top Button

Procedure:-

(1):-Go to blogger and signin to your account. Select your desire blog.

(2):-Go to Template and click on Edit HTML and proceed to your HTML code view.

(3):-Now search for this by pressing Ctrl+F .

]]></b:skin>

(4):-Now copy the below code and paste it just above this code.

#backtotop { padding:5px; position:fixed; bottom:10px;right:10px; cursor:pointer; }

(5):-Now search for this code.

</body>

(6):-Copy the below code and paste it before this code.

<a href="#" id="backtotop"><img src="URL of Image" alt="back to top" /></a>

(7):-Now replace URL of Image with your desired image.

(8):-Now find this below code.

<a href="#" id="backtotop"><img src="Image-Url" alt="back to top" /></a>

(9):-Copy and paste the below just before the above code.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'></script> <script language="javascript"> $(window).ready(function(){ $('#backtotop').click(function(e){ e.preventDefault(); $('html, body').animate({scrollTop:0}, 'slow'); }); }); </script>

Some back to top Images Links. Copy any of the url and replace it with URL of Image.

 

http://www.download.ba/img/arrow_up_double.gif

http://biblio-archive.unog.ch/images/Archivplan/arrow_up.gif

http://www2-pcmdi.llnl.gov/cdat/tutorials/getting-started/images/arrow-up

http://maliciousnetworks.org/images/arrow_up.png

http://cdn1.iconfinder.com/data/icons/vaga/arrow_up.png

http://cdn2.iconfinder.com/data/icons/splashyIcons/arrow_large_up.png

http://www.jefflindsay.com/arrowUp2.gif

http://www.internic.ca/Icons/arrow-up_16.gif

http://www.lungcancerconnect.com/images/platform/icons/arrow-up~81b3d3ada69457c1dcb56084ee99553b.png

http://www.smilelocal.com/resources/images/arrow_up.gif

http://www.gadoury.com/img/arrow_up.png

Now click on save template and view your blog to see effect. Its very simple. Hope you have liked my this tutorial. Get subscribed to get daily updates right in your inbox.That's all for today.Have a Nice Day.                           

Read More

Disable Right Click on Your Blog

Do you know how to disable right click on your blog and why? If you want others not to copy your blog contents you can apply this method. When the user right click on the blog to copy something a message box will be open and it will restrict the visitor not to copy any of your blog  contents. This very useful method. After going through this tutorial you will be able to apply this option on to your blog.Let's see how to do this.

Disable Right Click Option

Procedure

(1):-Go to blogger and login to your account.Select your blog.

(2):-Select Layout and click on Add a Gadget. 

(3):-Now select HTMl/Javascript Gadget.

(4):-Copy the below code and paste it in the empty space.

<script language=JavaScript> <!-- //edit by howdoblog var message="Right Click is Disabled"; /////////////////////////////////// function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") // --> </script>

(5):-Save this and click on view your blog. Now right click on your blog and see the effect. 

This is small tutorial to disable right click on your blog. If you have any problem do mention in comments. Get subscribed by typing your e-mail address in below box and recieve updates right in your blog. That's all. Have a Nice Day.                        

Read More

Sliding Recent Post Widget for Bloggers

Everyone like animated things and they are most attractive for others. Adding blogger default recent post widget is very simple but it doesn't attract your audience to view your other posts. Today i am sharing animated(Sliding) recent post widget with you. Method to add this in your blog is very simple. Just follow the few steps below.

Add Animated Recent Posts Widget

Procedure:

(1):-Go to blogger and login to your account.Select your blog.

(2):-Select Layout and then click add a Gadget. Select HTML/Javascript.

(3):-Copy below code and paste it in that empty field.

<style type="text/css"> #rp_plus_img{height:377px;} #rp_plus_img li {height:60px;padding:5px;list-style:none; background-color:#ffffff; border:solid 1px #000000;} #rp_plus_img a{color:#00000;} #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px; text-align:justify; -moz-border-radius: 5px;} #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/recentpost.js"></script> <script type="text/javascript"> var speed = 1500; var pause = 3500; $(document).ready(function(){ rpnewsticker(); interval = setInterval(rpnewsticker, pause); }); </script> <ul id="rp_plus_img"> <script style="text/javascript"> var numposts = 5; var numchars = 0; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>

(4):-Now click on save. Select save arrangement and view your blog.

This is very short and simple tool. You dont need to go anywhere editing your template HTML. I hope you have liked my this tutorial. Don't miss any tutorial. Get subscribed by entering your e-mail address below and confrming it from your inbox. Have a nice day. Thanks                             

Read More

Custom Color Code Generator

This color code generator is on of best tool for templates editors. You can get any type of color coding through this tool. You can use this in editing your blogger posts color and also in changing background and other colors.

Let's see how this works.

Code Generator

Procedure

(1):-Select moving bar to move colors to colors.

(2):-Use big screen colors for their contrast. 

(3):-Hex decimal code will be generated in box. Copy that code and paste it anywhere you want.



This was simple tool but very useful. You can't calculate or remember any code color but by doing this you will at the time of your need.Hope this tool will help you in future works. Do you have any problem using this tool do mention in comments. If you want to put this tool in your website or blog do ask me. I will send you the code. Have a Nice Day.                

Read More

Change Sidebar Title Color / Background and Font in Blogger

Do you know how to change sidebars title fonts,colors,background and their position in Blogger? Its look very bad when they are blogger default. In blogger default options you are not allowed to change font size,their placement,their color and their background. You can only change title(Text) of that sidebar widget. It is not difficult for professional but too difficult for beginners. I have googled this topic but found nothing. So i hope this will help you a lot. Let's see how to do this.

Method

(1):-Go to your blogger account and select your Blog.

(2):-Now Select Template and then Edit HTML. Click proceed to enter HTML code box.

(3):-Now Press Ctrl+F and search for h2 (heading 2).

(4):-Now look in below or front line of h2. Search for font-size or font-weight or Title font.

(5):-When you will find any of the above make of font so large i-e  18px to 180px. 

(6):-Now Click on preview, don't click on save template.

(7):-In preview if you see large fonts of sidebar title than it will be ok and you need to follow the next step.

(8):-If this don't happen than look for other lines and repeat the above process until you see the change.

(9):-If Your title fonts are looking good than follow these next steps.

(10):- Copy and paste the below code just after ending this ; in the same line where you have found font size. example font-size:16px;  paste code after this.

padding-top:8px;padding-bottom:8px;padding-left:10px;padding-right:0px;font-size: 18px;background:#666666;border-radius:7px;color: #ffffff;text-shadow: 1px 0 1px #b1b1b1;

(11):-Now Click on again on preview and see your change. You can customize by yoursellf. 

If you face any problem do mention in comments. Hope this idea will work for you. I will make code for all this in my newer post. If you don't succeed just wait for that.Have a nice day.        

Read More

CSS/HTML/HEX Color Codes for Bloggers

Hex color codes are very important when you are designing web pages or creating dropdown menus or anything. There use is every where. I am sharing hex color codes with you.These are normally six digits codes. All the colors have hex value mentioned. If you want any help regarding these colors do mention in comments. I will surely help you out.  See below codes

CSS/HTML/HEX Color Codes

FFF  FFF CCC  CCC 999  999 666  666 333  333 000  000 FFC  C00 FF9  900 FF6  600 99C  C00 CC9  900 FFC  C33 FFC  C66 FF9  966 FF6  633 CCF  F00 CCF  F33 333  300 666  600 999  900 CCC  C00 FFF  F00 CC9  933 CC6  633 330  000 660  000 990  000 CC0  000 FF0  000 99F  F00 CCF  F66 99C  C33 666  633 999  933 CCC  C33 FFF  F33 996  600 993  300 663  333 993  333 CC3  333 FF3  333 CC3  366 66F  F00 99F  F66 66C  C33 669  900 999  966 CCC  C66 FFF  F66 996  633 663  300 996  666 CC6  666 FF6  666 990  033 CC3  399 33F  F00 66F  F33 339  900 66C  C00 99F  F33 CCC  C99 FFF  F99 CC9  966 CC6  600 CC9  999 FF9  999 FF3  399 CC0  066 990  066 00C  C00 33C  C00 336  600 669  933 99C  C66 CCF  F99 FFF  FCC FFC  C99 FF9  933 FFC  CCC FF9  9CC CC6  699 993  366 660  033 33C  C33 66C  C66 00F  F00 33F  F33 66F  F66 99F  F99 CCF  FCC CC9  9CC 996  699 993  399 990  099 006  600 336  633 009  900 339  933 669  966 99C  C99 FFC  CFF FF9  9FF FF6  6FF FF3  3FF FF0  0FF 003  300 00C  C33 006  633 339  966 66C  C99 99F  FCC CCF  FFF 339  9FF 99C  CFF CCC  CFF CC9  9FF 996  6CC 663  399 330  066 00F  F33 33F  F66 009  933 00C  C66 33F  F99 99F  FFF 99C  CCC 006  6CC 669  9CC 999  9FF 999  9CC 993  3FF 660  0CC 660  099 00F  F66 66F  F99 33C  C66 009  966 66F  FFF 66C  CCC 669  999 003  366 336  699 666  6FF 666  6CC 666  699 330  099 993  3CC 00F  F99 66F  FCC 33C  C99 33F  FFF 33C  CCC 339  999 336  666 006  699 003  399 333  3FF 333  3CC 333  399 333  366 663  3CC 00F  FCC 33F  FCC 00F  FFF 00C  CCC 009  999 006  666 003  333 339  9CC 336  6CC 000  0FF 000  0CC 000  099 000  066 000  033 00C  C99 009  9CC 33C  CFF 66C  CFF 669  9FF 336  6FF 00C  CFF 009  9FF

Read More