New Multi Tabbed Widgets For Blogger BlogSpot Blogs

One of the space efficient widget for blogs, is of course a multi-tabbed widget, which is almost a must for any blog. You can use it for Popular posts, Top commenters, Recent Posts, Recent Posts or any widget as you like.

Although you can find some other methods on Internet, but they are all quite confusing, so you can use this method, which is quite easy, but of course needs to tweak the template.

The complete process has mainly two steps:

UPDATE:  I updated some of my posts, this post I update Add Multi Tabbed Navigation Widget To Blogger / Blogspot Blogs Sidebar........

STEP 1


Log in to Blogger. Now go to Layout and then click on "Edit HTML" tab.
Then download the present template as a backup.
Now find [CTRL+F] this code:

</head>



Then immediately ABOVE / BEFORE it, paste this code:


<!--NEW-MUTITABBED-STARTS--><link href=http://dsai.588.googlepages.com/tabcontent.css rel=stylesheet type=text/css/>
<script src=http://dsai.588.googlepages.com/tabcontent.js type=text/javascript>
/***********************************************
* Tab Content script v2.2- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Via http://BloggerStop.Net
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script><!--NEW-MUTITABBED-STOPS-->


Now click Save Template, and

Click on "Page Elements" tab.


Then click on "Add a Gadget", and select it as "HTML/JavaScript" type.

In the new widget, paste any of the 3 codes displayed below (the screen-shots are displayed above the codes, and demo link has already been given above ):

Code Here:


<h3>Demo #1- Basic implementation</h3>

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://bdlab.blogspot.com/">Dynamic Drive</a></li>
</ul>

<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>

<div id="country2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="country3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="country4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

<p><a href="javascript:countries.cycleit(prev)" style="margin-right: 25px; text-decoration:none">Back</a> <a href="javascript: countries.expandit(3)">Click here to select last tab</a> <a href="javascript:countries.cycleit(next)" style="margin-left: 25px; text-decoration:none">Forward</a></p>


Code Here:


<h3>Demo #2- Different Tab Style, expanding of arbitrary DIVs on the page enabled</h3>

<div id="flowernote" style="display:none; position:absolute; right: 30px; width:150px; height:150px; background-color:red; color:white">
Arbitrary DIV 1
</div>

<div id="flowernote2" style="display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white">
Arbitrary DIV 2
</div>

<div id="flowernote3" style="display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white">
Arbitrary DIV 3
</div>


<div style="border:1px solid gray; width:350px; height: 250px; background-color: #EAEAEA; padding: 5px">

<div id="tcontent1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>

<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="tcontent3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="tcontent4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>

<div id="flowertabs" class="modernbricksmenu2">
<ul>
<li><a href="#" rel="tcontent1" class="selected">Tab 1</a></li>
<li><a href="#" rel="tcontent2" rev="flowernote,flowernote2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4" rev="flowernote3">Tab 4</a></li>
<li><a href="http://bdlab.blogspot.com/">Tab Content</a></li>
</ul>
</div>
<br style="clear: left" />

<script type="text/javascript">

var myflowers=new ddtabcontent("flowertabs")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()

</script>

<p><b><a href="javascript: myflowers.expandit(2)">Click here to select 3rd tab</a></b></p>
<p><b><a href="current.htm?flowertabs=1">Reload page and select 2nd tab using URL parameter</a></b></p>

With Auto-scrolling tabs...


Code Here:


<h3>Demo #3- Different Tab Style, "slideshow mode" enabled</h3>

<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" rel="dog1" class="selected">Tab 1</a></li>
<li><a href="#" rel="dog2">Tab 2</a></li>
<li><a href="#" rel="dog3">Tab 3</a></li>
<li><a href="#" rel="dog4" id="myfavorite">Tab 4</a></li>
<li><a href="http://www.google.com">Google</a></li>
</ul>
<br style="clear: left" />
</div>

<div style="border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em">

<div id="dog1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
<p><b><a href="javascript: mypets.expandit(myfavorite)">Click here to select tab with id="myfavorite"</a></b></p>
</div>

<div id="dog2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="dog3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="dog4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>


<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)

</script>




Now click Save

Read More..

Need A New Desktop Computer Learn Which Is The Best Bet Here

By Lee Smith

Are you in the market for a new computer? Have you begun shopping for a new computer, but dont know what you are looking for? You arent alone. Many people get confused when it comes to computer shopping. Read on to get some great suggestions how to simplify the entire process.

Always have anti virus on your desktop. Without such a program, malicious software may infect your system. Malicious software programs can hijack your personal information and slow down your computer processing speed. There are several programs available that can scan and repair your computer regularly.

Try and find somebody who is giving away their desktop computer. A lot of people are making the shift to laptops and tablets, so they are attempting to sell their desktop computers for an affordable price. Usually, these computers are in good shape, but before making an offer, be sure that the computer works fine.

If you desktop is slow you can do a boot check to get more speed. You will be able to find this information in the start menu. Then, check out programs that are starting when you start your computer. If there are some listed you do not use often, disable them. Your computer is going to run a lot faster when you do this.

Look for the desktop computer model that suits your needs without exceeding your budget by too much. A lot of people look for machines with too many expensive add-ons that they will really never use. Be selective about the features and components in your desktop purchase to save money.

Compile a list of the tasks you plan to use your computer for, prior to shopping. Which computer you buy is going to have to do with what operations and activities you will be doing. If you intend to do serious gaming, your hardware requirements are going to be much higher than someone who just surfs the Internet.

Check out various reputable tech sites to evaluate any computer before making the decision to buy it. The many available choices can be overwhelming, but checking out reviews or the "editors pick list" will help you decide which computer is worth the money.

Youll need to consider a few things when buying a high-end gaming computer. Your system needs a solid video card, no less than 4 GB in memory and a higher resolution display. You can also get keyboards and controllers specially designed for a better play experience.

Be diligent in your purchasing; a great deal of the information is now online instead of in a booklet. Check out the online information before you purchase to make sure it meets your needs.

Make sure the software on the computer you want to buy is legal. You always should have the key and CD to be sure you wont end up in legal hot water or arent allowed to get later software updates.

Does the computer have enough memory? This is important when purchasing a PC. Will you need a lot of space? Will you be adding a large number of pictures?

Read reviews about computers online. Dont choose a desktop solely on price or looks. Most of the time, cheap computers are that price for a reason.

Are you someone who needs storage for lots of pictures? Memory questions are very common from desktop computer shoppers and you should be able to get good advice from retail store personnel as well as the computer manufacturer about memory capacity and issues for specific desktop computers.

Do not be worried! You have gained more than enough information to begin searching for your perfect computer. It is even possible to print out this article and bring it with you. If youre still in need of assistance, an employee can assist you finding the computer that best fits your needs.

About the Author:

Learn more about IT support. Stop by Lee Smiths site where you can find out all about computers and business support.

Read More..

New Photo Gallery of MINIs Fashion Inspired Life Ball Editions

Weve already told you about this years special-edition MINIs for the annual Life Ball AIDS research auction in Vienna, Austria, but the British automaker has just dropped some new pictures of all variants.


Three different designers worked on the cars. New York fashion designer Kenneth Cole took on the MINI Convertible, while Belgian-born US fashion designer, Diane von Furstenberg, showed her creativity on the three-door hatch. Finally, Calvin Klein Collections Creative Director Francisco Costa applied his touch to the new Countryman crossover.

All three MINIs will be auctioned at the amfAR Gala in Vienna on 17 July on behalf of the charitable cause, with all proceeds going to amfAR, the Foundation for AIDS Research.

Read More..