Wednesday, 21 September 2016

How to make my div containers movable within an HTML page?

Dear Friends,
Dhurima Blog presents, How to make my div containers movable within an HTML page?
If you Say, it's very Difficult, then you are wrong. It's so easy man. just follow given Steps:
Click for Demo Page

Step 1: Choose where you want to use it. We suppose you want to add  under a Contact Page.
Step 2: If You add this on your Website, then 

  1. First Copy below script and css and paste under head tag.
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    
    <style>
        #divContainer, #divResize { 
            border:dashed 1px #CCC; 
            width:120px; 
            height:120px; 
            padding:5px; 
            margin:5px; 
            font:13px Arial; 
            cursor:move; 
            float:left 
        } 
    </style>
</head>

  1. Now Copy below code and Paste where you want add movable div under Body tag.
    2. <body>
     <div>
            <div id="divContainer"> 
                I am Draggable 
            </div>
            <div id="divResize">
                I am Draggable and Resizable 
            </div>
     </div>
    </body>
     Note: Here is 2 div first for Draggable and second for Draggable and Resizable both. If you want to add only one then just remove another.  
  2. Now Copy below script code and Paste below body Tag and just top of the HTML closing Tag.
    3. <script>
        $(document).ready(function() {
            $(function() { $('#divContainer').draggable(); });
            $(function() { $("#divResize").draggable().resizable(); });
        });
    </script>
    </html>
  3. Save your HTML File and Run your file. That's it for Website.
Step 3: If You add this on your Blogger, then 
  1. Go to Blogger Dashboard --> Click on 'Template' --> Click on 'Edit HTML'
  2. Copy below script and css  link and paste under below of head tag.
    3. <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  3. Now Go to Blogger Dashboard --> Click on 'Template' -->  Click on 'Customise' --> Click on 'Advanced' --> Click on 'Add CSS'. Under the Opened CSS Box, Just Copy and Past Below CSS code. According to your Choice you can Change it.
    4. #divContainer, #divResize { 
                border:dashed 1px #CCC; 
                width:120px; 
                height:120px; 
                padding:5px; 
                margin:5px; 
                font:13px Arial; 
                cursor:move; 
                float:left 
            } 
  4. Now Copy below code and Paste where you want add movable div. You Can Use Add Gadget for it. 
    5.  <div>
            <div id="divContainer"> 
                I am Draggable 
            </div>
            <div id="divResize">
                I am Draggable and Resizable 
            </div>
     </div>
    <script>
        $(document).ready(function() {
            $(function() { $('#divContainer').draggable(); });
            $(function() { $("#divResize").draggable().resizable(); });
        });

    </script>

If You like this Post, Please Like my Blog Comment on this post and Visit my another post. Visit my Facebook Page
That's It
Posted by at No comments:
Labels: , , , ,

Tuesday, 20 September 2016

How to add Clock in your Google Blog.

Hello Friends,
Manish Chaturvedi Blog presents, Digital Clock for your Google Blog. 
If you want to add Digital Clock in your Blog, then you can  easily place the HTML Code and Add like as a Gadget. Just follow the steps.

Step 1: Go to your Blogger Dashboard(go to https://www.blogger.com/ and Login with your Gmail ID and Password.)
Step 2: Select your Blog.
Step 3: Under Dashboard Click on the Layout Tab.
Step 4: After That, Click on 'Add a Gadget' tab.
Step 5: Under Gadget Gallery, Search and Click on 'HTML/JavaScript'.
Step 6: After Clicked on 'HTML/JavaScript' you can see one window like below image.

Step 6: In Opened Window Write 

  1. Title: Digital Clock
  2. Content: Under Content Just Copy paste Digital Clock Code written below:

<script type="text/javascript">
tday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
tmonth=new Array("January","February","March","April","May","June","July","August","September",
"October","November","December");

 function GetClock(){
var d=new Date();
var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear();
if(nyear<1000) nyear+=1900;
var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;

 if(nhour==0){ap=" AM";nhour=12;}
else if(nhour<12){ap=" AM";}
else if(nhour==12){ap=" PM";}
else if(nhour>12){ap=" PM";nhour-=12;}

 if(nmin<=9) nmin="0"+nmin;
if(nsec<=9) nsec="0"+nsec;

 document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyear+" ; "+nhour+":"+nmin+":"+nsec+ap+"";
}

 window.onload=function(){
GetClock();
setInterval(GetClock,1000);
}
</script>

Step 7: After copy paste code just click on save button.  
Step 8: Rearrange your Digital Clock Gadget as you want. 
Step 9: Click on Save arrangement at the Top-Right Corner.
Step 10: Now Open your Website. Look your Website have a Digital Clock.

If You like this Post, Please Like my Blog Comment on this post and Visit my another post. Visit my Facebook Page
That's it.
Posted by at No comments:
Labels:
Subscribe to: Comments (Atom)

Search on This Blog