Menu

Why Choose Multipurpose Template?

When you set out to grab a Template for your Blogger Blog, or your favorite Theme, you quickly find there are variety for designs available on the web free of cost. Picking which one to use can be a daunting task. There are many things you should think before choosing template. For Example:

  • Is Template compatible with the blog topic?
  • Is Template SEO Friendly?
  • Is Template Have Schema Markup?
  • Is Template Have Easy Navigation?
  • Is Template Responsive?
  • and many other question you will got.
We have designed Multipurpose template keep all the question in mind people often asked for help. Today we're exited to share it, we have tried our best to answer all the . Got Question? Please get in touch! You can send us your questions using our contact form on the blog or send us a tweet or post your feedback on our Facebook page.




Quick Customization

Easily customise to suit your start up blog. Take advantage of large collection of FontAwesome icons to modernize your widget and content.

Modern Design

Multipurpose Template will help your blog stand out in an already saturated market. Common design patterns, allowing for a seamless experience for users.

Responsive Layout

Built using the latest web technologies like html5, css3, FontAwesome, Bootstrap and jQuery, rest assured template will look perfect on every screen size under the web.

Template Presentation


Do share your feedback about this latest development and let me know if you have any queries to ask related to customization. Which one feature of Multipurpose Template impressed you the most and why?

In our next post we will share separate tutorial to customize template navigation, Subscription Widget, Social Sharing and Social Follower widget. Don't forget to share if you like and stay updated by subscribing our news feed or join us on Facebook, Twitter or on Google Plus.

If something's not working, don't hesitate to let us know about the error. we will try to fix that as soon as we can. Peace and blessing :)
Comments 0 Read Article →

confusion of navigation

Blogger Navigation by default have 3 buttons newer posts, older posts and home. Today in this tutorial we are going to demonstrate how to arrange blogger navigation after manipulating little bit of Jquery, CSS and Font Awesome, we will explore two different methods for making the navigation more attractive. The trick we are going to show here is not new it first shared by MS-Potilas in 2013 but as i have done research for this hack and finally i come to know that not more hundreds bloggers using the hack or you might say only hundreds of bloggers love this hack.

We called this hack “change older newer links with post title” it will change your default blogger navigation into your post title which is by default “Newer-posts, Older-posts and Home”. and in our second method we will explore how to show image from post as well as snippet of summary.

To apply  this hack you have to edit your blog template source code so ensure that you have make backup copy of your template in case of any error.

So let’s start .

Live Preview

Add Fontawesome into blogger

  1. Goto template>> edit html and search for the following code.
  2. <head>
  3. In the <head> of your template, just after opening head tag add the following piece of code (Stylesheet Link).
  4. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" />

Note:- If you already have applied fontawesome in your template then skip the above step and proceed to step below.

Installation Of The Javascript And CSS

