Have a Happy New Year

“Be always at war with your vices, at peace with your neighbors, and let each new year find you a better man.” –Benjamin Franklin. Happy New Year guys. All the good times this year will be cherished and all the bad times could be used to learn from for not only the upcoming new year, but also the years ahead. This is a good time to jot down those goals and put the major ones into perspective and best of all, it’s a good time to re-design yourself and see what you could improve on or start something new for the new year. If starting a blog, improve on financials, or starting a business, was on your list of resolutions, this post is for you.

 

Sign-up and register with a blogging service.

You can sign up free of charge at Blogger or Wordpress. We prefer Blogger. :P

 

Get a free template for your blog or make your own

You can find professional or personal templates in the templates section or use the generic template below to learn how to build your own template in Blogger

 

Preview template | Download template

 

Tools used for blogging

These tools are provided to help you take your blog to the next level after you’ve gotten it up and running. Template building and analyzing blog information are equally important if you want to build an online business and generate steady income.

 

• Google Analytics

  An enterprise-class web analytics made smarter, friendlier, and best of all, it’s free. These analytics gives your rich insights into your website traffic and marketing effectiveness. With powerful, flexible and easy-to-use features now gives you visibility to analyze your traffic data in an entirely new way. Google analytics can prepare you to write better-targeted ads, strengthen your marketing initiatives and create higher converting websites.

• Going Up!

  GoingUp! is a web analytic service delivered by the Web Analytics Association(WAA) and offers some of the best tools in the industry to analyze your website’s performance form visitors and traffic to search engine tools to optimize your site and increase your search engine ranks.

• Babylon 8

  Babylon 8 is a widely used language and dictionary software. This software is used by millions of students of all ages and races. Because it can translate or define at a click of a button, tutorial websites in different languages or unfamiliar terms won’t be a problem anymore. Get your work done by getting your information when you need it.

• Windows Live Writer

  This software makes it easier to compose compelling blog posts. With WSYIWG blog editor as well as tools for publishing photos and maps, live writer proves indispensible for bloggers that just needs to get the post up for their readers.

• Centricle.com HTML converter

  This web tool is used for ad sense users trying to implement their ads into HTML. Bookmark website for easy access when you need to convert a quick ad sense code for use.

Sign-up and register for money-making networks

These are recommended money-making networks that are proven to generate quick and high revenue.

 

Make money with Ad Sense

 

• Bidvertiser
• Google Ad sense
• AdBrite

Browse the ad sense list

 

Make money with Affiliates

 

• Linkshare
• Pepperjam
• Connect Commerce

Browse the affiliate list

 

Make money with Twitter

 

• Sponsored Tweets
• ad.ly
• RevTwt

 

 

*For last year’s words belong to last year’s language

And next year’s words await another voice.

And to make an end is to make a beginning.

- T.S. Elliot, “Little Gidding”

Blue Fresh and Clean Blogger Template

Preview template | Download template

 

Widget Control

 

- this goes before posts

<h2>Welcome:</h2>
<a href="#" onclick="ddaccordion.expandone('mypets', 0); return false">Expand 1st header</a> | <a href="#" onclick="ddaccordion.collapseone('mypets', 0); return false">Collapse 1st header</a> | <a href="#" onclick="ddaccordion.toggleone('mypets', 1); return false">Toggle 2nd header</a>

<h3 class="mypets">Tips</h3>
<div class="thepet">
Business Graph One way you can optimize your ads for performance inclination is by targeting ads with specific keywords relating to your blog’s niche through custom channels. Because your visitors are interested in your blog’s niche, by targeting your ads, you can display relevant ads for your readers on topics they are actually interested in. With targeted ads, you’re able to display ads on your page without it interfering with readers interest and at the same time push on click through rates and maximize revenue.
</div>

<h3 class="mypets">Tutorials</h3>
<div class="thepet">
Business Graph One way you can optimize your ads for performance inclination is by targeting ads with specific keywords relating to your blog’s niche through custom channels. Because your visitors are interested in your blog’s niche, by targeting your ads, you can display relevant ads for your readers on topics they are actually interested in. With targeted ads, you’re able to display ads on your page without it interfering with readers interest and at the same time push on click through rates and maximize revenue.
</div>

