Recent Posts

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 - 3 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 - 3 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

How to Add Responsive Image in AMP HTML

By Md Jillur Rahman - No Comments
AMP Responsive Image Tutorial
For your website, making image responsive is important to work with all kind of devices. In AMP, you don't need to set different width and height for different devices. The AMP layout attribute help you making responsive image much easier than if you'd use css alone.

Responsive Image in AMP HTML


Create responsive image by specifying width and height, setting layout to responsive. See below example.
<amp-img src="/img/nature.jpg" width="1054" height="560" layout="responsive" alt="an image"></amp-img>
From above code layout="responsive" attribute make this amp-img element automatically fits the width and height with it's container elements on different devices.

Extra Tips: You must specify image width and height, without it's, you can't verify your amp page by amp validator tools

Resources: https://www.ampproject.org/docs/guides/responsive/control_layout

Plugin block autoplay videos and audios on Facebook and other Sites

By Md Jillur Rahman - No Comments
May be you have seen that whenever a video appear on your facebook news feed, the media will automatically start with the audio enabled. It can happen both desktop and mobile. However, there is an extension that block this autoplay videos on facebook and also on other sites that are accessed from desktop browser. The Disable HTML5 Autoplay plugin is available for chrome and opera browser.
Extension for disable html5 autoplay videos
After activated, then extension prevent any videos, audios and also ads to start automatically. The user also can know how many videos were blocked by the extension icon, which is located in the upper right corner of the window.

The plugin also has an area for configuration, which can be used to include site exception. That means, the user can list the sites where the plugin should not act.

References: