AllInWorld99 provides a reference manual covering many aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL,FLASH, jQuery, java, for loop, switch case, if, if else, for...of, for...in, for...each,while loop, blogger tips, blogger meta tag generator, blogger tricks, blogger pagination, client side script, html code editor, javascript editor with instant output, css editor, online html editor, materialize css tutorial, materialize css dropdown list,break, continue statement, label,array, json, get day and month dropdown list using c# code, CSS button,protect cd or pendrive from virus, cordova, android example, html and css to make android app, html code play,telerik show hide column, Transparent image convertor, copy to clipboard using javascript without using any swf file, simple animation using css, SQL etc. AllInWorld99 presents thousands of code examples (accompanied with source code) which can be copied/downloaded independantly. By using the online editor provided,readers can edit the examples and execute the code experimentally.


CSS Spin Image

  The following code is fully created using css code. Three div tag and three images,

Twitter rss linkedin animation

Start Stop Watch

  The following code are used to create the start stop watch and can set the lab. This program is totally created using JavaScript. The following HTML editor can edit your coding and get the output instantly.
start stop watch
   When we creating a new post we will write more text, in that some one steps are very important and when the visitor visit your blogger he have a chance to read the important points. So we can highlight the words and attract the visitor and focus to that line.


Steps:-
  1) Add CSS code on the top
  2) Add Script code on the bottom

Blogger page navigation

Highlight Important Lines

   When we creating a new post we will write more text, in that some one steps are very important and when the visitor visit your blogger he have a chance to read the important points. So we can highlight the words and attract the visitor and focus to that line.


Animation image for blogger gif image

Blogger Read More Button

    Blogger display latest post in home page with short description only, if any one willing to open read full content then you need to press the "Read More" button, after only user can view the full page content. Some one want to change the text and/or the style of the button. It is very easy to change the step is

Step 1:
   After login and enter your post Click template and Edit HTML.

blogger edit html


Step 2:
  After clicking the "Edit HTML" you will see like below image.

edit Blogger HTML code


Step 3:
  Press Ctrl + F and find the word "jump-link".

Find jump-link in blogger


the code is shown below
    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>


Step 4:
  If you want to change the text "Read More" to your text, just replace the "<data:post.jumpText/>" to your text like below.

    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>Open Page</a>
      </div>
    </b:if>

Change the Read More button style in blogger

Step 1:
  You can change the style of the button by apply some style to button. Add a class name "allinworldreadmore" to the <a> tag and remove the "jump-link" class..

    <b:if cond='data:post.hasJumpLink'>
      <div class='allinworldreadmore'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>Open Page</a>
      </div>
    </b:if>

Step 2:
  Find the name using </head>.


Step 3:
  Just add the following code above the </head> tag.
<style>
.allinworldreadmore a {
    position: relative;
    color: rgba(255,255,255,1);
    text-decoration: none !important;
    background-color: rgba(219,87,5,1);
    font-family: 'Yanone Kaffeesatz';
    font-weight: 700;
    font-size: 2em;
    padding: 4px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
    -moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
    box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
    margin: 100px auto;
width: 160px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}

.allinworldreadmore a:active {
    -webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    -moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    position: relative;
    top: 6px;
}
</style>

apply stye on blogger html template


Preview

blogger read more button



Advertisement

Blogger home page image

    In blogger home page display latest post and every post having description and first image of the blogger post, like below


     You can change the image (In default it take first image of the posting), after writing your blogger decide which image you want to show. After the description just add that image (you can compress it through software or paint 200 px recommended ) and go to Compose to HTML


  Find image added  code, you can find the code like below by your uploaded image name.

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis-nozpdXNgCix76qbmLWORaM5_XHzv6X1ogxZY__q2TJ9sZVWD_nxFObMTDMY1eomjCBd3KQ0gZipIVEzgcQxbcmbxi-yDZTCHleiWPaPKDdF0pk0OBMVjjEfzf62byY8GrV3JW-i0W0j/s1600/3D+Animated+Download+Button.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis-nozpdXNgCix76qbmLWORaM5_XHzv6X1ogxZY__q2TJ9sZVWD_nxFObMTDMY1eomjCBd3KQ0gZipIVEzgcQxbcmbxi-yDZTCHleiWPaPKDdF0pk0OBMVjjEfzf62byY8GrV3JW-i0W0j/s320/3D+Animated%2BDownload%2BButton.gif" /></a>

