How to change favicon in blogger

Blogger supplies every blog with the standard orange “B” blogger favicon. Having your own unique favicon is a great way to give your blogger template both a distinct and explicit brand. These small 16X16 pixel images will most definitely help your blog stand out from the rest of the blogspot blogs.

 

 

 

What is a Favicon?

A favicon is a small 16X16 image located at the top of your browser in the url bar.

How to Change your Favicon

1. First go to Layout >Edit HTML in your Blogger Dashboard.
2. Backup your existing template before making any changes!
3. Place the code below directly below the </head> tag in your template.

<link href=’http://bsaves.com/HowHero/Blogger%20Templates/moonspot/images/favicon.ico’ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’ /> <link href=’http://bsaves.com/HowHero/Blogger%20Templates/moonspot/images/favicon.ico’ rel=’icon’/>

4. Now save your template.
5. Once your template is saved view your blog and make sure to refresh the page and delete your cookies.

Creating your own Favicon

1. Replace the image URL (2X) with your own 16 pixel by 16 pixel image hosted on the internet.
http://bsaves.com/HowHero/Blogger%20Templates/moonspot/images/favicon.ico
2. You can host your own favicon blogger image at sites such as ImageShack; PhotoBucket; Flickr; etc.
3. Check out this Favicon Generator Tool which allows you to upload an image and it will format it for you!

Read More

Using Latex from Blogger

So, you’ve just moved to Blogger and you want to blog with properly typeset equations? That seems like a requirement for some sorts of blogs (possibly not possessing an astoundingly large audience).

Unfortunately, a web search only revealed no ready-made solutions. The most promising option was a Greasemonkey script from Wolverinex02¹. But, it used a web service to interpret

which is no longer supported. The second most promising option was the wonderful site CodeCogs. CodeCogs has many ways to render , a page on Blogger integration, and two JavaScript scripts to automatically render snippets in the page. There is only one problem with their suggested approach. Most readers use an RSS aggregator to follow feeds, and the JavaScript will be bypassed. But CodeCogs does have a CGI renderer just like the one used by the Greasemonkey script.

All that is needed then is to combine the two options. My trivial contribution to Blogger equation typesetting is this Greasemonkey script.²

The following has changed since the original script:

• Use CodeCogs for rendering.
• Use CodeCogs to render the icon in the Blogger editor.
• Some formatting changes for readability.
• Support for unrendering. This was a useful missing feature.
• Added alt text for typeset equations.

Install it as you would any other Greasemonkey script. To install in Chrome, you can save the file and then drag it onto the browser window. In the Blogger rich editor for creating new posts or editing existing posts, there will be two new buttons labelled

and . They do what they say. equations should be included between double dollar signs, not single dollar signs or \(\) or \[\]. And the script will fail miserably if the equations contain double quotes.

Typeset away…

¹ I believe this is his blog.

² In Blogger settings, choose the “old” editor

Read More

HTML 5 | What is HTML 5 | Introducing HTML5

HTML5 may be the future of web design, but it's not yet a fully ratified language. It may therefore seem premature to embrace it, but HTML5 is already enjoying widespread adoption. The latest versions of the four most popular web browsers (Internet Explorer, Safari, Firefox and Chrome) already use HTML5, so it's safe to use HTML5 tags on your website.

HTML5 introduces a number of new tags and makes several others obsolete. That doesn't mean an earlier version, such as HTML4.01, won’t display properly in the latest web browsers, as they all have excellent backwards compatibility. However, you should swap obsolete tags for their HTML5 alternatives.

If you've already built a website, you should be familiar with using <div> to define a block on the page, which you can then style, up using CSS. This has been retained in HTML5, along with <span> (to pick out inline blocks for individual formatting) and joined by specific block types including <nav>, which is used to define a navigation element, such as a menu.

Many new tags help to define the content of a page rather than just position it within the flow. For example, <figure> ties an image to its caption, let ting you style the pair as a single block and to sub-style the contents- image and caption - individually inside it.

