Softwares N Tricks: HTML Codes

Showing posts with label HTML Codes. Show all posts

Wednesday, 24 October 2012

Awesome And Stylish Custom 404 Page With List Of All Posts

Whenever a web server is unable to locate a requested page, it returns a 404 error. These errors are often caused by users who input wrong addresses, but a site redesign can also result in a lot of incoming links that point to nonexistent pages or deleted. A visitor who arrives at a 404 page is highly likely to bounce, or immediately leave the website, because default error pages cause users to disengage from the content. That means a custom 404 page can be a perfect opportunity to reengage a portion of the readership, which can pull those valuable users back into the content of a site. Default 404 pages have changed very little over the years. Web servers provide bare bones 404 pages, and some browsers also include default error pages that are a little more helpful. These error pages are just designed to convey basic information, which means they do an extremely poor job of retaining users. Over the years, most people have become accustomed to simply closing their browser windows whenever a 404 error shows up.

You have to make it user friendly because the visitor will 101% disappointed after seeing that there required page is not found so don't let him angry but make it happy that i came here...There are a lot of different ways to handle a customized 404 page,some buddies share many of beautiful design pages having rest of page clear or gadgets but here i am sharing my own ideas that when visitor did not find there target then he is going to leave the sites or blog but when they see that there is another a list of HOT article available here the start seaching again and be happy. So first see the DEMO and then if you like this use it...

Features:

1.) An Awesome Image.
2.) A "List Of Your Blog's All Post" Under There Labels.
3.) Change Able Text.

4.) Easy To Install.

5.) Stylish And Beautiful Design.

How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

body {
    background: #2a2a2a url(http://biomechanism.com/wp-content/uploads/2012/01/blue-wp-background-200x200.jpg);
    width: 100%;
    color: #333;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    margin: 0 auto 0;
    padding: 0;
}

Tuesday, 23 October 2012

Awesome And Simple Softwaresntrick-Social Widget With Subscription Box

Am sharing with you again another cool subscription box which comprises of subscription box, and social sharing buttons. In my previous post, there is so so many widgets and it is another to that is simple but stylish. I have design it to the perfect taste so that it wouldn't affect your blog loading time. To add this subscription box to your blog, In this I put a Email subscription from and three social sharing link FaceBook, Twitter, LinkedIn, Google+, YouTube, Rss And Other Social , so that this widget fulfill your both requirement. I used CSS3 to rotate these on hover design this widget so it take only few seconds to load. This Widget can be add in Blogger, WordPress or Any other HTML website. simply follow the few steps below.

Features:
1.) Social Network Icon With Subscription Box.
2.) Twist The Icons On Hover.
3.) FaceBook, Twitter, LinkedIn, Google+, YouTube, Rss And Other Social.
4.) Simple And Stylish Design.
5.) HD Icons.
6.) Quick To Load CSS.

How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.

<style>

#exeideasbody {

background:#f8f8f8;

margin:0 0 40px 0;

padding:10px;

border: 3px outset #ff0000; -moz-border-radius: 10px; border-radius: 10px;

overflow:hidden;

font-size: 14px;

}

.spinning_icons a{

width:36px;

height:36px;

display:inline-block;

text-indent:-9999em;

background-position:0 0;

background-repeat:no-repeat;

z-index:2000;

overflow:hidden;

}

.spinning_icons a:hover{

transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

transition: transform 0.2s ease-out;

-webkit-transition: -webkit-transform 0.2s ease-out;

-moz-transition: -moz-transform 0.2s ease-out;

}