<h3 class="mypets">Templates</h3>
<div class="thepet">
Business Graph One way you can optimize your ads for performance inclination is by targeting ads with specific keywords relating to your blog’s niche through custom channels. Because your visitors are interested in your blog’s niche, by targeting your ads, you can display relevant ads for your readers on topics they are actually interested in. With targeted ads, you’re able to display ads on your page without it interfering with readers interest and at the same time push on click through rates and maximize revenue.
</div>

this is the horizontal navigation bar

<div id="ddtopmenubar" class="slantedmenu">
    <ul>
    <li><a href="http://www.blogspotvision.com">Home</a></li>
    <li><a href="http://www.blogspotvision.com">About Me</a></li>
    <li><a href="http://www.blogspotvision.com" rel="ddsubmenu2">Portfolio</a></li>
    <li><a href="http://www.blogspotvision.com">Contact</a></li>
    <li><a href="http://www.blogspotvision.com" rel="ddsubmenu3">RSS</a></li>
    </ul>
    </div>

    <script type="text/javascript">
    ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar")
    </script>

    <!--HTML for the Drop Down Menus associated with Top Menu Bar-->
    <!--They should be inserted OUTSIDE any element other than the BODY tag itself-->
    <!--A good location would be the end of the page (right above "</BODY>")-->

    <!--Top Drop Down Menu 1 HTML-->

    <ul id="ddsubmenu1" class="ddsubmenustyle">
    <li><a href="#">Item 1a</a></li>
    <li><a href="#">Item 2a</a></li>
    <li><a href="#">Item Folder 3a</a>
      <ul>
      <li><a href="#">Sub Item 3.1a</a></li>
      <li><a href="#">Sub Item 3.2a</a></li>
      <li><a href="#">Sub Item 3.3a</a></li>
      <li><a href="#">Sub Item 3.4a</a></li>
      </ul>
    </li>
    <li><a href="#">Item 4a</a></li>
    <li><a href="#">Item Folder 5a</a>
      <ul>
      <li><a href="#">Sub Item 5.1a</a></li>
      <li><a href="#">Item Folder 5.2a</a>
        <ul>
        <li><a href="#">Sub Item 5.2.1a</a></li>
        <li><a href="#">Sub Item 5.2.2a</a></li>
        <li><a href="#">Sub Item 5.2.3a</a></li>
        <li><a href="#">Sub Item 5.2.4a</a></li>
        </ul>
      </li>
        </ul>
    </li>
    <li><a href="#">Item 6a</a></li>
    </ul>

    <!--Top Drop Down Menu 2 HTML-->

    <ul id="ddsubmenu2" class="ddsubmenustyle">
    <li><a href="#">Item 1b</a></li>
    <li><a href="#">Item 2b</a></li>
    <li><a href="#">Item Folder 3b</a>
      <ul>
      <li><a href="#">Sub Item 3.1b</a></li>
      <li><a href="#">Sub Item 3.2b</a></li>
      <li><a href="#">Sub Item 3.3b</a></li>
      <li><a href="#">Sub Item 3.4b</a></li>
      </ul>
    </li>
    <li><a href="#">Item 4b</a></li>
    <li><a href="#">Item Folder 5b</a>
      <ul>
      <li><a href="#">Sub Item 5.1b</a></li>
      <li><a href="#">Item Folder 5.2b</a>
        <ul>
        <li><a href="#">Sub Item 5.2.1b</a></li>
        <li><a href="#">Sub Item 5.2.2b</a></li>
        <li><a href="#">Sub Item 5.2.3b</a></li>
        </ul>
      </li>
        </ul>
    </li>
    <li><a href="#">Item 6b</a></li>
    </ul>

    <!--Top Drop Down Menu 3 HTML-->

    <ul id="ddsubmenu3" class="ddsubmenustyle">
    <li><a href="http://www.blogspotvision.com">blogspotvision</a></li>
    <li><a href="http://www.blogspotvision.com">blogspotvision</a></li>
    <li><a href="http://www.blogspotvision.com">blogspotvision</a></li>
    <li><a href="http://www.blogspotvision.com">blogspotvision</a></li>
    <li><a href="http://www.blogspotvision.com">blogspotvision</a></li>
    </ul>

