Write For Us

25+ Open source software and applications to save money

By // No comments :
Hi friends in this post I am sharing open source softwares which helps you to save more money.I agree that  the opensource softwares cannot fill the place with paid softwares but it doesn’t means the opensource are not  worth because you can see some governments are  using some of the below softwares.And if planned well you can create animate movies with gimp and blender which are open source softwares.Also note that you must read the license of the below sites(i.e) you have to check about modify,distribute,share and finally the most important one selling for money.So be aware of license rules and if you follow rules right you can use the softwares without any problems.


LibreOffice -a free alternative to microsoft office

LibreOffice is Free and Open Source Software where we can use it for office purposes.Libre office includes application of Writer Calc, Impress,Draw, Base and Math where you can create documents,spreadsheets,flowcharts,database and more. Libre office is available for Windows,Linux ,Mac.Size of the software varies for different operating system but not more than 250mb.Some governments,schools,military are using libre office and the regions using libre office are mostly from european sides.

Gimp-Similar to adobe photoshop software

General Image Manipulation Program(GIMP) is a paint program which also functions photo retouching, image composition, image authoring and more.Also gimp act as a image converter .Gimp is available for Windows,Linux ,Mac OSX and also in various languages.Size of the software will be approximately 90Mb in windows.And it is true that it cannot compensate the photoshop features but it is still a worth.In gimp we can load and save animations in a convenient frame-as-layer format.

Audacity-free recording software for audio

From the title itself you should have found out that audacity is a recorder software and also used to edit audio.Size of the software will be approximately 25mb.And it can run on Linux operating system,windows os and mac operating system.Audacity supports most of the formats to import and export.The editing feature is simple (i.e)cut, copy, paste and delete.
Apache OpenOffice a free software similar to  microsoft office and libre office
Like ms office Apache OpenOffice performs word processing, spreadsheets, presentations, graphics, databases and more.Apache OpenOffice not only supports Windows,Linux ,Mac but also other operating systems like solaris operating system, freeBSD operating system and more.Governments,Education,Businesses,IT Businesses,Advocates are also using openoffice.

Krita - photoshop like similar software


Krita is a Open Source digital painting Software which is very helpful to Illustrators,Digital Painters and Artists.Actually is a part of Calligra Suite.Size of the software is approximately 109MB in windows operating system.Krita also supports linux and mac osx operating system.Krita has various brush tools which is definitely a worth for us.And also some of the photoshop brushes are also supported here.

Free Download Manager-a open source software to download files fast

Free Download Manager is a free software used to download files from a website/blog.Size of the software is approximately 8mb for windows operating system.We can download files a little bit fast than chrome download manager, because it splits files into several sections and downloads them simultaneously.Free download manager is not available for mac operating system and other operating systems.And the most important part is free download manager helps to download only the necessary part of a zip file.At present free download manager support the languages Macedonian, Serbian, Albanian, Croatian, Korean, Arabic, Brazilian Portuguese, Bulgarian, Chinese Traditional, Chinese, Czech, German, Dutch, French, Hebrew, Hungarian, Italian, Polish, Portuguese-Brazil, Romanian, Russian, Slovak, Spanish, Swedish, Turkish, Uzbek, Greek, Vietnamese, Slovenian, Persian.

Xampp - All in one easy to install Apache

Xampp was initially founded by Kai 'Oswald' Seidler and Kay Vogelgesang .At present xampp was maintained by Beltran Rueda and Daniel Lopez Ridruejo.  Are you want to run php sites within your computer ?Ok use xampp to run php applications,creating databases and much more options  within your system as a web server  and also save money from hosting and internet charges.Xampp  is available for Windows,Linux ,Mac OSX operating systems.Size of the xampp software is approximately 150mb.

Inkscape-A free alternative to adobe illustrator

Inkscape is an open source vector graphics software a free alternative to Adobe illustrator,Corel draw.It does not compete with adobe illustrator or xara extreme but it do all  basic things like paid softwares.Inkscape supports most of all major operating systems such as Windows,Linux ,Mac OSX .Size of the software is nearly upto 33mb.It also stores image in SVG format(XML-based) developed by W3C.But you can also save in other formats like png,pdf and more.

