Menu


There are lot of social sharing plugins already shared on the web, i have seen social sharing buttons while i was reading article on Google's website Think With Google, i was really inspired with functionality of that plugin. Since i'm not frontend developer, i have found a great framework materialize to develop that social sharing button as i seen on Google's Website. The Looks great on desktop as well as a pretty good use on smartphones.

Check out the demo below pen on codepen.

See the Pen Fab Social Share Button by Mohammad Ishtiaq (@Mybloggertricks) on CodePen.

I will show the basic work of the plugin you have to put it to work at your own :)

Note that you have to import jQuery before importing materialize.js! Generally it is good option to import javascript files at the end of the body to reduce page load time.

1. The Basic HTML Markup something like this.
 <!DOCTYPE html>
  <html>
    <head>
      <!-- FontAwesome-->
      <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
      <!--materialize.css-->
      <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css"  media="screen,projection"/>
      <!-- optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
      <!-- Jquery & materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
    </body>
  </html>

2. The HTML markup FAB Sharing Buttons would be something like this:

<div class="fixed-action-btn click-to-toggle">
    <a class="btn-floating btn-large cyan">
      <i class="fa fa-share-alt" aria-hidden="true"></i>
    </a>
    <ul>
      <li><a href="#" class="btn-floating white"><i style="color: red;" class="fa fa-facebook" aria-hidden="true"></i></a></li>
      <li><a href="" class="btn-floating white"><i style="color: red;" class="fa fa-twitter" aria-hidden="true"></i></a></li>
      <li><a href="#" class="btn-floating white"><i style="color: red;" class="fa fa-pinterest" aria-hidden="true"></i>
</a></li>
      <li><a href="#"class="btn-floating white"><i style="color: red;" class="fa fa-google-plus" aria-hidden="true"></i></a></li>
    </ul>
  </div>

You can customize the look and feel of the buttons by playing with CSS , 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). Peace and blessing bodies..!!

We hope you have enjoyed the above plugin! If you feel Materialize has helped you out and want to about the framework just visit official website.
Comments 0 Read Article →


SVG Stroke Animation is an easy, lightweight Pure CSS Social sharing plugin with amazing animation effect, surely it will lead your user to stick once.


See the Pen Social Sharing Button by Mohammad Ishtiaq (@Mybloggertricks) on CodePen.


1. Add HTML Markup

<div id="wrapper">
  <div id="share"><span>Share : </span>
    <a href="#" class="container twitter">
      <svg  preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="circle">
         <circle cx="100" cy="100" r="50"/>
      </svg>
      <div class="social">
        <i class="fa fa-twitter"></i>
      </div>
    </a>
    <a href="#" class="container facebook">
      <svg  preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="circle">
         <circle cx="100" cy="100" r="50"/>
      </svg>
      <div class="social">
        <i class="fa fa-facebook"></i>
      </div>
    </a>
    <a href="#" class="container google">
      <svg  preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="circle">
         <circle cx="100" cy="100" r="50"/>
      </svg>
      <div class="social">
        <i class="fa fa-google-plus"></i>
      </div>
    </a>
    <a href="#" class="container pinterest">
      <svg  preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="circle">
         <circle cx="100" cy="100" r="50"/>
      </svg>
      <div class="social">
        <i class="fa fa-pinterest"></i>
      </div>
    </a>
    <a href="#" class="container linkedin">
      <svg  preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="circle">
         <circle cx="100" cy="100" r="50"/>
      </svg>
      <div class="social">
        <i class="fa fa-linkedin"></i>
      </div>
    </a>
  </div>
</div>

2. Change the # with your respective social sharing fuctions.

3. CSS is as following:

