Recent Posts

How to Eliminate render-blocking Javascript and CSS in Blogger

By Md Jillur Rahman - 5 Comments
Remove render-blocking Javascript and CSS from Blogger/Blogspot
May be recently, you checked your website by google page speed tools and seen that google tells you to eliminate render blocking javascript and css from several notice and that's can effect on your page speed. If you want to increase google pagespeed score, you need to solve this problem. So let's follow my tutorial, how to eliminate render-blocking javascript and css from blogger/blogspot.

** Backup your theme before apply this tricks**


Eliminate CSS Bundle - Blogger automatically create two css widget bundles for your website. It's looks like.
Remove Blogger CSS Bundle
To remove these bundle, follow simple steps.
Step 1: Go to Blogger>Theme
Step 2: Click on Edit HTML
Step 3: Click anywhere inside the code area
Step 4: Press CTRL+F to open a search bar
Step 5: Now search following code
<head>
Step 6: Replace <head> tags by below code
&lt;head&gt;
Step 7: Again search following code
</head>
Step 8: And replace </head> tags by below code
&lt;/head&gt;&lt;!--<head/>--&gt;
Step 9: Click on Save theme and you are done.

Now again search your website by google pagespeed insights tools and you will see that css bundle issue is solved.


Eliminate JS Bundle - Like css blogger automatically create widgets.js bundle for javascript. To remove these bundle follow below tutorial.
Step 1: Search following code
</body>
Step 2: Replace </body> tags by below code
&lt;!--</body>--&gt;&lt;/body&gt;
Step 3: Click on Save theme
That's it. Now see page speed score and it's improve.


How to fix contact form problem after applying JS bundle eliminate tricks - If you use contact form in static page and also want to remove js bundle then you need to follow my another trick. Because after removing js bundle, your contact from will not work anymore. This trick will not work, if you use contact form in sidebar or footer.
Step 1: Search following code
</body>
Step 2: Replace </body> tags by below code
<b:if cond='data:blog.url != &quot;http://www.codiblog.com/search/label/Contact_Us&quot;'>&lt;!--</b:if></body><b:if cond='data:blog.url != &quot;http://www.codiblog.com/search/label/Contact_Us&quot;'>--&gt;&lt;/body&gt;</b:if>
Customize: Replace http://www.codiblog.com/search/label/Contact_Us with your contact us page link url.
Step 3: Click on Save theme and you are done.

In this tricks, i have used blogger conditonal tags so that default javascript widget.js file only loads when someone visits contact us page, and other page it will be ignore.

WP Tricks: How to Limit the Post Title Word Count

By Md Jillur Rahman - No Comments
WordPress Tricks
In WordPress, wp_trim_words() function that will help you to limit the word count in your post title. Just use following code where ever you want to display your title with limited word count.
<?php echo wp_trim_words( get_the_title(), 10, '...' ); ?>
Replace 10 value from above code with whatever number of words you want to display.

Support: WordPress 3.3+
Reference: https://codex.wordpress.org/Function_Reference/wp_trim_words

CSS Tricks: How to Center Text in Middle of Div both Vertical and Horizontal

By Md Jillur Rahman - No Comments
Center Text in Middle of Div by CSS on Horizontal and Vertical
In this css tricks, we will learn how to position text or content in the middle of div both vertical and horizontal. Sometimes we used line-height code and that's not good to add text in the middle of div. See following example.

HTML
<div class="middle-content">
  <div class="middle-wrapper">
     Position text in middle of div
  </div>
</div>

CSS
.middle-content {
  display: table;
}
.middle-wrapper {
  display: table-cell;
  vertical-align: middle;
}

Customize: I used display: table; in first div class "middle-content" so that all div content behave like a <table> element. display: table-cell; added in second div class "middle-wrapper" so that it behave like a <td> element and vertical-align: middle; added to reach our goal text position in middle of div.

If you also want to text in center, you can use text-align: center; in the .middle-wrapper class.

That's it. I think that you enjoyed this article to improve your webdesign knowledge.

How to Limit the number of Post in Blogger Search

By Md Jillur Rahman - 1 Comment
Blogger Search Page Limit
In this tutorial, codiblog will give you a few tips on how to limit the number of posts that appear when searching for an article in the blog page search. This trick is very easy and you can applied in on my 12 Stylish Beautiful Blogger/Blogspot Search Box post.

How to Limit the number of Post in Blogger Search


Step 1: Login to Blogger.
Step 2: Choose your blog and go to Theme.
Step 3: Click on Edit HTML.
Step 4: Click anywhere inside the code area.
Step 5: Press Ctrl+F from keyboard to open a search bar.
Step 6: Search following code.
action='/search'
Step 7: Replace above code by following code
action='/search/max-results=10'
Determine the number of 10 on how many posts you want to display in search page.
Step 8: Click on Save theme and see the result.

If you add search bar by blogger Layout>Add a Gadget, follow (Step 6 - 7).

Enjoy this simple trick and improve your blogger editor knowledge.

