Monday, May 24, 2010

We have been discussed about How To Make A Blogger Related Post before, by written a JavaScript and CSS directly into our HTML Template.



Although this methode is more safer because we could see the naked ("true") JS and avoid the malicious script, to some people especially for newbie, it could be complicated to implemented this method.



If you are searching "The Simplest And The Smartest Blogger Related Posts" and did not bother with external JS.. (Before make this posting, I already checked that this code was "clean", even I used it too for this blog). Than I think this Blogger Related Post Tips will fit with you. I have found this code in more tech tips



To display related links at the end of every post. copy this code into a new HTML/Javascript widget and place at the bottom of the post or at the footer in the page elements section.

Widget uses jQuery v1.3.2, If you already included jQuery into your blog. no need to do it again.

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

<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>

<script type="text/javascript">

relatedPostsWidget({

   'containerSelector':'div.post-body'

   ,'loadingText':'loading...'

});</script>
And this what will we look after save...



Sunday, May 23, 2010

Instead of Removed the Blogger NavBar as I mention before (Removed Blogger NvBar), A lot of better if we  make it "toggle". We can set the display of the Blogger NavBar to disappear when our mouse pointer not in the Blogger NavBar position (top of our page),



To enable the Blogger NavBar Toggle function in your blog, you can follow these...



1. Log in to Blogger .

2. On your Dashboard, select the Layout menu, than click the Edit HTML. Under the Edit Template you can see your Blog's HTML.

3. If you already do "Blogger Tip Trick No.4.: Removed The Blogger NavBar", Then you must..! delete your code..

4. Then replace it / insert with this code..

/* Blogger Navigation Bar */

#navbar-iframe {

opacity:0.0;

height: 10px;

filter:alpha(Opacity=0)

}

#navbar-iframe:hover {

opacity:1.0;height: 30px;

filter:alpha(Opacity=100, FinishedOpacity=100)

border: 2px;}
If you never change your Blogger NavBar before, Just insert the code. You can Look at Blogger Tip Trick No.4. to see where you must put the code. (or see #5)





5. The final position is  shown as below..

  
 


5. Finish...

Saturday, May 22, 2010

If you bother with the view of your Blogger NavBar (top of your blogger page), then you can get rid of it with the following ways:



1. Log in to Blogger .

2. On your Dashboard, select the Layout menu, than click the Edit HTML. Under the Edit Template you can see your Blog's HTML.

3. Insert this CSS definition as shown as below...

















 4.We can easily show it again by removing the CSS definition




Sunday, May 9, 2010

I nstead of Making A Recent Comment as we've discussed before, We can also make A Recent Post with Feed Widget.



First we must ensure that our Comment Feeds are enabled cause we will use the Feed Widget



To do that, Go to your Dashboard >> click Settings of your Blog >> click Site Feed. Then set the “Blog Comment Feed” and “Per-Post Comment Feeds” to either “Short” or “Full”. Please do not choose “None”. Save the Settings.  

 


Next Go back to Layout >> Page Elements >> Add a Gadget in your sidebar, select “Feed”. You will be prompted to enter a Feed URL.


 


Insert RSS Feed as Blog Posts as follows :

http://doit2us.blogspot.com/feeds/posts/default?alt=rss
 
Please replace http://doit2us.blogspot.com with yours. After finished click Continue



Next, We can set "how to display" our  recent comment. We can named our Recent Comments by insert the Title column, Setting how much last comment we want to show up (5 by default). We can also choose to displayed the dates and name of the authors or not, and open links in new window.

After finished with the setting, click to Save the Changes.



We still can set the position of your recent comments by drag and drop the widget to the relevant part of our template and then Save the Template. 



Tuesday, May 4, 2010

Meta Tag Definition



A meta tag is a tag (a coding statement) in the Hypertext Markup Language (HTML) that describes some aspect of the contents of a Web page. Unlike normal HTML tags, meta tags do not affect how the page is displayed. Instead, they provide information such as who created the page, how often it is updated, what the page is about, and which keywords represent the page's content.



Meta Tag Function



The information that we provide in a meta tag is used by search engines to index our web page, most often to help search engines categorize them correctly, so that if someone searching for the kind of information as in our web page, they will be able to find it easily.



There are several kinds of meta tags, but the most important for search engine indexing are the keywords meta tag and the description meta tag. The keywords meta tag lists the words or phrases that best describe the contents of the page. The description meta tag includes a brief one- or two-sentence description of the page. Both the keywords and the description are used by search engines in adding a page to their index. Some search engines also use the description to show the searcher a summary of the page's contents.

Meta tag (element) used in search engine optimization, where different methods are explored to provide a user's site with a higher ranking on search engines. In the mid to late 1990s, search engines were reliant on meta data to correctly classify a Web page and webmasters quickly learned the commercial significance of having the right meta element, as it frequently led to a high ranking in the search engines — and thus, high traffic to the website.



Meta elements have significantly less effect on search engine results pages today than they did in the 1990s and their utility has decreased dramatically as search engine robots have become more sophisticated. This is due in part to the nearly infinite re-occurrence (keyword stuffing) of meta elements and/or to attempts by unscrupulous website placement consultants to manipulate (spamdexing) or otherwise circumvent search engine ranking algorithms.


Although meta tag have significantly less effect on search engine results pages today, and most search engines also use the contents of a page as a way to determine how to index it, the creator of a Web page should be sure to include meta tags with appropriate keywords and description. Well-written meta tags still can help make the page rank higher in search results.





How To Do It?



The meta tag is placed near the top of the HTML in a Web page as part of the heading. All the information that we want to be conveyed on our web page, can be enter between the tags <head>...</head> 



The meta tags writing format is:

<meta name="name" content="content"/>
or      <meta content='content' name='name'/>   



Note: we can use " as well as  '

 

As we have mentioned before, although  there are several kinds of meta tags (you can "search" to have more information about the kind of meta tags), but the most important for search engine indexing are the keywords meta tag and the description meta tag.



To be more easily understood, the following is an example of meta tags which are applied in this blog.

<?xml version="1.0" encoding="UTF-8" ?>

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

<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>



    <head>



<meta content='New Blogger Tips For Us' name='Author'/>
<meta content='blog tips, tricks, help for all new bloggers on Web templates, Blog templates, designs, widgets, layout, JavaScript, HTML codes, SEO, Google AdSense, gadgets, diagnostic tools, and how to monetize Blogger or Blogspot blogs, learning by doing' name='description'/>
<meta content='blogspot, blog, tips, tricks, blogger tips and tricks, template, widget, layout, HTML codes, javascript, seo, SEO, google adsense, gadget, monetize, blogger' name='keywords'/>



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

    <b:if cond='data:blog.pageType == &quot;index&quot;'>

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

    <b:else/>

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

    </bhttp://www.blogger.com/post-edit.g?blogID=8693675884300473333&postID=3139178726186289880:if>

    <b:skin><![CDATA[/*
If you want to do this trick.. then  Go to Your Dashboard >> Layout >> Edit HTML >> and add your meta tag code, just change the Red words with Your content tag. You can also add another meta (eg. 'generator').

If your home page consists of several languages, you can also define a language that you use the attribute "lang". For example, if the contents of your web documents written in French, you can use the attribute "lang" as follows:

<meta content='Your Content' name='Your Name' lang='fr'/>
Well.. that it's.. Happy SEO...!
 


Disclaimer:We does not host any of the templates available on this blog. This blog merely indexes other sites contents.