Make Box Responsive Layout Use Nth of type Selector CSS

Before, Thanks to see this post. This article for split element on hypothesis blogger template. If you not use our template, please do it your self and try in your blog trial! You can see our "INVINITY" box column on CSS Grid Spliter use nth type selector

Why choose nth of type?

Nth of type is an CSS Selector in other pseudo classes. Please remember that nth-of-type more the diference with nth-child. Structural pseudo-class, *:nth-of-type(n) or  *:nth-of-type(n+1) an * is element, the n-th sibling of its type. Accepts keywords 'odd' and 'even', a single number to target one item, a number followed by n eg. (2n) to target every second item, or a number followed by n+ another number eg. (2n+1) to target every second item starting at item 1 (by: css creator). Chris Coyier was explained about nth child and nth of type more kompleks and less code for customize.

Start with nth of type
In hypothesis blogger template i create this section for split any element. So i hope this code work for your responsive blog.
See this layout with 8 column or box layout :

CSS basicly, on above body

/*
 * ---:[ Hypothesis CSS Inner Spliter ]:---
 */
.boks {
 overflow: hidden;
}

/*
COLOR http://hypothesisdemo.blogspot.com/p/css-grid-spliter.html
*/
.boks .red, .boks .orange, .boks .blue, .boks .green, .boks .dark, .boks .white{border:1px solid #d1dbe6;padding:10px;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;}
.boks .red{background-color:#DD89A1;border-color:rgba(0, 0, 0, 0.07);}
.boks .orange{background-color:#ECA48F;border-color:rgba(0, 0, 0, 0.07);}
.boks .blue{background-color:#90BFF8;border-color:rgba(0, 0, 0, 0.07);}
.boks .green{background-color:#46A28D;border-color:rgba(0, 0, 0, 0.07);}
.boks .dark{background-color:#898989;border-color:rgba(0, 0, 0, 0.07);}
.boks .white{background-color:#eff4ff;border-color:rgba(0, 0, 0, 0.07);}
/*
Layout http://hypothesisdemo.blogspot.com/p/css-grid-spliter.html
*/
.col {
 background: none;
 float: left;
 margin-left: 1%; /* margin for left side you can customize eg:1.6 but col width will change too */
 margin-bottom: 1%; /* margin for bottom side */
}

.fullywidth .col {
 float: none;
 margin-left: 0; /* set if box full width */
}
/* grid8 col */
.grid8 .col {width: 11.62%;}
/* grid7 col */
.grid7 .col {width: 13.42%;}
/* grid6 col */
.grid6 .col {width: 15.83%;}
/* grid5 col */
.grid5 .col {width: 19.2%;}
/* grid4 col */
.grid4 .col {width: 24.25%;}
/* grid3 col */
.grid3 .col {width: 32.66%;}
/* grid2 col */
.grid2 .col {width: 49.5%;}
/* grid1 col */
.grid1 .col {width: 100%;}
/* clear col */
.grid8 .col:nth-of-type(8n+1),
.grid7 .col:nth-of-type(7n+1),
.grid6 .col:nth-of-type(6n+1),
.grid5 .col:nth-of-type(5n+1),
.grid4 .col:nth-of-type(4n+1),
.grid3 .col:nth-of-type(3n+1),
.grid2 .col:nth-of-type(2n+1) {
 margin-left: 0;
 clear: left;
}/* grid1 is full width but in nth-of-type will wrong code so we can igore it */

Invoking Box to Rock
If media screen less than 951px

@media all and (max-width:951px){
/* reset cols to 3-column odd*/
/* grid8 */
 .grid8 .col {
 width: 32.66%;
 }
 .grid8 .col:nth-of-type(8n+1) {
  margin-left: 1%;
  clear: none;
 }
 .grid8 .col:nth-of-type(3n+1) {
  margin-left: 0;
  clear: left;
 }

 /* grid7 */
 .grid7 .col {
 width: 32.66%;
 }
 .grid7 .col:nth-of-type(7n+1) {
  margin-left: 1%;
  clear: none;
 }
 .grid7 .col:nth-of-type(3n+1) {
  margin-left: 0;
  clear: left;
 }
/* grid6 */
 .grid6 .col {
 width: 32.66%;
 }
 .grid6 .col:nth-of-type(6n+1){
  margin-left: 1%;
  clear: none;
 }
 .grid6 .col:nth-of-type(3n+1) {
  margin-left: 0;
  clear: left;
 }
 /* grid5 */
 .grid5 .col {
 width: 32.66%;
 }
 .grid5 .col:nth-of-type(5n+1) {
  margin-left: 1%;
  clear: none;
 }
 .grid5 .col:nth-of-type(3n+1) {
  margin-left: 0;
  clear: left;
 }
 /* grid4 */
 .grid4 .col {
 width: 32.66%;
 }
 .grid4 .col:nth-of-type(4n+1) {
  margin-left: 1%;
  clear: none;
 }
 .grid4 .col:nth-of-type(3n+1) {
  margin-left: 0;
  clear: left;
 }
}

If media screen less than 599px

@media all and (max-width:599px){
/* set cols to 2-column even*/
 /* grid8 */
 .grid8 .col {
  width: 49.5%;
 }
 .grid8 .col:nth-of-type(3n+1) {
  margin-left: 1%;
  clear: none;
 }
 .grid8 .col:nth-of-type(2n+1) {
  margin-left: 0;
  clear: left;
 }
 /* grid7 */
 .grid7 .col {
  width: 49.5%;
 }
 .grid7 .col:nth-of-type(3n+1) {
  margin-left: 1%;
  clear: none;
 }
 .grid7 .col:nth-of-type(2n+1) {
  margin-left: 0;
  clear: left;
 }
 
 /* grid6 */
 .grid6 .col {
  width: 49.5%;
 }
 .grid6 .col:nth-of-type(3n+1) {
  margin-left: 1%;
  clear: none;
 }
 .grid6 .col:nth-of-type(2n+1) {
  margin-left: 0;
  clear: left;
 }
 /* grid5 */
 .grid5 .col {
  width: 49.5%;
 }
 .grid5 .col:nth-of-type(3n+1) {
  margin-left: 1%;
  clear: none;
 }
 .grid5 .col:nth-of-type(2n+1) {
  margin-left: 0;
  clear: left;
 }
 /* grid4 */
 .grid4 .col {
  width: 49.5%;
 }
 .grid4 .col:nth-of-type(3n+1){
  margin-left: 1%;
  clear: none;
 }
 .grid4 .col:nth-of-type(2n+1) {
  margin-left: 0;
  clear: left;
 }

 /* grid3 */
 .grid3 .col {
  width: 49.5%;
 }
 .grid3 .col:nth-of-type(3n+1) {
  margin-left: 1%;
  clear: none;
 }
 .grid3 .col:nth-of-type(2n+1) {
  margin-left: 0;
  clear: left;
 }
}

If media screen less than 450px

@media all and (max-width:450px){
/* set all grid or col to fullwidth */
 .col {
  width: 100% !important;
  margin-left: 0 !important;
  clear: none !important;
 }
}

HTML For Run Your Box

This 3 col or choose what you want eg: grid6 and more
<div class="boks grid3">
<article class="col orange">
   Column 1 
  </article>
 
  <article class="col red">
   Column 2  
  </article>
 
  <article class="col green">
   Column 3
  </article>
</div>

For Customize This Layout
Comming soon

[click to continue]

Fix Missing Title Archive Page Url Blogger on Search Console

When i open my Google Webmaster and now change in Search Console i find this message for my blog. I think URL on my archive blog page was missing a title. Because in my blog template don't have meta tag for archive.
I think this message is true than url on archive not have a title. Why should we do for this problem? Is that efect from SEO? Let's we talk about this! I have problem with archive url on blogger now. 

And this screenshoot :

If you have same problem or massage from search console, this is my option for fix it :
1. Remove Widget Archive and Not Use Again
2. Add Title Archive Use meta tag
3. Setting Robot Header on Blogger Dashboard

I prefer like use second option coz very simple to do that! This is my way with only add meta tag in head content HTML

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Meta Title Archive Page -->
<title>Post Archive by Month <data:blog.pageName/> | Hypothesis Blogger Template </title>
<!-- Meta Description Archive Page -->
<meta expr:content='&quot;Post Archive by Month &quot; + data:blog.pageName + &quot; learn more please visit myblogname&quot;' name='description'/>
</b:if>

Please add after code all head content

<b:include data='blog' name='all-head-content'/>

For setting Robot.txt Header blogger im not yet. I afraid about SEO after do this, so i use this only way with add meta tag. But if your blog want to noindex search engine on archive page, you can following this article.

[click to continue]