Showing posts with label blogger. Show all posts
Showing posts with label blogger. Show all posts

July 1, 2011

0 Beautiful Animated lables gadget Effect in Blogger

 Have seen lots of text hover, image hover effects animation till now, but never thought of trying something different animation in labels. 


So today i am showing you all the simplest and the effective way of adding animated labels to your blog / website. With my coding we can have fun cool effect add to our links in blog labels list. Have seen this kind trick many other sites but today after going through  spiceupurblog, found the best trick.


This effect is created with the use of jQuery and generally when ever any user visitor places their cursor over the animated label link it moves horizontally.


With just some small change in code this kind hover effect used in image, background or even underline also.








LIVE DEMO : TO SEE ITS OUTPUT WORKING EFFECT WATCH THE ABOVE VIDEO U GET CLEAR IDEA OF IT


Add Animated Link Lists To Your Blog


Step 1. In your Blogger dashboard click > Design > Edit Html






Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code  


</head>


Step 3. Copy And Paste The Following Code Directly Above / Before  </head>



><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 450; 
$(document).ready(function() {
$('a.linknudge, .Label ul li a').hover(function() {
$(this).animate({
paddingLeft: '20px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
});</script><




Step 4. Save Your Template.

October 19, 2010

0 Blogger Gadgets Tutorial

Gadgets

In the way posts make up the majority of your blog, gadgets make up the majority of your blog’s layout, particularly the sidebar(s). We will begin with basic gadgets available from Blogger when clicking Add a Gadget (see Figure 3-3). In the next chapter and throughout the remainder of this book, you learn how to add additional third-party gadgets to promote your blog, connect to popular social networking sites, make money, or further customize the design or functionality of your blog.



Note: Gadgets are primarily added to your blog’s sidebar for quick, visual access. 


Let’s review a list of commonly used gadgets (see Table 3-1) and then add a few popular gadgets to
your blog, such as a Search Box, in the following exercises. You do not want to clutter your sidebar(s) making your blog appear too busy, nor will every gadget suit your blog’s purpose or appeal to all blog
readers. Pick and choose those that you need and from which you will benefit.

Table 3-1: Basic Gadgets Review
Gadget                        Description
Pages -------------------Allows you to create content on your blog separate from your main post area. It is  similar to the traditional web page describing a service you may offer, list products
you sell, or a custom About Me or About Us page (this feature will be reviewed in

Followers---------------- Displays a list of people following your blog (in their Dashboard under Other Blogs, it will show your blog updates).
Search Box-------------- Adds a Google Search box to your blog allowing visitors to quickly and easily search your blog.

HTML/JavaScript----- Primarily used to add third-party gadgets to your blog.

AdSense------------------- Provides capability to earn money with your blog by adding Google AdSense.

Picture---------------------- Use this gadget to add a picture to your blog’s sidebar, footer, or header area (in addition to your Profile Photo). This gadget is not used to insert an image into a
Post.

Slideshow------------------ Creates a quick slideshow from Picasa Web Album, Flickr, Photobucket, or other
photo storage sources.

Link List-------------------- Creates a link to your favorite blogs, web sites, photo albums, or other links.

Labels------------------------- Displays a list of categories (labels) used in your blog posts.

Subscription
Links--------------------------Allows a reader to subscribe to your blog’s posts or comments using popular readers  like Google Reader.

Profile------------------------- Allows you to add certain profile information to your blog, including the Profile  Photo if one was uploaded.

Blog Archive--------------- Select how to archive your blog’s posts; most commonly is by month.
Page Header----------------- Add a header area to your blog. Your blog banner would typically go here.

0 Blogger Navbar Tutorial

Navbar














The Navbar is a built-in feature of your blog used to quickly navigate to your Design, compose a New  Post, or to Sign Out, and displays your email (username). On the left side on the Navbar when viewing your blog, you will also see an area to report abuse, or the ability to go to the next Blogger blog.

In the Navbar page element, you can edit the Navbar color to best match the coloring of your blog.
The only option when editing the Navbar (without using custom HTML/CSS code) is choosing a color. I would recommend one of the “transparent” settings.



Exercise – Editing the Navbar
 
Choose a transparent color for your blog’s Navbar:
1. From the Dashboard, choose Design.
2. Click Page Elements if not already selected.
3. On the Navbar, click Edit.
4. From the options shown in Figure 3-2, choose Transparent Dark or Transparent
Light or any other available color that best compliments your blog. In The Perfect
Landscape’s blog, Transparent Dark was chosen.




5. Click Save.
6. Choose View Blog to view your changes (notice your Navbar color changed).


0 Create Profile in Blogger

Profile

This section is the area where you enter information about yourself and what information you would like to share with readers of your blog (like a traditional “About Me” page). You may enter information including your name, email address, birthday, sex, physical location (city, state, and country), interests,and mini biography. There is also a place to upload your picture. This profile image will be shown on your blog’s sidebar (when inserting the Profile gadget).

Exercise—Edit Profile


Editing your profile:




1. From the Dashboard on the left side of the screen, click the Edit Profile link.


2. In this screen, enter as much or as little information about yourself that you would
like to share with your blog readers. Typically, I check off to share my profile,
email address, display name (normally your blog title), photograph, home page
URL, location, and sometimes my general interests. Due to the increased amount
of Internet fraud and security issues, be wary about how much personal
information you would like to share with strangers.


3. To upload a photograph to use as your profile image, click the Browse button to
locate a picture on your computer or enter a web address (URL) if using a picture
from your personal online image storage site, such as Photobucket or Flickr.





4. When you have finished editing the profile.


5. You are back at the Dashboard.

October 11, 2010

1 Download Latest Free Word Press & BloggerThemes Templates

Sharp Marketing Template

Be faced with as a romantic and dynamic city as Denver, you may wonder how could this online marketing business come off? When data, figures, and all those convincing stuff are provided, people may be willing to participate!

Among this online virtual world, you could choose to shelter your business a warm and beautiful home — a blog with this sharp Denver blog theme!


Download Header PSD-sources file (.zip-package) for Sharp Marketing.


FREE Blogger Template Version of Sharp Marketing

Blogger Layout Demo | Download Now



 Sharp Marketing











0 Download Latest Free Word Press & BloggerThemes Templates

Food Explorer Template

 Take your time to explore, taste and discover the finest food and wine experiences in Denver. They will be so good that you will never forget. And this city also features a wide range of options from award winning steaks, romantic cuisines to breakfast and brunch or a quick snack.

For keeping the savor alive, blog for yourself! And this Denver eating theme was designed to make your job much easier.
 
Download Header PSD-sources file (.zip-package) for Food Explorer.

FREE Blogger Template Version of Food Explorer


Blogger Layout Demo | Download Now

Tags: fixed width+pagenavi+right sidebar+social bookmarking+threaded comments+two columns+valid css+valid xhtml+widget ready+yellow




Food Explorer




October 10, 2010

0 Download Latest Free Word Press & BloggerThemes Templates

Denver Day Shine Template

Denver is one of most family-friendly cities with plenty of activities for the little ones. While keep them occupied you can score your own romantic moments with your loved ones.

Use our Denver vacation blog theme to share the fascinating moments with family and friends. This template is simple to use and free of charge.

Download Header PSD-sources file (.zip-package) for Denver Day Shine

FREE Blogger Template Version of Denver Day Shine

Blogger Layout Demo  Download Now

Tags:  blue+fixed width+left sidebar+pagenavi+social bookmarking+threaded comments+two columns+valid css+valid xhtml+widget ready


Denver Day Shine




May 10, 2010

16 Install Intense Debate Comments in Blogger Blogs


Intense Debate is a commenting system which is designed to inspire conversation. Including such features as threaded comments (allowing readers to reply to each other in comment threads), avatars and a voting system, many Blogger users are now choosing this as an alternative to the default Blogger commenting system.


Many users till now requested me a tutorial for installing and the use of intense debate in their blog, this is a very easy way of installing in your blogger powered blogs and i will explain u this how to do it


What Are the Main Features of Intense Debate?Intense Debate is a fully featured commenting system which provides many more features than Blogger's standard comments, including:
  • Comment form beneath posts (on the same page)
  • Threaded comments, which allow commenters to reply directly to each other and be visible as a comment "heirachy"
  • Comment avatars (of registered Intense Debate members)
  • The ability to vote comments up/down (so the most popular comments can float to the top of the list)
  • Profiles for registered members, which include links to members' blogs and social media profiles
  • Widgets for top commenters and recent comments which you can add to your Blogger layout with ease
You can read about these features in full detail, or watch the two minute video of Intense Debate functionality which explains this service in a snap!

How to Install Intense Debate in your Blogger Blog

It is surprisingly easy to install Intense Debate commenting in your Blogger template! Even when I tried this method for non-standard and highly customized templates, I found this method worked just fine.

If you would like to use Intense Debate as an alternative to Blogger's commenting system, here is what you should do:
  1. Head over to the Intense Debate home page and add your blog's URL in the box provided. Then click on the Install Intense Debate" button:

  2. If your blog is hosted on Blogspot (eg: yourblog.blogspot.com), Intense Debate will automatically detect your blogging platform.

    If you use a custom domain
    (eg: www.yourblog.com), you will need to choose Blogger as your blogging platform.

    Once Intense Debate is sure of the platform you are using, you will see a screen like this:




    Here you have the choice of installing Intense Debate comments as a widget (the easy method) or directly in your Blogger template, to appear below your posts (the recommended method).

    If you choose to add this as a widget, simply click on this option and follow the steps to add this as a widget in your blog sidebar.

    If you would prefer to use the full commenting system, continue reading instead!
  3. Installing the full Intense Debate commenting system really is a breeze! In this case, you will need to follow the steps provided on the installation page to make a back-up of your full Blogger template by going to Layout>Edit HTML in your Blogger dashboard, and clicking on the "Download full template" link.

    This saves a copy of your existing blog template (including any widgets and customizations) to your computer.


    Once you have done this, go back to the Intense Debate installation screen and click the "Browse" button to locate your template file on your computer.
  4. Next, you have a decision to make: you can either:
    • Choose to install Intense Debate on posts where there are no existing comments
    • Choose to replace all comments with Intense Debate comments instead.
    If you do choose to replace all comments, these existing comments will not be lost! You can retrieve and import these to Intense Debate afterwards if you choose to do so (as shall be explained shortly).

    Check the radio selection for the option you prefer, then click the "Upload file and continue" button.
  5. On this next screen, you will see a box filled with code. This is your Blogger template code which has been modified to include the Intense Debate commenting system.

    Copy all of the code in this box to your clipboard. Then go to Layout>Edit HTML in your Blogger dashboard.
  6. Replace all of your existing template code with this modified code from Intense Debate.

    You can check that you have installed this correctly by previewing your changes. If the installation was successful, you will receive no error notifications and can proceed to save your template.
  7. Finally, click on the "Finish" button right near the bottom of the Intense Debate installation page. Then visit your blog in your web browser to check out your new commenting system!

Changing the Comment Settings

Once you have installed Intense Debate comments in your Blogger blog, you may like to change some of the settings to suit your individual requirements.

To change your Intense Debate settings, you will need to access your Intense Debate dashboard and click on the "settings" link for the blog you wish to access.

Here are the different comment settings you can change to suit your needs:
  • Blog Info: Here you can alter any details for your blog, such as the URL, blog title and RSS feed.
  • Comment Posting: This section includes any moderation opions you may wish to alter. You can choose to moderate all comments before they appear beneath your blog posts; moderate posts containing words in a blacklist, and even automatically delete comments if they contain certain "banned" words and phrases.
  • Email Notifications: Choose whether you would like an email to be sent to blog authors whenever a new comment is posted (similar to Blogger's comment settings).
  • Display Settings: If you would like to enable "threads" (this allows a person to comment directly to another commenter), tick the appropriate box. You can also set the default order of comments (readers will be able to re-order this list for themselves if they choose).
  • Comment Link Text: In this section you can choose to alter the text used for your comment links. By default this is set to Comments ([#]) where [#] is the number of comments. You could change this to "[#] Responses", "Observations: ([#])" or indeed any other link text which you prefer!
  • Add another blog admin: This setting allows you to add new moderators who can access your Intense Debate settings, which is useful for group bloggers.

Changing the Appearance of your Intense Debate Comments

When you first install Intense Debate comments, you will notice the color scheme and fonts match those already present in your template! This is lucky since Intense Debate do not recommend that you alter the CSS for your comments (this is still in beta, the code used may alter and render such changes invalid).

There are however a few changes you can make from within your Intense Debate dashboard. To access these layout settings, go to your Intense Debate dashboard and click on the "Layout" link for the blog layout you wish to alter.

From this page, you will be able to alter the following settings:
  • Comment Size: This setting means you can alter the avatar and font size for each comment as "compact", "normal" or "large".
  •  
  • Button Style: This affects how links to "post a comment", "post-reply" and "submit" are displayed in your comment section. Choose from either a button or text link style (which appear like normal links in your posts)
  •  
  • Comment Layout: This option enables you to change how comments appear beneath your posts. The default setting is for comments to be permanantly displayed beneath each post. Alternatives include "peekaboo comments" (activated by clicking on the comment link), and comments in a pop-up page.

    Most bloggers choose the default (comments already present beneath posts) setting, which is also my personal preference as clicking on a link adds another step for readers and offers less incentive for actually leaving a comment on your posts.
One thing you may notice on the layout page is that "Chameleon" is the only choice of style for your Intense Debate comments, though there is an image which suggests other styles may become available soon:

Import Existing Comments from Blogger

If you choose to install Intense Debate for all your existing blog posts (including those posts which already have comments) you may prefer to import any existing comments from Blogger to be displayed alongside your new Intense Debate comments.

Importing your old comments is very easy. Simply go to your Intense Debate dashboard and click on "Overview" for the blog whose comments you wish to import.

Next click on the "Blog Tools", then on the "Import Comments" link in the left hand column.

On this page, you will be prompted to log in to your Blogger account, which will allow Intense Debate to access the API for importing your comments. Once logged in, you will be able to choose which blog you wish to import from and to (be sure to import/export comments from the same blog, otherwise Intense Debate will not be able to allocate them to the correct posts!).

When you choose to import these comments from Blogger, the existing comments will not be deleted! If you decide to uninstall Intense Debate for any reason, you can export all your Intense Debate comments to an XML file, and restore the view of your existing Blogger comments.

I'm not sure that it's possible to export Intense Debate comments back to Blogger at this time as Blogger's API does not allow comments to be automatically created using such third party software (though I strongly suspect it may be possible for respected services like Intense Debate to do this in the future).

Manage your Intense Debate Profile

One of the more useful functions of Intense Debate is profiling. By using your Intense Debate profile to leave comments on ID-enabled blogs, you can increase your reputation, link to your other social networking profiles, add an avatar and monitor comments left on all blogs you visit!

Readers can vote comments up or down (depending on their perceived value to the conversation). Comments which are voted up increase that commenters reputation (whilst the reverse also applies too).

Troubleshooting Intense Debate Installations

From my experiences is using Intense Debate so far, I am happy to say that there are very few possible problems which could occur.

While testing Intense Debate installation with both default and heavily customized (third party) Blogger templates, I have only found two possible problems which may occur during installation: imported comments may not appear as soon as they are imported, and the comment count on heavily customized templates may not appear.

Both of these can usually be resolved easily using the following methods:

Imported comments do not appear

First of all, check the comments in your Intense Debate dashboard to ensure these do appear for the appropriate blog (if not, you should attempt to import them again).

If the imported comments are present, chances are that Intense Debate has not caught up with these comments yet. Be patient, and soon enough you should notice these comments appear in the Intense Debate comment area beneath your posts.

If after a day or so the imported comments do not appear, you should ask for help in the forum. This forum is watched by members of the Intense Debate team who seem very helpful and will be able to help you resolve this problem quickly.

The comment count does not update

I've only ever noticed this problem occur in heavily customized templates where the comment count appears near the top of each post, rather than in the post-footer section.

I suspect this problem may occur because the comment-link tags is separated from other elements of the comments section, and is not parsed correctly by Intense Debates (otherwise flawless) installation system.

The fix for this problem is a little more complicated, but not too difficult.
Depending on whether you have chosen to replace all comments with Intense Debate, or only the posts which do not already have comments, you should use one of the following methods to solve this:

February 11, 2010

2 Add Google Buzz Button To Blogger Blogs

well as google has created a revolution and change in the world of networking sites by introducing Google Buzz, many users must be having a doubt about how to use this google buzz button in our blogger post , well we have found out the simple way of using this Google Buzz Button below our blogger post by just following simple steps

Step Wise:

1) 1st Login Blogger account, then go to Layout page :: Next go to EDIT HTML PAGE,

2) Next Step Go to Edit HTML, CLICK ON EXPAND WIDGET TEMPLATES AS SEEN BELOW

3) After finishing with this Step, do find the following code but do check the expand widget template option and search only

Search for the following code

Search for





Below this code Add the following Code below properly and ur done with it




4) after adding the code and all properly , plss check the output now u find google buzz button below ur each blogger post, if u face any problems in it , leave a comment here, we help u out


u can change the url of the image to ur URL also, jus change the above url of image and its done.............

hope u all like this tip, if u really liked it and think its worth plss leave a comment for this hardwork..........enjoy all bloggers and users



Blogger Themes

 
Powered by Blogger