Even if you don't intend to revisit existing sites and recede them using HTML5, you should stop using tags such as <frameset>, <frame> and <noframes> as they have been deprecated, along with <strike>, <u> and <font>. Most of HTML4.01’s tag structure remains in place, however, with HTML5 building on it.

Beyond creating a clear distinction between content and presentation, HTML5 introduces elements that simplify the integration of non-textual material. The <canvas> tag, for example, provides a container for scripts that draw graphical elements such as shapes and graphs; while <audio> lets you embed audio directly on a page. The <video> tag does the same for visual content, with optional attributes for auto playing, embedded controls, looping and a poster frame that displays before the video kicks in.

New tags such as <video> let you use media content natively without any need for plug-ins

The code below will embed a file called barcelona.mp4 in your page, with accompanying controls. The video window is 640 by 480 pixels, and the movie file will load at the same time as the page. We've also specified a poster frame (barcelona.jpg) to display in the video box like a thumbnail on a DVD menu. No plug-ins are required. The text displayed between the opening and closing <video> tags handles errors, and is displayed if the visitor doesn't have a compatible browser:

<br /> <video src="barcelona . mp4" controls width="640" height="480" poster="barcelona.jpg" preload="preload">Sorry - no video for you. Please upgrade your browser. </video><br />

Add HTML5's New Markup Tags 

To demonstrate how easy HTML5 is to use; we'll build a simple page, using HTML5-native tags where possible. This should render properly in the latest versions of Internet Explorer, Firefox, Chrome and Safari. We'll then look at how CSS3 can style our on-page elements.

One benefit of HTML5 is evident in the new first line of every page: <!DOCTYPE HTML>. This is much simpler than its HTML4.01 equivalent. Following the head section, we'll add the new <header> and <nav> tags:

<br /> <!DOCTYPE HTML><br /> <html><br /> <head><br /> <title><br /> My first HTML5 page<br /> </title><br /> </head><br /> <body><br /> <header><br /> My first HTML5 web page<br /> </header><br /> <nav class="topmenu"><br /> <ul><li><a href="/">Home</a></li> <li><a href="about . php">About</a></li> <li><a href="email.php">Email</a></li> </ul></nav><br /> <br />

The <header> tag lets you address this section in CSS while also defining the content. Aggregators and search engines will understand its contents, and can use it in place of the page title in a list of search results. Likewise, <nav> defines a container for navigational elements. It doesn't define the presentation of the navigation, so a properly linked menu should still be handled using CSS.

Because both these tags are semantic - defining content rather than formatting it - they can be used anywhere you like, several times on the page. You might want to use a <header> as a cross heading before each block of text, and another <nav> further down your page so visitors can jump to a subsection. You can therefore apply specific styles to each tag. We've done this with the <nav> tag, formatting it using a class within CSS called 'topmenu', to denote the menu that runs across the top of the page.

Add the Main Body

With the menu and header out of the way, we can start to write the main body of the page:

<br /> <section><br /> <h1>Welcome to HTML5</h1><section><br /> <h2>What is HTML5?</h2><p>Body content appears here</p><aside><br /> <h3>Obsolete tags</h3><p>Related content appears here</p></aside><br /> </section><br /> </section><br /> <br />

The <section> tags group together various elements on the page and define the start and end points of a discrete section. In our example, one overall section holds the body of our page, with smaller subsections to tie together the heading of each part (<h2>) and its body content (<p>). These are merely a semantic hint, letting readers see where one part begins and ends.

Our first subsection contains an <aside>. This semantic tag ties together a less important header and body content, and it might be styled to sit to the side of the main page flow. In HTML4.01, we could have achieved the same effect by drawing out a <div> and floating it to the left or right. However, it wouldn't have been clear that this was related content when examining the underlying code. We can now close off our page with <footer> and <summary> tags:

<br /> <br /> <footer><br /> <section><br /> <summary>Get in touch</summary><br /> <p>Email us by clicking <a href="mailto : editor@emailprovider.co.uk"><br /> here</ a>.<br /> </section><br /> </footer><br /> </body><br /> </html><br /> <br />

