Recent Posts

How to Enable Email Subscriptions to Google Feedburner

By Md Jillur Rahman - No Comments
By default google disable email subscription in their feedburner service. It's important to enable to receiving email subscriber from your newsletter. We know that who subscribe your feedburner by email, they will receive automatic article when you add new post on your website. Few days ago i posted a article on 20+ blogger newsletter email subscription widget, to receive this service, you must need to enable email subscription. Let's see how you do this.

How to Enable Email Subscriptions to Google Feedburner


  1. Go to https://feedburner.google.com
  2. Click on your Feed Title. See below image
  3. Email Subscription Widget
  4. Click on Publicize > Email Subscriptions 
  5. Publicize Email Subscription
  6. Click on Active and you are done
  7. Active Email Subscription
That's it now you can use any email subscription widget in your site. If you want, you can Deactive it any time.

How to Increase Blogger Site Speed by DNS Prefetch

By Md Jillur Rahman - 2 Comments
DNS Prefetch for blogger site speed increase
DNS Prefetch is a way to resolving the DNS of a specific domain. Sometimes we used external image/js/css etc.. link in our site and it's effect on our web page loading time. By using DNS Prefetch, we can reduce the external link loading time. In this tutorial, we will learn how to add DNS Prefetch in our blogger site to speed up our site.

According to W3C, "The dns-prefetch link relation type is used to indicate an origin that will be used to fetch required resources, and that the user agent should resolve as early as possible." [1]

How to Add dns-prefetch to Blogger


  1. Login to your blogger account
  2. Go to Template>Edit HTML 
  3. Click anywhere inside the code area
  4. Press CTRL+F from keyboard
  5. Search following code
  6. <head>
  7. Paste following code below of <head> tags
  8. <link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
    <link href='//28.2bp.blogspot.com' rel='dns-prefetch'/>
    <link href='//3.bp.blogspot.com' rel='dns-prefetch'/>
    <link href='//4.bp.blogspot.com' rel='dns-prefetch'/>
    <link href='//2.bp.blogspot.com' rel='dns-prefetch'/>
    <link href='//www.blogger.com' rel='dns-prefetch'/>
    <link href='//maxcdn.bootstrapcdn.com' rel='dns-prefetch'/>
    <link href='//fonts.googleapis.com' rel='dns-prefetch'/>
    <link href='//use.fontawesome.com' rel='dns-prefetch'/>
    <link href='//ajax.googleapis.com' rel='dns-prefetch'/>
    <link href='//resources.blogblog.com' rel='dns-prefetch'/>
    <link href='//www.facebook.com' rel='dns-prefetch'/>
    <link href='//plus.google.com' rel='dns-prefetch'/>
    <link href='//twitter.com' rel='dns-prefetch'/>
    <link href='//www.youtube.com' rel='dns-prefetch'/>
    <link href='//feedburner.google.com' rel='dns-prefetch'/>
    <link href='//www.pinterest.com' rel='dns-prefetch'/>
    <link href='//www.linkedin.com' rel='dns-prefetch'/>
    <link href='//feeds.feedburner.com' rel='dns-prefetch'/>
    <link href='//github.com' rel='dns-prefetch'/>
    <link href='//player.vimeo.com' rel='dns-prefetch'/>
    <link href='//platform.twitter.com' rel='dns-prefetch'/>
    <link href='//apis.google.com' rel='dns-prefetch'/>
    <link href='//connect.facebook.net' rel='dns-prefetch'/>
    <link href='//cdnjs.cloudflare.com' rel='dns-prefetch'/>
    <link href='//www.google-analytics.com' rel='dns-prefetch'/>
    <link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/>
    <link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/>
    <link href='//www.gstatic.com' rel='preconnect'/>
    <link href='//www.googletagservices.com' rel='dns-prefetch'/>
    <link href='//static.xx.fbcdn.net' rel='dns-prefetch'/>
    <link href='//tpc.googlesyndication.com' rel='dns-prefetch'/>
    <link href='//syndication.twitter.com' rel='dns-prefetch'/>
    Note: I have included all of dns-prefetch code.
  9. Click on Save template

That's it. Now see your site and it's loading faster than before.

10 Free Cloud Sites to Share your Files in Online

By Md Jillur Rahman - No Comments
Cloud storage service allow their online users to upload and share large files by using their site without the need for any hardware mediator. May be you are think that you want to share very large file to a friend and do not rely on USB flash drives or any other kind of physical media, you can opt for online sharing service.

