How to Make Menu and Sub-menu Tab

How to make menu and sub menu tab without jQuery? If you are interested in making menu and sub menu tab just like menu bar of this blog, or see demo, just do these following steps:

• Go to your dashboard => Template => choose Edit HTML => select proceed => check expand widget templates (above right side);

• Find this below  inside the box code (if you face difficulty in finding it just press F3 if your browser is Chrome or Ctrl+F for Firefox, and copy paste one of below codes, press enter); 

<div class='main-outer'> or <div id='main-wrapper'> or <div id='main'>

• Copy and paste these below code right before the above code;

<style> /* -- Menu Horizontal + Sub Menu-- */ #cat-nav {background:#000;margin:0 15px;padding:0;height:35px;} #cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #fffff;} #cat-nav a:hover { color:#fff; } #cat-nav li:hover { background:#787876; } #cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:12px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;} #cat-nav .nav-description { display:block; } #cat-nav a:hover span { color:#fff; } #secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#000; } #secnav a { font-family:Trebuchet MS, "Trebuchet MS",Helvetica,Jamrul,sans-serif; font-style:normal; font-weight:700; font-size:17px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;} #secnav li { float:left; width: auto; height:35px;} #secnav li ul { position: absolute; left: -999em; width: 200px; top:35px} #secnav li ul li { height:30px; border-top:1px solid #fff; } #secnav li ul li a { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:12px; font-style:normal; font-weight:400; color:#eee; } #secnav li ul ul { margin: -30px 0 0 180px; } #secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; } #secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; } #secnav li:hover,#secnav li.hover { position:static; } #cat-nav #secnav {width:100%;margin:0 auto;} </style> <br /> <div id="cat-nav"> <ul class="fl" id="secnav"> <li><a href="#YOUR LINK#">TITLE 1</a></li> <li><a href="#YOUR LINK#">TITLE 2</a> <ul id="sub-custom-nav"> <li><a href="#YOUR LINK#">SUB MENU TITLE 1</a></li> <li><a href="#YOUR LINK#">SUB MENU TITLE 2</a></li> <li><a href="#YOUR LINK#">SUB MENU TITLE 3</a></li> <li><a href="#YOUR LINK#">SUB MENU TITLE 4</a></li> <li><a href="#YOUR LINK#">SUB MENU TITLE 5</a></li> <li><a href="#YOUR LINK#">SUB MENU TITLE 6</a> </li> </ul> </li> <li><a href="#YOUR LINK#">TITLE 3</a> <ul id="sub-custom-nav"> <li><a href="#YOUR LINK#">SUB MENU TITLE 1</a></li> <li><a href="#YOUR LINK#">SUB MENU TITLE 2</a></li> <li><a href="#YOUR LINK#">SUB MENU TITLE 3</a></li> <li><a href="#YOUR LINK#">SUB MENU TITLE 4</a></li> </ul> </li> <li><a href="#YOUR LINK#">TITLE 4</a> <ul id="sub-custom-nav"> <li><a href="#YOUR LINK#">SUB MENU TITLE 1</a> </li> </ul> </li> <li><a href="#YOUR LINK#">TITLE 5</a></li> </ul> </div>

Note:
#cat-nav {background:#000;margin:0 1px;padding:0;height:35px;}	change the 000 with any kinds of color you desire for the background color.
#cat-nav li:hover { background:#787876; }	color when menu or sub menu is pointed
TITLE	change with title whatever you want
#YOUR LINK#	change with link whatever you want (page, posting, or label link, etc)

• That's it, save and enjoy;

• TITLE 1
• TITLE 2
  • SUB MENU TITLE 1
  • SUB MENU TITLE 2
  • SUB MENU TITLE 3
  • SUB MENU TITLE 4
  • SUB MENU TITLE 5
  • SUB MENU TITLE 6
• TITLE 3
  • SUB MENU TITLE 1
  • SUB MENU TITLE 2
  • SUB MENU TITLE 3
  • SUB MENU TITLE 4
• TITLE 4
  • SUB MENU TITLE 1

• If you've done it correctly, it will appear menu bar like this above look in your header.

How to Make 3D Tag Cloud

One of widgets that can beautify your blog is Tag Cloud 3D. It makes your labels looks more beautiful with a 3D animation that can spin around. Just like, see demo.

If you're interested with this widget just do these following steps:

• Go to your dashboard => select layout => add a gadget => select labels => check cloud=> save;
• Go to your dashboard => select layout => add a gadget => select HTML/JavaScript;
• Copy and paste this following script into the  HTML/JavaScript box (leave the box title blank)

