content top

2010-08-06

බ්ලොගයේ Shout Box එක Hide වන ලෙස සකසන විදිය

මේ ක්‍රමයට නම් කවුරුත් කැමති වෙයි.. මම හිතන විදියට සිංහල බ්ලොග්ස් ලියන අය මේ ගැන දන්නේ නැහැ. මම දැක්කා ගොඩක් අය Shout Box එකක් දාගෙන ඉන්නවා. කොහොමද මේ Box එක Hide වීමට සහ Show වෙන ආකාරයට දැම්මොතින්. ලස්සනයිනේ වැඩේ. ඉඩත් ඉතුරුයිනේ. මේක දාගත්තයින් පස්සේ Shout Box කියන බොත්තම් කොටන් එක විතරයි තියෙන්නේ. එක පාරක් කෙ‍ටුවම Show වෙනවා. ආපහු කෙ‍ටුවම Hide වෙනවා. ඉතිං මම කියලා දෙන්නම් මේක කරන විදිය. එකක් හදාගත්තේ නැත්තම් මෙන්න මෙතනින් හදාගන්න. මම දාගත්ත එකත් බලන්නකෝ.


මුලින්ම බ්ලොගේට Log වෙන්නකෝ. ඊට පස්සේ Design>Page Elements>Add Gadget>HTML/Java Script ගන්න. දැන් මේ Code එක දාලා Save කරලා බලන්නකෝ.


<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://3.bp.blogspot.com/_LZtXSNcp76A/SzzN08B1K5I/AAAAAAAAA0U/QT4rY6-FhI8/s320/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>


<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

Shout Box එකේ Code එක මෙතනට දාන්න

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>


දැන් Save කරගෙන බලන්නකෝ. හොදයි නම් කොමන්ට් එකක් දාලම යන්න හොදේ. දවස් දෙකකින් උසස් පෙළ තියාගෙනයි මේ ලියන්නේ.. කම්මැලියි වගේ නම් Shout Box එකේ වත් මොනා හරි කොටලා යන්නකෝ.

1 ප්‍රතිචාර:

Post a Comment

content top