Showing posts with label how. Show all posts
Showing posts with label how. Show all posts

How to add google buzz button to your blog

{ Posted on 8:43 PM by Mack }
Tags : ,
Buzz It





First it was Facebook, then Twitter and now it is Google-Buzz.
Being a blogger, you don't have to worry on who's copying whom! All these websites let their users interact more easily and for webmasters, it means free traffic with minimum efforts. So, keep all your options open as you never know which of them may bring a big wave of traffic to your blog!

adding google buzz button is very easy... let me show how!


1- login to your blogand click of the layout.

2- click on the Edit HTML and don't forget to check the expand widget box

3- click (Ctrl+F) to find the following code:


<div class='post-header-line-1'/>


4- when you have found the code above, now try and past this code below the code is step 3


<a href='javascript:var%20b=document.body;var%20GR________bookmarklet_domain=
"http://www.google.com";if(b&&!document.xmlVersion){void(z=document.createElement("script"));void
(z.src="http://www.google.com/reader/ui/link-bookmarklet.js");void(b.appendChild(z));}else{}' title='Buzz It!'><div style='border:0px !important;text-align:right;margin-top:-42px;'><img alt='Buzz It' src='http://i47.tinypic.com/2j0b02c.jpg'/></div></a>



Now click save template and your google buzz button will look like this:



Happy Blogging

Read more...

How to add Flying "Scroll to Top" button to your blog

{ Posted on 6:44 AM by Mack }
Tags : ,
Buzz It
If your Blog has lot of long posts, adding a cool flying 'Scroll to Top' link makes it easier for your visitors to quickly navigate your pages.

So let's get started...


1- Login to your blog and click on the layout button

2- Click on the edit HTML and try to find the following code...

</body>


3- Now add the this code before the code in step 2.


<a href="#" id="backtotop">^ Scroll to Top</a>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>

/*-----------------------

*Scroll to top

-----------------------*/

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$
(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});

$(function() {

$("#toTop").scrollToTop();

});

</script>


4- Click on (Ctrl+F) and try to find the the code below:


]]></b:skin>


5- Add the following code before the code in step 4.


#backtotop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }

Now save your changes and your done. enjoy

Read more...

How To Add Favicon To Your blog

{ Posted on 5:55 PM by Mack }
Tags : ,
Buzz It
Today guys i'm going to show you how to add Favicon to your blogger it's very easy and will not take much time.

so what is favicon?
Favicon is a small icon displayed at the beginning of the address bar of the browser.

The main advantage of creating and using favicon is ,it makes it easy to find your blog or site when someone favourited or bookmarked your site/blog among several other sites.

Let me show an example of favicon:























Lets start:

1- you need to design a picture size (16x16) or you can use picture from the web but don't forget about the size.

2-login to your blogger and then click on layout button>>>> then click edit html

3- try to find the following code in your blog template by clicking Ctrl+F in your keyboard.


<b:include data='blog' name='all-head-content'/>


4- add the code below after the code in step 3


<link href='YOUR FAVICON IMAGE URL' rel='icon' type='image/vnd.microsoft.icon'/>


and don't forget to replace the (YOUR FAVICON IMAGE URL) with your picture url that you have chosen.

5- click save template and your done.

Enjoy.

OH! i almost forget to give you some websites that may help your design your favicon:

http://www.favicon.cc/
http://www.animatedfavicon.com/
http://genfavicon.com/
http://www.favicontool.com/

Read more...

How To Remove The Navbar From Blogger

{ Posted on 7:42 AM by Mack }
Tags :
Buzz It
You see a navigation bar on the top of every blog hosted at Blogger. With this navigation bar, you can search blogs, visit the next blog, sign in or create a new account. but it looks annoying isn't? so removing the navbar from your blog is a good idea why? because without the navbar your blog will look professional.

And it's really easy to remove/hide the navbar from your blog just by following these easy steps.

Here we go:

Step 1: login to your blog

Step 2: click on the layout tab

Step 3:click on the edit HTML tab and you will see a code in your blogger template that looks like the code below:


/* Variable definitions

====================

<Variable name="mainBgColor" description="Main Background Color"

type="color" default="#fff" value="#ffffff">

<Variable name="mainTextColor" description="Text Color" type="color"

default="#333" value="#333333">

...


Step 4: add the following code above the code in step 3:




#navbar-iframe {

display: none !important;

}



Step 5 : click on save template and your done!!


Read more...

How to add Music,MP3,Audio Player to your Blogger Blog

{ Posted on 9:52 PM by Mack }
Tags :
Buzz It

Adding a nice music track to your blog may enhance the pleasure of reading your blog or annoy your visitors depending on the kind of blog you have. For example, if you have a music blog, adding some nice song tracks to your blog sidebar can make your visitors to stay longer which benefits you.
So, let's learn how to add mp3 to your Blogger Blog:

Step 1 : First, upload the music file to any free file hosting servers on the net. There are tons of sites that provide free music file hosting. Just google "Free music hosting"

Once you upload, they will provide you with a direct link to that music file.
ex: the file looks something
like this :


http://---------- .com/yourmusicfile.extension


(extension can be .mp3 or .wav or .mid or any other audio extension).

Step 2 : Here is the code you need to add music to your blog


<embed width="250" height="50" autostart="false" src="MUSIC FILE URL"/></embed>



width
: width of the music player

height: height of the music player
autostart : you want the music to start playing automatically ? or leave it to visitors choice..? (values : false or true)
MUSIC FILE URL : the direct link to your music file

If you use the autostart value: true, the music automatically plays.. but, it annoys many readers.

Few more attributes :
loop : true (or) false

If you want to continue playing the same track again and again until the visitor click on the 'STOP' button (or until he/she leaves your site), set the value to 'true'.
If you want the music to stop once the track is completed, use 'false'

playcount : n (n= any positive number)
suppose.. if you put playcount: 2 , the music will play two times and stop

If you want to use these two more additional features.. the code look something like this:

<embed width="250" height="50" autostart="false" loop="false" playcount="2" src="MUSIC FILE URL"/></embed>

Now you can add the music player anywhere you want in your Blogger blog..
Sidebar : If you want to add in sidebar, go to Layout » Add a gadget » html/javascript
and paste the code and save it.

Read more...