.twitter{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxwuj-DLGAkIoXJT-TRcTtlPb7yCYnnwRDhU1kiT0g2cJ_hxDMGq0SX_nQt7XhvDlCnRrXlkq_NZMc5QIRMKTQnUlSiBMMT0_s-2kiqBx2cVL7K1uuokvG2cYMczTRYqu3FFhKLNpuIJ4/s0/twitter.png'); }

.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUgkQc-RqFmlr3SAxaR_ue6qwzmLdGqfZfTE_6zX8EeCIUEB-lggweX-T5cqoWYTY45Y3RZ9k5Et0CnSRW3uhHR8x3awmIDQ0rS-h_iNx-qC8OIJhu1ed1_V2HgEDDzF4NddK91f5b5BU/s0/facebook.png'); }

.linkedin{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrDNnbExQra8b8FO-i8cwM7-jIElOuD64dYpDxVLFFRGlmPNUhuLYcK64RzjkvuKGlKy-_RUg_YnSZCbZ4deonWjzcWFUZQVaqwbQfb-5wBvnJ2pl1RlbNcIApiDGtQJKdx-OGr90Wxg0/s0/linkedin.png'); }

.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp4l9-Mc5U6X9_8nD902GpY4sTyIspLBJZbwuIw4EPdUi0su4nfgp2e6EU_n8cxDbbH6tklSfe01a2CvXrAmLV-aKcjuKj5FRRajTosRch1Zudx1x_NaV2xbQZaq05fbW1oXmXRiUZp08/s0/rss.png'); }

.youtube{ background:url('https://lh6.googleusercontent.com/-EjnvqvxdSIQ/T40l3XSfhlI/AAAAAAAAB9s/4VnPEZgDXSQ/s32/YouTube.png'); }

.googleplus{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjinrQqgMp6vX6NraWcUdEAfLifh3m6JZ8GTyTum4qAw44D942IqJvydvbubtmDDnxpTaZ4v7pE_3SQnVMHUUK-VocW__7R0mcSSnrfbmqiNBeQltqR8wJ3AlCCKKsVjYOE5XG-AxWgOrw/s0/gplus.png.png'); }

.mixsocial{ background:url('https://lh6.googleusercontent.com/-xcHvGi2TpZk/T6jP9vrvTMI/AAAAAAAACGg/7mFW9zJeCic/s32/myspace.png'); }

#email-news-subscribe .email-box{

padding: 5px 10px;

font-family: "Arial","Helvetica",sans-serif;

height:35px;}

#email-news-subscribe .email-box input.email{

background:#FFFFFF;

border: 1px solid #dedede;

color: #999;

padding: 7px 10px 8px 10px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

-o-border-radius: 3px;

-ms-border-radius: 3px;

-khtml-border-radius: 3px;

border-radius: 3px;

border-image: initial;

font-family: "Arial","Helvetica",sans-serif;}

#email-news-subscribe .email-box input.email:focus{color:#333}

#email-news-subscribe .email-box input.subscribe{

background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);

background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));

background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);

-pie-background: linear-gradient(270deg,#ffca00,#ff9b00);

font-family: "Arial","Helvetica",sans-serif;

border-radius:3px;

-moz-border-radius:3px;

-webkit-border-radius:3px;

border:1px solid #cc7c00;

color:white;

text-shadow:#d08d00 1px 1px 0;

padding:7px 14px;

margin-left:3px;

font-weight:bold;

font-size:12px;

cursor:pointer;

border-image: initial;}

#email-news-subscribe .email-box input.subscribe:hover{

background: #ff9b00;

background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);

background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));

filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);

outline:0;-moz-box-shadow:0 0 3px #999;

-webkit-box-shadow:0 0 3px #999;

box-shadow:0 0 3px #999

background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));

background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);

-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);

border-radius:3px;

-moz-border-radius:3px;

-webkit-border-radius:3px;

border:1px solid #cc7c00;

color:#FFFFFF;

text-shadow:#d08d00 1px 1px 0}

</style>

<!--[if IE]>

<style>

#email-news-subscribe .email-box input.subscribe{

background: #FFCA00;

}

</style>

<![endif]-->

<a href="http://twitter.com/Arnydgreat" class="twitter" title="twitter">Twitter</a>