Netbeans –Similar software to free Java IDE

Netbeans was made by Sun microsystems and it free for both commercial and non-commercial use.Netbeans supports the languages PHP, JavaFX, C/C++, JavaScript and more.Netbeans can be used in most of all operating systems such as  Windows,Linux ,Mac OSX .Whole package of this software will came upto more than 200mb.If you are maintaining a project center for engineering and technology students it is definitely helpful to finish the projects quickly.

Kompozer – A free alternative to adobe dreamweaver

Kompozer is a  WYSIWYG web editor which is used to build webpages without learning HTML or web coding. If you are complete beginner to programming and don’t want to enter code more then you should have a try with kompozer. If you are little bit interested in using kompozer,after some months you will learn coding a little ,indirectly .Kompozer supports most operating systems such as Windows,Linux ,Mac OSX and also available for different languages.Download size of the installer will be 6.2mb and size for download file in zip format is 8.2 mb . Creating forms, tables, and templates with kompozer will be very easy.

Time trex workforce management

If you are running a company or you are manager of the company then don’t forget to try timetrex.The free download is possible when you signup with them.Also cloud method is  available. With the help of you can track employee time and attendance , employee time clock software, employee scheduling software and payroll software.If you have branches and department you can also calculate with this single software.So you can save time and also helps to reduce some stress.

Wordpress- a content management system


Wordpress needs no introduction .Do you know that wordpress initially started, just as blog?.But after that it became full developed content management system with php and mysql .When a blogger buys an hosting account then there is no doubt definitely he use wordpress as their blogger platform.And lot of them earned thousands of dollars online by creating wordpress themes,plugins and widgets.Also some of them started companies based on wordpress services.Even hosting companies will not forget to mention this line in their site “1-click  install” wordpress. Size will be within 20mb.Not only for blogger purpose you can also create classified site,realestate site,hosting site,social networking site like facebook. and much more according to your imagination.
Also read :
Install Wordpress On Wamp
2 Solutions For Local Host Wordpress Problems
Popular Wordpress Theme Studiopress
install wordpress in 000 webhost
Solve Index Of Problem In 000 Webhost For Wordpress
how to create mysql in 000webhost

Orange HRM- A free software for human resource management system

Sujee Saparamadu with Open Source business model founded orange HRM and started in the year 2005.With the help of free orange software dashboard, you can perform,
System Administration
Personnel Information Management (PIM)
Leave /Time off Management
Time & Attendance Management
Recruitment
Performance
Employee Self Service
In order to download the free software for your windows/linux/mac osX operating systems you should make signup with this site.And you should have webserver like wamp and xampp.


Blender- A free alternative to maya and 3dsmax

Blender is a free and open source 3D animation software .You can use blender on operating systems such as  Windows,Linux ,Mac OSX .The download file size for windows will be ~55mb.With the help of blender you can do  modeling, uv mapping, texturing, rigging, skinning, animation, particle and other simulation, scripting, rendering, compositing, post-production, and game creation.In youtube you can find some animated film videos using blender.Whether you are an individual or running a animation studio you should not miss the blender software.

Node.js –an open source application development tool

Node.js is event-driven, non-blocking I/O model which is helpful to create scalable network applications with fast and easy.Node.js thus makes an lightweight and efficient real-time applications which run across distributed devices. .Node.js platform is built on Chrome's JavaScript runtime.

brackets –An open source editor

Brackets was founded by Adobe.Brackets is a modern open-source code editor for HTML, CSS and JavaScript that's built in HTML, CSS and JavaScript.Brackets supports most of the operating systems such as Windows,Mac and linux.Download size of the software will be ~45 mb for windows operating system.
 
Live Preview
Get a real-time connection to your browser. Make changes to CSS and HTML and you'll instantly see those changes on screen.
--Brackets

Angular js – An open source web application