just added before and after the <div> tag like below
<div style="display:none;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis-nozpdXNgCix76qbmLWORaM5_XHzv6X1ogxZY__q2TJ9sZVWD_nxFObMTDMY1eomjCBd3KQ0gZipIVEzgcQxbcmbxi-yDZTCHleiWPaPKDdF0pk0OBMVjjEfzf62byY8GrV3JW-i0W0j/s1600/3D+Animated+Download+Button.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis-nozpdXNgCix76qbmLWORaM5_XHzv6X1ogxZY__q2TJ9sZVWD_nxFObMTDMY1eomjCBd3KQ0gZipIVEzgcQxbcmbxi-yDZTCHleiWPaPKDdF0pk0OBMVjjEfzf62byY8GrV3JW-i0W0j/s320/3D+Animated+Download+Button.gif" /></a>
</div>




Advertisement

Solve Loading problem in blogger home page

   If your blogger post have more image and more post on blogger home page then it will reduce your speed of your blogger loading time. You have best solution here.
   The main reason is if you set to show 6 post on your home page then like below


     If you set like above  , the 6 posts are loading in the home page, 6 posts are loading in a single page(all post images too) then how the speed is increased? We have a solution with 6 posts and single image for  home page timeline.

Steps to increase the loading speed
    If your post have more and/or high sized images, then you can use "Insert jump break" before the description with a image.

jump breaker in blogger


Instructions
   After write your description and add a image put the "Jump Break", like below
insert jump breaker in blogger

Reduce No of image loading
  Left side mention image having, 7 images and simple description. If you didn't used "jump break",  the 7 images and description were loaded in the home page of the blogger and first image only will display side of the post in home page.

Reduce size of the page
    If not used "Jump break", totally 7 image size is 1827 KB (1.8 MB) will load, if you used "jump break" only 40KB loaded in the home page.













Advertisement


Random Post Widget

     Random post widget is one of the good idea for visitors visit more posts. Some users come through google search or other way but they will visit only one post, if we want to show other post to users we need to place random post widget. It is very easy to generate.

Random post on blogger widget small
   The following animation have two button for start/pause and stop the animation,

The code is below

Start Stop jQuery Animation gif file

Steps to put adsense code to blogger

Blogger allow us to modify the default or downloaded theme and post related settings, some one want to put the ads between post or other place in this situation, just copy the ad code from the adsense and paste it to the above converter and get the converted code and paste it to blogger.

Note : -
  Adsense Code Converter is here

Step 1:
  &Adsense Code Convertero alt="Adsense Code Converter"the "My ads" and choose the code you want. and select the given code.

google adsense adcode

Asynchronous Code : This type code is mainly for HTML 5. HTML 5 doesn't required type attribute.

Synchronous Code : This type of ad code does't not support by DFP.








Google adsense code converter

        Google adsense provide two types of code type (Asynchronous and Synchronous), these codes are written inside of <script> and </script> code. In some place we can able to use this directly without converting correct format. It is perfect for converting any type of javascript code like (adsense, Chitika, Adbirte, jucyads, yllix or etc...). They only you can put it to XHTML entities for xml Blogger.
In adsence copy the Synchronous Code Only
Adsense Code Converter

AngularJS Filter

   AngularJS filter is used to added in directive and expressions the help of pipe symbol.

Types of AngularJS Filters


lowercase - This is used to convert the string to lowercase.
uppercase - This is used to convert the string to uppercase.
filter   - Filter is used to separate a subset of some items from the array
currency - Change the number to currency format

Lowercase

  This will convert all the text to Lowercase Character.

<div ng-app="">
Type the Lowercase text : <input type="text" ng-model="value1"><br>
<br>
You Typed: {{value1}}
<br>
LowerCase :{{value1 | lowercase}}
</div>

Uppercase

  This will convert all the text to Uppercase Character.

<div ng-app="">
Type the UpperCase text : <input type="text" ng-model="value1"><br>
<br>
You Typed: {{value1}}
<br>
UpperCase Text is :{{value1 | uppercase}}
</div>


Filter

Example: Another Example   Input Filter Example
-----
-----
<div ng-repeat="x in names | orderBy:'name'">
{{ x.name}}
</div>
-----
-----


currency

 Currency is used to put the $ symbol before the number

 Example: Another Example
-----
-----
<div ng-app="">
Enter Cost: <input type="number" ng-model="cost">
<p>Total = {{ (cost) | currency }}</p>
</div>
-----
-----




Example Program:- (Editor)



Output:-

Advertisement




  The following 3D button is fully created using css code, and four steps of animation it shown like very natural animated 3D button. You can able to change the "Download" name to your own words, no need to copy to your editor (notepad,notepad++,etc..). Just change the code and simply press "Submit Changes" button to see the difference.

AngularJS Orderby Filter

  Orderby Filter is used to Filtering the words ascending or descending order.

AngularJS Orderby Filter

AngularJS Filter based on inputs

   AngularJS can filter the words by entering the textbox value or other methods. Filter the words using filter keyword

Input Filter AngularJS

AngularJS Drag / Drag span or div content

   Using AngularJs easy to convert the div or span content to draggable content.

   In body you need to write the content inside the span or div tag with draggable mode.

Drag a div or span content using angularJS

AngularJS currency filter


 This is used to put the $ symbol before the value (Number only), just we need to filter using the pipe symbol after the ng-model variable.
AngularJS Currency Filter
   Very nice sticky gel, you can replace with your photo. This will show very naturally. When you through this gel it will stick to the top window and you have option to change the gravity, stickiness, size and stiffness.

gel animation image
msh1 navigation menu bar meh1
  The following program will create navigation menu bar using pure css code. Your heading menu name should write inside the <ul> tag and the sub menu's should write inside the <li> tag. we can control these tag from the css style.

navigation menu bar
    In the below example we are creating a 3D button only using CSS without any javascript or jQuery statements.

Interact and and interact tool tips, This tool tips are using two jQuery plugins and one external css.
Tool tips
 Before you start the bootstrap you should know basic knowledge of following:

 HTML
 (jQuery/JavaScript)
 CSS


   Bootstrap is the free collection tools for creating web applicatioons and web pages.
   Bootstrap contain CSS and HTML design templates for html elements.
   Bootstrap also having optional JavaScript file, for doing action.
   Bootstrap is the opensource so everyone can modified and use freely.
   Many examples available in GitHub website, you can download it and customize you want.
  
Introduction to bootstrap

Why need Bootstrap?

  Browser support: Bootstrap support all popular browser like chrome,firefox,IE and etc...
  Mobile-first approach: Bootstrap contain separate style for mobiles from Bootstrap 3
  Easy to get started: If have basic knowledge of HTML and CSS anyone can get started with Bootstrap
  Responsive Web design: Bootstrap will automatically adjust the scree size to desktops,mobile phones and tablets.


Before adding bootstrap to your pages, you should include the following tags
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
-----------
-----------
-----------

"width=device-width" this will set the page to follow the screen-width.

"initial-scale=1" it will set the initial zoom level when the page is loaded first by browser.

Downloading Bootstrap from internet:-
  you can download the full source from the www.getbootstrap.com website.
 
  If you don't like to download bootstrap and host yourself then you can include directly from the following link.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional: Include the jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Optional: Incorporate the Bootstrap JavaScript plugins -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Advantage of include the Bootstrap from CDN:-
  If the user already visited the CDN included bootstrap, the next time the file will be loaded from cache, which leads to faster loading time.


 

 

 