How to Add Adsense or Any Ads In the Middle of Blogger Posts

By Md Jillur Rahman - 5 Comments
Ads in the middle of Blogger Post
Today i will share a simple but effective tips for all of my buyers and readers on how to add Adsense or any other ads in the middle of blogger posts. There are lot of tutorial about this but my code help you to show it automatically in all of your posts. So, do you want to increase your earning revenue, want to increase your click rate, follow this tutorial.

How to Add Adsense or Any Ads In the Middle of Blogger Post


Step 1: Login to your blogger account and select the blog you want to edit.
Step 2: Go to Theme and click on Edit HTML.
Step 3: Click anywhere inside the code area.
Step 4: Press Ctrl+F from keyboard to open a search bar.
Step 5: Now search <data:post.body/> code and replace this code in your template with the below code.
Note: Inside of your template, you will find <data:post.body/> code multiple time depending on the template used, try one by one until the ad appears on the article page.
<div expr:id='"mad1" + data:post.id'/>
<div style="margin:20px auto;text-align:center;overflow:hidden;">
<!-- Add your ad code here -->
</div>
<div expr:id='"mad2" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;mad1<data:post.id/>&quot;);var obj1=document.getElementById(&quot;mad2<data:post.id/>&quot;);var s=obj1.innerHTML;var t=s.substr(0,s.length/2);var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>
Customize: Replace <!-- Add your ad code here --> with your adsense or other any kind of ad code.
Step 6: Click on Save theme and see the result.

You can use my Responsive Adsense Ad Code Converter Tool to generate responsive ad and can paste, by replacing <!-- Add your ad code here --> code.

That's it. Happy Commenting!

How to Fix Blogger Newly Created Thumbnail Blurry Issue

By Md Jillur Rahman - 7 Comments
Today a lot of blogger facing a problem such as there website thumbnail (representative picture for the article) now looking bigger and blurry. May be blogger updated something so we faced this problem. I already faced this problem in my created blogger templates and i fixed it by updated. Let's see, how i fix it.

Step 1: Go to Blogger.
Step 2: Click on Theme>Edit HTML.
Step 3: Click anywhere inside the code area.
Step 4: Press Ctrl+F from keyboard.
Step 4: Search following code. (May be you will find this code in your read more script or other, see where this work, you can try one by one)
s72-c
Step 5: After find, replace it by following code.
s72-c-k-no
As shown below, is sample for my all created blogger templates, you script may be difference.
Solve Blogger Thumbnail Blurry Issue

That's it. I think that your problem will be solved. If not, you can tell me by comment, i am always ready to help you.

10+ Best Responsive Magazine/Newspaper Blogger Templates

By Md Jillur Rahman - 2 Comments
Find here 10 best magazine and newspaper blogger templates to create a professional looking blogger site. Blogger templates is the most popular for blogger platform released by Google. You can use any blogger templates without any coding knowledge. These blogger templates packed with amazing features like Retina ready, SEO, Related post widget, Multi Column, Slider, Ad block and many features. These templates created by professional designers.

All of the templates ready with documentation which help you to set up your blog without any coding knowledge. Besides if you face any problem, they will help you.


1. Firstlight - Responsive Modern Magazine Blogger Template

firstlight blogger template
Firstlight is a clean, multipurpose, seo ready and smart mega menu support blogger template. It's fully perfect for magazine, news and personal blogger blog. It's has lot of features that's make it modern from other templates.


2. MagNews - Responsive Blogger Template

MagNews - Responsive Blogger Template
MagNews is a clean, SEO friendly, flexible and responsive Blogger template. It’s perfect for magazine,news and personal Blogger blog. There are used many awesome blogger widgets that attraction visitor’s eye.
Live Preview Download Support


3. Safety - Responsive MultiPurpose Blogger Template

Safety - Responsive MultiPurpose Blogger Template
Safety is a modern, clean, flexible, elegant and mobile ready responsive multipurpose blogger template. It’s perfect for creating high quality blog, portfolio, magazine, news, photography etc.
Live Preview Download Support


4. Masala - Responsive Blogger Templates 

Masala - Responsive Blogger Templates
Masala is a very clean, flexible, neat, multipurpose, elegant and 100% responsive blogger template forever. This blogger template help you how to make a professional blog,portofolio,tech,elegent website as your like.
Live Preview Download Support


5. Cleanblog - A Responsive Blogging Blogger TemplateNew Added

Responsive Blogging Sticky Minimal AMP Responsive Blogger Template
Cleanblog is a first sticky ad system blogger template. It has many features and unlimited customization options without knowing any coding knowledge. You can use for your website to looking modern on your readers eyes.


6. Setiva - Responsive Magazine Blogger Template

Setiva - Responsive Magazine Blogger Template
Setiva blogger template is a another beautiful and modern blogger template. its clean and fresh flat color based responsive blogger design and high user friendly blogger template.
Live Preview Download Support


7. BMAG - Magazine Responsive Blogger Template