Google drive, iCloud, Dropbox, and onedrive, there are dozens of sites and they offer this type of service. You can use them but i will share another ten free and simple to use options.

1. GE.TT
In Ge.tt you have 2Gb of free space to share any type of file, simply drag and drop the file, wait for the upload is finished, generating unique link allows anyone to download the file without having to login.
GE free online cloud share service


2. 4Shared
4Shared is the most popular file sharing services in the cloud, offer free and paid service, withing the site is still possible to search for files.
4share popular cloud service

3. GigaSize
The Gigasize allow their users to upload files up to 10 Gb. You can include title, description and password in the uploaded file and share them.
GigaSize Secure Free Cloud Service

4. File Dropper
The File Dropper allow their users to upload file without registration, just upload the file and generating unique link or embedded code share any site or forum. Maximum per file upload size limit 5GB
File Dropper Simple File Share Service

5. DropCanvas
DropCanvas offers 1Gb of space to store files. Drag and drop the file in the browser, once the file upload finish Dropcanvas create a unique link that can be share.
DropCanvas Free Cloud Service


6. WeTransfer
The WeTransfer One of the another most popular service for sharing files in the cloud that offer free and paid service. It has several additional features, allow the user to share files and send the link directly to email.
WeTransfer Free Cloud Service

7. File Convoy
The File Convoy allow to send files via direct link or directly by email without registration. You can also set a download link expiration from 2 hours to 28 days.
File Convoy Cloud Service

8. Sendspace
The Sendspace upload capacity is limited to 300MB per file. You must inform them email of who want to receive the file to download or who is sending. All of the process are automatic and it's like WeTransfer.
Sendspace File Sharing cloud service

9. Senduit
Senduit per file upload capacity up to 100MB, allow the user to set link expiring time ranging between 30 minute to one week old.
Senduit Unlimited Cloud Site

10. Just Beam it
Just Beam it another cloud provider service, just drag and drop the file or click the parachute to send the file for upload. Generate a unique link and also a QR code to download from mobile devices.
Just Beam it Cloud Service

These all of sites offer make it very simple to send and receive large files over the internet without having to use any physical media.

All of Blogger JSON Feed API List

By Md Jillur Rahman - No Comments
Blogger JSON Feed API
Blogger JSON Feed API created by google developer for blogger custom template designer to make fancy unique  template as their wish. Sometimes we need a widget like recent post, random post, recent comment etc with creative design, but that widget are not available in blogger Gadget section.

By using JSON feed API, we can bring important data such as Title, Summary, Full content, Date, Comments Count, Thumbnail, Label List, Author info etc.

We have divided blogger JSON Feed Api between two section like "Blog Feed Api", "Post Feed Api" so that you can easily implement it on your code.

Blog Feed API


1. Show blog ID
json.feed.id.$t
Exmaple: tag:blogger.com,1999:blog-12345

2. Last post update of a blog
json.feed.updated.$t
Exmaple: 2013-07-08T18:21:57.051+07:00

3. Show category of a blog
json.feed.category[i].term
Exmaple: Game

4. Blog title
json.feed.title.$t
Exmaple: Codiblog

5. Blog description
json.feed.subtitle.$t
Exmaple: Codiblog Web Design Site

6. Blog Authors array
json.feed.author[]
Exmaple: Md Jillur Rahman, Matt Cutts

7. Show single blog author name
json.feed.author[i].name.$t
Exmaple: Md Jillur Rahman

8. Show blog author google plus url
json.feed.author[i].uri.$t
Exmaple: https://profiles.google.com/123456789

9. Total posts count
json.feed.openSearch$totalResults.$t
Exmaple: 850


Posts Feed API


1. Single post ID
json.feed.entry[i].id.$t
Exmaple: tag:blogger.com,1999:blog-8508.post-12345678

2. Single post title
json.feed.entry[i].title.$t
Exmaple: All of Blogger JSON Feed API List

3. Single post published date
json.feed.entry[i].published.$t
Exmaple: 2013-07-07T12:56:00.000+07:00

4. Single post updated date
json.feed.entry[i].updated.$t
Exmaple: 2013-07-07T12:56:47.089+07:00

6. Category / Label array of a post
json.feed.entry[i].category[]
Exmaple: Game, Digital, Blogger