Slide right to left jquery / and slide left to right jquery

In this tutorial we need jQuery plugin, we are integrate this plugin from "code.jquery.com" it is free to use and customizing.

Best jBox jQuery ToolTip

      jBox jQuery plugin is used to show the style tool tips, the tool tips is given from the title attribute.  This tool tips can display various position like (Right, Left, Top and Bottom) of the div or other HTML element.
 
    We should need to integrate the following two .js file, you can use the both link through the following direct link or download and integrate it with your program.

jQuery Tool Tips

Tooltip below to the right

      You can display the Tooltip below to the right using the following jQuery code.
    $('.DemoTooltipBelow').jBox('Tooltip', {
        position: {
            x: 'right',
            y: 'bottom'
        }
    });
---------
---------
<span class="DemoTooltipBelow" title="I'm below and moved to the right">Below to the right</span>


Tooltip with the pointer moved to the right

      You can display the Tooltip with the pointer moved to the right using the following jQuery code.
     $('.DemoTooltipPointer').jBox('Tooltip', {
        pointer: 'right:15' // The pointer is moved to the right with a 15 pixel offset
    });
---------
---------
<span class="DemoTooltipPointer" title="My pointer is moved to the right">Pointer moved</span>


Tooltip at a different target

      You can display the Tooltip at a different target using the following jQuery code.

    $('.DemoTooltipTarget').jBox('Tooltip', {
        target: jQuery('.DemoTooltipBelow')
    });
---------
---------
<span class="DemoTooltipTarget" title="I'm over here">Different target</span>
<span class="DemoTooltipBelow" title="I'm below and moved to the right">Below to the right</span>


Tooltip with an offset

      You can display the Tooltip with an offset using the following jQuery code.
    $('.DemoTooltipOffset').jBox('Tooltip', {
        offset: {
            x: 30,
            y: -5
        }
    });
---------
---------
<span class="DemoTooltipOffset" title="I have an offset">Offset</span>

Tooltip to the left

      You can display the Tooltip to the left using the following jQuery code.
     $('.DemoTooltipLeft').jBox('Tooltip', {
        position: {
            x: 'left',
            y: 'center'
        },
        outside: 'x' // Horizontal Tooltips need to change their outside position
    });
---------
---------
<span class="DemoTooltipLeft" title="To the left">To the left</span>

Tooltip to the right

      You can display the Tooltip to the right using the following jQuery code.
    $('.DemoTooltipRight').jBox('Tooltip', {
        position: {
            x: 'right',
            y: 'center'
        },
        outside: 'x' // Horizontal Tooltips need to change their outside position
    });
---------
---------
<span class="DemoTooltipRight" title="To the right">To the right</span>

Mouse following tooltips have the type "Mouse" instead of "Tooltip"

      You can display the Mouse following tooltips have the type "Mouse" instead of "Tooltip" using the following jQuery code.
     $('.DemoTooltipMouse').jBox('Mouse', {
        content: 'I will follow you'
    });
---------
---------
<span class="DemoTooltipMouse">Following your mouse pointer</span>




Example Program:- (Editor)



Output:-

Advertisement



Pure CSS Animation

  In the following code  we will use only 3 div and 6 p tag and some css for creating the man leg hand and head and animate using the keyframe. The following code may be not working in Firefox .

css animation

Disable skype from autostart

     If we install the Skype on our system, it will start automatically start when on the system, and it will place on the task bar automatically without user permission. We need to close it every time Right Click=> Quit Skype. It is very bore to do.

    We can disable it on windows start up, if we do this it won't start on windows start up but you can use Skype to when you want to call or chat time.


Startup on skype


      In this Demo we are used Some CSS style and jQuery code, and you can customize this code to 3D full screen presentation demo class or other

3D jQuery Presantation animation
   "sketch.js" jQuery plugins is used to drawing a image to the canvas, finally we can download the image. The following editor can edit the code and see the corresponding output below. You  can download the package also.

download image after draw
     The following animation purely created by the Javascript code and canvas.

Total Pageviews