Click here to see more templates in the templates section

Adding and customizing the retweet button for better appearance

The TweetMeme retweet button is for website and blog publishers who wants to encourage their audience to tweet their content on Twitter. The button also shows a live count of the number of times your webpage or blog post has been tweeted.

 

Directions

 

Step 1: Under the Layouts > Edit HTML tab, insert the following section code below

 

To have it under post titles or above postings

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

 

To have it under postings where the post footer is

right after <div class='post-footer-line post-footer-line-1'>

 

<div class='tweetmeme' style='float:left; margin:0;padding:0;'>
<script type='text/javascript'>
tweetmeme_style = &#39;compact&#39;;
tweetmeme_source = &#39;blogspotvision&#39;;
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
</div>

 

Configuration

 

tweetmeme_style = &#39;compact&#39;;
- this variable can either be compact, for a compacted size retweet button or you can remove the entire variable for the default sized appearance

 

tweetmeme_source = &#39;blogspotvision&#39;;
- this variable, by default, will be in the format of “RT @tweetmeme <title> <link>”. You can, however change the button to retweet your user account. By specifying the variable parameter in the script to “RT @yourname <title> <link>”.

 

tweetmeme_url = &#39;<data:post.url/>&#39;;

- this variable defines the url to post for on your twitter, you can modify it to a certain url if you want.

 

Additional variable

 

tweetmeme_service = 'bit.ly';

- this variable defines the tiny link service used to display your tweeted link. If you prefer to have tr.im as the URL shortened link, just change “bit.ly” to “tr.im”.

 

*Tutorial Completed

 

Source: tweetmeme, twitter

Smooth and versatile horizontal accordion jQuery script

Turn an ordinary UL list into a smooth, versatile, and appealing accordion. This is good for showing off new products or featured contents from your site so readers don’t have to dig around for it. LI lists expands sideways on mouse over while contracting its peers. The HTML markup of the accordion can either be defined inline on the page or inside an external file instead. You can also specify which LI you want to have expanded by default and modify it’s appearance to fit your template.

 

 Click here to see the demo

 

Directions

Step 1: Under the Layout > Edit HTML tab - insert the following section code below right before the closing head tag – </head>

<link href='haccordion/haccordion.css' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='haccordion.js' type='text/javascript'>

</script>

<style type='text/css'>

/*CSS for example Accordion #hc1*/

#hc1 li{
margin:0 3px 0 0; /*Spacing between each LI container*/
}

#hc1 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: lightblue;
}

/*CSS for example Accordion #hc2*/

#hc2 li{
margin:0 0 0 0; /*Spacing between each LI container*/
border: 12px solid black;
}

#hc2 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: #E2E9FF;
cursor: hand;
cursor: pointer;
}

</style>

<script type='text/javascript'>

