Add Blogger Sitemap Like Archive Gadget

Hi guys, this blog about hypothesis skin demo! after all this time i know blogger has update to version 3, i was fell like jet lag. Oh no, my blog not update at few time, and this is time to update :D. Let's talk about sitemap in blogger page guys. If you want add blogger sitemap like that, following this article step by step!

I think you was readed many article about add sitemap blogger by javascript. Do you have sitemap like that? If you was added on your blog, leave this post. But if you want sometink different or may not have it, Let's add this sitemap. 

<script src="https://googledrive.com/host/0B-P4_Fs3S76ydURacVd6TlJyWW8" type='text/javascript'></script>
<script src="http://hypothesisdemo.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<style type="text/css">
.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }
.post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}
.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }
.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }
.ct-columns-3 p a:hover { background: #555; color: #fff; }
@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }
</style>
<br />
<script style="text/javascript">
var postTitle=new Array();var postUrl=new Array();var postMp3=new Array();var postDate=new Array();var postYear=new Array();var postMonth=new Array();var postYearMonth=new Array();var postYearMonth2=new Array();var postTanggal=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;var month2=["January","February","March","April","May","June","July","August","September","October","November","December"];function loadtoc(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var m=a.feed.entry[h];var e=m.title.$t;var l=m.published.$t.substring(0,10);var p=m.published.$t.substring(5,7);var g=m.published.$t.substring(8,10);var n=month2[parseInt(p,10)-1]+" "+m.published.$t.substring(0,4);var c="/"+m.published.$t.substring(0,4)+"_"+p+"_01_archive.html";var j;for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="alternate"){j=m.link[f].href;break}}var o="";for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="enclosure"){o=m.link[f].href;break}}postTitle.push(e);postDate.push(l);postUrl.push(j);postYearMonth.push(n);postYearMonth2.push(c);postTanggal.push(g)}}}b();displayToc2();document.write('')}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postYearMonth[b];document.write("<p/>");document.write('<p><a href="'+postYearMonth2[b]+'">'+temp1+"</a></p><ul>");firsti=a;do{document.write("<li>");document.write("["+postTanggal[a]+'] <a href="'+postUrl[a]+'">'+postTitle[a]+"</a>");document.write("</li>");a=a+1}while(postYearMonth[a]==temp1);b=a;document.write("</ul>");if(b>postTitle.length){break}}};
</script>
<script src="http://hypothesisdemo.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>


<br /> This Code should't add to your sitemap page, but if your blog not had author link and date link, add this code and change with yours!
<span class='fn post_author'><span itemprop='reviewer'><a href="https://plus.google.com/100530580758927709441/posts" rel='author'>Ahmad Maryuki</a></span></span>
<span class='date updated'><span class='post_date'>July 11, 2015</span></span>
              <span class='post-timestamp'>
                    <a class='timestamp-link' href='http://hypothesisdemo.blogspot.com/p/sitemap.html' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'>01.01</abbr></a>
              </span>

Your sitemap should be like that image. So please change all pink url with your own sitemap URL and if you want to reupload all code sitemap javascript in your Google Drive just following that sitemap url.  For SEO in blogger page, that sitemap so fast and furous :D.
Happy blogging!

[click to continue]

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]

Social Media Share Button for Hypothesis Skin Template

Social media share button for hypothesis dibuat tanpa mengikuti CSS konsep design template. Artinya widget share button ini stand alone dengan CSS tersendiri di bawah posting blog. Berikur fitur-fiturnya :

Lokasi Penempatan

Widget ini secara default kami tempatkan di bawah posting blog tepatnya di  <div class='post-footer-line post-footer-line-3'/> Secara fungsinya memang post-footer line dibuat responsive terlebih dahulu yaitu dengan memecah lebar (width) antara post footer line 1 (for related post) dan post footer line 2 (for post footer ads) menjadi 50%

CSS Kode Warna

Mengambil warna dari brandcolor.net kita mendapat warna seperti facebook dan beberapa situs social media sebagai berikut :
Facebook : #3b5998
Stumbleupon : #eb4924
Twitter : #55acee
Google+ Red : #dd4b39
Linkedin Blue Primary : #0077b5

Fungsi Social Share

Selain responsive, button ini juga langsung terintegrasi di bawah class 'grt' jika digunakan di hypothesis skin template. Apabila tidak maka atribut class grt tidak terpengaruh. Social button ini otomatis terpasang di setiap posting tanpa perlu mengedit url lagi.

Auto Every Post

Anda ingin memasangnya? Silahkan copy kode berikut ini! Untuk template hypothesis skin template sudah terpasang otomatis.

.animate{transition:all 0.1s;-webkit-transition:all 0.1s;}

.action-button{position:relative;padding:5px 20px;margin:0px 5px 5px 0px;float:left;border-radius:3px;font-family:"Pacifico", Georgia, serif;font-size:16px;color:#2f3840;text-decoration:none;}

.facebook{background-color:#3b5998;border-bottom:5px solid #3b5998;}

.pinterest{background-color:#cc2127;border-bottom:5px solid #cc2127;}

.twitter{background-color:#55acee;border-bottom:5px solid #55acee;}

.googleplus{background-color:#dd4b39;border-bottom:5px solid #dd4b39;}

.linkedin{background-color:#0077b5;border-bottom:5px solid #0077b5;}

.stumble{background-color:#eb4924;border-bottom:5px solid #eb4924;}

.action-button:active{transform:translate(0px,5px);-webkit-transform:translate(0px,5px);border-bottom:1px solid;color:#2f3840;background-color:#ffffff;}



<div class='post-footer-line post-footer-line-3'/><!--[ FIND THIS HTML SECTION ]-->

<b:if cond='data:blog.pageType == &quot;item&quot;'><!--[ EXPRESSION TO SHOW ONLY ON POST ]-->

<div class='simple-social-icons'>

<a class='action-button shadow animate facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'> Facebook</a>

<a class='action-button shadow animate twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'> Twitter</a>

<a class='action-button shadow animate googleplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'> Google+</a>

<a class='action-button shadow animate stumble' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share On StumbleUpon !'> Stumble it</a>

<a class='action-button shadow animate linkedin' expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'> LinkedIn</a>

</div>

<div style='clear: both;'/><!--[ CHANGE LINE ]-->

</b:if>



<!--[ DIV POST FOOTER END ]-->

</div>

[click to continue]