[ CLOSE ]

Showing posts with label Blog. Show all posts
Showing posts with label Blog. Show all posts

Sunday, September 20, 2009

Displaying Images Transparent, With Mouseover Effect

How a transparent image above effect is not so difficult, that we need only use CSS Image Opacity property. But before you should also know CSS opacity property is not included in the standard CSS, which this property works well only on some modern web browsers only.

Examples of the mouseover effect to the more dim light (set directly in the picture).

onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" / />

<img src="Your Image URL" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Examples of the mouseover effect to dim light (set directly in the picture)

onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"/ />

<img src="Your Image URL" border="1" style="opacity:1;filter:alpha(opacity=100)"
onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"/>

Maybe a bit hard if each image must be set one by one the value of his property, now that every partner posts directly having an effect automatically, can directly add this CSS code:

.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}

.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}


As far as I usually use the property Firefox opacity: x for tranparancy, unlike IE which uses filter: alpha (opacity = x). In Firefox opacity: x value of x can be filled with values between 0.0 -1.0, while the IE filter: alpha (opacity = x) the value of x between 0-100.


Readmore »

Saturday, September 19, 2009

How to Remove Blogger Navbar

How to Remove / Hide Blogger Navbar


Ihsan pal who asked the question in writing through the shoutbox. He asked how to remove the Blogger Navbar, and this time I will try to discuss it. What is Blogger Navbar? blogger navbar is a small frame of his bloggers who are at the top of the blog. This frame serves to log into blogger or it could be a way to look at other blogs or it could be to mark the blogs that violate TOS if bloggers like blogs that contain elements of pornography or racial intolerance to be reported to the blogger.


Are we able to remove Blogger Navbar? if the question like that then her answers are certainly able, but before removing the navbar is a good idea to think-think, my friend and former blogger TOS, please read carefully, because the risk would bear very heavily on the will of the lid blogger pal account or in other words buddies will lose kesayanangannya blog. Pretty scary is not it? did some time ago, word got out that anyone ever asked the parties whether bloggers should remove navbar blogger or not? and he now allows the blogger to remove the navbar, but I do not know whether the news is true or not that clear pal should always read the TOS carefully.

Still insisted to remove blogger navbar? if it still will I tell, but the risk in their respective responsibilities, I am not responsible if tomorrow something happens with your blog buddies.

To remove the blogger navbar, add buddies living below code in the CSS style sheet:


/* hide navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Or it could also put the following code just under the code <body> :


<style type='text/css'>
#navbar-iframe {display:none;}
</style>

Enjoy the blog without navbar !
Readmore »

Friday, September 18, 2009

Popup Box

By using this script, you can display a close button and the box you can fill the announcement, notice, info, and more. To be sure popup box can be moved and driven in over there. Suitable for business-themed blogs, news, and entertainment.

Use this custom DHTML "widget" to uniquely present new or notable pieces of information to your visitors. The interface is cross browser compatible, and can be dragged/ hidden freely by the user. Now that's something new in itself!

Instruction : (Hold your mouse down over the title bar of the box to drag it).

The Demo click here !.

First, add the code below under ]]></b:skin>

<script type="text/javascript">

/******************************************
* Popup Box- By Jim Silver @ jimsilver47@yahoo.com
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
* Publish for Blogger by http://blogspot-scripts.blogspot.com
******************************************/

var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

//drag drop function for NS 4////
/////////////////////////////////

var dragswitch=0
var nsx
var nsy
var nstemp

function drag_dropns(name){
if (!ns4)
return
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}

function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}

function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}

//drag drop function for ie4+ and NS6////
/////////////////////////////////


function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px"
crossobj.style.top=tempy+e.clientY-offsety+"px"
return false
}
}

function initializedrag(e){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "html" : document.compatMode && document.compatMode!="BackCompat"? "documentElement" : "body"
while (firedobj.tagName!=topelement.toUpperCase() && firedobj.id!="dragbar"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}

if (firedobj.id=="dragbar"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmouseup=new Function("dragapproved=false")

////drag drop functions end here//////

function hidebox(){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
document.showimage.visibility="hide"
}

</script>

Step 2: Insert the below HTML code to the BOTTOM of your page, right above the </body> tag itself:

<div id="showimage" style="position:absolute;width:250px;left:250px;top:250px">

<table border="0" width="250" bgcolor="#000080" cellspacing="0" cellpadding="2">
<tr>
<td width="100%"><table border="0" width="100%" cellspacing="0" cellpadding="0"
height="36px">
<tr>
<td id="dragbar" style="cursor:hand; cursor:pointer" width="100%" onMousedown="initializedrag(event)"><ilayer width="100%" onSelectStart="return false"><layer width="100%" onMouseover="dragswitch=1;if (ns4) drag_dropns(showimage)" onMouseout="dragswitch=0"><font face="Verdana"
color="#FFFFFF"><strong><small>Announcement Box</small></strong></font></layer></ilayer></td>
<td style="cursor:hand"><a href="#" onClick="hidebox();return false"><img src="close.gif" width="16px"
height="14px" border=0></a></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">

<!-- PUT YOUR CONTENT BETWEEN HERE -->

Testing 1 2 3

<!-- END YOUR CONTENT HERE -->

</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

Change "close.gif" above with your images address. Or you can use my images for free.


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwpU5-8yNe9MuLdEHhHu0FhVaOO5bXkW1KkzT5y_9N1mM8OU5yzwAxneI67NsYR883vLpaFeYBYbTJ4-KWPmS1BBNKhj2ZBlS5FqQ-a4WrS2XTSqyWGwOvQ9Ak4IznZqxpYaIgdUkfVh6F/s320/close.gif

Configuring the script

All modifications to the script are done in the code of Step 2 only.

1) To customize the displayed content, change the part where the HTML comments are located.

2) To configure the initial location of the box on the page, change the "left" and "top" attributes of the