haccordion.setup({
    accordionid: &#39;hc1&#39;, //main accordion div id
    paneldimensions: {peekw:&#39;50px&#39;, fullw:&#39;400px&#39;, h:&#39;158px&#39;},
    selectedli: [0, true], //[selectedli_index, persiststate_bool]
    collapsecurrent: false //
})

haccordion.setup({
    accordionid: &#39;hc2&#39;, //main accordion div id
    paneldimensions: {peekw:&#39;30px&#39;, fullw:&#39;450px&#39;, h:&#39;150px&#39;},
    selectedli: [-1, true], //[selectedli_index, persiststate_bool]
    collapsecurrent: true //
})

</script>

Note: The code above references 2 external .js files and an image, which you need to download below (right click/ select “Save As”)

 

• haccordion.js
• haccordion.css

Step 2: Navigate over to Layout > Page Elements to add an HTML/JavaScript gadget. Copy and paste the following section code below in the box and select save.

 

Demo 1 -

<h2>Demo 1:</h2>

<div id="hc1" class="haccordion">
    <ul>

    <li>
        <div class="hpanel">
        <img style="float:left; padding-right:8px; width:200px; height:148px" src="mail_receive.png"/>subscribe by email to blogspot vision to receive daily updates, free ebooks, and notice of upcoming contests
        </div>
    </li>

    <li>
        <div class="hpanel">
        <img style="float:left; padding-right:8px; width:200px; height:148px" src="facebook.png"/>connect with us on facebook for website updates and interact with other bloggers around the world 
        </div>
    </li>

    <li>
        <div class="hpanel">
        <img style="float:left; padding-right:8px; width:200px; height:148px" src="twitter.png"/>connect with us on twitter for bite sized updates and other promotions 
        </div>
    </li>

    </ul>
</div>

<p style="clear:left"><a href="javascript:haccordion.expandli('hc1', 0)">Expand 1 Panel</a> | <a href="javascript:haccordion.expandli('hc1', 1)">Expand 2nd Panel</a> | <a href="javascript:haccordion.expandli('hc1', 2)">Expand 3rd Panel</a> </p>

 

 

Demo 2 -

<h2>Demo 2:</h2>

<div id="hc2" class="haccordion">
    <ul>

    <li style="border-right-width:0">
        <div style="padding:10px; width:250px" class="hpanel">
        subscribe by email to blogspot vision to receive daily updates, free ebooks, and notice of upcoming contests
        </div>
    </li>

    <li style="border-right-width:0">
        <div style="padding:10px; width:180px" class="hpanel">
connect with us on twitter for bite sized updates and other promotions 
        </div>
    </li>

    <li style="border-right-width:0">
        <div style="padding:10px; width:350px" class="hpanel">
        connect with us on twitter for bite sized updates and other promotions
        </div>
    </li>

    </ul>
</div>

*Tutorial completed

Source: Dynamic Drive – dhtml scripts for the real world

Drive click-through-rates by targeting ads for higher revenue and relevant ads

One way you can optimize your ads for performance inclination is by targeting ads with specific keywords relating to your blog’s niche through custom channels. Because your visitors are interested in your blog’s niche, by targeting your ads, you can display relevant ads for your readers on topics they are actually interested in. With targeted ads, you’re able to display ads on your page without it interfering with readers interest and at the same time push on click through rates and maximize revenue.

 

To create a custom channel for your ad:

1. Log into your Google AdSense > AdSense Setup > Channels

 

 

2. Select “+ Add new custom channels” under the “AdSense for Content” tab

 

 

3. Name your channel and select “Show this channel to advertisers as an ad placement”, and fill out the rest of your websites information and under Description, fill in keywords that targets your blog.

 

 

4. Add the Channel and navigate over to AdSense Setup > Manage Ads > and select “Edit AdSense unit” on the ad you want to target.

5. Scroll down to “All Channels” and add the channel you just created and remove any selected channels you may have.

6. Save your settings and allow up to 10 minutes for your relevant ads to start running.

 

Postings and update control for Blogger’s on the go

One way you can manage to keep your blog updated with fresh contents and at the same time update the social networks connected to your blog is by creating scheduled postings, using the facebook app: networkedblogs, and by linking your facebook page’s update to your twitter account.

To create schedule postings in the Blogger dashboard - Write your posts as usual but instead of clicking “Publish Post”, select Post Options > Post date and time > Scheduled at, and type in the date you want the posting to publish, then select “Publish Post”

 

If your blog has a facebook fan page, you can connect your blog and fan page together to alert your facebook fans about updates and new postings on your blog. To do this, you’ll need to install the facebook app: networkedblogs to be able to log your blog in for feed streaming.

Once your blog is logged in, you will need to configure feed settings to enable this feature. To do this, select your blog > feed settings > configure > and select “Auto-Publish blog posts to Page Wall.

 

For your blog’s twitter page, you’ll need to enable the facebook twitter page linking feature. If you haven’t already done so, facebook should notify you with a message at the top of your fan page. You can enable the feature by following the click link and selecting “Link a Page to Twitter”

JavaScript page snow effect for the holiday season

  Click here to see the demo or just take a look around

Directions

Step 1: From the Dashboard, navigate to Layout > Edit HTML (you don’t have to click on expand widgets template), and locate your body tag": <body>

Step 2: Add the following section code right after it and Save:

<script src='http://www.blogspotvision.info/bspotvision/scripts/snow.js' type='text/javascript'>

*The best of all gifts around any Christmas tree:  the presence of a happy family all wrapped up in each other.

7+ Stunningly creative social icon sets

Preview icon set | Download icon set



  Preview icon set | Download icon set



  Preview icon set | Download icon set



  Preview icon set | Download icon set



  Preview icon set | Download icon set



  Preview icon set | Download icon set



  Preview icon set | Download icon set



Preview icon set | Download icon set

Pre-made navigation bar with second sub-menu drop-down functionality

 

 

Click here to see the demo

 

Directions

Step 1: From the Dashboard, navigate to Layout > Edit HTML (you don’t have to click on expand widgets template), and locate this section code: ]]></b:skin>

