tag:blogger.com,1999:blog-855230646197904656Thu, 29 Aug 2024 23:10:45 +0000Asp.netBlogspotFacebookHtml / Javascript/ CSShttp://lets-code.blogspot.com/noreply@blogger.com (Jashwant Singh Chaudhary)Blogger4125tag:blogger.com,1999:blog-855230646197904656.post-2971935758349827035Thu, 21 Oct 2010 05:18:00 +00002010-10-21T10:57:51.160+05:30Html / Javascript/ CSSEver felt a need to change color, height on any style of alt tag ??<br /> <br /> Before going further, let me clear you one thing. alt is 'content' not 'presentation'.As such it cannot be styled simply.We need to apply little bit of hack in it.<br /> <br /> So,&nbsp;<i><b> <span style="color: #38761d;">Lets Code...</span></b></i><br /> <br /> Put a wrapper around the img tag in which you are using alt attribute and style that wrapper. We can use &lt;style&gt; or &lt;div&gt; tag to wrap the img tag.<br /> <br /> <br /> <a name='more'></a><br /> <br /> Here's the code.<br /> <br /> <pre class="brush: html">&lt;span style='color:red;height:100px;width:200px'&gt; &nbsp;&nbsp;&nbsp; &lt;img alt='this is styled alt' src='xyz.jpg' /&gt; &lt;/span&gt; </pre><br /> That's all. Enjoy...Happy Coding...http://lets-code.blogspot.com/2010/10/styling-alt-attribute-of-img-tag.htmlnoreply@blogger.com (Jashwant Singh Chaudhary)0tag:blogger.com,1999:blog-855230646197904656.post-3112507352568735291Wed, 29 Sep 2010 14:42:00 +00002010-09-29T20:31:13.551+05:30Asp.netTo send a email from asp.net you need to follow these steps...<br /><br />We use <b>System.Net.Mail</b> namespace to send email. Without going into details, lets have a simple working code to send emails through asp.net via two most popular smtp mail servers.<br /><br /><u><b>Gmail:</b></u><br /><br /><pre class="brush: csharp"><br />try<br /> {<br /> MailMessage mail = new MailMessage(); //using System.Net.Mail namespace<br /> mail.To.Add("xyz@yahoo.com"); //Enter reciever's email address<br /> mail.From = new MailAddress("abc@gmail.com"); //Enter sender's email address<br /> mail.Subject = "Testing mail...";<br /> mail.Body = @"Lets-code ! Lets-code to make it simpler";<br /> mail.IsBodyHtml = true; //Body of mail supports html tags<br /> SmtpClient smtp = new SmtpClient();<br /> smtp.Host = "smtp.gmail.com";<br /> smtp.Port = 587;<br /> smtp.Credentials = new System.Net.NetworkCredential("abc@gmail.com", "pwd");<br /> // Your gmail username and password <br /> smtp.EnableSsl = true; //Gmail uses a encrypted connection<br /> smtp.Send(mail);<br /> Response.Write("Mail Sent Successfully");<br /> }<br /><br />catch(Exception ex)<br /> { <br /> Response.Write(ex.Message);<br /> }<br /><br /></pre><br /><br /><a name='more'></a><br /><br /><u><b>Yahoo:</b></u><br /><br />Yahoo's Smtp host name is smtp.mail.yahoo.com. It uses port 25 and an unsecure connection. So, considering these, here's a code for yahoo.<br /><br /><pre class="brush: csharp"><br /> try <br /> { <br /> MailMessage mail = new MailMessage();<br /> mail.To.Add("xyz@gmail.com");<br /> mail.From = new MailAddress("abc@yahoo.com");<br /> mail.Subject = "This is subject of your mail";<br /> string Body = @"Its the body of your mail";<br /> mail.Body = Body;<br /> mail.IsBodyHtml = true;<br /> SmtpClient smtp = new SmtpClient();<br /> smtp.Host = "smtp.mail.yahoo.com";<br /> smtp.Port = 25;<br /> smtp.Credentials = new System.Net.NetworkCredential("abc@yahoo.com","pwd");<br /> // Your yahoo username and Password<br /> smtp.EnableSsl = false; // SSL is disabled<br /> smtp.Send(mail);<br /> Response.Write("Mail Sent Successfully");<br /> }<br /><br />catch (Exception ex)<br /> { <br /> Response.Write(ex.Message);<br /> }<br /></pre><br /><br /><div style="color: rgb(102, 0, 0);"><b><i>Yahoo appends its advertisements in your mail. So its better to use gmail.</i></b></div><br /><br /><u><b>Here's a list of other smtp mail servers:</b></u><br /><br /><ul><li><b>Hotmail Outgoing Mail Server (SMTP)</b> - smtp.live.com (SSL enabled, port 25)</li></ul><br /><ul><li><b>Yahoo Plus Outgoing Mail Server (SMTP)</b> - plus.smtp.mail.yahoo.com (SSL enabled, port 465, use authentication)</li></ul><br /><ul><li><b>MSN Outgoing Mail Server</b> - smtp.email.msn.com (uses authentication)</li></ul><br /><ul><li><b>Netscape Internet Service Outgoing Mail Server</b> - smtp.isp.netscape.com (port 25, uses a secure SSL connection)</li></ul><br />If you want to mail from your own smtp mail server, just change the respective host,port.Check if your mail server supports SSL connection and enable/disable it accordingly.http://lets-code.blogspot.com/2010/09/send-email-from-yahoo-gmail-or-your.htmlnoreply@blogger.com (Jashwant Singh Chaudhary)0tag:blogger.com,1999:blog-855230646197904656.post-4539315501332408265Sun, 26 Sep 2010 14:08:00 +00002010-09-27T01:19:09.359+05:30Blogspot<div style="color: #990000;"><br /> <i><b>Need to display code in your blog or website like the html code given below ?? </b></i></div><br /> <br /> <pre class="brush: html">&lt;html&gt; &lt;body&gt; &lt;div&gt; Hi, I am html code &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </pre><br /> <br /> Or a C# code<br /> <br /> <pre class="brush: csharp">using system; protected string func() { Response.WriteLine("Hi from C# code"); } </pre><br /> <br /> <br /> Pretty nice formatting and show-off . Isn't it ? You too can do this in some simple steps.<br /> Just follow this simple copy-paste mechanism step by step.<br /> <br /> <br /> <br /> <a name='more'></a><br /> <br /> <br /> <br /> <center style="color: #073763;"><span style="font-size: x-large;"><u><b>Let's Code...</b></u></span></center> <br /> <br /> <div style="color: #0c343d;"><br /> <span style="font-size: large;"><u>Step 1:</u> <span style="color: black;">Adding Syntax Highlighter to your blog.</span></span></div><br /> <br /> <span style="font-size: large;"><span style="color: black;"> </span></span><br /> <b><br /> </b><br /> <b>(a)Add some css and javascript </b><br /> Place these css links and javascripts between &lt;head&gt; &amp; &lt;/head&gt; section of your blog.<br /> <br /> <pre class="brush: html">&lt;link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/&gt; &lt;link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/&gt; &lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/&gt; &lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'/&gt; </pre><br /> <br /> <b>(b) Setup Autoloader </b><br /> Setup autoloader.js javascript for dynamic loading of brushes so that only those brushes are loaded which are being used by the codes. It saves a lot of loading time of page.<br /> <br /> <pre class="brush: js">&lt;script language='javascript'&gt; function path() { var args = arguments, result = []; for(var i = 0; i != (args.length-1); i++) result.push(args[i].replace('@','http://alexgorbatchev.com/pub/sh/current/scripts/')); return result }; &lt;/script&gt; </pre><br /> <br /> (c) <b>Call brushes to highlight code</b><br /> Put the following code to include all brushes and highlight of your codes in the given page.Insert the script below just above &lt;/body&gt; tag.<br /> <br /> <br /> <pre class="brush: js">&lt;script type="text/javascript"&gt; SyntaxHighlighter.config.bloggerMode = true; // If you are not using blogger, switch it to 'false'. //i.e. SyntaxHighlighter.config.bloggerMode = false; SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf'; SyntaxHighlighter.autoloader.apply(null, path( 'applescript @shBrushAppleScript.js', 'actionscript3 as3 @shBrushAS3.js', 'bash shell @shBrushBash.js', 'coldfusion cf @shBrushColdFusion.js', 'cpp c @shBrushCpp.js', 'c# c-sharp csharp @shBrushCSharp.js', 'css @shBrushCss.js', 'delphi pascal @shBrushDelphi.js', 'diff patch pas @shBrushDiff.js', 'erl erlang @shBrushErlang.js', 'groovy @shBrushGroovy.js', 'java @shBrushJava.js', 'jfx javafx @shBrushJavaFX.js', 'js jscript javascript @shBrushJScript.js', 'perl pl @shBrushPerl.js', 'php @shBrushPhp.js', 'text plain @shBrushPlain.js', 'py python @shBrushPython.js', 'ruby rails ror rb @shBrushRuby.js', 'sass scss @shBrushSass.js', 'scala @shBrushScala.js', 'sql @shBrushSql.js', 'vb vbnet @shBrushVb.js', 'xml xhtml xslt html @shBrushXml.js', 'xml @shBrushXml.js' )); SyntaxHighlighter.all() &lt;/script&gt; </pre><br /> <br /> <br /> <br /> <br /> <div style="color: #0c343d;"><br /> <span style="font-size: large;"><u>Step 2:</u> <span style="color: black;">Embed syntax highlighter in your post.</span></span><br /> <span style="font-size: large;"></span></div><br /> <br /> When writing a new post, you need to use &lt;pre&gt; tag in the post. The code of your post needs to placed between the &lt;pre&gt; and &lt;/pre&gt; tags. You have to add specific brushes by applying class attributes.<br /> <br /> e.g.<br /> &lt;pre class="brush: html"&gt;<br /> <br /> &lt;body&gt;<br /> &lt;div&gt; Hi, I am html code &lt;/div&gt;<br /> &lt;/body&gt;<br /> &lt;/html&gt;<br /> <br /> &lt;/pre&gt;<br /> <br /> <br /> <br /> Similarly for javascript your brush will be js or javascript or jscript.<br /> So, post goes like this<br /> <br /> &lt;pre class="brush: js"&gt;<br /> <br /> Javscript code<br /> <br /> &lt;/pre&gt;<br /> <br /> <br /> A complete list of brushes can be found from <a href="http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/" target="_blank">here</a><br /> <br /> <div style="color: #0c343d;"><br /> <u><span style="font-size: large;">Customization:</span></u></div><br /> <br /> Syntax Highlighter offer a great deal of customization.<br /> <br /> e.g.<br /> &lt;pre class="brush: js; ruler: true; gutter: false; toolbar: false; collapse: true; auto-links: false; smart-tabs: false; first-line: 10; highlight: [2, 4, 6]"&gt;<br /> javascript code goes here..<br /> &lt;/pre&gt;<br /> <br /> There are some global settings also which should be called before SyntaxHighlighter.all(); in step 1(c)<br /> <br /> SyntaxHighlighter.defaults['gutter'] = false;<br /> SyntaxHighlighter.defaults['smart-tabs'] = false;<br /> .<br /> .<br /> SyntaxHighlighter.all();<br /> <br /> A complete list of customization can be found <a href="http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/" target="_blank">here</a>.<br /> <br /> <u><b>Themes:</b></u> SyntaxHighlighter 2.0 introduced custom CSS themes.You can switch to different themes by just replacing the default theme (<a href="http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/default.html" target="_blank">shThemeDefault.css)</a> with desired theme.You just need to change a css file.<br /> <br /> Replace this line<br /> <br /> <pre class="brush: html">&lt;link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/&gt;</pre><br /> with<br /> <br /> <pre class="brush: html">&lt;link href='http://alexgorbatchev.com/pub/sh/current/styles/{theme name}' rel='stylesheet' type='text/css'/&gt; </pre><br /> <br /> where {theme name} can be<br /> <a href="http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/django.html" target="_blank">shThemeDjango.css</a>,<br /> <a href="http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/eclipse.html" target="_blank">shThemeEclipse.css</a>,<br /> <a href="http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/emacs.html" target="_blank">shThemeEmacs.css</a>,<br /> <a href="http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/fadetogrey.html" target="_blank">shThemeFadeToGrey.css</a>,<br /> <a href="http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/midnight.html" target="_blank">shThemeMidnight.css</a> or<br /> <a href="http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/rdark.html" target="_blank">shThemeRDark.css</a><br /> <br /> (Click on themes to feel their looks)<br /> <br /> For example, for RDark theme, your code goes like this,<br /> <pre class="brush: html">&lt;link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/&gt;</pre>http://lets-code.blogspot.com/2010/09/syntax-highlighter-post-code-snippets.htmlnoreply@blogger.com (Jashwant Singh Chaudhary)0tag:blogger.com,1999:blog-855230646197904656.post-4178482448270146343Mon, 20 Sep 2010 11:05:00 +00002010-09-27T01:20:29.085+05:30Facebook<i><b>So, you too want your users to comment from facebook id ?</b></i><br /> <span style="font-size: large;"><i> </i></span><br /> <div style="color: #0c343d; text-align: center;"><span style="font-size: x-large;"><i>Lets code...</i></span></div><br /> Below is a tutorial to integrate <a href="http://developers.facebook.com/docs/reference/plugins/comments">Facebook Comment Plugin</a> to your blogspot blog.<br /> <i><br /> Follow these simple steps and let Facebook Comment Plugin dance on your finger tips.</i><br /> <div style="color: #0c343d; font-family: Georgia,&quot;;"><span style="font-size: large;"><b><br /> </b></span></div><div style="color: #0c343d; font-family: Georgia,&quot;;"><span style="font-size: large;"><u>Step 1:</u> Create a facebook application first.</span></div><br /> Dont worry, you need not to code for this. Just go to this page <a href="http://developers.facebook.com/setup/">Create Facebook Application</a>.<br /> Verify your facebook account by credit card or mobile phone.<br /> (Though this whole verification thing has a bug. But hope, facebook will recover from it soon )<br /> <br /> Then click <b style="background-color: #ececec; border: 1px solid rgb(153, 153, 153); color: #333333; margin: 2px; padding: 2px;">+ Set Up New Application </b><br /> Enter your <span class="IL_AD" id="IL_AD4">application</span> name<i> (type your blog name or anything you want) </i><br /> Check I agree and click <b style="background-color: #3b5998; border: 1px solid rgb(14, 31, 91); color: white; margin: 2px; padding: 2px;">Create Application</b><br /> <br /> <i>Congratulations, you have just created a facebook application.</i><br /> <br /> After creating application, go to 'Edit Settings' .<br /> Go for 'Website' tab at left tabs-list.<br /> In Site URL, Enter url of your blog ( as lets-code.blogspot.com)<br /> Click on <b>SAVE CHANGES.</b><br /> <br /> <br /> <br /> Copy the app-id (circled in the picture below)<br /> <br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXnjTGMT5CHY_yDPdIkct9r5aA1JC5fGewlsJlbsuJH_6uui-spsVs7WZew_-yTH-lrQqeWzqybelxw68YJ8EElNMVPRWX0jd_WimvIfUnkRwRLoFH7Rgc-qPbsk9q3bY4nxa1cXlT2qu5/s1600/app-id.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXnjTGMT5CHY_yDPdIkct9r5aA1JC5fGewlsJlbsuJH_6uui-spsVs7WZew_-yTH-lrQqeWzqybelxw68YJ8EElNMVPRWX0jd_WimvIfUnkRwRLoFH7Rgc-qPbsk9q3bY4nxa1cXlT2qu5/s400/app-id.PNG" width="400" /></a><br /> <br /> <a name='more'></a><br /> <br /> <br /> <div style="color: #0c343d; font-family: Georgia,&quot;;"><span style="font-size: large;"><u>Step 2:</u> Integrate Facebook Comment Plugin to your blogspot</span></div><br /> <br /> Login to your blogger account.<br /> Navigate to <b>layout &gt;&gt; edit html &gt;&gt;</b> and check <b>Expand Widget Templates</b><br /> <div style="color: #351c75;"><br /> </div><div style="color: #351c75;"><u><b>Add facebook xmlns attribute:</b></u></div><br /> Search for: <span style="color: green;">&lt;html</span> tag and add facebook xmlns attribute at the last of html tag as given below:<br /> <br /> &lt;html expr:dir='data:blog..............2005/gml/expr' <span style="color: red;">xmlns:fb='http://www.facebook.com/2008/fbml'</span> &gt;<br /> <br /> <div style="color: #351c75;"><u><b>Add Open Graph protocol meta tags:</b></u></div><br /> Search for &lt;head&gt; section and after it, put following code:<br /> <br /> <pre class="brush: html">&lt;meta content='MY-SITE-NAME' property='og:site_name'/&gt; &lt;meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/&gt; &lt;meta content='YOUR-APP-ID' property='fb:app_id'/&gt; &lt;meta content='YOUR-FACEBOOK-PROFILE-ID' property='fb:admins'/&gt; &lt;meta content='article' property='og:type'/&gt; </pre><br /> Change MY-SITE-NAME with the one you want to appear when a user likes a page.(Your Blog's name )<br /> Change http://google.../blogger_logo.gif with your blog logo, or remove the all tag if you don't want it.<br /> Change YOUR-APP-ID with your appplication id (app-id).<br /> Change YOUR-FACEBOOK-PROFILE-ID with your own facebook user profile ID.<br /> <div style="color: #351c75;"><u><b><br /> Add Facebook javascript sdk:</b></u></div><br /> <b><span style="font-weight: normal;">Search for &lt;body&gt; tag and </span></b>after it add the following code:<br /> <br /> <br /> <pre class="brush: js">&lt;div id="fb-root"&gt;&lt;/div&gt; &lt;script&gt; window.fbAsyncInit = function() { FB.init({ appId : 'Your App Id',//the one you've copied from facebook application page status : true, // check login status cookie : true, xfbml : true // parse XFBML }); }; (function() { var e = document.createElement('script'); e.src = document.location.protocol +'//connect.facebook.net/en_US/all.js'; e.async = true; document.getElementById('fb-root').appendChild(e); }()); &lt;/script&gt;</pre><br /> <br /> <div style="color: #0c343d; font-family: Georgia,&quot;;"><span style="font-size: large;"><u>Step 3:</u> Place facebook comment box in your blog</span></div><br /> Now, find &lt;data:post.body/&gt; and after it post following code.<br /> <br /> <pre class="brush: html">&lt;b:if cond="data:blog.pageType == 'item' &gt; &lt;b:if cond="data:blog.pageType != 'static_page' &gt; &lt;fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid="data:post.id" &gt; &lt;/fb:comments&gt; &lt;/b:if&gt; &lt;/b:if&gt;</pre>Click <b style="background-color: #ff7700; border: 1px solid rgb(153, 51, 0); color: white; margin: 2px; padding: 2px;">Save Template </b>, and start commenting in facebook style...<br /> <span style="color: white;"></span><br /> <br /> <u><br /> </u><br /> <div style="text-align: center;"><u><span style="color: #660000; font-size: large;">Note:</span></u><span style="font-size: large;"> </span></div><ul><li>As two comment boxes seems quite odd, if you want to disable default commenting system, Navigate to <i><b>settings &gt;&gt; comments </b></i>and next to comments field choose <b>Hide</b>, then scroll downand then click<b style="background-color: #ff7700; border: 1px solid rgb(153, 51, 0); color: white; margin: 2px; padding: 2px;"> Save Settings</b></li> <li>You can also add other facebook plugins (like button, acitivity feed,recommedations etc) from <a href="http://developers.facebook.com/plugins">Facebook Plugins</a>.</li> </ul>http://lets-code.blogspot.com/2010/09/facebook-comments-in-your-blogger.htmlnoreply@blogger.com (Jashwant Singh Chaudhary)2