Free Blogger, web & flash templates

Creating D-Tree Menu in your blog Page Element

Saturday, May 2, 2009

Actually, Creating D-Tree Menu is an alternative way to your blog but I think this is very important to show our blog content to the readers. I try to look for the script which provides this kind of tool and there are some ways how to put it in our blog.

In this case, Tips of blog will show you how to create it for your blog without thinking about how to put it in your blog HTML like above of <head> or </body> and so on. That's very easy to make D-Tree Menu because you just copy and paste the script in your blog Page Element.

Before I give the way, this is the example of D-tree Menu that will appear in your blog.

Well, Here is the way and the script of this D-Tree Menu. Put the Script below on your Page Element. You can put it anywhere as long as you will :)

<a href="javascript: d.openAll();">Open all</a> | <a href="javascript: d.closeAll();">Close all</a><br/>

<div style="text-align: left; padding-left: 6px;">
<script src="http://www.geocities.com/once179/sitemap/dtree.js" type="text/javascript"> </script>
<div style="padding-top: 6px; width: 180px;" class="dtree">
<script type="text/javascript">

</script>

</div>
</div>
</td>

Copy Paste this Code and You need to change the Title and URL in Red Color and You can also add the Menu as well.

Good Luck and Enjoy !

A Useful Stript Add for your blog

Friday, May 1, 2009

I am interested to use this kind of Stript Ads (Stript Ads Sample) for it can be effective to publish things in our blog. We can show our Ads or something important to publish by using this tool. Tips of Blog will show how to add this tool easily.

I thank to Anshuldudeja blog because I got this tool from that blog. I try to show this tool at my other blog, The Biography of History Makers, and it work well.

Alright, Here is some steps to put this stript on your blog.

Login into your blogger with your ID
Click Layout
Click Edit HTML
Click Download Full Template to back up your template.
Copy and Paste the following CSS code right above ]]><b:skin>

#mta_bar {
background:#003366;
border-top: 3px solid #6699ff;
margin: 0;
padding: 7px 0;
z-index: 100;
bottom:0px;
right:0px;
width: 100%;
overflow: auto;
position: fixed;
}
* html #mta_bar{
/*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}
#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
#left_bar a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_cg4hGB9AcMRmo-eNHn9VLcNXs15dC8BFJjWzNghm3lHNhguYdNR4gXRaslERBga7XwCnD4uPjTdsLx30s9qQJBd2hHeBzi5BPyVAhrYe3hhEO4zX3n3aixUQWzGf3V_IWzhosUoajSc/?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
#left_bar a:hover { text-decoration: underline; color: #fff; }

Then find the code </head> in your template and Copy Paste the code below right above code </head>

<script type='text/javascript'>
//<![CDATA[
var mta_arr = new Array();
var mta_clear = new Array();
function mtaFloat(mta) {
mta_arr[mta_arr.length] = this;
var mtapointer = eval(mta_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mtasrc = document.all? document.all[mta] : document.getElementById(mta);
this.mtasrc.height = this.mtasrc.offsetHeight;
this.mtaheight = this.cmode.clientHeight;
this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]);
var mtabar = 'mta_clear['+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);';
mtabar = mtabar;
eval(mtabar);
}
function mtaGetOffsetY(mta) {
var mtaTotOffset = parseInt(mta.mtasrc.offsetTop);
var parentOffset = mta.mtasrc.offsetParent;
while ( parentOffset != null ) {
mtaTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mtaTotOffset;
}
function mtaFloatInit(mta) {
mta.pagetop = mta.cmode.scrollTop;
mta.mtasrc.style.top = mta.pagetop - mta.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("mta_bar").style.visibility = "hidden";
}
//]]>

</script>

And the last, Find the code <body> in your template and Copy Paste the following code right under <body>

<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='http://tips-ofblog.blogspot.com' target='_blank'>Tips of Blog</a></span></div>
<span class='right' onmouseout='self.status=''' onmouseover='self.status='tips-ofblog.blogspot.com';return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRAPy_M0HPf1Zmuiq6M11sOkqGleJMKR2E95oPjfXV0edenLMNFzFsopl4eQcfvakfBu5ZDVb0aczrf9lynpztrZh_trfezfAWuvJI-yrrn-prmTffyfs-w5lR1apPz7PxDPfVRQZc6nA/?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>

Change the lines in Red above codes with yours rss feeds and url and text you want to show.
After that, Click Save template and see the result.

Good Luck !

Akhirnya Siap Launching Blog Baru

Hello Dear, hehe, beberapa blog yang saya punya sebenarnya sudah menggunakan berbagai tool, widget dll deh tapi saya berpikir jika saya tidak punya cara membuatnya, saya pasti akan lupa sekalipun udah terpasang. Dengan jalan ini, saya berpikir bahwa saya akan membuat satu blog lagi yaitu Tips of Blog agar saya sendiri memiliki simpanan cara-cara membuat semua yang pernah saya masukkan ke blog saya yang lain.

Saya bersyukur karena dalam waktu satu malam blog Tips of Blog bisa terselesaikan dengan apa adanya. Saya berusaha untuk terus up to date agar isinya bisa membantu para sobat juga. Mungkin atau hampir semua isi blog ini sebenarnya sudah ada pada blog sobat yang lain tapi juga tidak salah bagi kita jika kita memiliki simpanan tersendiri karena cara kita menyampaikan juga akan berbeda dengan cara para sobat yang lain menyampaikannya.

Disamping ini sebenernya, saya juga ingin membagikan buat para sobat terutama yang baru dalam dunia blog. Berbagi apa yang sudah saya aplikasikan merupakan salah satu tujuan saya membuat blog Tips of Blog ini.

Saya berharap agar para blogger khususnya di Indonesia tetap menjaga keakraban di dunia blog. Juga saya mengharapkan masukan dari para sobat tentang isi blog ini. Sekian dulu perkenalan dari saya, Trim's

Sukses selalu !