Step 2: Add the section code below right after it:

<link href=’slanteddividermenu/ddlevelsmenu-base.css' rel='stylesheet' type='text/css'/>
<link href=’ddlevelsmenu-topbar.css' rel='stylesheet' type='text/css'/>
<link href='ddlevelsmenu-sidebar.css' rel='stylesheet' type='text/css'/>

<script src='ddlevelsmenu.js' type='text/javascript'>

/***********************************************
* All Levels Navigational Menu- (c) Dynamic Drive DHTML
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

Note: The code above references the external .js and .css file, which you need to download below (right click/ select “Save As”)

• ddlevelsmenu-base.css
• ddlevelsmenu-topbar.css
• ddlevelsmenu-sidebar.css
• ddlevelsmenu.js

Step 3: Save your template and navigate to Layout > Page Elements to Add a Gadget > HTML/JavaScript.

 

Step 4: Copy and paste the section code below in the box and select Save.

<div id="ddtopmenubar" class="slantedmenu">
<ul>
<li><a href="http://www.blogspotvision.com">Home</a></li>
<li><a href="http://www.blogspotvision.com">DHTML</a></li>
<li><a href="http://www.blogspotvision.com" rel="ddsubmenu2">CSS</a></li>
<li><a href="http://www.blogspotvision.com">Forums</a></li>
<li><a href="http://www.blogspotvision.com" rel="ddsubmenu3">Web Tools</a></li>
</ul>
</div>

<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar")
</script>

<!--HTML for the Drop Down Menus associated with Top Menu Bar-->
<!--They should be inserted OUTSIDE any element other than the BODY tag itself-->
<!--A good location would be the end of the page (right above "</BODY>")-->

<!--Top Drop Down Menu 1 HTML-->

<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 2a</a></li>
<li><a href="#">Item Folder 3a</a>
  <ul>
  <li><a href="#">Sub Item 3.1a</a></li>
  <li><a href="#">Sub Item 3.2a</a></li>
  <li><a href="#">Sub Item 3.3a</a></li>
  <li><a href="#">Sub Item 3.4a</a></li>
  </ul>
</li>
<li><a href="#">Item 4a</a></li>
<li><a href="#">Item Folder 5a</a>
  <ul>
  <li><a href="#">Sub Item 5.1a</a></li>
  <li><a href="#">Item Folder 5.2a</a>
    <ul>
    <li><a href="#">Sub Item 5.2.1a</a></li>
    <li><a href="#">Sub Item 5.2.2a</a></li>
    <li><a href="#">Sub Item 5.2.3a</a></li>
    <li><a href="#">Sub Item 5.2.4a</a></li>
    </ul>
  </li>
    </ul>
</li>
<li><a href="#">Item 6a</a></li>
</ul>

<!--Top Drop Down Menu 2 HTML-->

<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="#">Item 1b</a></li>
<li><a href="#">Item 2b</a></li>
<li><a href="#">Item Folder 3b</a>
  <ul>
  <li><a href="#">Sub Item 3.1b</a></li>
  <li><a href="#">Sub Item 3.2b</a></li>
  <li><a href="#">Sub Item 3.3b</a></li>
  <li><a href="#">Sub Item 3.4b</a></li>
  </ul>
</li>
<li><a href="#">Item 4b</a></li>
<li><a href="#">Item Folder 5b</a>
  <ul>
  <li><a href="#">Sub Item 5.1b</a></li>
  <li><a href="#">Item Folder 5.2b</a>
    <ul>
    <li><a href="#">Sub Item 5.2.1b</a></li>
    <li><a href="#">Sub Item 5.2.2b</a></li>
    <li><a href="#">Sub Item 5.2.3b</a></li>
    </ul>
  </li>
    </ul>
</li>
<li><a href="#">Item 6b</a></li>
</ul>

<!--Top Drop Down Menu 3 HTML-->

<ul id="ddsubmenu3" class="ddsubmenustyle">
<li><a href=http://www.blogspotvision.com>blogspotvision</a></li>
<li><a href="http://www.blogspotvision.com">blogspotvision</a></li>
<li><a href="http://www.dynamicdrive.com/emailriddler/">blogspotvision</a></li>
<li><a href="http://www.blogspotvision.com">blogspotvision</a></li>
<li><a href="http://www.blogspotvision.com">blogspotvision</a></li>
</ul>

Note: Modify the links and Preview your template.

 

*Tutorial completed

jQuery Accordion Content script for featured contents

The Accordion Content script enables you to group contents together and reveal them upon demand when the user clicks on their associated headers. Gives the admin an option to specify whether only one content within a group should be open at any given time and also the ability to stylize headers depending on a content’s state. Furthermore, the script allows persistence so the state of the contents is preserved within a browser session. This script enlists the help of the jQuery library for it’s engine.

Click here to see the demo

 

Directions

Step 1: Add the code below right before this code: ]]></b:skin>

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

<script type="text/javascript" src="ddaccordion.js">

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML
* This notice must stay intact for legal use
***********************************************/