<a href="http://facebook.com/MediaFireMoviesHeaven" class="facebook" title="facebook">Facebook</a>

<a href="http://pk.linkedin.com/in/Profile" class="linkedin" title="linkedin">Linkedin</a>

<a href="https://plus.google.com/102256859586166648016" class="googleplus" title="Google Plus">Google Plus</a>

<a href="http://www.youtube.com/softwaresntrick" class="youtube" title="youtube">YouTube</a>

<a href="http://www.softwaresntrick.blogspot.in/p/about-us.html" class="mixsocial" title="Other Social">Social</a>

</div>

</form>

</div>

</center>

Customization:
1.) Change MediafireMoviesHeaven With Your FacebookLinks.
2.) Change Arnydgreat With Your Twitter Account.
3.) Change Softwaresntrick with your youtube channel Name
4.) Change softwaresntrick withyour linkedin account.
4.) Save And Done.

Auto Image Thumbnail & ReadMore Link For Blogger Post

Some people looking for this code and he didn't find this because blogger create a template with this code and force people to use their template. But now peoples are free to use the code with their own desire template. So here we go on to finish the goal.

Features:-

1.) When you apply this code you need not to enter LINE BREAK option in your every new post even in old post, This will automatically break the line after some words.
2.) The first image of your post will be chosen for the view on main page of your blog for that post.

3.) If you already insert LINE BREAK option in your desire post, after applying this code you will see the two READ MORE link below of every post.Then Please Contact Me Or Comment Here, I Will Set It With You.

How To Apply The Code:-
Here we go:

Login to your Blogger account.
Go to Dashboard > Design > Edit HTML.
Back up your template.
Check the Expand Widget Templates check box on top right of the HTML window.
In the code window, look for </head> line.
Add the code below right after that line.

<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){ 
 if(strx.indexOf("<")!=-1)
 {
  var s = strx.split("<"); 
  for(var i=0;i<s.length;i++){ 
   if(s[i].indexOf(">")!=-1){ 
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
   } 
  } 
  strx =  s.join(""); 
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2; 
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
 strx = strx.substring(0,chop-1); 
 return strx+'...'; 
}

After that, find this line:

<data:post.body/>
Replace the line with this code:

Click Preview.

If it works, then click Save Template.

Customizing the snippet:
You can customize the read more by changing the values of the variables below:
thumbnail_mode –set to “yes” if you want to show thumbnail with text summary. Set to other than “yes” to show only text summary.
summary_img –specify the number of characters (including spaces) you want to show in the summary, with thumbnail.
summary_noimg –specify the number of characters (including spaces) you want to show in the summary, when there is no thumbnail.
img_thumb_height and img_thumb_width -specify the thumbnail height and width (in pixels).
You can change the words “Read more” with your own by changing it in line 12 of the code in step 8.
Read More... Text – you can also change this with image, Please comment here if you want read more image.

Don't Forget To Say Thank's

Animated Stylish CSS Navigation Menu For Blog And Website

This is called CSS Spotlight Menu and idea and code provided by Dynamic Drive. I just update some code and share this in easy step here.
Spotlight Menu takes advantage of CSS3's border-radius property and transitions to add a circular background to its menu items when the mouse rolls over each one. The result is a Flash-like, sleek spotlight menu! The circular background appears in all major browsers, including IE9, while the transition effect works in browsers that support CSS3 transitions, namely, FF3.5+, Safari 3.1+, Google Chrome, and Opera 11.6+.

If you are asking how it works, First you implant this and see yourself how awesome it is...! Menu remains simple untill you move your cursor on it. When you make it hover there appear a square box that automatically start rounding its corner and finally it become circle as in the upper screen shoot.Is not Awesome...??? Just do it now...

Features:
1.) Simple And Easy To Install.

2.) Nice Animation Effect And Awesome Look.
3.) Easy To Add Links And Use.
4.) Without J-Query.
5.) Quick To Load.
6.) Works With IE9, FF3.5+, Safari 3.1+, Google Chrome, and Opera 11.6+ Browsers.