tag.


Readmore »

Dock Content

This script is a script that will display a dock box that appears on the top right corner that will bring the information, text, images, and others who will appear on without stopping.

Dock Content is useful if you want to know the information to someone. Or you want to put your ad code in the Dock this Content. That will multiply your ad clicks. This is a free blog tips, blog trick, blog hack, and blog scripts.

As you can imagine, this is a great way to seamlessly yet effectively give select content on your page the spotlight, by temporarily (or permanently) maintaining its visibility on the user's screen. Examples of usage are:
  • Docking a navigational menu permanently.

  • Docking an image ad for 5 seconds.

  • Docking an important announcement for 10 seconds.

The Demo, you can click here.

First, add the below css (Casading Style Sheet) to your blog :

.dockclass{
position:relative;
}

Then copy and paste the code below under ]]></b:skin>

&lt;script type=&quot;text/javascript&quot;&gt;

/***********************************************
* Dock Content script- Created by and &Acirc;&copy; Dynamicdrive.com
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full script
* Publish for Blogger by http://blogspot-scripts.blogspot.com
***********************************************/

var offsetfromedge=0 //offset from window edge when content is &quot;docked&quot;. Change if desired.
var dockarray=new Array() //array to cache dockit instances
var dkclear=new Array() //array to cache corresponding clearinterval pointers

function dockit(el, duration){
this.source=document.all? document.all[el] : document.getElementById(el);
this.source.height=this.source.offsetHeight;
this.docheight=truebody().clientHeight;
this.duration=duration;
this.pagetop=0;
this.elementoffset=this.getOffsetY();
dockarray[dockarray.length]=this;
var pointer=eval(dockarray.length-1);
var dynexpress='dkclear['+pointer+']=setInterval(&quot;dockornot(dockarray['+pointer+'])&quot;,100);';
dynexpress=(this.duration&gt;0)? dynexpress+'setTimeout(&quot;clearInterval(dkclear['+pointer+']); dockarray['+pointer+'].source.style.top=0&quot;, duration*1000)' : dynexpress;
eval(dynexpress);
}

dockit.prototype.getOffsetY=function(){
var totaloffset=parseInt(this.source.offsetTop);
var parentEl=this.source.offsetParent;
while (parentEl!=null){
totaloffset+=parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function dockornot(obj){
obj.pagetop=truebody().scrollTop;
if (obj.pagetop&gt;obj.elementoffset) //detect upper offset
obj.source.style.top=obj.pagetop-obj.elementoffset+offsetfromedge+&quot;px&quot;;
else if (obj.pagetop+obj.docheight&lt;obj.elementoffset+parseInt(obj.source.height)) //lower offset
obj.source.style.top=obj.pagetop+obj.docheight-obj.source.height-obj.elementoffset-offsetfromedge+&quot;px&quot;;
else
obj.source.style.top=0;
}

function truebody(){
return (document.compatMode &amp;&amp; document.compatMode!=&quot;BackCompat&quot;)? document.documentElement : document.body
}

&lt;/script&gt;


Step 2: Having done the above, designate a particular content on your page to be docked by adding inside its tag the code in red:

<div id="dockcontent0" class="dockclass">This DIV content is docked</div>

Docked image: <img src="test.gif" id="dockcontent1" class="dockclass" />


where "dockcontent0" is an arbitrary but unique name, and should differ for each additional content you dock (as shown in the image that follows).

Step 3: Finally, you now need to jumpstart the docking engine. To do so, add the below script to the END of your page, right above the tag:

<script type="text/javascript">

var dock0=new dockit("dockcontent0", 0);
var dock1=new dockit("dockcontent1", 10);

</script>

Don't forget ! Before you use the scripts (not css) you must encode it !


Readmore »