<style>
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>
</style>
#wrapper {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  height: 100px;
  #share {
    background: rgba(0,0,0,0.5);
    position: relative;
    margin:0 auto;
    width: 620px;
    span {
      width: 100px;
      height: 100px;
      float: left;
      line-height:100px;
      text-align: center;
      color:white;
    }
  }
}
.container {
  position: relative;
  display:inline-block;
  width: 100px;
  height: 100px;
  line-height:100px;
  text-align:center;
  margin:0 auto;

  .circle {
    fill: none;
    stroke: #ffffff;
    stroke-width:5px;
    stroke-dasharray: 40;
    transition: all .2s ease-in-out;
    animation: outWaveOut 1s cubic-bezier(0.42, 0.0, 0.58, 1.0) forwards;
  }
  .social {
    color:white;
    font-size:1.8em;  
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;  
    transition: all .5s ease-in-out;
  }
 
  &:hover {
    cursor:pointer;
  }
}
.twitter:hover {
  .circle {
    fill:#ffffff;
    fill-opacity : 1;    
    animation: outWaveIn 1s cubic-bezier(0.42, 0.0, 0.58, 1.0) forwards, colorTwitter 1s linear forwards;
  }
  .social {color:#3aaae1;}
}
.facebook:hover {
  .circle {
      fill:#ffffff;
  fill-opacity :1;    
  animation: outWaveIn 1s cubic-bezier(0.42, 0.0, 0.58, 1.0) forwards, colorFacebook 1s linear forwards;
  }
  .social {color:#3b5998;}
}
.google:hover {
  .circle {
      fill:#ffffff;
  fill-opacity : 1;    
  animation: outWaveIn 1s cubic-bezier(0.42, 0.0, 0.58, 1.0) forwards, colorGoogle 1s linear forwards;
  }
  .social {color:#dd4b39;}
}
.pinterest:hover {
  .circle {
      fill:#ffffff;
  fill-opacity : 1;    
  animation: outWaveIn 1s cubic-bezier(0.42, 0.0, 0.58, 1.0) forwards, colorPinterest 1s linear forwards;
  }
  .social {color:#cb2027;}
}
.linkedin:hover {
  .circle {
      fill:#ffffff;
  fill-opacity : 1;    
  animation: outWaveIn 1s cubic-bezier(0.42, 0.0, 0.58, 1.0) forwards, colorLinkedin 1s linear forwards;
  }
  .social {color:#007bb6;}
}
@keyframes colorTwitter {
  from {stroke: #ffffff;}
  to {stroke:#3aaae1;}
}
@keyframes colorFacebook {
  from {stroke: #ffffff;}
  to {stroke:#3b5998;}
}
@keyframes colorGoogle {
  from {stroke: #ffffff;}
  to {stroke:#dd4b39;}
}
@keyframes colorPinterest {
  from {stroke: #ffffff;}
  to {stroke:#cb2027;}
}
@keyframes colorLinkedin {
  from {stroke: #ffffff;}
  to {stroke:#007bb6;}
}
@keyframes outWaveIn {
  to {
    stroke-width:10px;
    stroke-dasharray: 400;  
  }
}
@keyframes outWaveOut {
  from {
    stroke-width:10px;
    stroke-dasharray: 400;
  }
  to {
    stroke: #ffffff;
    stroke-width:5px;
    stroke-dasharray: 40;
  }
}

Got something troubling let us know in the comment box, Peace and blessings till next post.

This awesome SVG Animation plugin is developed by Stephane Lyver. For more Advanced Usages, please check the demo page or visit the official website.
Comments 0 Read Article →

SEO Web stats

Getting SEO guidance is always the harder task for the website owners and bloggers, as Google updating the Search Engine time to time, we have to keep website and blog update accordingly. But there some basic SEO Strategies which remain the same in any case.

Fortunately, Template Monster has come up with the "Free & Easy to understand SEO Guide," Prepared in 14 pages ebook to give pretty easy and updated SEO understanding.

We hope all of you will pick, grab your free copy of SEO guide below. Peace and blessings :)


If you found broken link or having trouble while downloading the ebook please report us back by using comment form below or you may have option to contact us.
[alert]
Comments 0 Read Article →

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



[update headline="Update"]16-06-2017 Minor Code Improvement and bug fixes[/update] 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 →