Best 2 Know

The Ultimate Blogging Resource

Category: Blogger

Tool tip or hint widget for blogger

Tool tip can be very useful in terms of site navigation. I searched for pure css tool tips but all in vain. Most of the tutorials, available online, use JavaScript which slows down the loading time of the page. So, I decided to write a tutorial about designing a pure css based tool tip for Blogger.

What is tooltip?
As per Wikipedia: The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small “hover box” appears with supplementary information regarding the item being hovered over.

Demo: Hover over here Tool tip text appears here

Blogger hack by Ritesh Sanap.

This tooltip works with all browsers. Liked it? Just follow the instruction given below and start using it on your blog.

  1. Login to your blogger dashboard.
  2. Find </b:skin>
  3. Just above the code add the CSS given below :
    a.tip {position:relative;}
    a.tip span {display: none; position: absolute; top: auto; left: auto; padding: 5px 5px 5px 5px; z-index: 100; background-color: #000; color: #fff; border:0px solid #777; width:200px; height:auto; -moz-border-radius: 2px; -webkit-border-radius: 2px;}
    a:hover.tip {font-size: 99%;cursor:pointer;}
    a:hover.tip span {display: block;position: absolute;-moz-opacity: 0.7;
    opacity:0.7; top:auto; left:auto; right:2px; bottom:auto; line-height:14px; font-size:12px;font-weight:normal;}
  4. You Have Successfully Installed the widget.

How to Use this widget?

Check the following example.

<a class=’tip’ href=’#’>more<span>tool tips text area. know more..</span></a>

In the above code, “more” is the link. When you hover over more, the tool tip appears. The text between span tags is what appears in the tool tip.

Example :moretool tips text area. know more.

Facebox – Facebook Styled Lightbox

Facebox is really an awesome creation using jQuery. it can be used for many purposes such such as displaying images in a fancy or cool manure . we have covered many Facebook Tips and Tricks.its really an awesome creation.Facebox is a lightweight Facebook-style lightbox which can display images, divs, or entire remote pages (via Ajax) inline on the page and on demand. It uses the compact jQuery library as its engine, unlike Lightbox v2.0, which uses Prototype.

Facebox consists of 2 .js files, 1 .css file and some images that make up its interface (such as round corner images). I have zipped the files together.



Click here to download the files

Download these files and upload to your server or any hosting or google account. After Downloading these files edit Facebox.css as per you blog requirement( If you don’t know how to do it, then ask me!!) and replace image sources of images(i.e. b.png, bl.png, br.png, tl.png and tr.png). Now, replace image sources in Facebox.js (i.e. closelabel.gif and loading.gif).

Are you confused?? If yes then leave a comment, i will explain you how to replace image sources.

Now, follow these steps:

  1. Go to Layout section and then open Edit html. Click on Download Full Template to take the backup of your current template(don’t miss this, else things may go haywire!!). Now, Check the box to Expand Widget Templates. Insert the following code in the Head Section. I would Suggest you to paste the code just above . 
    <script src=’‘ type=’text/javascript’/><link href=’‘ media=’screen’ rel=’stylesheet’ type=’text/css’/><script src=’‘ type=’text/javascript’/><script type=’text/javascript’> jQueryundefineddocument).readyundefinedfunctionundefined$) { $undefined’a[rel*=facebox]’).faceboxundefined) })</script><style type=’text/css’>.thickstyle{background: silver;}</style>

    Change the web address in red, if you have uploaded above files on your server or googlepage and Save the Template.

  2. Now its the time to explain how and where to use Facebox. 
    1. Display an image using Facebox: If you want to display images using facebox, use the following code: 
      <p><a href=”http://3.bp.blogspot.com/_nX0wvumD9VU/S81K21P3STI/AAAAAAAAAao/p66UQf6Qhgo/s1600/logo.png” rel=”facebox”> Best 2 know</a></p>

      Result of the above Code :

      Best 2 know

      Click on the above link for results.

      If you are using this scrip in a menu then, remove <p></p>

    2. FaceBox used to display an inline DIV: This is the most useful code. It can be used to display text notes, announcement, disclaimer, contact form and so on… In this case a link is placed on your blog and when you click on that link, the pop up (like facebook) appears. 

      <p><a href=”#mydiv” rel=”facebox”>View DIV with id=”mydiv” on the page</a></p><div id=”mydiv” style=”display:none”>This is the contents of a hidden DIV on the blog, with ID=”mydiv” and style set to “display:none” <br /><a href=”http://www.dynamicdrive.com”>Dynamic Drive</a></div>

      The Result of the above code :

      View DIV with id=”mydiv” on the page

      Click on the above link and see the result.

    3. FaceBox used to display an external page, plus apply a CSS class to the container (to further style it): It is like previous one only, but with more styling is added to the pop up.
      <style type=”text/css”>.thickstyle{background: silver;}</style>”<p><a href=”http://www.best2know.info/2006/04/contact-us.html” rel=”facebox[.thickstyle]”>View “Contact Us page” fetched via Ajax, further styled with “.thickstyle” CSS class</a></p>

      The Result for above code :

      ”

      View “Contact Us page” fetched via Ajax, further styled with “.thickstyle” CSS class

      Click the above link for result.
      If it the pop up does not appear after following these steps.. reload the page twice and check again. Remove <p></p> and check, it should work.
      Note: Set href attribute to point to either an image, the ID of a hidden DIV, or a URL to the page on your blog only. Do not point it to any external link. It will not Work, if you do so.

