How to Creat a Dropdown Menu?



What is dropdown menu?
Dropdown menu is like this :



Here is the trick how to create dropdown menu :

Copy the code below and put it on your page elements.


<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Blog Archive</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>

The red text is links, change it with your links.
The blue text is Anchor text. Yau must change it.

For example :


<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Blog Archive</option>
<option value="http://trick-blog.blogspot.com/2008/02/tutorial-to-create-dtree-menu.htmll"> How to Create Dtree Menul </option>
<option value="http://trick-blog.blogspot.com/2008/01/how-to-create-search-engine-in-blogger.html"> How to Create Search Engine </option>
</select>

The result would be like this:



To add more menu/item, put a code like below

<option value="Links 3">Text 3</option>

before this code </select>

If you want the links opened in new window, change the code below

<select onChange="document.location.href=this.options[this.selectedIndex].value;">

with this code ::

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">

The resul would be like this:




Creat Tab View



Tab View is very usefull box. We can fill it with many contain. It will save our blogs area. (See Image Below)


Here is Tutorial how to create a tab view:

1. Login to blogger, go to "Layout --> Edit HTML"
2. Then find this code ]]></b:skin>
3. Insert the below code before ]]></b:skin> or in CSS tag.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Width top main menu */
text-align: center;
height: 24px; /* Height top main menu */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Top Main menu border color */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Top main menu font */
font-weight: 900;
color: #000; /* Top main menu font color */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Top main menu background color */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Content Border color */
overflow: hidden;
background-color: #FF9900; /* Content background color */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}


4. You can change the code according to the red text explanation. To get html color code see HERE
5. The next step is put the code below before </head>

<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>


6. Then "save" it.
7. Go to "Page Elements" menu
8. Chose "Add Page Element" --> "HTML/Javascript" in place where you want to put this tab.
9. Insert this code :
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>


Note :
- The number or the blue text(350px) Is size of the tabview.
- The green code is the main menu text
- The red code is the content of tabview. you can fill it with links, banner, widget, comment or anything.
- To add more menu, see on the blink code. Add the code under it.

Good luck every body.






Blogging Tools

Blogging Tools to Create More Content, Traffic, and Make More Money..

Blogging is fun. It is the other stuff you have to do that sucks.
We have compiled a list of the most useful blogging software, tools and systems you can use to skyrocket your blogging income easily. While these require a small level of investment, they are always great value for money and can save you a massive amount of time.
Here is out top list of blogging software / tools :

Social Bookmarking Software / Tools

Social bookmarking is a great way to get links to your blog. Unfortunately, waiting for this to happen can take a long time. With the tools below you can jumpstart your social bookmarking and even automate it completely.
ASP Auto Social Poster WordPress plugin that enables you to automatically submit your blog’s latest entry to many social bookmarking sites like Delicious, Blogmarks, Simpy, Furl and many more. Just list your social bookmarking accounts, and every post you publish will be randomly bookmarked.
RSS-Bookmarker RSS Bookmarker A PC-based program (not plugin) that will publish your content automatically to social bookmarking sites. Unlike Auto Social Poster, this handles all content from regular websites as well as blog post and RSS feeds.

Automated Blogging  Software / Tools

WordPressAutoInstaller WordPress Auto Installer Install and manage multiple WordPress blogs from one central location. A few clicks is what it takes to have your entire blog network up and ready to go..
Synonymizer Synonymizer (Duplicate Content Plugin) This WordPress plugin makes any content unique by replacing words with their synonyms. Easy to use and works best for article sites, PLR content and auto-generated blogs.
WPCloner WordPress Cloner Clone your plugins, themes and settings from one blog to as many other blogs as you like. Important tool if you manage a network of blogs.
WPBlaster WordPress Blaster Write one blog post, but publish different variations to as many blogs as you want, automatically.

Blog Hosting


Host Your Blog With Bluehost
Host Your Blog With Bluehost
BlueHost has been providing hosting services since 1996 and is reported to be one of the better performing hosts based on the reviews and feedbacks. They report to have over 510,000 domain owners.
They are officially recommended by WordPress.org so you’ll find a lot of WordPress blog owners signed-up with them.
BlueHost support is overall okay, even though not the fastest.  Support is by TOLL FREE telephone, chat and email tickets system. BlueHost is also known for their secure and reliable backups.
They have only one hosting plan, the price differs by the committed period, minimum is 3 months.
  • Best Value Offer: $6.95 monthly (pay for one year) and you get a free domain name registration
  • WordPress Blogs: Fantastico 1-Click WordPress Installation & Upgrade
=========================================== Host Your Blog With BlueHost >>

Host Your Blog With Hostgator
Host Your Blog With Hostgator
HostGator is perhaps one of the biggest and most established web hosting providers around, in business since 2002.
They are one of the world’s top 10 largest web hosting companies with more than 1,000,000 hosted domains. HostGator is committed to providing reliable service and superior support to all their customers. In fact this site has been hosted with HostGator for almost 2 years now with no issues whatsoever.
They can provide 99.9% uptime level guarantee mainly because they use only brand-named technologies to ensure high quality and reliability. Their server response time is really fast. Servers are based in various data centers around Dallas, Texas.
  • Best Value Offer: $7.95 for “Baby” Plan if your pay for one year, you get to host unlimited domains
  • WordPress Blogs: Fantastico 1-Click WordPress Installation & Upgrade
=========================================== Host Your Blog With Hostgator >>
Subscribe to: Posts (Atom)