7. Single post summary
json.feed.entry[i].summary.$t
Exmaple: Blogger JSON Feed API created by...

8. Single post content
json.feed.entry[i].content.$t
Exmaple: Blogger JSON Feed API created by google developer for blogger custom template designer to make fancy unique template...

9. Single post link
json.feed.entry[i].link[x].href
Exmaple: http://www.codiblog.com/2016/12/blogger-json-feed.html

10. Single post author name
json.feed.entry[i].author[x].name.$t
Exmaple: Md Jillur Rahman

11. Single post author profile url
json.feed.entry[i].author[x].uri.$t
Exmaple: https://profiles.google.com/123456789

12. Single post author profile image url
json.feed.entry[i].author[x].gd$image.src
Exmaple: //lh4.googleusercontent.com/photo.jpg

13. Single post first image url
json.feed.entry[i].media$thumbnail.url
Exmaple: http://3.bp.blogspot.com/codiblog.jpg

14. Show total threaded comment
json.feed.entry[i].thr$total.$t
Exmaple: 8

Now we will create a recent post widget by using above feed api that will display 5 latest posts according to date. This widget also display Post Title, Author Name, Post summary with 90 characters.
<script type="text/javascript">
  function cbfunction(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
      for (var j = 0; j < json.feed.entry[i].link.length; j++) {
        if (json.feed.entry[i].link[j].rel == 'alternate') {
          var postUrl = json.feed.entry[i].link[j].href;
          break;
        }
      }
      var postTitle = json.feed.entry[i].title.$t;
      var postAuthor = json.feed.entry[i].author[0].name.$t;
      var postSummary = json.feed.entry[i].summary.$t;
      var entryShort = postSummary.substring(0, 90);
      var entryEnd = entryShort.lastIndexOf(" ");
      var postContent = entryShort.substring(0, entryEnd) + '...';
      var item = '<div class="wrapper"><h2><a href=' + postUrl + '>' + postTitle + '</h2></a><span>'+ postAuthor + '</span><p>' + postContent + '</p></div>';
      document.write(item);
    }
  }
</script>
<script src="/feeds/posts/summary?orderby=published&max-results=5&alt=json-in-script&callback=cbfunction"></script>

How to Add Font Awesome Icons and Use to Your Website

By Md Jillur Rahman - No Comments
Font awesome is a free icon fonts. By using this icon, you can add any font icon without coding. Now at this moment, it's most popular for their awesome created icons. We also used this in our website and every blogger need to add this on their own site.

For this you need to install their CDN link. Let's see how you can add this and use on your own website.

How to Add Font Awesome CDN

Copy following code and paste it to before </head> tags 
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
When new version will update in their website just replace red value 4.7.0 with it. You can see new version from their official website. Per new update they will add new icon so it's chance for you to add new icons in your websites.
Add Fontawesome icon and Use

How to Use Font Awesome Icons

You will find list of all available icons set here and you can add following text for display
<i class="fa fa-coffee" aria-hidden="true"></i>
in e.g. text widgets, post/page editor or anywhere.

For a exmaple Go to this link and see following image how you can find above code.

Font Awesome Icon List
Font Awesome Icon Code
Then copy your icon code and paste anywhere on your website where support HTML format.

Official Font Awesome Site: http://fontawesome.io/icons/

Happy commenting! By comment we can discuss more like a forum.

20+ Best Flat Design Inspiration and Freebies

By Md Jillur Rahman - No Comments
Now a days, Flat design is one of the strong trending elements. It's minimalism solid colors, simple shapes coupled and the focus on typography make this style a strong attraction for designer around the world.

Let's look some trending designs and freebies for your next coming projects

    UI Kits

UI Style Flat Design
Social Icon Flat Design
Mackbook Flat Design
Color Palette Flat Design

Photoshop Switch Library For UI Flat Design
Photoshop UI Flat Design

When we will find best flat designs, we will update this post.

Youtube Thumbnail Generator Online

By Md Jillur Rahman - No Comments
Youtube Thumbnail Generator
This is the best Youtube thumbnail generator tool online. This tool help you to generate all quality of youtube thumbnail like normal, medium, High, HD and Super HD quality. After generate thumbnail, you can download them.

Just copy a youtube video url Example: https://www.youtube.com/watch?v=vcxq9Cm34go and paste the link into the below box then click on Generate button and you will see magic.

How to Download Thumbnail

Right click the above image and click on Save Image As...