so did you like it? Any doubts or questions? Leave a comment, i will surely help you…

Jquery – Create Float Menu with Scroll Follow Effect

Hi! My name is Rizqy and I’m new as writer in this blog. Thanks to Ritesh for make me a writer. In this blog, I’ll write about javascript especially jquery, tips-trick windows, and maybe the other. In this occasion I’ll write about jquery javascript framework. Jquery is one of the most popular javascript framework. It has many plugin that we can use freely to beautify our blog or website.

Now I’ll share how to make a float menu with touching of jquery effect. The example of float menu we can see at http://spenasa-blogger.blogspot.com. Look at the left side, you will find a float menu with some menu of course. If we scroll the page, that menu will look like follow our scroll. We will use Jquery Scrool Follow plugin for this. You can go to the documentation page of this plugin at http://kitchen.net-perspective.com/open-source/scroll-follow.

Javascript

To use the plugins from Jquery, we must add the library script from jquery. Find </head> and paste the script below.

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

After that, add the script below. This script is the core of the jquery scroll follow and Jquery UI.

<script src=’http://mbahrizh.googlecode.com/files/jquery.scrollfollow.js’ type=’text/javascript’/>

<script src=’http://mbahrizh.googlecode.com/files/jquery-ui-1.7.2.custom.min.js’ type=’text/javascript’/>

Also add this script. This script for call the scroll follow effect.

<script type=’text/javascript’>
$( document ).ready( function ()
{
$( ‘#floatmenu’ ).scrollFollow();
}
);
</script>

CSS

This is the basic CSS. You can costumize it as your desire. Add the CSS below before ]]></b:skin>.

#floatmenu {background:#FFF; border: 2px solid #088A08; position: absolute; width: 40px; height: 200px; color: rgb(102, 102, 102); font-size: 12px; top: 100px; left: 0px; z-index: 1;}

HTML

Basicly, you just add a <div> tag after <body> tag. You’re free to choose your menu content. You can give your facebook, twitter, or the other.

<div id=’floatmenu’>
<!– The menu content is here… –>
</div>

That’s all my first post. In another time, I’ll write about the other jquery effects. I hope you enjoy it.

Make a Navigation Bar with Automatic Highlighted Current Links

Today we’re going to learn how to make a navigation bar for your blog using a very simple way to highlight current links automatically. This method is very easy and it uses only conditional tags from Blogger, so there is no need for JavaScript.

I will explain here the method and how to make a simple style for your navigation bar, I mean very simple. It’s up to you the way you want to style them, I will not go trough the basics of CSS, but if you follow this tutorial carefully you will get the idea and be able to do it in any blog.

What we are making

Check here the Live Demo of the result we are going to achieve, this is a very simple example using Blogger Minima Template, just so you understand the method.

Step 1 – Preparation

As I said, I am not going trough CSS basics and all that, What we are going to explain here is the method to get the result needed, if you understand it, you will be able to make on any blog.
We are going to apply the method on a general blog using Minima template, so quickly go to your Dashboard, create a new blog, choose Minima Template and Make 2 posts Called “About” and “Contact” with some Lorem Ipsum inside. You should get something similar to the live demo.

Step 2 – Tweaking The Cross Column Section

This step is not very important to the method, but as we are going to add the widget on our Crosscol section, we are going to tweak it so it becomes available to receive widgets.
Go to your Blog’s Dashboard > Layout > Edit HTML > Hit CTRL + F > Find class=’crosscol’, and you should get this:

<div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol' showaddelement='no'/>
      div>

As you can notice you have these two parts on your code: style=’text-align:center’ and showaddelement=’no’, the first one make our widgets align in the center, and the second make unavailable to add any widget on your Page Elements section. So to fix it we are going to replace the whole block of code for this one:

<div id='crosscol-wrapper'>
  <b:section class='crosscol' id='crosscol' showaddelement='yes'/>
div>

Step 3 – Adding the Link List Widget

Now that we have tweaked the cross column section, we should be able to add a new widget to it, for this go to your Page Elements section, click to Add a Gadget in the section below your header.
Choose Link List from the panel, now add your links here, as you can see on the picture above, on New Site URL insert the link to your post, in the example I have used the link to my About post, and in New Site Name, the text you want on your menu. Just click Add Link to confirm. You can add as many links as wished.

Step 4 – Giving basic styles to the menu

As I said I will not go trough the basics of CSS here, so go to Layout > Edit HTML, and add the code below right before ]]>.

/* Navigation
------------------------------------------------ */
.crosscol .LinkList ul {padding:0px;}

.crosscol .LinkList ul li {
float:left;
list-style-type:none;
margin-right:1px;
}

.crosscol .LinkList ul li a {
border:1px solid #CCCCCC;
padding:5px 10px;
}