The hack require Jquery to work so if you alread have loaded jquery in your template then just remove the jquery link from the code below if not then proceed the code as it is.
  1. Goto template>> edit html and search for the following code.
  2. </head>
  3. paste the following code just before the head tag (the code you have search in the step above)
  4. <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    .oldernewerpost {
        cursor: pointer;
        padding: 10px 20px;
        margin: 0px 0px;
        text-align: center;
        width: 300px;
        background: #495061;
        overflow: hidden;
        -webkit-transition-property: background color;
        -webkit-transition-duration: .4s;
        -webkit-transition-timing-function: ease-out;
        -moz-transition-property: background color;
        -moz-transition-duration: .4s;
        -moz-transition-timing-function: ease-out;
        -o-transition-property: background color;
        -o-transition-duration: .4s;
        -o-transition-timing-function: ease-out;
        transition-property: background color;
        transition-duration: .4s;
        transition-timing-function: ease-out;
    }
    .oldernewerright:before {
        font-family: FontAwesome;
        color: #fff;
        content: &quot;
        \f104&quot;;
        float: left;
        vertical-align: middle;
        font-weight: bold;
        font-style: normal;
        text-decoration: inherit;
    }
    .oldernewerleft:before {
        font-family: FontAwesome;
        color: #fff;
        content: &quot;
        \f105&quot;;
    float: right;
        vertical-align: middle;
        font-weight: bold;
        font-style: normal;
        text-decoration: inherit;
    }
    .oldernewerleft {
        float: right;
    }
    .oldernewerright {
        float: left;
    }
    .home-link {
        margin-top: 5px;
        display: none;
    }
    .oldernewerpost:hover {
        background-color: #3D4351;
    }
    .oldernewerpost a {
        color: #fff;
    }
    .oldernewerpost a:hover {
        text-decoration: none;
    }
    .oldernewerpost img {
      /* thumbnail properties */
        margin-top: 2px;
        padding: 2px;
        width: 72px;
    }
    .oldernewerpost .title {
        line-height: 1.1;
        font-size: 15px;
        font-weight: bold;
        padding: 0 5px 5px;
    }
    .oldernewerpost .summary {
        border-top: 1px dashed #777777;
        border-bottom: 1px dashed #777777;
        color: #404040;
        font-size: 10px;
        line-height: 1;
        padding: 5px;
        text-align: left;
    }
    </style>
    <script type='text/javascript'>
    // Post titles, thumbnails and summaries to Older Post and Newer Post links (without stats skew)
    // by MS-potilas 2013. See http://yabtb.blogspot.com/2013/11/add-post-titles-thumbnails-and.html
    //<![CDATA[
    //
    // Configuration:
    var maxSummaryLength = 160;
    // In these you can use [title], [summary]:
    var newerLink = '<div class="oldernewerpost oldernewerleft" title="Next - [title]" onclick="location.href=\'[url]\';"><p style="font-size: 20px; color: #f1f1f1;">Next</p><br/><a href="[url]"><div class="title">[title]</div></a></div>';
    var olderLink = '<div class="oldernewerpost oldernewerright" title="Previous - [title]" onclick="location.href=\'[url]\';"><p style="font-size: 20px; color: #f1f1f1;">Previous</p><br/><a href="[url]"><div class="title">[title]</div></a></div>';
    // configuration ends
    //
    function setLink(selector, template, defthumb, entry) {
      var date = entry.published.$t.match(/\d+/g);
      date = new Date(date[0],date[1]-1,date[2],date[3],date[4],date[5]); // convert iso
      var url = $(selector).attr("href");
      var summary = $("<p>"+entry.content.$t+"</p>").text();
      if(summary.length > maxSummaryLength) {
        summary = summary.substring(0, maxSummaryLength);
        var indexBreak = summary.lastIndexOf(" ");
        summary = summary.substring(0, indexBreak)+"...";
      }
      var htm = template.replace(/\[title\]/g, entry.title.$t);
      htm = htm.replace(/\[url\]/g, url);
      $(selector).replaceWith(htm);
    }
    function setOlderLink(entry) { setLink("a.blog-pager-newer-link", olderLink, defaultOlderImage, entry); }
    function setNewerLink(entry) { setLink("a.blog-pager-older-link", newerLink, defaultNewerImage, entry); }
    $(window).load(function() {
      window.setTimeout(function() {
        var timestamp = $(".published").attr("title");
        if(timestamp && timestamp != "")
          $.getJSON("/feeds/posts/default?alt=json-in-script&published-min="+encodeURIComponent(timestamp)+"&max-results=0&callback=?", function(resp) {
            var postindex = parseInt(resp.feed.openSearch$totalResults.$t);
            if(postindex > 1)
              $.getJSON("/feeds/posts/default?alt=json-in-script&start-index="+(postindex-1)+"&max-results=3&callback=?", function(resp) {
                setNewerLink(resp.feed.entry[0]);
                var postcount = parseInt(resp.feed.openSearch$totalResults.$t);
                var startindex = parseInt(resp.feed.openSearch$startIndex.$t);
                if(postcount - startindex > 1) setOlderLink(resp.feed.entry[2]);
              });
            else
              $.getJSON("/feeds/posts/default?alt=json-in-script&start-index=2&max-results=1&callback=?", function(resp) { setOlderLink(resp.feed.entry[0]); });
          });
      }, 250);
    });
    //]]>
    </script>
    </b:if>

That’s it.