Angular js is actually a javascript framework and used to declare dynamic views in web-applications ,especially useful for single page applications.Angular js was initially an idea of an google employee and after some years google made a development team and released officially.Download file size will be nearly 10mb.
Also read:
Run Angularjs Locally In Browser Using Notepad
Angularjs ngclick run local In notepad
Run angular Js ng-submit locally in notepad

Freeplane-A free mindmapping software

Free plane is an free open source for mind mapping software.And you save the format in .mm only.Like drop down menu you can done here by clicking the end of node.The software can be used for mind mapping and analyzing the information contained in mind maps. Freeplane runs on any operating system that has a current version of Java installed. It can be run locally or portably from removable storage like a USB drive.Free plane still needs some improvement but it is worth due to its free option.

Sweet home 3D-An open source design application

Are you want to design a plan for your new house or bungalow.Then try sweethome3D which runs on most of the operating systems.Size will be upto 45mb for free version and pro version available for this software.Sweet home is available in Online also , so if there is good net speed connection you don’t need to download software.

Features
Draw walls and rooms upon the image of an existing plan, on one or more levels
Drag and drop doors, windows and furniture from a catalog onto the plan
Update colors, texture, size and orientation of furniture, walls, floors and ceilings
View all changes simultaneously in the 3D view from any view point
Create photorealistic images and videos with various light sources
Import additional 3D models and export the plan at various standard formats

VLC media player-free media file to play videos and audios

VLCmediaplayer needs no introduction.VLC runs on most of all type of operating systems.Download file size will be range from 30 to 50 mb.

Features
Simple, fast and powerful media player.
Plays everything: Files, Discs, Webcams, Devices and Streams.
Plays most codecs with no codec packs needed:
MPEG-2, DivX, H.264, MKV, WebM, WMV, MP3...
Runs on all platforms: Windows, Linux, Mac OS X, Unix...
Completely Free, no spyware, no ads and no user tracking.
Can do media conversion and streaming.

Pros
VLC has a simple design, with menus and options for almost any function. It opens nearly every file type. VLC’s media playback runs smoothly and its interface is fairly consistent across operating systems.   
Cons
VLC hides its fancy features behind an ordinary veneer so that only advanced users recognize them. However, its extensive Wiki help is good remedy for eager beginners.
--from source forge editor review

File zilla- a free file management tool

If you want to upload a wordpress theme you designed by you or some others from your system.Then filezilla helps you to transfer files from system to your hosting account.File zilla available for client and server.
FileZilla is a cross-platform FTP, SFTP, and FTPS client with a vast list of features, which supports Windows, Mac OS X, Linux, and more in client filezilla software  and server filezilla software only for windows operating system . FileZilla's dynamic tools help you move files between your local machine and your Web site's server effortlessly. For example, Filezilla lets you compare your files with in-directory server files to manage file syncing. You can also tab browse between servers and transfer files to them simultaneously, as well as edit server files on the go. And Filezilla is available in 47 languages worldwide.

FeaturesEasy to use
Supports FTP, FTP over SSL/TLS (FTPS) and SSH File Transfer Protocol (SFTP)
Cross-platform. Runs on Windows, Linux, *BSD, Mac OS X and more
IPv6 support
Available in many languages
Supports resume and transfer of large files >4GB
Tabbed user interface
Powerful Site Manager and transfer queue
Bookmarks
Drag & drop support
Configurable transfer speed limits
Filename filters
Directory comparison
Network configuration wizard
Remote file editing
Keep-alive
HTTP/1.1, SOCKS5 and FTP-Proxy support
Logging to file
Synchronized directory browsing
Remote file search

7-zip – a free file archiver and alternative to winrar


7-Zip is open source software. It is used to compress files great. Most of the source code is under the GNU LGPL license. The unRAR code is under a mixed license: GNU LGPL + unRAR restrictions.The file download size is 1MB which is very easy to download . 7-zip works on windows and linux.