BMAG - Magazine Responsive Blogger Template
BMAG is a Magazine Responsive Blogger Template, it is clean and compatible with many devices, It’s perfect for creating your magazine or blog using blogspot, no need to coding as it is very customizable.
Live Preview Download Support


8. Mega Mag - Responsive Magazine Blogger Template

Mega Mag - Responsive Magazine Blogger Template
Mega mag blogger template is a another beautiful modern blogger template. its clean and fresh style responsive blogger design and high user friendly blogger template.This theme perfect for news, magazine and personal websites.
Live Preview Download Support


9. MaxBlog - Responsive Magazine Blogger Theme

MaxBlog - Responsive Magazine Blogger Theme
MaxBlog is premium flat, clean, super flexible and fully responsive blogger magazine theme, best suited for magazine, news or blog websites.
Live Preview Download Support


10. Nami Press - Responsive Blogger Templates

Nami Press - Responsive Blogger Templates
Nami Press is a news and magazine Blogger Template. It is responsive and drag-drop to build your own home design. Its High User Friendly Blogger Template. It allows you to customize and display the exactly what you want by short-codes very quick and easy.
Live Preview Download Support


11. Geek Press - Responsive News & Magazine Template

Geek Press - Responsive News & Magazine Template
Geek Press template was designed as a flat and responsive Blogger template for News and Magazine websites. Geek Press is very easy to work without touch to code, it will help you publish your small news / magazine projects as the fastest way ever.
Live Preview Download Support


12. Flat News - Easy News & Magazine Template

Flat News - Easy News & Magazine Template
Flat News is a news and magazine Blogger template. This template is very easy to work without touch to code. Flat News is 100% responsive and drag-drop to build your own home design.
Live Preview Download Support

Upcoming More in future. We will update this post all time with new magazine and newspaper blogger templates. Thanks to read this inspiration article.

List of Events Web Design Tutorial

By Md Jillur Rahman - No Comments
HTML & CSS ul li List Design Tutorial

Thanks to Adrian Mato to created List of Events photoshop version and share it on dribbble. He used different color scheming on this. I have taken inspiration from his design and finally made list of events web design version. To completing full of project, I have used HTML & CSS code. If you want, you can add it to your next web design project such as on themes, plugins, HTML Templates etc.

Let's start our journey how i created this

HTML

<div class="cb-list-event">
<ul>
	<li><a href=""><span class="le-date">07 JUN</span><h3>Lorem ipsum minto wolo minuom kisas ni polar dimor jihoni molp</h3></a></li>
	<li><a href=""><span class="le-date">07 FEB</span><h3>Lorem ipsum minto wolo minuom kisas ni polar dimor jihoni molp</h3></a></li>
        <!--...-->
</ul>
</div>
Customize: You can add up to 5 <li>...</li> lists elements. First i created a div element with .cb-list-event class and i completed full project on this div. Then created an unordered list with <ul> tags. Each list item starts with the <li> tags. Added events date between <span class="le-date">...</span> elements. List of events title added between <h3>...</h3> tags.

CSS

.cb-list-event ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cb-list-event li {
    background-color: #ffffff;
    border-top: 1px solid #f1f1f1;
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.05);
    clear: both;
    margin: 0 0 10px;
    padding: 0;
    overflow: hidden;
    border-radius: 4px 0 0 4px;
}
.cb-list-event a {
    font-family: "Open Sans",sans-serif;
    font-size: 13px;
    text-decoration: none;
}
.cb-list-event li span.le-date {
    background-color: #bfde81;
    text-transform: uppercase;
    color: #608e23;
    float: left;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 75px;
}
.cb-list-event li + li span.le-date {
    background-color: #faebb3;
    color: #937f2a;
}
.cb-list-event li + li + li span.le-date {
    background-color: #ee908e;
    color: #9e3f3c;
}
.cb-list-event li + li + li + li span.le-date {
    background-color: #81d4de;
    color: #258d9c;
}
.cb-list-event li + li + li + li + li span.le-date {
    background-color: #f3f3f3;
    color: #666;
}
.cb-list-event li h3 {
    color: #303030;
    font-weight: normal;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    margin:0;
    padding: 0 10px;
    font-size: 13px;
}
.cb-list-event li:hover {
    background-color: #d8ebb3;
    opacity: 0.9;
}
.cb-list-event li + li:hover {
    background-color: #fdf8e3;
}
.cb-list-event li + li + li:hover {
    background-color: #f9dddd;
}
.cb-list-event li + li + li + li:hover {
    background-color: #ccedf1;
}
.cb-list-event li + li + li + li + li:hover {
    background-color: #f9f9f9;
}
Customize: From .cb-list-event a class, you can change it's default font "Open Sans",sans-serif and list of events date font size 13px. Default list title background color is white that you can change from .cb-list-event li class. For changing list title default 13px font size, you need to edit from .cb-list-event li h3 class. We have used CSS selector option to changing different background and font color.

Browser support: 

That's it and i think that you have enjoyed this post.


Recommended Post:
1. CSS3 Creative Social Media Button Styles
2. Responsive Author Box Design with HTML5 & CSS3