</script>

<style type="text/css">

.mypets{ /*header of 1st demo*/
cursor: hand;
cursor: pointer;
padding: 2px 5px;
border: 1px solid gray;
background: #E1E1E1;
}

.openpet{ /*class added to contents of 1st demo when they are open*/
background: yellow;
}

.technology{ /*header of 2nd demo*/
cursor: hand;
cursor: pointer;
font: bold 14px Verdana;
margin: 10px 0;
}

.openlanguage{ /*class added to contents of 2nd demo when they are open*/
color: green;
}

.closedlanguage{ /*class added to contents of 2nd demo when they are closed*/
color: red;
}

</style>

<script type="text/javascript">

//Initialize first demo:
ddaccordion.init({
    headerclass: "mypets", //Shared CSS class name of headers group
    contentclass: "thepet", //Shared CSS class name of contents group
    revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
    mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
    defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
    onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    animatedefault: false, //Should contents open by default be animated into view?
    persiststate: true, //persist state of opened contents within browser session?
    toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    oninit:function(expandedindices){ //custom code to run when headers have initalized
        //do nothing
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
        //do nothing
    }
})

//Initialize 2nd demo:
ddaccordion.init({
    headerclass: "technology", //Shared CSS class name of headers group
    contentclass: "thelanguage", //Shared CSS class name of contents group
    revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
    mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    collapseprev: false, //Collapse previous content (so only one open at any time)? true/false
    defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
    onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    animatedefault: false, //Should contents open by default be animated into view?
    persiststate: false, //persist state of opened contents within browser session?
    toggleclass: ["closedlanguage", "openlanguage"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    togglehtml: ["prefix", "<img src='http://i13.tinypic.com/80mxwlz.gif' style='width:13px; height:13px' /> ", "<img src='http://i18.tinypic.com/6tpc4td.gif' style='width:13px; height:13px' /> "], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    oninit:function(expandedindices){ //custom code to run when headers have initalized
        //do nothing
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
        //do nothing
    }
})

</script>

Note: The code above references 1 external .js file, which you need to download below (right click/ select “Save As”)

• ddaccordion.js

Step 2: Navigate to Layouts > Page Elements > Add a Gadget > HTML/JavaScript and Insert the sample code below into it’s box:

<h2>Example 1:</h2>
<a href="#" onclick="ddaccordion.expandone('mypets', 0); return false">Expand 1st header</a> | <a href="#" onclick="ddaccordion.collapseone('mypets', 0); return false">Collapse 1st header</a> | <a href="#" onclick="ddaccordion.toggleone('mypets', 1); return false">Toggle 2nd header</a>

<h3 class="mypets">Tips</h3>
<div class="thepet">
<img src="http://photos-e.ak.fbcdn.net/hphotos-ak-snc1/hs148.snc1/5500_124294097717_112216032717_3146361_3910627_n.jpg"/>
    A growing online creative community for all Blogger users.
</div>

<h3 class="mypets">Tutorials</h3>
<div class="thepet">
"Blogger made easy, so you can get on with the better things in life"
</div>

<h3 class="mypets">Templates</h3>
<div class="thepet">
Free Blogger tutorials, templates, widgets, designs, icons, and fonts.
</div>

<p><a href="currentpage.htm?mypets=2">Reload page and select the 3rd content using a URL parameter</a></p>

<br/>

<h2>Example 2:</h2>
<a href="#" onclick="ddaccordion.collapseall('technology'); return false">Collapse all</a>  | <a href="#" onclick="ddaccordion.expandall('technology'); return false">Expand all</a>

<div class="technology">What is our company overview?</div>
<div class="thelanguage">
    A growing online creative community for all Blogger users.
</div>

<div class="technology">Our mission?</div>
<div class="thelanguage">
"Blogger made easy, so you can get on with the better things in life"
</div>

<div class="technology">Our products/service?</div>
<div class="thelanguage">
Free Blogger tutorials, templates, widgets, designs, icons, and fonts.
</div>

<p><a href="currentpage.htm?technology=0,1,2">Reload page and select the 1st, 2nd, and 3rd contents using a URL parameter</a></p>

Note: Save the work and view your template.

 

*Tutorial completed

 

Source: Dynamic Drive – dhtml scripts for the real world

Picking out the right keywords that will optimize search engines ranking

There are two major parts when setting up your blog. The first part is your part, and that deals with setting it up and making sure the template runs smoothly and quickly for your users and readers. It’s important to keep this in mind when implementing your layout, you want to make sure your visitors have a good experience when they visit your blog, ie. loading time, functionality, appearance, etc. The second part, is your blog’s part, and this part deals with optimization. You want to make sure your blog can work for you while you’re there, away, or perhaps in Chicago at an SEO event.

To do this, you’ll definitely need to have the right tools and information about your blog, the visitors that come to your blog, and how they are getting there. In most cases, for blogs just starting up, your visitors will be coming from referring sites or direct traffic. What about search engines? You want to make sure your blog shows up on search results on topics that are relevant to your blog’s niche, and you want to make sure it’s able to compete with other blogs that are in the same game.

To gather the right information from your Blogger blog/blogs, you want to go with it’s provider, Google. Google provides tools for webmasters trying to optimize visibility of their websites.

With the Google Webmaster Tools, webmasters are able to -

• Check and set the crawl rate
• List internal and external pages that link to your blog/site
• See what keyword searches on Google led to the site being listed in the SERPs, and the click through rates of such listings
• View statistics about how Google indexes your blog/site
• Submit and check a sitemap
• Generate and check a robots.txt file

You can set your site/blog up with Google’s Webmaster Tools here.

A few tips and information to help you out in the process:

Set site defaults
You can set your site’s settings with Google to show your page with or without the www. or target a specific geographic area

 
Check errors on your blog/site
See if any errors are occurring on your blogs/sites for your visitors, ie. broken links, links that are driving traffic to the site for which there is no valid page, and pages it knows about but has been restricted from crawling.


Analyze meta descriptions and title tags
See a list of URLs that have duplicate title tags or meta descriptions and pages with too short, or too long of meta descriptions or titles.

 
Keywords
See the most common keywords Google found when crawling your site/blog and it’s significance. These keywords should be used more often in your content to help it’s search engine optimization.


Site performance
See how your site/blog is performing so you can make changes to improve speed of your site and create a faster experience for your users.

Top search queries
See information about user search queries that have returned from your site/blog. Which searches allowed your site to appear on search engines and which ones were clicked to get to your site/blog.

and many other useful information for you to analyze …