Features
High compression ratio in 7z format with LZMA and LZMA2 compression
Supported formats:
Packing / unpacking: 7z, XZ, BZIP2, GZIP, TAR, ZIP and WIM
Unpacking only: ARJ, CAB, CHM, CPIO, CramFS, DEB, DMG, FAT, HFS, ISO, LZH, LZMA, MBR, MSI, NSIS, NTFS, RAR, RPM, SquashFS, UDF, VHD, WIM, XAR and Z.
For ZIP and GZIP formats, 7-Zip provides a compression ratio that is 2-10 % better than the ratio provided by PKZip and WinZip
Strong AES-256 encryption in 7z and ZIP formats
Self-extracting capability for 7z format
Integration with Windows Shell
Powerful File Manager
Powerful command line version
Plugin for FAR Manager
Localizations for 87 languages

Dia Diagram Editor- A free flowchart software

Dia Diagram Editor is free Open Source drawing software for Windows, Mac OS X and Linux. Dia supports more than 30 different diagram types like flowcharts, network diagrams, database models. Download file size will be upto 20mb.More than a thousand readymade objects help to draw professional diagrams. Dia can read and write a number of different raster and vector image formats. Software developers and database specialists can use Dia as a CASE tool to generate code skeletons from their drawings. Dia can be scripted and extended using Python.
Features

Draw structured diagrams (flowcharts, network layouts, etc)
Easy to use (Recommended in 89% of the user ratings)
More than 1000 predefined objects and symbols
Supports Windows, Mac OS X and Linux
Many import- and export formats
Scriptable via Python

Dosbox- run dos games in windows 7

DOSBox emulates a full x86 pc with sound and DOS. Its main use is to run old DOS games on platforms which don't have DOS (Windows 7 / Windows Vista / Windows 2000 / Windows XP / Linux / FreeBSD / Mac OS X) .I have played dave game which is working fine for me.You should properly mount the c drive then choose the right drive and the game path and enjoy to play dos games in windows operating system.

Free cad- an open source cad software

Auto cad comes free for students , for others you can try free cad.Download file size will be upto 130mb.
FreeCAD is a general purpose feature-based, parametric 3D modeler for CAD, MCAD, CAx, CAE and PLM, aimed directly at mechanical engineering and product design but also fits a wider range of uses in engineering, such as architecture or other engineering specialties. It is 100% Open Source and extremely modular, allowing for very advanced extension and customization.
FreeCAD is based on OpenCasCade, a powerful geometry kernel, features an Open Inventor-compliant 3D scene representation model provided by the Coin 3D library, and a broad Python API. The interface is built with Qt. FreeCAD runs exactly the same way on Windows, Mac OSX and Linux platforms
-- Source forge
Features
Rock-solid OpenCasCade-based geometry kernel, allowing complex 3D operations on complex shape types, and supports natively concepts like brep, nurbs, booleans operations or fillets
Full parametric model allowing any type of parameter-driven custom objects, that can even be fully programmed in python
Complete access from python built-in interpreter, macros or external scripts to almost any part of FreeCAD, being geometry creation and transformation, the 2D or 3D representation of that geometry (scenegraph) or even the FreeCAD interface

Scribus-Free desktop publishing software


Scribus is an Open Source program that brings professional page layout to Linux, BSD UNIX, Solaris, OpenIndiana, GNU/Hurd, Mac OS X, OS/2 Warp 4, eComStation, and Windows desktops with a combination of press-ready output and new approaches to page design.Underneath a modern and user-friendly interface, Scribus supports professional publishing features, such as color separations, CMYK and spot colors, ICC color management, and versatile PDF creation.
--Scribus
Download file size will be upto 80mb.


PDF sam –open source software to split and merge pdf files


With the help of PDF sam we can easily split ,merge,rotate,mix pdf documents.Pdf sam supports most of all operating systems, at the same time it is essential to have Java Runtime Environment 6+ .Andrea Vacondio is an certified java programmer(Sun java) who behind the pdf sam and also some of his supporters are Elisa Bortolotti,H├ędi Benblidia.Size of the installer  is ~5Mb.Then it starts to install from online.You need a good net speed connection,otherwise it took more time and so you will get frustrated.

