Another ways to upload javascript

JavaScript is a scripting language used to enable programmatic access to objects within other applications. It is primarily used in the form of client-side JavaScript for the development of dynamic websites. JavaScript is a dialect of the ECMAScript standard and is characterized as a dynamic, weakly typed, prototype-based language with first-class functions (ref. wikipedia). Javascript can make our blog have a good look and more attractive. I used it in another blog (tipsandcara). To use javascript, we must upload it to web. I have been using a free webhosting, like ripway or hotlinkfiles. But, someday my blog have a bad conditions. My javascript doesn't work. Why it's can be happened? and the answer is my javascript files was deleted, have reach bandwith, or something else. It's a risks if we use a free hosting. But we can upload the script into our template (blogger template) with use a little trick.
When you want insert javascript code into blogger template use this style.

<script type='text/javascript'>
//<![CDATA[
Javascript code
//]]>
</script>


And then put that code between this code ]]></b:skin> and </head>

Like this one.
]]></b:skin>
<script type='text/javascript'>
//<![CDATA[
Javascript code
//]]>
</head>

Hopefully that way can solve our problem.

Best Regard
One-4-All

Read More

Auto Hide Comment

Comment are one of feature in blog area. I think, there are one of important things. People leave critics, suggest, appreciate, or maybe in some questions use this feature. There are some blogs with have a lot of comment for their article. And if we want to leave comment in that blog which have a lot of comment, we must scroll down our mouse to find comment form. It’s will make some visitor uncomfortable. But, I think that problem can be solve. We can hide that comment. But not for permanently . It can be show again with click. I call it, “AUTO HIDE COMMENT” trick. If we used this trick, our comment area will be shown like this one.

If we click it, the comment wil be appear.

For applied this trick, we must edit your HTML code in several steps. But don’t worry, it’s easy step. Go to your template and then cek check “Expand Widget Templates” option, and then do this steps.

1. Add this code before ]]></b:skin>
.commenthidden {display:none}
.commentshown {display:inline}

2. Look up for this code <dl id='comments-block'>. And then add this code before it,

<a aiotitle='Hide Comments' href='javascript:togglecomments(&quot;hideshow&quot;)'>[+/-]Click to Show or Hide Old Comments</a> <div class='commenthidden' id='hideshow'>

Scroll down your mouse and find until you find </b:loop>, it’s usually before this code “<b:if cond="data:post.commentPagingRequired"> “.
And then paste again this “ <a aiotitle='Hide Comments' href='javascript:togglecomments(&quot;hideshow&quot;)'>[+/-]Click to Show or Hide Old Comments</a> “ after </b:loop>.

3. The last step is add some script to your template.

<script type='text/Javascript'> function togglecomments (postid) { var whichpost = document.getElementById(postid); if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; } } </script>

You must add before </head>.

4.Save your template. And then see for the result.
You can change “ [+/-]Click to Show or Hide Old Comments “ with you want.

Now you have applied this trick.
Enjoy it’s, and don’t forget to bookmark it’s if you like this article.

Best regard.
One-4-All

Read More

Vertical Navigation Bar

Navigation bar or most often people said it Navbar is one of tools that is use to explore something. I use it to help a visitor to explore my blog. Almost template use it in horizontal style like this.



But i was used two type in my another blog.... tipsandcara, horizontal type and vertical type. My navigation bar in vertical type have appearance like this one:



When my visitor want to explore my blog, just click and list of my blog will appear.... like this one:


To use that style, there is a couple things to do.
1. click this link to download package that contain the script and image that used in this trick.

Upload all of in contain to your favorite web hosting (ripway, photobucket, hotlinkfiles, or something else). Write the URL, it will be use in next step.

2.Copy and paste this code to your template before </head>. Before you insert the code, you must change "your Script URL" with yours.

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

3.Copy and paste this code after ]]></b:skin> and before </head>.

<script type="text/javascript"> ddaccordion.init({ headerclass: "submenuheader", //Shared CSS class name of headers group contentclass: "submenu", //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: true, //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: true, //persist state of opened contents within browser session? toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["suffix", "<img src='plus.gif' class='statusicon' />", "<img src='minus.gif' class='statusicon' />"], //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(headers, expandedindices){ //custom code to run when headers have initalized myiframe=window.frames["myiframe"] if (expandedindices.length>0) //if there are 1 or more expanded headers myiframe.location.replace(headers[expandedindices.pop()].getAttribute('href')) //Get "href" attribute of final expanded header to load into IFRAME }, onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed if (state=="block" && isuseractivated==true){ //if header is expanded and as the result of the user initiated action myiframe.location.replace(header.getAttribute('href')) } } }) </script> <style type="text/css"> .glossymenu{ margin: 5px 0; padding: 0; width: 170px; /*width of menu*/ border: 1px solid #9A9A9A; border-bottom-width: 0; } .glossymenu a.menuitem{ background: black url(glossyback.gif) repeat-x bottom left; font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif; color: white; display: block; position: relative; /*To help in the anchoring of the ".statusicon" icon image*/ width: auto; padding: 4px 0; padding-left: 10px; text-decoration: none; } .glossymenu a.menuitem:visited, .glossymenu .menuitem:active{ color: white; } .glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/ position: absolute; top: 5px; right: 5px; border: none; } .glossymenu a.menuitem:hover{ background-image: url(glossyback2.gif); } .glossymenu div.submenu{ /*DIV that contains each sub menu*/ background: white; } .glossymenu div.submenu ul{ /*UL of each sub menu*/ list-style-type: none; margin: 0; padding: 0; } .glossymenu div.submenu ul li{ border-bottom: 1px solid blue; } .glossymenu div.submenu ul li a{ display: block; font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif; color: black; text-decoration: none; padding: 2px 0; padding-left: 10px; } .glossymenu div.submenu ul li a:hover{ background: #DFDCCB; color: white; } </style>

there are several word that you must change. There is plus.gif, minus.gif, glossyback.gif, glossyback2.gif with yours URL of that image.

4.Go to layout template in blogger account, click "Page Element" and then click add a gadget. Click "HTML/Javascript" option. Inside that option, add this code.

<div class="glossymenu"> <a class="menuitem" href="your link">your title</a> <a class="menuitem submenuheader" href="">CSS Examples</a> <div class="submenu"> <ul> <li><a href='your link'>your title</a></li> <li><a href='your link'>your title</a></li> </ul> </div> <a class="menuitem" href="http://all-iknow.blogspot.com">One-4-All</a> </div>

Change that code with your own links. Save your template and see the result.

Enjoy it.
One-4-All

Read More