In HTML4.01, footers were usually defined within a named <div>. As with <header>, having <footer> is a timesaver, helping to make the code readable and keeping elements addressable by CSS. The use of <section> ties together a summary and a paragraph. The summary defines the content that follows. You can have as many summaries as you want on the page and style them together or, by directly addressing 'footer section summary' in CSS, target one specific instance.

Read More

top 10 tips for Facebook

Below is a listing of our top 10 tips for the popular social networking website Facebook.

Hide users, games, polls, etc.

It quickly gets annoying seeing some users posts, game invites, polls, etc. Hovering your mouse to the right of the post and clicking the Hide button as shown below can hide any post. Once this button is pressed you'll be prompted with the option to hide that user or in the case of a Facebook application the option to hide that application from ever showing up on your profile.

To unhide someone or unblock an application click the Edit Options link in the bottom right corner of the news feed as shown below.

Greasemonkey and FB Purity

Read More

Add Auto hide Social Bookmark for Blogger | Add custom Social bookmarking to Blogger

Auto hide Social Bookmarking is the updated version for Blogger/Blogspot  Blogs. It was officially created by shareaholic. This Bookmarking widget contain about 75 social share buttons.

Read More

Add Floating Social buttons to blogger blog | Add Floating Social buttons to blogspot

You might be using different social buttons script for you blogger blog posts so that the visitor/friend can like/+1/digg /tweet.
Here i bought a easiest way i.e. Floating social buttons on our blogger post.

Below is the steps to add Floating social buttons on blogger blog/blogspot

1. Log in to your blogger account and click on Design
2. You’re now looking at your blog’s layout, right? Click on Add A Gadget on the sidebar.
3. Select HTML/Java Script
4. Paste the code below into the box and save. There’s no need for a title.

Read More

How to increase Google Page rank | Ways to increase google page Rank

For all bloggers, their first aim is to increase google page rank and to increase the traffic of their site.
Here i will explain a simple and easy way to increase google pagerank for your blog

What is Google Page Rank ??

Google Page Rank is the measure of how important a site is for google.

Read More

How to Host Wordpress.org Manually | How to Host Wordpress.org in free hosting server | How to host Wordpress.org on Byethost.com

Things You Need to Do to Install WordPress:-

1. Checking to ensure that you and your web host have the minimum requirements to run WordPress.
2. Download the latest release of WordPress.
3. Unzip the downloaded file to a folder on your hard drive.
4. Be prepared with a secure password for your Secret Key
5. Print this page out so you have it handy during the installation.

 

Read More

How to add google sitemap in blogger | Add google sitemap in blogger | Google sitemap

Today i am going to explain how to add a GooGle site map to a Blogger blog :-

1. Login to Blogger Dashboard.
2. At the end of the page, under Tools and Resources box – Click on Webmaster Tools.
3. If asked, enter username and password again to Login.
4. Your Blogspot blog is now verified and it is added to Google Webmaster tools.
5. In Webmaster tools, click on Submit a Sitemap and  paste the below code inside the box:
     
   atom.xml?redirect=false&start-index=1&max-results=100
    
6. If your site contain more than 200 posts then replace value 100 by something bigger number like 300.
7. You have successfully added the Google Sitemap.

Read More

Back links | What are back links | Describe Backlinks | Importance of Back Links

Search engines often use the number of backlinks that a website has as one of the most important factors for determining that website's search engine ranking, popularity and importance. Google's description of their PageRank system, for instance, notes that Google interprets a link from page A to page B as a vote, by page A, for page B. Knowledge of this form of search engine rankings has fueled a portion of the SEO industry commonly termed linkspam, where a company attempts to place as many inbound links as possible to their site regardless of the context of the originating site.

Read More

Add a pop up email subscription to your blog | A a feed burner email subsciption to blog

If you are a google adsense user and a experienced blogger, then you might be knowing that adsense is giving a revenue on feedburner email subscription.

Read More