Menu

Since from last for years I’m living in Malaysia, I have something about immigration visa permit procedure and normally it’s very difficult to know without hiring an agent/consultant. In this tutorial, I gonna share some useful stuff which will help the foreigners living in Malaysia.
The common question everyone will ask how to check Permit Status Online. In past Malaysian immigration do provide a service to check the Permit Status using Passport number of foreigner worker but in 2014 while they were updating the system they stop the service to check permit status through Passport number.

Nowadays if someone wishes to check the status of their work permit they must have “Application Number (Nombor Permohonan), Employer Identification Number (No. Kad Pengenalan Majikan) and last but not least Company Registration Number (No. Pendaftaran Syarikat)” Formally known as ROC Number in Peninsular Malaysia. I will also share the way how to find out the ROC to check your permit/employment pass status.
To do so, we must have the Company Name which you can find on your sticker (PLKS) you have placed on your Passport or if you don’t have the passport you may have I-Kad, you can grab it from your I-Kad or in most cases from your permit copy provided by employer or sub-agent.
So now if you got the name of your company, let’s start to check the status. Keep note that in this tutorial we will only learn how to check the status general work permit, which is issued under these 5 approved sectors.

Construction, Manufacturing, Plantation, Agriculture and Service Sector

Checkout video guide as well



About MyData-SSM:

MYDATA was founded in 2016 to provide users with a single, direct electronic access point to the official company registration offices in Malaysia. We have been appointed by the Companies Commission of Malaysia (CCM) - Suruhanjaya Syarikat Malaysia (SSM) as its Technology and Service Provider for the SSM MYDATA Services. MYDATA is a legitimate and legal source of information on companies and businesses incorporated and registered in Malaysia.

Getting Your Company ROC Number By Using Your Company Name


  • Go to the following website
  • http://www.mydata-ssm.com.my
  • Write your company in the search box and you will get the result something like this:


  • In the row of Number is your company ROC number (There are chances to have the duplicate company registered under the same name but ROC can’t be same. Make sure by checking the company on your Sticker (PLKS), & also make sure that your company is Enterprise or Private Limited (SDN BHD).

Now we have the ROC Number Let’s Proceed To Next Step

  • Go to the following link of Immigration e-services.
  • https://eservices.imi.gov.my/myimms/PRAStatus?type=36&lang=en
  • The page should look something like this (if it’s not same let us know we will update the screen shot)


  • Now just put your ROC number into the input (No. Pendaftaran Syarikat or Company Registration Number) & click on search button & system will the table of result just below the input section. That’s it..!!
Note that there may be more than one row/page of results (If your company hired more than 20 foreigner workers, you can use navigation button at the right bottom corner of the table to navigate your status.

Conclusion
The purpose of the tutorial is to just give awareness to foreigners living in Malaysia and it will help you to stay safe from lies of your legal or non-legal agent. 
All the web pages and logos used in this tutorial and property of the respective owner any illegal of the service may cause legal action.  Peace & Blessing Bodies…!! :)
Comments 0 Read Article →


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.. ! :)
Comments 0 Read Article →