CamStudio - Screen Recorder software for your computer

Are you want to explain the program concepts or some tutorials from your computer as a video.Then camstudio is the best choice for you.The features of this softwares are somewhat limited such as we can save the recordings only in AVI and swf formats.Also it supports the windows operating system only.Size of the software is one of the advantage which range from 3-4 MB only.

Free animation software for beginners to create animation videos easy

By // No comments :

Hi friends in this post i am sharing free animation software for beginners.Are you interested in animation? Then these software are useful to you.The 2d animation software and 3d animation software are also given here to make effective presentations and animations.And some of them are webapps where you can create online.Keep in mind most of the free  software are limited but it helps you to learn little about frames ,rendering ,modelling and more.Maya and 3ds max are nice to create wonderful videos but it needs more dedication and have to learn. Most of the below softwares are not providing videos


free-animation-software

Powtoon


Powtton is a web app where you can create animations and explainer videos for your site/blog for free.Just create an account
and start to create animations and finish it within some minutes.Free account is limited to 5 minute video but still a worth.You can also upload the free animation video created at powtoon to youtube. 

Blender


Blender is a open source 3d animation software like maya which works on windows,linux and mac.And we need to learn , then why we gave here means you can create 3d animations for free.Size also somewhat acceptable for us (i.e)approximately within 60mb.At the same time when we extract from zip then size will be more,so make you have more space free.


Muvizu


Muvizu is a free software is used to create wonderful 3d characters.Muvizu 3D animation software was developed by digimania.And it has a huge thousand collections of animations and objects.Also the free version have the ability to accept  photos, audio, video and 3D models .16 characters were provided with free account.

Aurora 3D Animation Maker:

The Aurora 3D Title Maker is free 3D software to easily produce professional effects for explainer videos especially for your company and sites/blogs.Have you think how the news channels are creating their intros .Then this aurora will make you to think this is not a difficult task. Eventhough interface looks not supportive but a nice free tool.

Pivot Stickfigure Animator

Pivot Stickfigure Animator is a windows based free software where you can use it for both personal and commercial use.It is single colour stick figured but you can use multiple colors after adding the animation.The size of the software is also small so you can download and can start to make animations quick.


How to create different flip animate effects for blogger posts?

By // No comments :
Hi friends in this post I am sharing how to animate blogger posts with various flip effects.Also read
how to make animation effect for blogger posts ?
How to swing blogger posts using css3 animation?
How To Bounce Blogger Posts Using Css3
How to create wiggle and wooble animation effect for blogger posts

The various flip effects are
flip in x
flip out x
flip in y
flip out y


How to create flip in X animate effects for blogger posts?

Login to blogger account .Next goto Template>> click Edit HTML . Click Format template . Click and expand <b:skin></b:skin> .
Now in keyboard press keys CTRL and F at the same time .
Now inside blogger template HTML mode  you can find the search bar.Type in the search field  ]]></b:skin> Paste the below code Just above ]]></b:skin>

.post{ -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;

}@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotateX(-10deg);
    }
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
.post {    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    backface-visibility: visible !important;
    animation-name: flipInX;
}



Now view your blogger template . You will get the flip in X effect.
Also check the animated gif below,




flipinx-blogger-posts



How to create flip in Y animate effects for blogger posts?

Login to blogger account .Next goto Template>> click Edit HTML . Click Format template . Click and expand <b:skin></b:skin> .
Now in keyboard press keys CTRL and F at the same time .
Now inside blogger template HTML mode  you can find the search bar.Type in the search field  ]]></b:skin> Paste the below code Just above ]]></b:skin>


.post{  -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;

}@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
    }
    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotateY(-10deg);
    }
    70% {
        transform: perspective(400px) rotateY(10deg);
    }
    100% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
.post {   -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    backface-visibility: visible !important;
    animation-name: flipInY;
}                                                                   

flipiny-blogger-posts





How to create flip out X animate effects for blogger posts?

