Tuesday, June 14, 2011

How to disable Right Click in your blog???

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.
 I have had lot of people writing to me ,asking me how to go about the same... The answer is right here !!
Script

<script language="JavaScript">
<!--

//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com

var message="Oops.. Guess you hit the Right Click by mistake";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// -->
</script>


Implementation in Blogger:
  • Go in Design > Page Elements > Click on Add a Gadget > Select HTML/Javascript .And paste the code there then save it.
  • Message highlighted in blue can be of your choice...  Change it how you like it..

Tuesday, January 4, 2011

HIDE SHOW [+/-] Functionality

One of my lovely fellow blogger Sharmilee - face behind Sharmi's passion 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 .

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.

I would say we can use this functionality in the following places :

Over to Sharmilee to the rest of the post !

About Me & Behind Sharmis Passions:
I love working with colors especially on the web and thats why I attempt to keep my blog as well pics colorful.
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.

Why another food blog:
Sharmis Passions - a little space for my passion for cooking and clicking!
It is one place for recipes for healthy low fat food, baked goodies, occasional festive cooking, tips on food photography, gadgets etc.


HIDE/SHOW FUNCTIONALITY

Please check the complete implementation of Hide/Show(Expand/Collapse) at my space in recipe index to get an idea of the functionality: http://www.sharmispassions.com/2010/09/recipe-index.html

The hide/show function can be categorized into 3 parts:
  1. Html Header coding
  2. Hide/Show Html Content
  3. Javascript function

No no its not that difficult as it sounds here goes the implementation in easy steps


STEP 1 : Html Header coding:
This the header which we click to show/hide and here it is ‘Bakes’



<div>
<a onclick="javascript:toggleIt('bakes')" href="javascript:void(0)">[+/-]Bakes</a>
</div><br clear="all"/>


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.
This is the out put which will look in browser:


STEP 2 : Hide/Show Html Content

Here goes the content which is going to be hidden/shown
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.

<ul style="DISPLAY: none" id="bakes">
<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>
<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> 
</ul>


This is how it looks in the browser when clicked on the header Bakes:


STEP 3: Javascript function
This is the main element of the functionality.

<head>
<script type="text/javascript" language="javascript">
function toggleIt(id) {
 element = document.getElementById(id);
 if (element.style.display == 'none') {
  element.style.display = '';
 } else {
  element.style.display = 'none';
 }
}
</script>
</head>

STEP 4 : Now for the full coding to be implemented in one go:

<html>
<head>
<script type="text/javascript" language="javascript">
function toggleIt(id) {
 element = document.getElementById(id);
 if (element.style.display == 'none') {
  element.style.display = '';
 } else {
  element.style.display = 'none';
 }
}
</script>
</head>


<div>
<a onclick="javascript:toggleIt('bakes')" href="javascript:void(0)">[+/-]Bakes</a>
</div><br clear="all"/>

<ul style="DISPLAY: none" id="bakes">
<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>
<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>
</ul>
</html>


Other attributes description:
href="javascript:void(0)" – To prevent the page from reloading when we click on the link, we should  use "javaScript:void(0);" within the anchor tag.

style="TEXT-DECORATION: none" – By default the links will be underlined, if we want to remove it this attribute is used

onmouseover="this.style.textDecoration = 'underline';" – This is to show a difference when we mouseover on the headers

onmouseout="this.style.textDecoration = 'none';"  - This is to remove the underline when we mouseout on the link

href =”www.sharmispassions.com – This is to redirect to the page when we click on the link

target=”_blank” - To open the link in a new page


Implementation in Blogger:
  • Go in Design > Page Elements > Click on Add a Gadget > Select HTML/Javascript .And paste the code there then save it.
If you want the same code as a seperate post then paste the code in New Post > Edit Html and publish it.


  •  For implementing Recipe Index in a page , Go to Postings > Edit Page > New Page .

Give a name for your new page , say Recipe Index and get started with your content.Remember to remove <html > ,<head> & their closing tags when you do it in your page.


Wednesday, November 10, 2010

How 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.

Simple ... just a few steps .

  • 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.
  • 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.
    http://www.coolutils.com/online/image-converter/ 
  • Using the same software convert the 16 * 16 px jpeg pic into an .Ico pic.
  • Most external picture hosts do not allow us to upload icon files.. Pic Panda (http://www.picpanda.com/) just makes our work easy.. and uploads icon files too.
    Once uploaded , collect the link

    For eg : http://www.picpanda.com/images/4h96yxrufbwuw5hfsp.ico


  • Use them in
    <lin href='Fav Icon URL'rel='shortcut icon'/>

    Eg: <link href='http://www.picpanda.com/images/4h96yxrufbwuw5hfsp.ico' rel='shortcut icon'/>
  • Backup your HTML codes before venturing out to experiment. Locate the </head> tag in your Edit HTML code. Place this code above the </head> tag and remember to save the file.
  • Enzoy your Newly created Fav ICON ..  Easy to locate in BookMarks

Saturday, August 14, 2010

How to create a printable version of recipe in your blog ?

  • Go to Google site : http://www.sites.google.com/
  • Log in with ur gmail id . Click on the Create Site.



    Go ahead and select ur template and fill in the required details like i have done and click on Create Site.



  • Hurray!! Done... Isnt it v easy...
  • Just few more steps away...  Now click on Create Page on the top right hand side. 
  • 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.
  • Copy the url from the address bar and use it to create a link in your blog , where you want to add Printable recipe.
  • Preview ur blogger page to check if u are getting the right thing.. and just go ahead and publish it.
  • Now ur readers can enjoy a printable version of  your lovely space.