You can customize the look and feel of the buttons by playing with CSS code we have shared above, In case of any error during installation (in the code above) of the script or having trouble while editing, please don't hesitate to let us know, we will do the job free (it will just cost you one smile for us). Hope you like this, Peace and blessing bodies Smile !
Comments 0 Read Article →

smartphone app error message
Developing an app requires focusing on several factors such as user-friendly interface, touch-enabled gestures and features that pretty easy to use. But as a novice, we have a tendency to overlook some of the key aspects of app development, which could eventually make the app doom to failure.

In this article, we have shared some common app development mistakes, which must be avoided while developing an app. Without any further ado, let's have a look at them.

1. Compromising on mock-ups and wireframes

Developers often rely on static wireframes, which are not enough for precisely demonstrating the smartphone app functionalities to client. It would be great if you can facilitate your client with working model so they can conveniently visualize the application before beginning development.

This can be done by designing interactive and impressive prototypes while wire-framing, Prototypes is useful to visualize ideas, something that is very important to discuss when you are working in a team. It can be difficult to explain what you have running in mind by just using words, and a visual prototype will help your and your clients to be on the same page before moving forward, avoiding possible misunderstandings in the process.

Include at least two or more cycles of design model in project timeline, to ensure clients satisfaction. Luckily, there is no dearth of designing tools that can help you create prototype (like Frame, Atomic, etc.) and wire-frames (like Sketch.io, Adobe Photoshop, etc.) efficiently.
To showcase complex animations, replace the static images with highly interactive prototypes. This will help you stand up to your clients expectations and leave valuable impression. if you need to make “advanced” animations, then you have choice between a variety of options that have an interface similar to other design tools, such as Pixate (introduce by Google).

2. Forget To Involve A Formal Change Request Process

One must expect a simple to complex change in the application throughout the development process from his clients. If you do not plan any strategy to deal with such changes in between the development, it can dramatically impact the development cost and time.

To proficiently deal with this issue, it is better to create a formal request process to introduce any change to the pre-decided project scope. This will allow you to push back on changes easily and explain upfront that the requisite changes will influence the app development budget and the project deadline.

3. Rely On Wrong Platform

It is essential to brainstorm before beginning the SmartPhone app development process and choose a viable mobile platform. Don't rush into development as soon as you get an application idea. For instance, if your prime goal is to drive profits via simple application monetization and you choose iOS platform while assuming that monetization will be convenient in the Apple App store, wait! You must rethink about it.

There are several mobile platforms, but the Apple iOS and the Google Android are the most popular mobile operating systems that are extolled for their awesome features under the sun. Both platforms have their own pros and cons, you must consider the upsides and downsides of the platform, and your business objectives while making a suitable choice. Some of the essential factors that must be taken care of include target audience base, monetization model, development cost, technical specifications, future prospects and so on.

4. Avoid irrelevant push notifications

No doubt, offering push notifications can amazingly revamp the UX and enhance the app usability. But, at the same time, one can't overlook the fact that not every application demand push notifications. Embedding them where they are not relevant, can annoy the users and hamper the user experience.
Since, making an ideal use of push notifications in an application can improve the retention rates and user engagement, one must plan the “what, when and where” about the notifications beforehand.

5. Asking users to disclose their personal info.

Think of a basic utility application like a calculator. What would be your reaction if a calculator application will ask access to your contact list and emails? I will abandon such application without giving second thought, if you want to ensure successful application, make it certain that your application doesn't ask irrelevant and extraneous permission that have nothing to do or not necessary.

6. User Acceptance Testing (UAT) isn't well defined

It is imperative to define the scope of UAT (User Acceptance Testing) properly in advance to ensure project completion within the scheduled time in an efficient fashion. For this, it is better to involve the app testers and QA (Quality Assurance) team timely in the project. Receiving feed back or in installments could be useful to give better app environment to clients.

Thus, it is advisable to make use of an effective and efficient UAT process by including the bug trackers and testing groups, and scheduling the revision before beginning the testing process. The best bug tracker will be the one that your client will use, it could be a Google Spreadsheet or Github.

Conclusion

One of the best ways to ensure that your app will go viral upon release is to run the beta testing and involve as many people from your target audience, and those involved in the app development process as much as you can. The key of successful development is to deliver an app that can augment the UX and offer a valuable feature to the users while adding value to their lives. The aforementioned are a few of the common mistakes that most of the developers commit during the development. You can learn from others' mistakes and keep these blunders at bay to deliver an incredible user interface.

Author Signature: Addison Cohen is an app developer working with Appsted Ltd. It is the leading app development service provider which delivers the most comprehensive mobile application solutions.
Comments 0 Read Article →

Forms design something every web designer should be learn the master techniques of forms, because input forms are every where on the web just like search engine input to more complex order forms, for example you have eCommerce website, then you must have forms to collect information about customers just like name, email, mobile number, billing address, payments method and shipping address and so on. it's doesn't matter the principles are same, but problem comes out when most of the professional designer make same mistakes while designing forms, there are some basic things if you follow you will be able to design pretty good and user friendly forms. In this guide we will learn the basics of the designing web forms. Since we are working on a online shopping project, we have found something really interesting to share with you, so that's why we here with the awesome guide on how to design user friendly forms.

If you are running an eCommerce websites you must care about user friendly forms, there are lot of things which you need to care about but we will discuss basics of the forms, which help a user to fill out the form very easy and quickly without any trouble.

We have converted the guide into the following parts

  1. Group the forms in the correct way
  2. Use of the correct input types
  3. Make sure have helper text
  4. Highlight the required inputs
  5. Tell the users about inputs format
  6. Missing or an error feedback
  7. Responsive and mobile friendly inputs

Group the forms input in the correct way

Today as the web designing growing very quickly, There are many different ways to organize the forms but ensure that the basic rules should be followed, first thing you should keep in mind when designing forms, divide the forms in to groups, for example personal information, payment information, and billing fields. Most of the eCommerce website also offer separate billing address so then the sequence will be look like this, Personal Information, Credit Fields, shipping and billing. Let's take a look at the unorganized forms in the image below.


In the example above we have some related fields but the fields are not well organized, it's very hard to scan for a lay man, so we have another example, grab it from image below, the image below will show you the great example of grouped form fields and you will found it very easy to understand.


Now check out the example above, it's the same form but the related inputs are grouped. This is much easier to understand for simple user, even they don't have the how know of online form filling and really makes more sense than the unorganized form, also it's very easy for a lay man to read and fill the the form, it does take more vertically space but having related fields organized is very important part of forms. Note that don't display the inputs or fields that are not really needed. So let's move on our next part of this tutorial, Submit Button (Call to action button).

Submit button (Call to action button) in forms usually the button that will submit that form, either submit simple form or create account whatever is this, the important thing is that need to be standout and describe the purpose of that form. Just take look at example below to understand the how to standout the button. Here is you can see the button is not really clear.


Now take a look at the example below and compare it to button above, you will find it really useful and button is really standout and make really big difference.


As a concept it can help you think about making user friendly forms effectively. The combination of layout, color and overarching principles will help take your designs to the next level, we hope it will help you to learn something useful, With mistakes such as those listed above, you just have to memorize the rules so that when you are about to use them, you’ll catch yourself in the act and know for certain that you’ve written or design the right one.

In our up coming tutorial we will learn about helper text and why should we use helper text. So stay tuned and don't forget to share your feedback, it will help us to improve our content quality. Peace and blessing, Happy Blogging..!!
Comments 0 Read Article →

Blogger HTML Editor
After the CSS Prettify for CSS, we are now releasing a web editor, which is we called as Online HTML Editor For bloggers, this Online Editor has been made to simplify and enhance your Coding Experience. Built in Tag, brackets and tab handler, and the active line highlight mode lets you focus on your content. it’s not really unique or new editor in world of blogging, but we have tried to create something different we have seen on internet. It’s may not be look professional Editor but we have added some advance functionality as we mostly seen in professional HTML document editors, which we will discuss later. The editor have pretty strong functionality to read the XML (i.e blogger template) document and quickly load the document inside Iframe after pressing the preview button. So let’s see the example below and then we will learn the features of the editor.