<left><h2 class="title">Labels</h2> <div class="widget-content"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> <div id="wpcumuluscontent5733682"> <script type="text/javascript"> var flashvars = { tcolor: "0x000000", tcolor2: "0x000000", hicolor: "0xce1449", tspeed: "40", distr: "true", mode: "tags" }; var params = { allowScriptAccess: "always" }; params.wmode = "transparent"; x = document.getElementById("Label1").getElementsByTagName("a"); trans = document.getElementById("Label1").style.display="none"; var tagcloud; var url = "http://" + document.domain + "/search/label/"; for (var i = 0; i < x.length - 1; i++) { tagcloud = tagcloud + "<a href='"+encodeURIComponent(url + encodeURIComponent(x[i].innerHTML))+"' class='tag-link-24' title='15 topics' style='font-size: 15pt;'>"+x[i].innerHTML+"</a>"; } flashvars.tagcloud = "<tags>"+tagcloud+"</tags>"; swfobject.embedSWF("http://www.taiphanmem.org/wp-content/plugins/wp-cumulus/tagcloud.swf?r=2520752", "wpcumuluscontent5733682", "380", "250", "9", "expressInstall.swf", flashvars, params);</script></div></div></left>

Note:
hicolor: "0xce1449"        => color of text when it's pointed
tspeed: "40"                   => the speed of spinning
style='font-size: 15pt      => font size of text you want to display
wpcumuluscontent5733682", "380", "250" => the high and the wide of widget
you can change the red text as whatever you want

• Place the script exactly below label widget
• Save and enjoy.

....................................................................
Alternative

• Go to your dashboard => template => edit HTML => proceed => check expand widget templates =>  
• Search this below code (use ctrl+f (Mozilla)/ F3 (Chrome) 

<b:section class='sidebar' id='sidebar' preferred='yes'>

• Copy this below code and paste exactly under the above code 

<b:widget id='Label99' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/> <div id='flashcontent'>Blogumulus by <a href='http://dhedie-tips-triks.blogspot.com'>Dhedy | Tips & Triks</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div> <script type='text/javascript'> var so=new SWFObject ("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff"); // uncomment next line to enable transparency //so.addParam("wmode", "transparent"); so.addVariable("tcolor", "0x333333"); so.addVariable("mode", "tags"); so.addVariable("distr", "true"); so.addVariable("tspeed", "100"); so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>"); so.addParam("allowScriptAccess", "always"); so.write("flashcontent"); </script> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

Note:

# Width = 240px
# Height = 300px
# Background = #ffffff white
# Text color = 0×333333 (gray)
# Font size = 12

• Save and enjoy

How to Make Social Profile Widget?

Social profile widget in your blog serves significant function to you to stay connect with your visitor. Furthermore, by doing this you can also increase your blog traffic by submitting or promoting either your blog or your posting to them. There are so many social bookmarks  you can follow such as: google+, facebook, twitter, feeds, technorati, stumbleupon, linkedin, etc.

I really suggest for the blogger to add link of these social bookmarks to their blog. But how to make it? it is easy, just follow these steps:

• Go to layout, 
• add a gadget, 
• choose: HTML/Java script, 
• copy and paste this below script, 

<a href=http://www.facebook.com/######><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kB2HyOR1y5NLOP-ri0HxaiT1SKHULyGI99Cvn9IBu67Ix82tmwUjqHAL81NdG2euYozrNwxBvYqnunaoYzl_WyFp8O0qaZieiJ_pVpROhgi9FawiSAM9qpvOT1nw4C6i8X4vrNgGUpVz/s1600/facebook.png" name="facebook" border="0" width="64" height="64"/></a> <a href=https://twitter.com/#!/######><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtSqpAnAxoyNf_NS68qwXjWSMtBp9wk2DxfibzYS0PYfhWkXhkhtAlpezNei1Ag0aZz1HhqHpkE5JbzgKxjeAivTl-9lyawbR5zAbQ_gwXyUsL2NsKLTPS_Bhj2d0UMNyYU-_v_8JQP5ft/s1600/twitter.png" name="twitter" border="0" width="64" height="64"/></a> <a href=http://feeds.feedburner.com/blogspot/###### ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCNTDf8Ounx35WhGHhcPqjJANBdyPa2n8pUU1ViQoig-mYL0gYhUiwEpnEP68kNU3ZUjUDXK1mUefsEWwoAwPdZzpUUL-Puf8xH0_QlMv_D1vgAIV3Lwdt1hjRjD7ScNWB7Aef-O08e1fK/s1600/rss.png" name="rss" border="0" width="64" height="64"/></a> <a href=http://technorati.com/blogs/######><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibKTSLD6eq2iggoVnoToGjI2xiyOKdB28ZJhddjrslCIWigYAM1d6-OPAHlybKBxlQ6rXELX0DA0aC90dL_VycKwOLEQfSmeMDFPa6gVVDbCw8GUR9hpQfMO5QrdJaCPJB2U7hyN0u69iO/s1600/technorati.png" name="technorati" border="0" width="64" height="64"/></a> <a href=http://www.stumbleupon.com/stumbler/###### ><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEdjtLRZfPKmFOcRyyXQ3v_WqS8owTEGtlgCCo65YqF1zectDvAqgMzCDBYkCY0jMRGMVFd6z6XBLWZ-STafL8fDPg1kclYtIkLEYI-uW_TJhlCoUQdX8XpCqUObzd996Y9O6ILZsTLh04/s1600/stumbleupon.png" name="stumbleupon" border="0" width="64" height="64"/></a>

• change the ###### with your social profile (facebook, twitter, feeds, technorati, stumbleupon)

 ......................................................