New Featured Posts

Recent Posts

How to Show Web Page Size by Browser

By Md Jillur Rahman - No Comments
In online, you will find many tool to determine your web page size but they are limit. We all know that now website page speed not only a search engine ranking factor but also it will improve your visitor experience, sales and bounce rate etc. Always try to keep your website page less size. A average small website page size is 12 kb, and that will load quickly.

But large page size can be ok if your html file is both small and coded to reduce browser rendering time. I will share a simple tips how you can see web page size by browser. Now you can use this in Mozilla Firefox

How to Show Web Page Size?

Let's following below step.
  1. Open your Mozilla Firefox browser
  2. Visit any website example:
  3. After full web page load, click on right button from mouse
  4. Click on View Page Info. See following image
  5. Web Page Size Check
  6. A pop up window will open and you will see your web page size in general tab. See following image
  7. Website page size check by browser
That's it. Remember this and Happy Commenting!

See Also: Fast index your content in Google between 3-5 minutes

How to Add jQuery Full Screen Page Preloader Effect on Blogger

By Md Jillur Rahman - No Comments
jQuery Full Screen Animated Pre loader Effect for Blogger/Blogspot Website
Live Demo
Previously, i have wrote an script on jQuery preloader animation effect for webdesign developer. My one of the reader message me on facebook that he want to add this on his site. I help him on facebook to add this on his website. And i thought that i need to write an tutorial on this.

Sometimes your website taking more times to loading. That's can be frustration for your readers. By adding this jQuery preloader effect, it can be reduced your reader frustration. When a visitor visit your website, they will see it. Then after full page content load, it will be removed.

How to Add jQuery Preloader Effect on Blogger