.crosscol .LinkList ul li a:hover, .crosscol .LinkList ul li a.current {
background:#ccc;
}

Basically it will make your links align horizontally, give a nice gray border to them, and make the hover and current links have a gray background.

Step 5 – Tweaking the Link List widget

Now we need to make the Link List widget behave automatically on highlighting current links, to do this go to Layout > Edit HTML > Check Expand Widget Templates and search for the following code:

<div id='crosscol-wrapper'>
        <b:section class='crosscol' id='crosscol' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>
</b:section>
      </div>

and replace for the following:

<div id='crosscol-wrapper'>
        <b:section class='crosscol' id='crosscol' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <b:if cond='data:blog.url!=data:link.target'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
       <b:else/>
       <li><a class='current' expr:href='data:link.target'><data:link.name/></a></li>
       </b:if>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>
</b:section>
      </div>

Save it, and you are done.

Source : Blogger TuT

Chucky – Blogger Template

Hello again Today i m gonna give you my another blogger template. its name is Chucky . I know it sounds good but it looks good then its sounds.ya its complete looks like an premium but I would I like to give it for free to all my blog visitors and readers. I think many of my visitor might know that very time most of the i release the template which is widgetize. so don’t think that you have to do many things to use this template. 
Screenshot :

Now After you Upload template you can start Using it.
Using Featured Content :

1. When you see the Featured Content beside it click on Edit link.
2. Then Add the Following Content :

<div id=”featured-post-wrap” class=”clearfix”>
<script type=”text/javascript”>
jQuery(document).ready(function() {
jQuery(‘#featured-post’).cycle({
fx: ‘fade’,
speed: ‘fast’,
timeout: 6000,
pause:2,
next: ‘#featured-next’,
prev: ‘#featured-prev’
});
})
</script>
<div id=”featured-post”>
<div class=”featured-item”>
<img alt=”Image Name” width=”304″ src=”Link of the Image” class=”featured-thumb” height=”190″/>
<div class=”post clearfix”>
<p class=”date-post”>Date of the Post </p>
<h2 class=”title”><a href=”Link of the Post” title=”Title of the post“>Title of the post.</a></h2>
<div class=”entry”>

Post Content Or Description

</div>
<a class=”read-more” href=”Link of the Post” title=”Continue Reading…”>Continue Reading…</a>
</div>
</div>
</div><!– /featured-post –>
<a id=”featured-prev”>prev</a>
<a id=”featured-next”>next</a>
</div><!– /featured-post-wrap –>

3. You have to just change the things highlighted in red color.
4. If you want to add more post then Just before

</div><!– /featured-post –>

 add this code :

<div class=”featured-item”>
<img alt=”Image Name” width=”304″ src=”Link of the Image” class=”featured-thumb” height=”190″/>
<div class=”post clearfix”>
<p class=”date-post”>Date of the Post </p>
<h2 class=”title”><a href=”Link of the Post” title=”Title of the post“>Title of the post.</a></h2>
<div class=”entry”>

Post Content Or Description

</div>
<a class=”read-more” href=”Link of the Post” title=”Continue Reading…”>Continue Reading…</a>
</div>
</div>

5. Repeat The step and Get as much post you want.
6. Wishing more steps sorry but this much only now Just save it.

Excellence Blogger Template

Hi to all of my Readers today i m introducing again an blogger template created by me. i think you should use this template because it is completely replica on the WordPress version.

Some new Features :

1. WordPress Comment Link To Show No Comments
Preview :

2. New Style Posted Area
Preview :

3. No Response Comment style
Preview :

4. Response Comment Style
Preview :

Page Layout is purely clean 
Preview :

 
 
Download | Live Preview

After Uploading the Template :

1. Changing Search Field 
1. Find this <form action=’/search’ method=’get’>
2. Before /search add your Blog’s link. For E.g.: yourname.blogspot.com/search

2. Changing RSS Link
1. Find this <a class=’rss’ href=’http://riteshsanap4u.blogspot.com/’>
2. Replace http://riteshsanap4u.blogspot.com/ With Your Feed Link or Feedburner ID


3. Changing Recent Section
1. In page Layout Click on Edit link in front of recent section.
2. Find this <script src=”http://riteshsanap4u.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp”></script> replace it with your blog link in
<script src=”http://riteshsanap4u.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp”></script> This will change your Recent Post section.
3. To change Recent Comments Section just go little down you will find the same type of script in that also change.

4. Just Save .

BizFresh Blogger Template – Free Blogger Template

Hi Friends today i am again going to give an blogger template Named Bizfresh it is very good template widgetize and a proper layout this template is just like Plug and play feature means just upload and use no need to edit it

For live Preview : Click Here
To Download     : Click Here

After You Install the template please preview it then save it.

To activate Calender widget which in near post title Follow this steps :
1. Login to your blogger account

2. At Dashboard, choose tab Settings

3. At Setting tab, choose tab Formatting

4. At Formatting tab, change Timestamp Format to format like “Tuesday, May 5,2008”.

Remember change the TIMESTAMP, not DATE HEADER

5. Click button Save Settings and DONE.