This post will describe about some techniques to comment a blogger site with DHTML content. especially dedicated to Ifinder
DHTML is nothing but Dynamic HTML and which is the combination of HTML, Javascript, CSS, HTML DOM. As we discussed in HTML comments for Blogger site post, using NCcode we can post HTML contents which gives you customized style of comments. Since external javascript are not secure, though NCcode recognize javascript, it will not accept external javascript. But javascript can be used without functions and variables.
below are the few examples for including javascripts in blogger comments(for non-techies please replace the highlighted parts with your images.)
Effect: on click, image toggle
NCcode:
〈img onclick="if (this.src=='http://www.w3schools.com/dhtml/bulboff.gif'){this.src='http://www.w3schools.com/dhtml/bulbon.gif';}else{this.src='http://www.w3schools.com/dhtml/bulboff.gif';}" border="0" src="http://www.w3schools.com/dhtml/bulboff.gif" width="100" height="180" /〉
Effect: Anchor tag on particular pixel(Map effect)
NCcode:
〈img src="http://www.w3schools.com/jsref/planets.gif" width="145" height="126" usemap="#planetmap" /〉〈map name="planetmap"〉 〈area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="http://www.w3schools.com/images/venglobe.gif" /〉 〈/map〉
Effect: Hide/unhide the comments
〈input type="button" value="Hide text" onclick="document.getElementById('pic').style.visibility='hidden'" /〉〈input type="button" value="Show text" onclick="document.getElementById('pic').style.visibility='visible'" /〉
〈p id="p1"〉you can hide me.〈/p〉
Effect:mouse over enlarge the image
NCcode:
〈img id="image" src="http://www.w3schools.com/dhtml/bulbon.gif" onmouseover="this.width='200';this.height='360';" onmouseout="this.width='100';this.height='180';" width="100" height="180" /〉
If you notice you would have found one thing that is javscript can be included in events like onMouseout, onMouseover, Onclick... you can develop complex javascripts with in events and you can make the effect in blogger comments. If you use image toggling effect, then it would reduce your page loading time comparing to large images
Suggestion for Blog owner:
If you are good in javascript, then allow the javascripted comments while moderating your blog comments. If not Please don't allow any javascripted comments it may have span links.
Reference:W3shools
DHTML is nothing but Dynamic HTML and which is the combination of HTML, Javascript, CSS, HTML DOM. As we discussed in HTML comments for Blogger site post, using NCcode we can post HTML contents which gives you customized style of comments. Since external javascript are not secure, though NCcode recognize javascript, it will not accept external javascript. But javascript can be used without functions and variables.
below are the few examples for including javascripts in blogger comments(for non-techies please replace the highlighted parts with your images.)
Effect: on click, image toggle
NCcode:
〈img onclick="if (this.src=='http://www.w3schools.com/dhtml/bulboff.gif'){this.src='http://www.w3schools.com/dhtml/bulbon.gif';}else{this.src='http://www.w3schools.com/dhtml/bulboff.gif';}" border="0" src="http://www.w3schools.com/dhtml/bulboff.gif" width="100" height="180" /〉
Effect: Anchor tag on particular pixel(Map effect)
NCcode:
〈img src="http://www.w3schools.com/jsref/planets.gif" width="145" height="126" usemap="#planetmap" /〉〈map name="planetmap"〉 〈area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="http://www.w3schools.com/images/venglobe.gif" /〉 〈/map〉
Effect: Hide/unhide the comments
you can hide me.
NCcode:〈input type="button" value="Hide text" onclick="document.getElementById('pic').style.visibility='hidden'" /〉〈input type="button" value="Show text" onclick="document.getElementById('pic').style.visibility='visible'" /〉
〈p id="p1"〉you can hide me.〈/p〉
Effect:mouse over enlarge the image
NCcode:
〈img id="image" src="http://www.w3schools.com/dhtml/bulbon.gif" onmouseover="this.width='200';this.height='360';" onmouseout="this.width='100';this.height='180';" width="100" height="180" /〉
If you notice you would have found one thing that is javscript can be included in events like onMouseout, onMouseover, Onclick... you can develop complex javascripts with in events and you can make the effect in blogger comments. If you use image toggling effect, then it would reduce your page loading time comparing to large images
Suggestion for Blog owner:
If you are good in javascript, then allow the javascripted comments while moderating your blog comments. If not Please don't allow any javascripted comments it may have span links.
Reference:W3shools
〈input type="button" value="Hide text" onclick="document.getElementById('p1').style.visibility='hidden'" /〉〈input type="button" value="Show text" onclick="document.getElementById('p1').style.visibility='visible'" /〉
ReplyDelete〈p id="p1"〉Test comment.〈/p〉
Thanking you very much. Wondered with admiration. And also consideration for Page Load Time and precautions.
ReplyDeleteHope and request keep going much more.
With all regards and full appreciations.
ReplyDeleteLearning and tried to get ' on click ' effect. Not yet got. Again try and report you back on ok.
ReplyDeleteThank You again with all regards.
GOT It. So Wonderfully worked.(credit of code mentioned at the picture in comments.) Many many Thanks. So fine and cool. learning for other Pictures/applications of the same. Couldn't it be without you. Again with thanks and regards.
ReplyDeleteWorking very very fine, cool and amazing. Rare to find. Also so flexible to get required pictures and Sizes. Learning and using with enthusiasm.
ReplyDeleteThanking you again with all regards.
This working very very awesomely superb. Many may thanks with all regards.
ReplyDeleteAny Way/Code to ' Edit Blogspot blog Published Comments ' ? ( similar to ' WP Ajax edit comments) - Enough only by Admin.
very utility to Purify Published Comments. - SOSly for me lot to edit broken links.
Again Again Many Many Thanks and all Rehads.
Hope and Request, Please ?
great!
ReplyDeletethanks!
This DHTML working so awesome and working Fine.
ReplyDeleteAny more Help, Please?
Any Way to insert OnClick Toggle Animated images in blogger Comment ?
With all Regards and Thanking You again and again.
Sir. This DHTML working awesome. And Thanking You Very much.
ReplyDeleteHope and Request some more Help, Please ?
Any way to post Animations (OnClick Toggle or otherwise) in Blogger Comments.
With all Regards and Thanking You again.
Sir.
ReplyDeleteThe DHTML for OnClick Toggle Pictures in my Blog Comments now stopped working.
Using FireFox. All previous pictures gone.
Any Way out, Please.
Being a part of google drive projects, google has depreciated it's other host applications. which had affected the Nccode scripting. Please follow the below new link to update your Blogs.
Deletehttp://macrolayer.blogspot.com/p/nccode.html
Sir.
ReplyDeleteNo, Please.
In this Comments also, DHTML entry of April 22, 2012 at 1:15 PM Not Showing, Please.
Help, Please.
Hey,
DeleteThat was nothing but the image was removed from the w3school server. I will correct it in soon with new image. However the script is running fine
Sir.
ReplyDeleteSUB:DHTML for OnClick Toggle Pictures
Thank You. Thank You.
The Code is exciting and Worked well with it.
Thank You For the code being updated
But, Sir, what about Already Published and disappeared.(more Important)
Thanking You once again for your kindness
since this issue raised due to host location, Nothing to do with the script.for disappeared images. In future avoid using third party images to avoid un notified degradation
DeleteSir.
ReplyDeleteDHTML OnClick Toggle Pictures.
Thanking You.
Not only the Third Party Pictures - All Total DHTML Pictures Disappeared - But Picture Comments for Blogger still Working very Fine.
DHTML Script So Fine and Exiting - But Some thing may be with Blogger or W3Schools - Seeking a remedial Script/code to gain disappeared pictures.
Thanking You again and Sorry for inconvenience.
With Regards.
Sir.
ReplyDeleteThank You very much for the above exiting DHTML OnClick picture Code.
NOW, the old disappeared DHTML pictures are being displayed.
Thanks very much to you, Google Product Forum and Blogger Support.
Above DHML picture being used again and working; by replacing "dhtml/bulboff" by "js/pic_bulboff". (The url from Google Image Bulboff)
Hope and Request for more ventures from You, Sir.
With All Regards.
Sir.
ReplyDelete( commenting here as further comments not being allowed at ' Picture Comments for blogger', please)
Awesome and Amazing your code ' Picture Comments for blogger'. It Even allowing iframe
Thanking You again with regards.
P.S.
ReplyDeleteSir.
Any code, Please, that to be placed in my blog HTML to rectify - Comment Related Gadgets (eg., Latest Comments) in my blog working and displaying/retrieving comments in First Page of comments (ie.,first 200) only, when clicked. My blog having more than 200 comments.
Hope and Request a Way-Out from You, Please.
With All Regards and Thanking You again.
〈input type="button" value="Click to see magic" onclick="window.history.pushState('page2', 'Title', '/MrinmoyDas');" /〉Thanks, it's a good content to learn!
ReplyDelete〈body onload="window.history.pushState('page2', 'Title', '/Mrinmoy')"〉 〈/body〉
ReplyDelete〈input type="button" value="Hide text" onclick="document.getElementById('pic').style.visibility='hidden'" /〉〈input type="button" value="Show text" onclick="document.getElementById('pic').style.visibility='visible'" /〉
ReplyDelete〈p id="p1"〉you can hide me.〈/p〉
〈div style="text-align: center;"〉
ReplyDelete〈a href="http://4.bp.blogspot.com/-gflVuWSJlAI/VSlgxQpI1vI/AAAAAAAADt8/qW_Q3Fi0yHw/s1600/sina10.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"〉〈img border="0" src="http://4.bp.blogspot.com/-gflVuWSJlAI/VSlgxQpI1vI/AAAAAAAADt8/qW_Q3Fi0yHw/s1600/sina10.gif" /〉〈/a〉
〈/div〉
khonsamun blogspot :
Political Poetry, Thai
"...แลซึ้ง...ซึ่งสำเนียง รู้สึกเสียง ลึกภายใน...สู่รู ทวารไหล รินสู่ไต ตับซับซึม"