tag:blogger.com,1999:blog-11554759271182639752024-03-05T01:33:57.347-08:00Help me Blogging..Sandhya Hariharanhttp://www.blogger.com/profile/13372232274398900833noreply@blogger.comBlogger4125tag:blogger.com,1999:blog-1155475927118263975.post-47430831982266799842011-06-14T16:03:00.000-07:002015-09-14T04:10:39.830-07:00How to disable Right Click in your blog???<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNormal" style="color: black; line-height: 150%; text-align: justify;">
Disabling Right Click Sometimes helps against direct playgiarism. For people who want to take a little step in protecting their space , you have hit the right spot.<br />
I have had lot of people writing to me ,asking me how to go about the same... The answer is right here !!<br />
<div style="border: 1px solid black;">
<span style="font-size: large;"><u><b>Script</b></u></span><br />
<br />
<div style="color: #660000;">
<script language="JavaScript"></div>
<div style="color: #660000;">
<!--</div>
<div style="color: #660000;">
<br /></div>
<div style="color: #660000;">
//Disable right mouse click Script</div>
<div style="color: #660000;">
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive</div>
<div style="color: #660000;">
//For full source code, visit http://www.dynamicdrive.com</div>
<div style="color: #660000;">
<br /></div>
<div style="color: #660000;">
var message="<b style="color: blue;">Oops.. Guess you hit the Right Click by mistake</b>";</div>
<div style="color: #660000;">
<br /></div>
<div style="color: #660000;">
///////////////////////////////////</div>
<div style="color: #660000;">
function clickIE4(){</div>
<div style="color: #660000;">
if (event.button==2){</div>
<div style="color: #660000;">
alert(message);</div>
<div style="color: #660000;">
return false;</div>
<div style="color: #660000;">
}</div>
<div style="color: #660000;">
}</div>
<div style="color: #660000;">
<br /></div>
<div style="color: #660000;">
function clickNS4(e){</div>
<div style="color: #660000;">
if (document.layers||document.getElementById&&!document.all){</div>
<div style="color: #660000;">
if (e.which==2||e.which==3){</div>
<div style="color: #660000;">
alert(message);</div>
<div style="color: #660000;">
return false;</div>
<div style="color: #660000;">
}</div>
<div style="color: #660000;">
}</div>
<div style="color: #660000;">
}</div>
<div style="color: #660000;">
<br /></div>
<div style="color: #660000;">
if (document.layers){</div>
<div style="color: #660000;">
document.captureEvents(Event.MOUSEDOWN);</div>
<div style="color: #660000;">
document.onmousedown=clickNS4;</div>
<div style="color: #660000;">
}</div>
<div style="color: #660000;">
else if (document.all&&!document.getElementById){</div>
<div style="color: #660000;">
document.onmousedown=clickIE4;</div>
<div style="color: #660000;">
}</div>
<div style="color: #660000;">
<br /></div>
<div style="color: #660000;">
document.oncontextmenu=new Function("alert(message);return false")</div>
<div style="color: #660000;">
<br /></div>
<div style="color: #660000;">
// --></div>
<div style="color: #660000;">
</script></div>
</div>
<br />
<br />
<u><span style="font-size: large;"><b><span lang="EN-US" style="line-height: 150%;">Implementation in Blogger:</span></b></span></u></div>
<ul style="color: black;">
<li><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">Go in Design > Page Elements > Click on Add a Gadget > Select HTML/Javascript .</span><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">And paste the code there then save it.</span></li>
<li><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">Message highlighted in blue can be of your choice... Change it how you like it..</span></li>
</ul>
</div>
Sandhya Hariharanhttp://www.blogger.com/profile/13372232274398900833noreply@blogger.com7tag:blogger.com,1999:blog-1155475927118263975.post-64673895783003633052011-01-04T04:11:00.001-08:002011-01-04T04:11:37.305-08:00HIDE SHOW [+/-] Functionality<div style="font-family: Times,"Times New Roman",serif;">One of my lovely fellow blogger Sharmilee - face behind <a href="http://www.sharmispassions.com/">Sharmi's passion</a> has written this lovely post for me..Thank you Sharmilee .. You are a star. Though I have implemented this in my space , I wasnt sure how to go about writtingstep it .</div><div style="font-family: Times,"Times New Roman",serif;"><br />
</div><div style="font-family: Times,"Times New Roman",serif;">Our basic motto is to help - IT and non IT bloggers to beautify their spaces and implement this lovely functionality with ease... This functionality will help reducing clustered bullets under one header.</div><div style="font-family: Times,"Times New Roman",serif;"><br />
</div><div style="font-family: Times,"Times New Roman",serif;">I would say we can use this functionality in the following places :</div><div style="font-family: Times,"Times New Roman",serif;"><br />
</div><ul style="font-family: Times,"Times New Roman",serif;"><li><span style="color: #cc0000;">Recipe Index </span> - Pls check <a href="http://www.sharmispassions.com/2010/09/recipe-index.html">Sharmi's Recipe Index</a> or <a href="http://sandhyas-kitchen.blogspot.com/p/recipe-diary.html">Recipe Junction</a></li>
<li><span style="color: #cc0000;">Search based on ingredients</span> - Many blogs have implemented this. </li>
</ul><div style="font-family: Times,"Times New Roman",serif;">Over to Sharmilee to the rest of the post !</div><div style="font-family: Times,"Times New Roman",serif;"><br />
</div><div style="font-family: Times,"Times New Roman",serif;"><b style="color: #990000;">About Me & Behind Sharmis Passions:</b></div><div style="font-family: Times,"Times New Roman",serif;">I love working with colors especially on the web and thats why I attempt to keep my blog as well pics colorful.</div><div style="font-family: Times,"Times New Roman",serif;">I cant say I am very passionate about cooking the regular menu........a innovative recipe hunter I should admit. Just have entered the world of baking and am just loving it.Greatly interested in food photography and Sharmis Passions is a platform for all my learnings.</div><div style="font-family: Times,"Times New Roman",serif;"><br />
</div><div style="font-family: Times,"Times New Roman",serif;"><b style="color: #660000;">Why another food blog:</b></div><div style="font-family: Times,"Times New Roman",serif;"><span class="Apple-style-span" style="border-collapse: separate; color: black; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="color: #4c4c4c; font-size: 12px; line-height: 18px; text-align: justify;">Sharmis Passions - a little space for my passion for cooking and clicking!</span></span></div><div style="font-family: Times,"Times New Roman",serif;">It is one place for recipes for healthy low fat food, baked goodies, occasional festive cooking, tips on food photography, gadgets etc.</div><div style="font-family: Times,"Times New Roman",serif;"><br />
</div><br />
<div align="center" class="MsoNormal" style="color: #990000; font-family: Times,"Times New Roman",serif; line-height: 150%; text-align: center;"><span style="font-size: large;"><b><span lang="EN-US" style="line-height: 150%;">HIDE/SHOW FUNCTIONALITY</span></b></span></div><br />
<div class="MsoNormal" style="font-family: Times,"Times New Roman",serif; line-height: 150%; text-align: justify;"><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">Please check the complete implementation of Hide/Show(Expand/Collapse) at my space in recipe index to get an idea of the functionality: <a href="http://www.sharmispassions.com/2010/09/recipe-index.html">http://www.sharmispassions.com/2010/09/recipe-index.html</a></span></div><br />
<div class="MsoNormal" style="font-family: Times,"Times New Roman",serif; line-height: 150%; text-align: justify;"><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">The hide/show function can be categorized into 3 parts:</span></div><ol start="1" style="font-family: Times,"Times New Roman",serif; margin-top: 0cm;" type="1"><li class="MsoNormal" style="line-height: 150%; text-align: justify;"><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">Html Header coding</span></li>
<li class="MsoNormal" style="line-height: 150%; text-align: justify;"><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">Hide/Show Html Content</span></li>
<li class="MsoNormal" style="line-height: 150%; text-align: justify;"><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">Javascript function</span></li>
</ol><br />
<div class="MsoNormal" style="font-family: Times,"Times New Roman",serif; line-height: 150%; text-align: justify;"><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">No no its not that difficult as it sounds here goes the implementation in easy steps</span></div><br />
<div class="MsoNormal" style="color: #990000; font-family: Times,"Times New Roman",serif; line-height: 150%; text-align: justify;"><br />
<span style="font-size: large;"><b><span lang="EN-US" style="line-height: 150%;">STEP 1 : Html Header coding:</span></b></span></div><div class="MsoNormal" style="color: #990000; font-family: Times,"Times New Roman",serif; line-height: 150%; text-align: justify;"></div><div class="MsoNormal" style="font-family: Times,"Times New Roman",serif; line-height: 150%; text-align: justify;"><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">This the header which we click to show/hide and here it is ‘Bakes’</span></div><div class="MsoNormal" style="font-family: Times,"Times New Roman",serif; line-height: 150%; text-align: justify;"></div><br />
<b></b><br />
<div style="border: 0.5px dotted rgb(176, 23, 31); padding: 10px;"><b></b><br />
<b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"><div></span></b><br />
<div class="MsoNormal" style="font-family: Times,"Times New Roman",serif; line-height: 150%; text-align: justify;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"><a onclick="javascript:toggleIt(<span style="color: #339966;">'bakes'</span>)" href="javascript:void(0)">[+/-]Bakes</a></span></b></div><div class="MsoNormal" style="font-family: Times,"Times New Roman",serif; line-height: 150%; text-align: justify;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"></div><br clear="all"/></span></b></div><br />
</div><br />
<div class="MsoNormal" style="font-family: Times,"Times New Roman",serif; line-height: 150%; text-align: justify;"><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">The highlighted value in green has to be the same in ul id too(need not be ‘bakes’ it can be as per ur requirement) which is also highlighted in green below which shows the relationship between the header and hide/show content.</span></div><div class="MsoNormal" style="font-family: Times,"Times New Roman",serif; line-height: 150%; text-align: justify;"><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">This is the out put which will look in browser:</span></div><div style="font-family: Times,"Times New Roman",serif;"><br />
</div><div style="font-family: Times,"Times New Roman",serif;"><br />
</div><div class="separator" style="clear: both; font-family: Times,"Times New Roman",serif; text-align: center;"><a href="http://3.bp.blogspot.com/_y_3OQjWZfmY/TRxbfBf0ULI/AAAAAAAAKR4/7tbf-_1i6JA/s1600/hideshow.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="188" src="http://3.bp.blogspot.com/_y_3OQjWZfmY/TRxbfBf0ULI/AAAAAAAAKR4/7tbf-_1i6JA/s400/hideshow.jpg" width="400" /></a></div><div style="color: #990000;"><span style="font-size: large;"><b><span lang="EN-US" style="line-height: 150%;">STEP 2 : Hide/Show Html Content</span></b></span></div><br />
<div class="MsoNormal" style="font-family: Times,"Times New Roman",serif; line-height: 150%; text-align: justify;"><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">Here goes the content which is going to be hidden/shown</span></div><div class="MsoNormal" style="font-family: Times,"Times New Roman",serif; line-height: 150%; text-align: justify;"><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">Here I need 2 items to be shown when I click on the header ‘Bakes’ so have given 2, you can add it as per your requirement.</span></div><br />
<div style="border: 0.5px dotted rgb(176, 23, 31); padding: 10px;"><div class="MsoNormal" style="font-family: Times,"Times New Roman",serif; line-height: 150%; text-align: justify;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"><ul style="DISPLAY: none" id="<span style="color: #339966;">bakes</span>"></span></b></div><div class="MsoNormal" style="font-family: Times,"Times New Roman",serif; line-height: 150%; text-align: justify;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"><li><a style="TEXT-DECORATION: none" onmouseover="this.style.textDecoration = 'underline';" onmouseout="this.style.textDecoration = 'none';" href=" <a href="http://www.sharmispassions.com/2010/03/simple-moist-chocolate-cakewith-no-eggs.html"><span style="color: black;">http://www.sharmispassions.com/2010/03/simple-moist-chocolate-cakewith-no-eggs.html</span></a>" target="_blank">Moist Chocolate Cake</a></li></span></b></div><div class="MsoNormal" style="font-family: Times,"Times New Roman",serif; line-height: 150%; text-align: justify;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"><li><a style="TEXT-DECORATION: none" onmouseover="this.style.textDecoration = 'underline';" onmouseout="this.style.textDecoration = 'none';" href="<a href="http://www.sharmispassions.com/2010/12/eggless-vanilla-chocolate-chips.html"><span style="color: black;">http://www.sharmispassions.com/2010/12/eggless-vanilla-chocolate-chips.html</span></a>" target="_blank">Vanilla Chocochips Cupcakes</a></li></span><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"> </span></b><br />
<b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"></ul></span></b></div></div><br />
<div class="MsoNormal" style="font-family: Times,"Times New Roman",serif; line-height: 150%; text-align: justify;"><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"></span></div><div class="MsoNormal" style="font-family: Times,"Times New Roman",serif; line-height: 150%; text-align: justify;"><br />
</div><div class="MsoNormal" style="font-family: Times,"Times New Roman",serif; line-height: 150%; text-align: justify;"><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">This is how it looks in the browser when clicked on the header <b>Bakes</b>:</span></div><div style="font-family: Times,"Times New Roman",serif;"><br />
</div><div class="separator" style="clear: both; font-family: Times,"Times New Roman",serif; text-align: center;"><a href="http://4.bp.blogspot.com/_y_3OQjWZfmY/TRxcdccqQjI/AAAAAAAAKR8/_D9i7vMEtZs/s1600/hideshow1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="233" src="http://4.bp.blogspot.com/_y_3OQjWZfmY/TRxcdccqQjI/AAAAAAAAKR8/_D9i7vMEtZs/s400/hideshow1.jpg" width="400" /></a></div><div class="MsoNormal" style="font-family: Times,"Times New Roman",serif; line-height: 150%; text-align: justify;"><br />
<div style="color: #990000;"><span style="font-size: large;"><u><b>STEP 3: Javascript function</b></u></span><br />
<span style="font-size: large;"><u><b></b></u></span></div>This is the main element of the functionality.<br />
<br />
<div style="border: 0.5px dotted rgb(176, 23, 31); padding: 10px;"><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"><head></span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"><script type="text/javascript" language="javascript"></span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">function toggleIt(id) {</span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"> element = document.getElementById(id);</span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"> if (element.style.display == 'none') {</span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"> element.style.display = '';</span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"> } else {</span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"> element.style.display = 'none';</span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"> }</span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">}</span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"></script></span></b></div><b><span lang="EN-US" style="font-size: 10pt;"></head></span></b></div><br />
<div class="MsoNormal" style="color: #990000; line-height: 150%;"><u><span style="font-size: large;"><b><span lang="EN-US" style="line-height: 150%;">STEP 4 : Now for the full coding to be implemented in one go:</span></b></span></u></div><br />
<div style="border: 0.5px dotted rgb(176, 23, 31); padding: 10px;"><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"><html></span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"><head></span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"><script type="text/javascript" language="javascript"></span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">function toggleIt(id) {</span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"> element = document.getElementById(id);</span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"> if (element.style.display == 'none') {</span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"> element.style.display = '';</span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"> } else {</span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"> element.style.display = 'none';</span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"> }</span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">}</span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"></script></span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"></head></span></b></div><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"><br clear="all" style="page-break-before: always;" /> </span></b> <br />
<div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"><div></span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"><a onclick="javascript:toggleIt('bakes')" href="javascript:void(0)">[+/-]Bakes</a></span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"></div><br clear="all"/></span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><br />
</b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"><ul style="DISPLAY: none" id="bakes"></span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"><li><a style="TEXT-DECORATION: none" onmouseover="this.style.textDecoration = 'underline';" onmouseout="this.style.textDecoration = 'none';" href=" http://www.sharmispassions.com/2010/03/simple-moist-chocolate-cakewith-no-eggs.html" target="_blank">Moist Chocolate Cake</a></li></span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"><li><a style="TEXT-DECORATION: none" onmouseover="this.style.textDecoration = 'underline';" onmouseout="this.style.textDecoration = 'none';" href="http://www.sharmispassions.com/2010/12/eggless-vanilla-chocolate-chips.html" target="_blank">Vanilla Chocochips Cupcakes</a></li></span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"></ul></span></b></div><div class="MsoNormal" style="line-height: 150%;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"></html></span></b></div><br />
</div><br />
<div class="MsoNormal" style="line-height: 150%; text-align: justify;"><div style="color: #990000;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">Other attributes description:</span></b></div></div><div class="MsoNormal" style="line-height: 150%; text-align: justify;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">href="javascript:void(0)"</span></b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"> – To prevent the page from reloading when we click on the link, we should use "javaScript:void(0);" within the anchor tag.</span></div><div class="MsoNormal" style="line-height: 150%; text-align: justify;"><br />
</div><div class="MsoNormal" style="line-height: 150%; text-align: justify;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">style="TEXT-DECORATION: none"</span></b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"> – By default the links will be underlined, if we want to remove it this attribute is used</span></div><div class="MsoNormal" style="line-height: 150%; text-align: justify;"><br />
</div><div class="MsoNormal" style="line-height: 150%; text-align: justify;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">onmouseover="this.style.textDecoration = 'underline';"</span></b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"> – This is to show a difference when we mouseover on the headers</span></div><div class="MsoNormal" style="line-height: 150%; text-align: justify;"><br />
</div><div class="MsoNormal" style="line-height: 150%; text-align: justify;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">onmouseout="this.style.textDecoration = 'none';"</span></b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"> - This is to remove the underline when we mouseout on the link</span></div><div class="MsoNormal" style="line-height: 150%; text-align: justify;"><br />
</div><div class="MsoNormal" style="line-height: 150%; text-align: justify;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">href =”<a href="http://www.sharmispassions.com/"><span style="color: black;">www.sharmispassions.com</span></a>”</span></b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"> – This is to redirect to the page when we click on the link</span></div><div class="MsoNormal" style="line-height: 150%; text-align: justify;"><br />
</div><div class="MsoNormal" style="line-height: 150%; text-align: justify;"><b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">target=”_blank”</span></b><span lang="EN-US" style="font-size: 10pt; line-height: 150%;"> - To open the link in a new page </span></div><div class="MsoNormal" style="line-height: 150%; text-align: justify;"><br />
</div><div class="MsoNormal" style="line-height: 150%; text-align: justify;"><br />
</div><div class="MsoNormal" style="color: #990000; line-height: 150%; text-align: justify;"><u><span style="font-size: large;"><b><span lang="EN-US" style="line-height: 150%;">Implementation in Blogger:</span></b></span></u></div><ul><li><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">Go in Design > Page Elements > Click on Add a Gadget > Select HTML/Javascript .</span><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">And paste the code there then save it.</span></li>
</ul><div class="MsoNormal" style="line-height: 150%; text-align: justify;"><span lang="EN-US" style="font-size: 10pt; line-height: 150%;">If you want the same code as a seperate post then paste the code in New Post > Edit Html and publish it.</span></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/_y_3OQjWZfmY/TRxekKADXOI/AAAAAAAAKSA/KjG9gEC_7hg/s1600/hideshow2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="243" src="http://1.bp.blogspot.com/_y_3OQjWZfmY/TRxekKADXOI/AAAAAAAAKSA/KjG9gEC_7hg/s400/hideshow2.jpg" width="400" /></a></div><br />
<ul><li><span lang="EN-US" style="font-size: 10pt;"> For implementing Recipe Index in a page , Go to Postings > Edit Page > New Page .</span></li>
</ul><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/_y_3OQjWZfmY/TRxgL-eHBLI/AAAAAAAAKSE/OQqooQHLVnM/s1600/hideshow3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="250" src="http://1.bp.blogspot.com/_y_3OQjWZfmY/TRxgL-eHBLI/AAAAAAAAKSE/OQqooQHLVnM/s400/hideshow3.jpg" width="400" /></a></div><br />
<span lang="EN-US" style="font-size: 10pt;">Give a name for your new page , say Recipe Index and get started with your content.<i>R<span style="color: #666666;">emember to remove <html > ,<head> & their closing tags when you do it in your page.</span></i></span><br />
<br />
<span lang="EN-US" style="font-size: 10pt;"><b style="color: #990000;"></b><i></i></span><span lang="EN-US" style="font-size: 10pt;"><br />
</span></div>Sandhya Hariharanhttp://www.blogger.com/profile/13372232274398900833noreply@blogger.com4tag:blogger.com,1999:blog-1155475927118263975.post-76208585014161739522010-11-10T16:24:00.000-08:002010-11-10T16:31:54.446-08:00How to add A FAV ICON to your Blog/Website?FAV ICON are the lil icon you see next to Address Bar. It gives your website/Blog an Identity. A pictorial reprentation for your space.<br />
<br />
Simple ... just a few steps .<br />
<br />
<ul><li>Create a picture/symbol that will potray your blog using your photo software. I have used GIMP software to create my Picture SK representing Sandhya's Kitchen of size 100px * 100 px.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdwrOvYaTjzYuFxwsfEtI1TJpEL_wn49kIppPJzyYPeZ1BefDrzt_FdCeN73FhpaFGzyswbVeVjgarHLeY7Yy5-8dI6qQkE0Nu6gccaaggxr9dHL7Jjov9lPTpAnHh8W99zr5XTDEWs_WT/s1600/fav+icon.ico.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdwrOvYaTjzYuFxwsfEtI1TJpEL_wn49kIppPJzyYPeZ1BefDrzt_FdCeN73FhpaFGzyswbVeVjgarHLeY7Yy5-8dI6qQkE0Nu6gccaaggxr9dHL7Jjov9lPTpAnHh8W99zr5XTDEWs_WT/s1600/fav+icon.ico.jpg" /></a></div></li>
<li> Use the following online converter software to scale it down to 16*16 px .This is the desired size we require to upload for a fav icon.<br />
<b style="color: red;"> http://www.coolutils.com/online/image-converter/</b> </li>
<li> Using the same software convert the 16 * 16 px jpeg pic into an .Ico pic. </li>
<li> Most external picture hosts do not allow us to upload icon files.. <b style="color: red;"><a href="http://www.picpanda.com/">Pic Panda </a></b><span style="color: red;">(http://www.picpanda.com/) </span>just makes our work easy.. and uploads icon files too.<br />
Once uploaded , collect the link <br />
<b><br />
For eg : http://www.picpanda.com/images/4h96yxrufbwuw5hfsp.ico</b><br />
<br />
</li>
<li> Use them in <b style="color: red;"><br />
<lin href='Fav Icon URL'rel='shortcut icon'/></b><br />
Eg: <b><span style="color: purple;"><link href='http://www.picpanda.com/images/4h96yxrufbwuw5hfsp.ico' rel='shortcut icon'/></span></b> </li>
<li><i>Backup your HTML codes before venturing out to experiment.</i> Locate the </head> tag in your Edit HTML code. Place this code above the </head> tag and remember to save the file. </li>
Enzoy your Newly created Fav ICON .. Easy to locate in BookMarks</ul>Sandhya Hariharanhttp://www.blogger.com/profile/13372232274398900833noreply@blogger.com8tag:blogger.com,1999:blog-1155475927118263975.post-40734938921299624692010-08-14T12:28:00.001-07:002010-08-16T00:56:33.463-07:00How to create a printable version of recipe in your blog ?<ul><li>Go to Google site : <a href="http://www.sites.google.com/">http://www.sites.google.com/</a> </li>
<li>Log in with ur gmail id . Click on the Create Site.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-Dy-YRiGF-VpKyzSo6fGOmVWXz6TCEMjFXaCoPCxzFT2oRe7rrtb0NtpIqSVAtW3Q15xORk37pZIFri1lQNQqvsmaLfrOz1Fi_KmU_vSaU3uiOmGXkyHGc4jAkKC-KiYBOnN-sj8MGgjy/s1600/create+website.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-Dy-YRiGF-VpKyzSo6fGOmVWXz6TCEMjFXaCoPCxzFT2oRe7rrtb0NtpIqSVAtW3Q15xORk37pZIFri1lQNQqvsmaLfrOz1Fi_KmU_vSaU3uiOmGXkyHGc4jAkKC-KiYBOnN-sj8MGgjy/s400/create+website.jpg" width="400" /></a></div><br />
Go ahead and select ur template and fill in the required details like i have done and click on Create Site.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhue5RNvoNfxW4qBZ_24oqs6TmMWkJncEWSUbKK1Uh665hIR0k0qj6UHJ4eON4W0fr7-xdjSA4sGGecnOKxO5WsKnt-HdpsbSvzVbCwzmDKViiatgKyKvMHPat2ITk6m0UNdCoazzLKkeVb/s1600/create+website1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhue5RNvoNfxW4qBZ_24oqs6TmMWkJncEWSUbKK1Uh665hIR0k0qj6UHJ4eON4W0fr7-xdjSA4sGGecnOKxO5WsKnt-HdpsbSvzVbCwzmDKViiatgKyKvMHPat2ITk6m0UNdCoazzLKkeVb/s400/create+website1.jpg" width="400" /></a></div><br />
</li>
<li>Hurray!! Done... Isnt it v easy... </li>
<li>Just few more steps away... Now click on Create Page on the top right hand side. </li>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRSB9vhQF1h_y8YarP9TWKFk69FkUw04qz8p3OOpCrk6mkFN_kZPqwD-XkIy9yJfWrQPCrEpVI0vDyGPtN2MwtMl5zbXXC6msdJ-OxHiJGL7cxOuDDsi6CrntcZoDw5QS921-e5L_1cN71/s1600/create+page1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRSB9vhQF1h_y8YarP9TWKFk69FkUw04qz8p3OOpCrk6mkFN_kZPqwD-XkIy9yJfWrQPCrEpVI0vDyGPtN2MwtMl5zbXXC6msdJ-OxHiJGL7cxOuDDsi6CrntcZoDw5QS921-e5L_1cN71/s400/create+page1.jpg" width="400" /></a></div>
<li>Give a name for ur page : eg : Green Chutney like I have created and just go about duplicating ur recipe from ur blog. Decorate it however u like and click on Save. </li>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnevyc2DjYbmUYB2IvTQIfZCNek68GuKqXLdmKruyKPngIjFHuM3gbnRFKNn9tg2fNpPdoFBh9GOnYRdl7_8gkrgqA23EpeFspctA_of25KUtM_3qEKGxuSU-BSqpu_XnQzeynzriEnqah/s1600/created+page.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnevyc2DjYbmUYB2IvTQIfZCNek68GuKqXLdmKruyKPngIjFHuM3gbnRFKNn9tg2fNpPdoFBh9GOnYRdl7_8gkrgqA23EpeFspctA_of25KUtM_3qEKGxuSU-BSqpu_XnQzeynzriEnqah/s320/created+page.jpg" /></a></div>
<li>Copy the url from the address bar and use it to create a link in your blog , where you want to add Printable recipe.</li>
<li>Preview ur blogger page to check if u are getting the right thing.. and just go ahead and publish it.</li>
<li>Now ur readers can enjoy a printable version of your lovely space.</li>
</ul>Sandhya Hariharanhttp://www.blogger.com/profile/13372232274398900833noreply@blogger.com8