How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.

Customization:
1.) Change All Red Text With Your Links Name.
2.) Change All Blue Hash With Your Links.
3.) Save And Done.

All About CSS3 With Features, Requirment And Information

A View On History Of CSS:-

CSS1:-
CSS1 is the first edition of Cascading Style Sheets which were introduced in 1996. It came with the support for several properties. Introduction of unique ‘id’ for each property and introduction of classes to properties that should have the same styles attributes were the most important things there were. Margin, border, padding and positioning also powered by style sheets although they could be done by using the HTML elements. Spacing between lines and rows of tables are also easily done using the stylesheets. The W3C stated the importance of using CSS instead of having the html as the giving the ability to optimization and making it easy for the designers to design and settle down the design easily.

CSS2:-
CSS2 was published in 1998. Positioning of index with several property values such like fixed, absolute, relative and indexing were the commonly highlighted ones among them. Bidirectional texts and some other new front properties such as shadows were introduced by this edition of CSS. Two updates and features came in to fix the errors in CSS 2. CSS 2.1 was the last 2nd generation edition of CSS.

CSS3:-
CSS3 is the latest edition of the CSS Stylesheets. There are several new functionalities have been provided through CSS3. Functions such like opacity, Text-overflow, media queries and box shadows are some of the much attractive introductions.

Who Supports CSS3?
To get a grasp of how much CSS3 has influenced web development, look no further than Microsoft’s own adoption of the markup language with the new Internet Explorer 9 released in March. Prior versions seemingly ignored most of what CSS3 brought to the table, but with IE9, all of the major browsers (not to mention the software used to design pages in the first place) finally embrace the technology -- allowing designers to at last show off their best efforts, regardless of platform.

Of course, users on older computers and browsers won’t be able to take full advantage of this advance without upgrading -- but as time goes on, we’ll all be using CSS3-compliant browsers and many of the old, complicated methods of developing websites will start to fade at long last.

What's New In CSS3:
Many exciting new functions and features are being thought up for CSS3. We will try and showcase some of them on this page, when they get implemented in either Firefox, Konqueror, Opera or Safari/Webkit.

Here They Are:

Borders:
border-color
border-image
border-radius
box-shadow

Backgrounds:
background-origin and background-clip
background-size
multiple backgrounds

Color:
HSL colors
HSLA colors
opacity
RGBA colors

Text Effects::-
text-shadow
text-overflow
word-wrap

User-Interface:

box-sizing
resize
outline
nav-top, nav-right, nav-bottom, nav-left

Selectors:
attribute selectors

Basic Box Model:
overflow-x, overflow-y

Generated Content:
content

Other Modules:
CSS3 Transitions
media queries
multi-column layout
Web fonts
speech

"You Might Also Like This" Widget With Thumbnail For Blog & Wordpress

Show Related Stories Under Each Post!
LinkWithin is a blog widget that appears under each post, linking to related stories from your blog archive.

Don't Let Your Past Stories Go to Waste!
We retrieve and index all stories from your blog archive, not just recent stories, making them accessible to new or casual readers of your blog who would not otherwise encounter them.

Increase Pageviews, Keep Readers Engaged!
The widget links to stories that are relevant and interesting to readers of a particular post, keeping them engaged with your blog, and increasing your traffic.

Elegant, Unobtrusive Design!
Our widget is minimally styled and blends in with your site design.

Free and Easy to Install!
The widget is free and ad-free. It takes a minute to get the widget up and running on your blog, no signup required!

Features:
1.) Free.
2.) No Ads.
3.) No Sign Ups.

4.) You Can Show 3, 4, 5 Related Post Under Each Of Your Post.

5.) For Both Light And Dark Background.

6.) Embed Automatically Option Available For Blogger, Wordpress(Self Hosted), TypePad And Custom..