March 28, 2013

Mutiple background images in css3

We can use multiple background images in css3.

This is how it will look.

#example {
width: 500px;
height: 250px;
background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg);
background-repeat: no-repeat;
background-position: left top, right bottom, left top;
}
You can even write like this.
#example {
width: 500px;
height: 250px;
background: url(decoration.png) left top no-repeat, url(ribbon.png) right bottom no-repeat, url(old_paper.jpg) left top no-repeat;
}

March 27, 2013

Background image change onclick

I fiqured out this one finally...

Add the below code in head tag
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">

        var allImages = [
                "URL of Image 1", 
                "URL of Image 2",
                "URL of Image 3"
            ];

        var current = 0;

        $(document).ready(function() {
            $("#theLink").click(function() {
                $("body").css("background-image", "url(" + allImages[current] + ")").css("background-repeat");
                
                current = (current++ < allImages.length - 1) ? current : 0 ;
            });
        });
        </script>
Add the below code in body tag
<button id="theLink">Click to Change</button>

March 23, 2013

How to Create PDF of Web Pages?

By using some genuine sites we can create PDF of web pages,

1) www.Web2pdfconvert.com

2) www.Hiqpdf.com

Generate Sitemap for Blog/Website

1)Go to http://ctrlq.org/blogger/ to generate sitemap.Here in a box provide your blog url then click on generate sitemap.Wait for result...

2)Search 'webmaster' on google and sign in for webmaster.

3)Add your site to webmaster if not added yet.

4)Click on your added website or blog.

5)Find 'optimization' on left side of page.

6)Click on optimization > sitemaps.

7)Now click on add sitemap.

8)Here a box will open next to button.

9)Just paste your sitemap you got from Step 1 in that box and that's it.Now in 2-3 days your pages will be indexed in google search and anybody can easily find these.

How to Customize date header style in Blogger?

Paste this below code above </head>
function remplaza_fecha(d){
var da = d.split(' ');
dia = ""+da[0]+"";
mes = ""+da[1].slice(0,3)+"";
anio = ""+da[2]+"";
  document.write(dia+mes+anio);
}
Paste this below code above ]]></b:skin>
#fecha {
display: block;
margin:0 10px;
float:left;
padding: 5px;
color: #ffffff;
background: #484848;
border:#000000 3px solid;
text-transform:capitalize;
}
.fecha_date {
display: block;
font-size: 16px;
font-weight:bold;
}
.fecha_month{
display: block;
font-size: 10px;
}
.fecha_year{
display: block;
font-size: 10px;
}
Replace every <data:post.dateHeader/> with below Code
<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>

March 18, 2013

Smooth Page Scroll to Top with jQuery

The scrollTop:0 scrolls to the very top of the page, at 0px position, and the 600 represents the duration of animation in milliseconds. The Higher values indicate slower animations. You can also use ‘fast’, ‘slow’ or ‘normal’ instead of milliseconds.

jQuery

    $(document).ready(function(){ 
        $('.scrollup').click(function(){
            $("html, body").animate({ scrollTop: 0 }, 600);
            return false;
        });
 
    });

How to customize your own Scroll bar?

This is used to change the default old look scroll bar with the style you need.

CSS

::-webkit-scrollbar { height:12px; width: 12px; background: #b4b3b3; }
::-webkit-scrollbar-thumb { background-color: #000; -moz-border-radius: 10px; border-radius: 10px; }

Note

This works only on Google Chrome

March 15, 2013

How to remove water mark in wow slider?

Many Websites tell you to open wowslider.js and search for padding: “0 0 0 0″ and hit Enter and put visibility: “hidden” or display:”none”.
When you do this your slider effects and next & previous buttons also will be removed along with the wowslider watermark.

So i will tell you another working trick

1) Open the javascript “wowslider.js” from “engine1″ folder.

2) Search for the line or some of the keywords from below,

Coding

(“border-radius”:”5px”,”-moz-border

radius”:”5px”,outline:”none”}).attr({href:”http://”+d.toLowerCase()}).html(d).

bind(“contextmenu”, function(c){return false}).show().appendTo(X||)

3) In this line you can just change .show() to .hide()

4) After changing the attribute from .show() to .hide() you can see another watermark, which is actually left on those sliding images now you can remove this watermark by using any image editing software like “Photoshop” or any other. Since its your decision you can replace those images with their original which you have already been sliced or edited.

5) Thats it,your done.

March 14, 2013

How to add a syntax highlighter to your blogger/website?

    It's quite simple.Just follow the below steps.

  1. Add the Javascript and CSS links in the header section.
  2. While creating a post go to Edit HTML section.
  3. Use below code to use syntax highlighter

    <pre class='brush:[brushname]';>
    ADD THE PARSED CODE HERE
    </pre>
    
  4. Change the [brushname] to the brush you need in the above code.
  5. Example
    <pre class='brush:html';>
    ADD THE PARSED CODE HERE
    </pre>
    
    <pre class='brush:css';>
    ADD THE PARSED CODE HERE
    </pre>
    
  6. Thats it you have done.
  7. Here is the links for the CSS and Javascript

    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'></script>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'></script>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'></script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'></script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'></script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'></script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'></script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'></script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'></script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'></script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'></script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> 
    <script language="javascript" type="text/javascript">
     SyntaxHighlighter.config.bloggerMode = true;
     SyntaxHighlighter.all();
    </script>
    

    Additional Steps

    You can change the theme if needed according to the color of your blog/website.

  8. To change the theme:
  9. Change

    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    

    to any one of these...

    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeMDUltra.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeFadeToGrey.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDjango.css' rel='stylesheet' type='text/css'/>
    

Popular Posts

Views