Skip to main content

Posts

Showing posts from 2015

15 best free responsive jQuery image sliders

Image sliders are the best way to highlight your prior content on homepage/landing page. In the vast web world you may find a large number of Image sliders, and maybe you don’t have sufficient time and patient for checking all of them out. So here I tried to scale down the number to 15 and presenting 15 of the best free, responsive and latest tech enriched content sliders. See their demo and download them, then use them on your project. Read on:

1. FlexSlider



An awesome, fully responsive jQuery slider toolkit.     
Simple, semantic markup     Supported in all major browsers     Horizontal/vertical slide and fade animations     Multiple slider support, Callback API, and more     Hardware accelerated touch swipe support     Custom navigation options     Compatible with the latest version of jQueryDemo
Download

2. unslider



unslider is a responsive and cross-browser jQuery plugin for creating clean and flexible content sliders on your web site. unslider currently supports almost all the h…

How to create Vertical text/link navigation menu

The navigation menu styles we mostly see around on web are sidebar menu, vertical menu, fixed to header menu etc. It’s very rare to spot a site with vertical text/link style menu, right? So here it is I developed this vertical text/link style menu which offers; links are hanging from top side of site, and links will be shown vertically. This menu made with CSS3 transform formula to make links appear vertically and added opacity effect and cheerful flat color to each link enhanced with Google web font. Let’s see how it looks like and to create this menu. Read on-

How to create Vertical text/link navigation menu
How to:
Step 1:First create a navigation class; and all positioning codes-

.nav {
    position: relative;
        float:right;
        top: -3px;
}

Step 2:Here we design the nav’s li elements; with CSS3 transform: rotate(-90deg); width; text positioning and <li> positioning.

.nav ul li {
    -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  transform: rot…

Overlay style navigation menu for Blogger

In my past posts I published two different position style navigation menus, Fixed to header and static position menus, here I am publishing a new style of menu it’s calls Overlay style; full navigation will appear top-left side of your blog interface with bar/burger style trigger and hover on the trigger will show full navigation menu on a full screen overlay page. It also responsive so also works seamlessly on mobile devices; it has an extra close button in case automatic overlay closing function unable to work. Made with CSS, CSS3, HTML, Google font let’s see how it looks like and how to add it to your blogger blog.

Overlay style navigation menu for Blogger
Live Demo:

(Click here)

Codes for Copy:


<div class="menu-outer">
    <div class="menu-icon">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
    <!--crawlist.net widget…

UX/UI design tips for a captivating mobile app : Your 10 point bible

Being a mobile app development company we know that user experience can make or break a mobile app (depending on wether it’s awesome or horrendous). Mastering it right hinges on a good User Interface and right communication with the user.
For an independent developer whose sole product is a mobile app, it’s challenging indeed. And for someone who is employed as a UX/UI designer, it is even less of a joyride as the added pressure of client’s monetary investment is involved.

Further ordeals occur when the developer is dealing with payment apps where additional care has to be taken as one is tasked with designing for an acute interaction. Acute because they are dealing directly with the end user’s money. UI designing in this space requires utmost thoughtfulness because it requires a great level of attention to detail and consistency across technology touch points : from users’ as well as developer’s ends.

Sharp, efficient and secure are the watchwords for creating an awesome mobile ap…

Add animated underline links of your Blogger blog

I published couple of cool tutorial and tricks for customizing your blogs post area elements before; here to mention some notable using Google font in post, customized blockquote, syntax highlighter, setting up 404 error page, Flickr images gallery, Remove default border and shadow from images, embedding vimeo videos etc. Here to the next stage of Blogger post customization I presenting to you here animated underline links. By applying this tutorial in post all links will show different way; animated underline will appear on mouse hover on links. This trick made with CSS3 animation and it’s easy to set up. Let’s see how it works and how to add it on your Blogger blog.

Add animated underline links of your Blogger blog
Live Demo: (click here)

Codes for Copy:


<style>/*crawlist.net CSS starts*/
.post-body a, a:visited {
  text-decoration: none;
  position: relative;
  color: #3498DB;
}
.post-body a:after, a:visited:after {
  content: '';
  height: 2px;
  position: absolute;
  …

Add Flat Post sharing widget below posts of Blogger

Few days ago I published a fresh post sharing widget for Blogger blogs named Stylish post sharing widget, today I am publishing another version of that sharing widget calls Flat post sharing widget. The specialty of this widget is it made with flat retina ready colors and modern Flat UI. Made with CSS, CSS3 and HTML; featuring Google font, 6 sharing service. Let’s see how it looks like and how to add it in Blogger:

Flat post sharing widget below posts of BloggerPreview:

Live Demo:  (Click here)

Codes for copy:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>/*crawlist.net CSS starts*/
@import url(https://fonts.googleapis.com/css?family=Titillium+Web);
@import url(https://fonts.googleapis.com/css?family=Montserrat);
.ks-flatsharo { border:2px solid #CCC; height:110px; width:600px;
background: #ffffff; margin:auto; padding-left:20px}
.ks-flatsharo h3 {font-family: 'Titillium Web', sans-serif; font-size:20px; text-align:center;
font-weight:…

Add Stylish Post sharing widget below posts of Blogger

Few months ago I published couple of fresh post sharing widget for Blogger blogs. Starting with Foldable, Floating share bar with icon, Floating share bar with count, Coldblooded, Truck icon style etc. If you already used one of them now it’s time to use the latest Crawlist sharing widget. It’s a very popular sharing widget can be seen on a lots of popular sites powered by Wordpress I duplicated and remade it for Blogger platform. Made with CSS, CSS3 and HTML no image just gradient colors; featuring Google font, 6 sharing service. Let’s see how it looks like and how to add it in Blogger:
Stylish Post sharing widget below posts of BloggerPreview:
Live Demo: (here you go)

Codes for copy:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>/*crawlist.net CSS starts*/
@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(https://fonts.googleapis.com/css?family=Montserrat);
.ks-sharo { border:1px solid #CCC; height:110px; width:600px;…

Add Featured Post slider in Blogger (homepage/below post) Carousel style

Couple of month ago I published a high-end featured post widget which can be add to sidebar of your Blogger blog. Here today I am publishing another featured post widget what you can use on your homepage or below posts. This widget is a jQuery slider also known as ticker image slider. This featured post slider is:
Simple: Easy to configure and customizeSmall: Don’t take much space wherever you set it Light weighted: Some jQuery, CSS and HTML madeHigh-end: ResponsiveAwesome: Smart and neat looking carousel style Let’s see how it looks like and how to add it in Blogger blogs.

Add featured post slider in Blogger (homepage/below post)
Preview:

Live Demo: (click here)

Codes for copy:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/35622252191/slider.js"></script>
<script type="text/javascript">
          $(document).ready(function(){
             …

Add 6 stylish list/bullet to Blogger posts

Blogger’s default list/bulleting system is using dots, dotting style is cool but not that much cool if you are little bit of stylish and want to stay trendy and also want to represent your lists with high-end taste. That’s reason here I am publishing 6 different style of bullet system calls Arrow, Minus, Check, Plus, Carrow and Star. Made with CSS, Google font, Sprite images and they are super easy to add; designed that way. Let’s see how they look like and how to add them to your Blogger blog.

Arrow style
.post-body ul {margin:0; padding:6px 0; list-style:none;}
.post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(http://4.bp.blogspot.com/-DNKkr3dU60Y/U_Y0fu18r_I/AAAAAAAAE4g/D_thihTIu-E/s1600/oh.png); background-position:-303px -322px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/
@import url(https://fonts.googleapis.co…