Live Preview

First, let's take a look at our simple XML file. Because this is a quick introduction, I'll run through the screen shot a bit quicker way than sharing full code of XML document.

Preview of editor

wow..!! It’s look amazing, now try it yourself and leave your feedback in the comments below.

Useful features of the editor


  • Syntax Highlighter

    Syntax Highlighter is a characteristic feature of code editor, which gives the order to change programming language such as JavaScript code into different colors based on language. Spicy Blogging does not have its own syntax highlighting plugin, It uses CodeMirror Syntaxhighlighter to Prettify the HTML, JavaScript, CSS and XML code.

  • Line Numbering

    Line numbers at least is a must in a basic editor, Why? because If you are getting error messages line numbers would let you help where is the error exist and where it's come from.

  • Bracket And Tag Closer

    When typing an html document, Editor will close tags and brackets automatically such as "html" and "{}" using auto bracket and tag closer addons. It's one of the most smart feature for an advance code editor.

  • Highlighting Active Line

    Editor will highlight the current line when user click anywhere in the screen that entire line gets highlighted based on the terms of CSS.

  • Responsive Design Even Useful On Smart Phones

    When we talk about responsive design in terms of web design, it's mean that layout will be re sized based on the view port or in other words users screen resolution. Editor will work like horse on mobile devices and let you help to test and create webpages on small screens.


Why Online HTML Editor

Its just little approach to give our reader a quick and easy tool to test blogger templates, Mostly whenever bloggers need to edit template they use blogger default editor which take less than one minute (depend on your connection speed) to save the template and then they can see the live preview. But by using our online editor the live preview is just away from only one click and your template will be live in the iframe. So I think its enough to tell you why online html editor rather than using an offline editor.

Credits

CodeMirror and it's addons is Open Source components, which released under MIT Lincese. You can find the source code of their open source projects along with license information on the CodeMirror official website. We acknowledge and are grateful to these developers for releasing as open source project.

Need Help

As always, please feel free to leave your comments if you need help, have feedback, ideas to improve the editor, or you simply want to report bug! You can reach us by posting your comments in the form below. We are more than happy to help our readers as much as we can. Peace and blessing :)
Comments 0 Read Article →

Lettering Plugin Logo
Can you spot the difference between a blog title and Spicy Blogging title? (if yes:)), this small difference makes a huge difference to force a reader to stay at least few minutes (to some of you), it's actually a quite useful to make an eye-catching blog/webpage. Today we want to show you how to create these types of headings, the current version of the CSS3 doesn't support the complete control over the letters. Few days back i was searching for quick solution to create heading in different colors but unfortunately i have not found any easy and quick solution in CSS3, Except an Jquery plugin which is called "lettering-jay-ess", Plugin assumes basic counting abilities, but it's a very cool and quick way to manipulate every letter with css. We personally found this to be a pretty quick and elegant solution to stylize each letter in different color, animation and even transitions. You can achieve the same effect by breaking your browser if you try to wrap every letter on your page in a span tag, it's sound like headache so don't do that. The plugin has the ability to split words and lines as well.

The CSS-Tricks has a very good explanation related to our tutorial, for further references in CSS3 don't forget to read article.

CSS-Tricks: A call for nth-everything.

In this part of the tutorial we will create the spicy heading (H1) with CSS3 transitions and transform, you can use these effects even on h2, h3 and so on.

Live Demo

Let’s wrap a header, We have to keep in mind that we want to control the letters from the H1. So we will use the H1 tag (<h1>) as our control element and we give it the class spicy-title. So our HTML Markup will something like this:

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>How To Stylize Each Word in Headings.</title>
<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0;'>
</head>

<body>

<header>
<hgroup>
<h1 class='spicy-title'>SpicyBlogging</h1>
</hgroup>
</header>

</body>
</html>

Let’s go on and load lettering Plugin and Jquery in body Section.

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>How To Stylize Each Word in Headings.</title>
<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0;'>
</head>

<body>

<header>
<hgroup>
<h1 class='spicy-title'>SpicyBlogging</h1>
</hgroup>
</header>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script src='https://dl.dropboxusercontent.com/u/223738947/JavaScript/Lettering.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#spicy-title').lettering();
});
</script>