Login to blogger account .Next goto Template>> click Edit HTML . Click Format template . Click and expand <b:skin></b:skin> .
Now in keyboard press keys CTRL and F at the same time .
Now inside blogger template HTML mode  you can find the search bar.Type in the search field  ]]></b:skin> Paste the below code Just above ]]></b:skin>

.post{  -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;

}
@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}
@keyframes flipOutX {
    0% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
    100% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}
.post { -webkit-animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    animation-name: flipOutX;
    backface-visibility: visible !important;
}

Also check animated gif below,


flipoutx-blogger-posts







How to create flip out Y animate effects for blogger posts?

Login to blogger account .Next goto Template>> click Edit HTML . Click Format template . Click and expand <b:skin></b:skin> .
Now in keyboard press keys CTRL and F at the same time .
Now inside blogger template HTML mode  you can find the search bar.Type in the search field  ]]></b:skin> Paste the below code Just above ]]></b:skin>

.post{  -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;

}
@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(1000px) rotateY(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: perspective(1000px) rotateY(90deg);
        opacity: 0;
    }
}
@keyframes flipOutY {
    0% {
        transform: perspective(1000px) rotateY(0deg);
        opacity: 1;
    }
    100% {
        transform: perspective(1000px) rotateY(90deg);
        opacity: 0;
    }
}
.post {  -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    backface-visibility: visible !important;
    animation-name: flipOutY;
}
Also check the animated gif below,



flipouty-blogger-posts

How to create flip animation effect for blogger posts?

By // No comments :
Hi friends in this post I am sharing how to create simple flip animation effect for blogger posts.Flip is also one of the frequently used animation effect.And here we are using only css3 code and not any jquery files.You have to  just use the below code and if you don’t need you can easily remove from the blogger template.
Also read:
how to make animation effect for blogger posts ?
How to swing blogger posts using css3 animation?
How To Bounce Blogger Posts Using Css3
How To Create Wiggle And Wooble Animation Effect For Blogger Posts

Login to blogger account .Next goto Template>> click Edit HTML . Click Format template . Click and expand <b:skin></b:skin> .
Now in keyboard press keys CTRL and F at the same time .
Now inside blogger template HTML mode  you can find the search bar.Type in the search field  ]]></b:skin> Paste the below code Just above ]]></b:skin>

.post{ -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;

}
@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(1000px) rotateY(0);
        -webkit-animation-timing-function: ease-out;
    }
    40% {
        -webkit-transform: perspective(1000px) translateZ(1px) rotateY(170deg);
        -webkit-animation-timing-function: ease-out;
    }
    50% {
        -webkit-transform: perspective(1000px) translateZ(1px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function: ease-in;
    }
    80% {
        -webkit-transform: perspective(1000px) rotateY(360deg) scale(.95);
        -webkit-animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: perspective(1000px) scale(1);
        -webkit-animation-timing-function: ease-in;
    }
}
@keyframes flip {
    0% {
        transform: perspective(1000px) rotateY(0);
        animation-timing-function: ease-out;
    }
    40% {
        transform: perspective(1000px) translateZ(1px) rotateY(170deg);
        animation-timing-function: ease-out;
    }
    50% {
        transform: perspective(1000px) translateZ(1px) rotateY(190deg) scale(1);
        animation-timing-function: ease-in;
    }
    80% {
        transform: perspective(1000px) rotateY(360deg) scale(.95);
        animation-timing-function: ease-in;
    }
    100% {
        transform: perspective(1000px) scale(1);
        animation-timing-function: ease-in;
    }
}
.post {     -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flip;
    backface-visibility: visible !important;
    animation-name: flip;
}
That’s all friends save template and enjoy to see the flip animation in blogger posts. If you want to extend and decrease flip size change 1000px with other values to see changes.Also note that lower value e.g.100px means huge flip size and higher value means e.g. 1000px means medium flip size.
Also check the animated gif below,


flip-blogger-posts


We are also going to to share ,
flipinX
flipinY
flipoutX
flipoutY
in further posts.