Let's follow below step to add this on your blogger/blogspot site.
  1. Login to your blogger dashboard
  2. Go to Template>Edit HTML
  3. Click on Edit HTML
  4. Click anywhere inside the code area or you can read How to Search code in Blogger
  5. Press CTRL+F from keyboard and you will see a search box
  6. Search following code
  7. ]]></b:skin>
  8. Paste below code above ]]></b:skin> tags
  9. #preloader {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #222222;
        z-index: 99999;
        height: 100%;
    #status {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 64px;
        height: 64px;
        margin: -32px 0 0 -32px;
        padding: 0;
  10. Again search following code
  11. <body>
    <body expr:class='"loading" + data:blog.mobileClass'>
  12. After finding anyone of these code, just paste following code after it
  13. <div id='preloader'>
       <div id='status'>
          <img alt='' height='64' src='' width='64'/>
  14. Again search following code
  15. </body>
  16. Paste following code before </body> tags
  17. <script>
    * Preloader Effect
     $(window).load(function() {
  18. Click on Save template. That's it.

I hope that you have enjoyed this post. Happy Commenting!

How to Unblock Yourself from WhatsApp

By Md Jillur Rahman - No Comments
Unblock Yourself from WhatsApps
Assume that, For a wrong reason you have blocked by your friend from WhatsApp account. Now you have no other way to contact with him without WhatApps. But you want to contact with your friend for solving your matter.

Unblock Yourself from WhatsApp, How?

So, is there a way to out of this problem? By unblock myself from WhatsApp, you can again contact with your friend. Let's see how you can do this.

  1. Open your WhatsApp account and go to Setting option.
  2. Click on Account option. Then click on Delete my account and enter your phone number for deleting your account.
  3. Then Uninstall WhatsApp App from your device.
  4. After complete uninstall then restart your device.
  5. Then again install WhatsApp from Google play store.
  6. Then complete your number verification with previous phone number.
  7. Then select your phone contact with WhatsApp account.
  8. Your job done. Now, open your WhatsApp account. You will see profile picture of who are blocking you. That is, you have unblocked. Now again if you want, you can send them message or voice call.

Responsive Author Box Design with HTML5 & CSS3

By Md Jillur Rahman - No Comments
HTML5 and CSS3 Author Bio Data Info Box Design
Today we'd like to show you how to create a Responsive Author Box Design with html5 and css3. It's very simple and clean design. If you like it, you can add it to your next project. It's fully responsive that you can check from our demo link.
Live Demo Download


<div class="author-box">
 <img src="img/about-widget.jpg"/>
        <p>Hello, my name is codiblog. I am a professional designer and developer from BLA BLA</p>
Instruction: For content work perfectly we have done everything into a <div>...</div> tags. Added <img></img> tags for image display and <p></p> tags for writing some text.


* Title: Responsive Author Box Design
* Author: Md Jillur Rahman
* Website:

.author-box {
    background: #fff;
    width: 300px;
    margin: 0 auto;
    text-align: center;
    padding: 0;
.author-box img {
    vertical-align: middle;
    border-radius: 50%;
    box-shadow: 0 1px 8px #ddd;
.author-box img:hover {
    opacity: 0.8;
    cursor: cell;
.author-box p {
    color: #fff;
    margin: 0;
    font-size: 16px;
    line-height: 1.3em;
    background: #222;
    padding: 10px;
    position: relative;
.author-box p:before, .author-box p:after {
    content: "";
    border-right: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-top: 15px solid #fff;
    position: absolute;
    top: 0;
    left: 0;
.author-box p:after {
    right: 0;
    left: auto;
    border-left: 15px solid transparent;
    border-right: none;
Customize: You can change full content width default length 300px from .author-box class. We have included image round radius and shadow in .author-box img class. If you don't like font size/color/background, you can change it from .author-box p class.

That's it. We hope you enjoy this author box design and find this tutorial helpful.

Browser Support: 

Github: View Project on Github

6 Design Tips to Create a Perfect Email Marketing

By Md Jillur Rahman - No Comments
Perfect Email Marketing Design Tips
At present, still email marketing is king in all over the internet. It will not only improve your site visitors but also boost your sells. But the layout design an email marketing, can influence on your results? And how does this happen?

As a proverb, "A picture is worth for a thousand words." So create an email marketing with proper layout will help a lot to make your email campaign stratiges to reach good results. So in this tutorial, you can better understand how to create the layout of your Email Marketing can help in performance, we separated a number of suggestions that make all the difference. Check it!

6 Design Tips to Create a Perfect Email Marketing

1. Consistency in Visual Branding

The first step is to pay attention to the visual identity of your business. In Email Marketing is very important to follow your color palette, textures, typography, photo style, illustrations and other elements that make your customers recognize on your brand and positioning.

2. "Above the Fold"

When your email marketing opens in the browser or inbox of the recipient, Often it's not appear in full screen: you must use the scroll bar. 

It is very important to create an email that the most relevant information is present in this first viewing range, which is called the "Above the Fold". It often contained breaking news or headline that drew immediate interest.

Moreover, it is important to include a short explanatory text that is offering and also a Call to Action (CTA), asking the email recipient to click a button that will direct you to a download, a shopping site, a blog, to fill a form or other action that you want him to perform.

A good image or illustration can also appear, but we'll talk about it later. See image below for better understand.
Above the Fold Email Marketing

3. Call to Action

This is one of the most important element to create an Email Marketing that seeks conversion. 

Normally, the Call to Action has a bright colors, but it depends on positioning of your company. The Call to Action(CTA) should be short and make clear what is desired action and the advantage of realizing it. In image below, there "SHOP NOW" is a call to action. I received this email from an ecommerce site.
Call to Action Email Marketing

4. High Quality Image and Light Graphics

We must take an action so that the images are not heavy and do not make your email open slowly. Try to use high quality JPEG and PNG format image with low size. You can use Tinypng online tool to compress your image without transparency.

Your email layout always try to keep clean and light so that it's not hesitate readers eyes. A good and professional layout not only improve your readers and sells but also it make people trustable branding on your company.

5. Put images on the left, Text on the Right

Assume that you have a simple, clean and professional layout. Now how you write on this. According to research, reader's eye are more attracted when text put besides of images. So put the image on the left of your text by para. It will improve your visual curiosity that's help readers to continue reading of your next email.

6. Keep it Simple

"A clear message get a better response". The goal of our email is to get your readers to take a simple action. You want them to visit your websites, shop now, form fill up etc. A well designed with simple, beneficial text will get your readers to pay attention and make it easy for them to take the action as your desire.

20+ Best Free Responsive Photography Blogger Templates

By Md Jillur Rahman - 1 Comment
In this tutorial, i have covered 20+ best free responsive photography or gallery blogger templates for your blogger/blogspot websites. Are you a photographer and searching for a blogger photography template then you are in the right place. All of the templates are responsive that's means that it's perfectly work in all kind of devices. Let's see the full list of 20+ Best Free Responsive Photography Blogger Templates

Recommend Post:  10+ Best Free Responsive Ecommerce Blogger Templates
Recommend Post:  30+ Responsive Video Blogger Templates

1) Olivia Dark Responsive Blogger Template

Olivia Best Photography Blogger Template

Olivia Dark is a gorgeous, clean, elegant, modern and HD Quality best blogger template ever. It's designed with modern pattern.

2) Rosemary Clean Responsive Blogger Template

Rosemary Responsive Photography Blogger Template
Rosemary is an another clean and photoshot gallery blogger template. It's clean design make your site looking creative and fashionable.

3) Meed Responsive Photography Blogger Template

Meed Blogger Template
Meed is a nice looking photoshot gallery and blog style looking blogger template. It has many featured to make your site as your choice.

4) Sugar Responsive Gallery Blogger Template

Sugar Responsive Best Free Galler and Photography Blogger Template

Sugar is a minimal eye catching looking responsive photography blogger templates. It has multiple featured like slider, author, social share, Pinterest, recent post gadgets.
Live Demo Download

5) Blush Multi-Purpose Responsive Photography Blogger Template

Blush free responsive photography blogger template

Blush is a multipurpose responsive photography blogger templates. Now it has 4 layout that's you can use for your blogger websites.

6) Splendid Photography Blogger Template

Splendid Free Responsive Photography Blogger Template
Splendid is a responsive photography looking blogger template. It has many features like gallery layout, author info, facebook plugin etc.
Live Demo Download

7) Vintage Camera Responsive Blogger Template

Vintage Camera Free Responsive Blogger Template
Vintage camera is a simple and clean looking blogger template. It's converted from WordPress themes. You can use it for your photoshot site.
Live Demo Download

8) Lunafy Elegant Photography Blogger Template