</body>
</html>

Include lettering.js and then call the plugin with options.

<script type='text/javascript'>
$(document).ready(function(){
$('#spicy-title').lettering();
});
</script>

How it's Work

Lettering.js is Javascript span tag injector for typography, Plugin will churn out your ".class" and in output it will add classes inside the span with the name char#. In our case plugin churn our .spicy_title and output might be look like this:

<span class='char1'>S</span>
<span class='char2'>p</span>
<span class='char3'>i</span>
<span class='char4'>c</span>
<span class='char5'>y</span>
<span class='char6'></span> /* For space between word */
<span class='char7'>b</span>
<span class='char8'>l</span>
<span class='char9'>o</span>
<span class='char10'>g</span>
<span class='char11'>g</span>
<span class='char12'>i</span>
<span class='char13'>n</span>
<span class='char14'>g</span>

Plugin will generate .char# classes into span tag, then you can easily handle color and other CSS3 effects of every letter of the heading by using CSS and text will remain select-able. So now time to click on next step :).

In this tutorial we will only learn how to control the letters and in the coming tutorials words and then how to control lines, for the advance use of plugin you can read the documentation.

The CSS code for Spicy Blogging are as follow:

spicy-title span{display:inline-block;position:relative;letter-spacing: 1px; transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -webkit-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; text-shadow: rgb(71, 71, 71, 1.0) 1px 3px 1px;}
spicy-title span:hover{top:3px}
spicy-title .char1 {color: #62bd18; font-size: 1.5em; bottom: -3px; transform: rotate (-6deg); -webkit-transform:rotate(-6deg)}
spicy-title .char2 {color: #8ddd00;}
spicy-title .char3 {color: #ffbb00;}
spicy-title .char4 {color: #ff5300;}
spicy-title .char5 {color: #fc3d31; text-transform:uppercase; top: 3px; left: -2px; transform: rotate (6deg); -webkit-transform:rotate(6deg)}
spicy-title .char6 {color: #fff000; font-size: 1.5em; margin-left: 10px; transform: rotate (-6deg); -webkit-transform:rotate(-6deg)}
spicy-title .char7 {color: #eaa800;}
spicy-title .char8 {color: #dfe000;}
spicy-title .char9 {color: #ff5400; transform: rotate (6deg); -webkit-transform:rotate(6deg)}
spicy-title .char10{color: #d56500; transform: rotate (6deg); -webkit-transform:rotate(6deg)}
spicy-title .char11{color: #6dae2e;}
spicy-title .char12{color: #f2c700;}
spicy-title .char13{color: #fb8f3d; text-transform:uppercase; top: 3px; left: -2px; transform: rotate (-6deg); -webkit-transform:rotate(-6deg)}
spicy-title .char1:hover {color: #62bd18; font-size: 1em; transform: rotate (0deg); -webkit-transform:rotate(0deg)}
spicy-title .char6:hover {color: #fff000; font-size: 1em; transform: rotate (0deg); -webkit-transform:rotate(0deg)}
spicy-title .char13:hover{color: #fb8f3d; text-transform:none; top: 0px; left: -2px; transform: rotate (0deg); -webkit-transform:rotate(0deg)}
spicy-title .char9:hover {transform: rotate (0deg); -webkit-transform:rotate(0deg)}
spicy-title .char10:hover{transform: rotate (0deg); -webkit-transform:rotate(0deg)}
spicy-title .char5:hover { text-transform:none; top: 0px; transform: rotate (0deg); -webkit-transform:rotate(0deg)}


In our case we have used 13 letters in h1 (without Space), We aren't limited to only 13 here, we can manipulate as many letters (char14, 15,16) as we want. We will share some advance tutorials on lettering plugin, so till then stay updated by subscribing our email news feed or you can also join us on Facebook, Twitter, Google Plus.

Suggestions or need help?

If you have any feedback or suggestions, please leave those below in the comment form. I hope this spicy tutorial may help you make better understanding in web designing terms and techniques. Wishing you the best of blogging..! peace and blessing. :)
Comments 0 Read Article →