How to create wiggle and wooble animation effect for blogger posts

By // No comments :
Hi friends in this posts I am sharing how to create wiggle and wooble animation effects for blogger posts.Also read
how to make animation effect for blogger posts ?
How to swing blogger posts using css3 animation?
How To Bounce Blogger Posts Using Css3

And here we are using both in fill-mode for animate process.

How to create wiggle animation effect for blogger posts?

Login to blogger account .Next goto Template>> click Edit HTML . Click Format template . Click and expand <b:skin></b:skin> .
Now in keyboard press keys CTRL and F at the same time .
Now inside blogger template HTML mode  you can find the search bar.Type in the search field  ]]></b:skin> Paste the below code Just above ]]></b:skin>



.post{ -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;

}
@-webkit-keyframes wiggle {
    0% { -webkit-transform: skewX(9deg); }
    10% { -webkit-transform: skewX(-8deg); }
    20% { -webkit-transform: skewX(7deg); }
    30% { -webkit-transform: skewX(-6deg); }
    40% { -webkit-transform: skewX(5deg); }
    50% { -webkit-transform: skewX(-4deg); }
    60% { -webkit-transform: skewX(3deg); }
    70% { -webkit-transform: skewX(-2deg); }
    80% { -webkit-transform: skewX(1deg); }
    90% { -webkit-transform: skewX(0deg); }
    100% { -webkit-transform: skewX(0deg); }
}
@keyframes wiggle {
    0% { transform: skewX(9deg); }
    10% { transform: skewX(-8deg); }
    20% { transform: skewX(7deg); }
    30% { transform: skewX(-6deg); }
    40% { transform: skewX(5deg); }
    50% { transform: skewX(-4deg); }
    60% { transform: skewX(3deg); }
    70% { transform: skewX(-2deg); }
    80% { transform: skewX(1deg); }
    90% { transform: skewX(0deg); }
    100% { transform: skewX(0deg); }
}
.post {   -webkit-animation-name: wiggle;
    animation-name: wiggle;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
-webkit-animation-duration: 0.75s;
    animation-duration: 0.75s; 
}
Also check the animated gif tutorial below,


wiggle-blogger-posts


How to create wobble animation effect for blogger posts?

Login to blogger account .Next goto Template>> click Edit HTML . Click Format template . Click and expand <b:skin></b:skin> .
Now in keyboard press keys CTRL and F at the same time .
Now inside blogger template HTML mode  you can find the search bar.Type in the search field  ]]></b:skin> Paste the below code Just above ]]></b:skin>




.post{ -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;

}
@-webkit-keyframes wobble {
  0% { -webkit-transform: translateX(0%); }
  15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
  30% { -webkit-transform: translateX(20%) rotate(3deg); }
  45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
  60% { -webkit-transform: translateX(10%) rotate(2deg); }
  75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
  100% { -webkit-transform: translateX(0%); }
}
@keyframes wobble {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}
.post {    -webkit-animation-name: wobble;
    animation-name: wobble;
}

wooble-blogger-posts


That’s all friends.Now it’s to work from your side.

How to Bounce blogger posts using css3

By // No comments :
Hi friends in this post I am sharing how bounce out left and bounce out right using css3.
Also read:
how to make animation effect for blogger posts ?
How to swing blogger posts using css3 animation?
And friends we are going to give all possible animation in blogger posts on techinfoweb.com and so check our blog posts frequently.

It’s also a easy method but we should handle it with care.Because the bounce effects cause the blogger posts to disappear.Don’t worry for this css code have the solution.Just instead of both in fill mode we are going to use backwards which helps the blogger posts to settle in their right place.

How to use Bounce out left animation in blogger posts?

Login to blogger account .Next goto Template>> click Edit HTML . Click Format template . Click and expand <b:skin></b:skin> .
Now in keyboard press keys CTRL and F at the same time .
Now inside blogger template HTML mode  you can find the search bar.Type in the search field  ]]></b:skin> Paste the below code Just above ]]></b:skin>


