73D41416194E8A7C390936971FB2B74B Chira Sathi

Tuesday, October 11, 2011

Add a reply option to blogger comments like Wordpress



STEP #1
Log in to Blogger, go to Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:



<b:include data='comment' name='commentDeleteIcon'/> </span>
Now copy one of the below codes and paste it just after the above line.




Code:<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR BLOG ID HERE&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'><img alt='Reply To This Comment' src='YOUR REPLY BUTTON IMAGE URL HERE'/></a></span>



Now, in the above code replace the texts in BLUE with your "Blog ID" and the texts in RED with the "Reply Button Image Url".

Now click Save Template




Important ! 
In order to make this work you must add your blog Id .
What is your blog ID??
Simply go to your layout page, posting page or any of the pages and copy your I.D. from the address bar at the top of the page.



Replace URL of image with any image of your choice or you can choose one from below- 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg5LQqo1G8MyK_mrgfV8d_NnGDuq8yulRoqaweFv8vaJ7EVhfDwxzTzan4yPdLB3ho8SX2rXrjaTpE83UlDarq9JDtO-Dv3XwlcRYBZXzo4Mny3D5Ptf-QqOOfrSZq6aomb7xuEBBVRxGp/s320/reply01.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtdwEZPb5MI6vSnjbDg0Ylm-XSgLw7Ll_CemVNqzctQpuKlDGf0b2tudafITkgpi-aNpvWiYfqq3Gwl9Jz_fbxWBknOPwq6sMs1gRMBeQBdFYYZLDmN9qOlAPkfhJGXNzMvRJtjp3Emxsw/s320/reply03.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW7gdh4WmLipMjmfzHYl4RQetXB2Wt2mRtEeenjZDaKHAiGXH9jmPyfs7GCoFfrHnKzuwNjFdXKRKl7IEYT2uJ_ZyBoFQedMf9l2nq_3bs6BlSYP1FPUqlPHgva29iptl94x78WgCIkMoq/s320/reply04.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMsEi_pjz4z6c54TTXmyn48HUPcaJ6mDI_lb9kJX0X5slqxalD2vNVEAiifiOPbCBHN_6Y8jC3DZbcXmdrFQ2nup5wXenWTo8bmK0NJkYCo5QO-Qdak5yJHEfq2yLqdbTR0bi2jc0wJspk/s320/reply02.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7n0B5lyTliduYLn8UaXxNdUfm-0rD2tZC_coW6PGODWZyMK2fTcLMAylovNDrF60JAHH_y2Kd5DAD1uCGK8RT0ez386OfFXWX8086SjJ3tZrzbiMP3RngMPg3N0v2WyD8-PoZVr_rkdYJ/s320/reply05.png

Add Floating Hover Text - Which Trails Mouse Cursor

If you want to show any text like "Welcome Here" or "Sign My Guestbook"or "Your Text Here", which follows the mouse cursor (trail text effect), like the one displayed in the image


STEP #1 Log in to Blogger, go to Layout






page-elements

Add a Gadget of HTML/JavaScript type. 



image
Then add this code in to it:.



<script language="javascript">





// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.

var text='YOUR TEXT HERE...';



var delay=40; // SPEED OF TRAIL

var Xoff=0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)

var Yoff=-30; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)

var txtw=14; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES

var beghtml='<font color="#00436e"><b>'; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.

var endhtml='</b></font>'; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.



//********** NO NEED TO EDIT BELOW HERE **********\\



ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;

ie4 = (document.all && !document.getElementById)? true : false;

ie5 = (document.all && document.getElementById)? true : false;

ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;

var txtA=new Array();

text=text.split('');

var x1=0;

var y1=-1000;

var t='';



for(i=1;i<=text.length;i++){

t+=(ns4)? '<layer name="txt'+i+'" top="-100" left="0" width="'+txtw+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';

t+=beghtml+text[i-1]+endhtml;

t+=(ns4)? '</layer>' : '</div>';

}

document.write(t);



function moveid(id,x,y){

if(ns4)id.moveTo(x,y);

else{

id.style.left=x+'px';

id.style.top=y+'px';

}}



function animate(evt){

x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);

y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);

}



function getidleft(id){

if(ns4)return id.left;

else return parseInt(id.style.left);

}



function getidtop(id){

if(ns4)return id.top;

else return parseInt(id.style.top);

}



function getwindowwidth(){

if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;

else return window.innerWidth+pageXOffset;

}



function movetxts(){

for(i=text.length;i>1;i=i-1){

if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){

moveid(txtA[i-1],0,-1000);

moveid(txtA[i],0,-1000);

}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));

}

moveid(txtA[1],x1,y1);

}



window.onload=function(){

for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);

if(ns4)document.captureEvents(Event.MOUSEMOVE);

document.onmousemove=animate;

setInterval('movetxts()',delay);

}

</script>



Now click Save

Monday, October 10, 2011

Scrolling Title in Browser title bar for blogspot



One of the most common uses of JavaScript is to create a scrolling message in the browser's status line. You can create a scrolling message using the string methods you have learned in this hour.
To begin, you'll need to define the message to be scrolled. You will use a variable called msg to store the message. To begin the script, initialize the variable (feel free to choose your own text for the message):



Steps to follow:

STEP #1
Log in to Blogger -> Layout -> Edit HTML and select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template

<head>

And immediately before it, paste this code:

<script type='text/javascript'>
//<![CDATA[
msg = "
==>triml.blogspot.com<==";
msg = " .................................. " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>


Now click Save Template 
Best Blogger Gadgets