Lunafy Elegant Responsive Blogger Template
Lunafy is an another dark looking but with nice design gallery blogger template. It will be adjust with your site as your choose.
Live Demo Download

9) Kamera Responsive Gallery Blogger Template

Kamera Photograpghy Blogger Template
Kamera is a lovely photography beautiful blogger template and it's looking nice. It's designed with simple and clean.
Live Demo Download

10) Mime's Responsive Photography Blogger Template

Mimes Free Responsive Gallery and Photography Blogger Template
Mimes is a clean, modern, creative looking responsive gallery, blogging and photography blogger template.
Live Demo Download

11) Main Photo Responsive Blogger Template

Main Photo Responsive Photography Blogger Template
Main photo is a simple responsive photography blogger template. You can use it for your simple blog.
Live Demo Download

12) Sora Moon Photography Responsive Blogger Template

Sora Moon Free Responsive Image Blogger Template
Sora Moon is an another simple gallery blogger template for your photo shot websites. It has nice features that's make your blog more attractive.
Live Demo Download

13) SuevaFree Photography Blogger Template

SuevaFree Blogger Template
Sueva Free Responsive blogger template and it's adapted from WordPress. It's built with SEO friendly , minimalist etc.
Live Demo Download

14) Gossip Responsive Blogger Template

Gossip A Responsive Blogger Template for Gallery/Photography
This template looking nice for it's eye catching design. You can use this blogspot template for your photography, gallery and blogging websites.
Live Demo Download

15) Grace Photography Responsive Blogger Template

Grace Responsive Photography Blogger Template
Grace is an another 3 column and responsive modern, clean blogger template for gallery or photography sites. It's features really attractive.
Live Demo Download

16) Expose Responsive Gallery Blogger Template

Expose Gallery Grid Blogger Template
Expose is an another responsive gallery type blogger template for your websites. It has gird layout that is perfect for gallery type of websites.
Live Demo Download

17) Johny Grid Responsive Blogger Template

Johny Grid Responsive Blogger Template
Johny Grid is an another grid layout responsive photography blogger template. It has 5 column layout, mobile responsive menu and ajax loading effect.
Live Demo Download

18) Gridboy Blogger Template

Gridboy Responsive Gallery Blogger Template
Gridboy is a grid layout looking clean gallery, image blogger template for your photography, gallery, photoshot websites.
Live Demo Download

19) Wilder Responsive Gallery Blogger Template

Wilder Responsive Camera Blogger Template
Wilder is an another photography 2 column looking blogger template. It's clean and looking nice in all kind of devices.
Live Demo Download

20) Escalate Responsive Photography Blogger Template

Escalate Responsive Gallery Blogger Template
Escalate responsive blogger template make your photography site looking clean and simple with it's grid layout option.
Live Demo Download

21) Beauty Colorful Responsive Blogger Template

Beauty Responsive Photoshot Gallery Blogger Template
Beauty is an another gorgeous looking gallery blogger template for your photography websites. It's designed is colorful and i am sure that you will like it.
Live Demo Download

When i will find new another blogger template, i will update this post.

How to Add New Responsive Facebook Comment Box to Blogger

By Md Jillur Rahman - 68 Comments
Recently some of my themeforest buyers requested me to give a solution how they can add a Facebook comment box in their blogger site. So i have decided to write a post in my site about this regarding issue. In 2009 Facebook developer released their best social plugin called "Facebook Comment Box". This comment box helps your readers to comment on your site using their Facebook,Yahoo,AOL or Hotmail  profile. I will share my own method which i apply to my own developing blogger templatesSo follow my simple tutorial to add this on your site.  

Live Demo

How to Add 
  • First login your blogger site>Then go to Template>Click on Edit HTML>Click on CTRL+F from keyboard.
  • Then search following code.
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
  • After finding any of one on these code, just paste following code after it
<div id="fb-root"></div>
  <script>(function(d, s, id) {
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) return;
     js = d.createElement(s); = id;
     js.src = "//;version=v2.0";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));</script>
  • Then again search following code
<b:includable id='comment-form' var='post'>
  • Just after it paste the below code
<div class="fb-comments" expr:data-href="data:post.url" 
data-width="100%" data-numposts="5" data-colorscheme="light"/>
  • You can change number of value 5 as your wish
  • You can change light color scheme with dark

After done everything, save your template and you are done. If you face any problem, tell me by comment. I will try to solve your problem with my best consideration. Thanks you to read this tutorial.

Solved Method 2: If above code not working after paste <b:includable id='comment-form' var='post'> then search <b:includable id='threaded_comments' var='post'> and paste above code after it.

For enable comment features mobile and desktop see Enable Responsive Features Post

Recommend: 12 Stylish Beautiful Blogger/Blogspot Search Box