.post{ -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;  }
@-webkit-keyframes bounceOutLeft {
    0% {
        -webkit-transform: translateX(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(20px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
    }
}
@keyframes bounceOutLeft {
    0% {
        transform: translateX(0);
    }
    20% {
        opacity: 1;
        transform: translateX(20px);
    }
    100% {
        opacity: 0;
        transform: translateX(-2000px);
    }
}
.post {  -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft;

}
That’s all friends .Now save the template, view blog and enjoy to see the animation . You can change 3s to any, like 5s or 10s or 13s ,according o your wish.
Check animated gif below ,

bounceout-blogger-posts




How to use Bounce out right animation in blogger posts?

Login to blogger account .Next goto Template>> click Edit HTML . Click Format template . Click and expand <b:skin></b:skin> .
Now in keyboard press keys CTRL and F at the same time .
Now inside blogger template HTML mode  you can find the search bar.Type in the search field  ]]></b:skin> Paste the below code Just above ]]></b:skin>


.post{ -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;

}
@-webkit-keyframes bounceOutRight {
    0% {
        -webkit-transform: translateX(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
    }
}
@keyframes bounceOutRight {
    0% {
        transform: translateX(0);
    }
    20% {
        opacity: 1;
        transform: translateX(-20px);
    }
    100% {
        opacity: 0;
        transform: translateX(2000px);
    }
}
.post {   -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight;

}

Now save the template, view blog and enjoy to see the animation . You can change 3s to any, like 5s or 10s or 13s ,according o your wish.
Check animated gif below ,


bounce-out-right-blogger-posts

Now you can understand friends why are we using backwards in fill mode instead of both and forwards.Forwards and both will not settle blogger posts in their original position.Backwards have the tendency to settle blogger posts in their original position.

How to swing blogger posts using css3 animation?

By // No comments :
Hi friends in this post I am sharing how to make animation effects for blogger posts.Not only with that if you have little knowledge about how to edit blogger template, then you can use anywhere in blogger(i.e) whole sidebar or particular sidebar,footer and more. Another important thing is you don’t need to use any jquery files.Just some css codes .You have seen a lot of blogger templates releasing with animation effects and now it’s your time friends create animate effects for your blogger templates.And you can also remove the very easily without any causing any problem to blogger templates.

Will animate effect in blogger posts cause seo effect bad?
I have also considered this thing.From my knowledge and searches these will not cause any problems to seo. If you feel if animation effects affects seo , as I already said it’s very easy to remove the code in blogger template.

Where to place the animation code in blogger template?

Login to blogger account .Next goto Template>> click Edit HTML . Click Format template . Click and expand <b:skin></b:skin> .
Now in keyboard press keys CTRL and F at the same time .
Now inside blogger template HTML mode  you can find the search bar.Type in the search field  ]]></b:skin> Paste the below code Just above ]]></b:skin>



.post{ -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; }
@-webkit-keyframes swing {
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
    20% { -webkit-transform: rotate(15deg); }
    40% { -webkit-transform: rotate(-10deg); }
    60% { -webkit-transform: rotate(5deg); }
    80% { -webkit-transform: rotate(-5deg); }
    100% { -webkit-transform: rotate(0deg); }
}
@keyframes swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}
.post { -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;

}
That’s all friends .Now save the template, view blog and enjoy to see the animation . You can change 1s to any, like 5s or 10s or 13s ,according o your wish.
Check animated gif below ,

swing-blogger-posts



How to use this code for sidebar and other parts of blogger template?

It’s very easy just find id or class of side bar . For blogger’s default simple blog  template you can copy below code and paste just above ]]></b:skin> .

#sidebar-right-1{ -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; }
@-webkit-keyframes swing {
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
    20% { -webkit-transform: rotate(15deg); }
    40% { -webkit-transform: rotate(-10deg); }
    60% { -webkit-transform: rotate(5deg); }
    80% { -webkit-transform: rotate(-5deg); }
    100% { -webkit-transform: rotate(0deg); }
}
@keyframes swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}
#sidebar-right-1 { -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;

}