Hypothesis Skin Demo

Add Blogger Sitemap Like Archive Gadget

noreply@blogger.com (Ahmad Maryuki) — Mon, 17 Sep 2018 12:14:00 -0700

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&alt=json-in-script&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!

Make Box Responsive Layout Use Nth of type Selector CSS

noreply@blogger.com (Ahmad Maryuki) — Tue, 7 Jul 2015 08:56:00 -0700

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

Fix Missing Title Archive Page Url Blogger on Search Console

noreply@blogger.com (Ahmad Maryuki) — Thu, 2 Jul 2015 09:20:00 -0700

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.

Social Media Share Button for Hypothesis Skin Template

noreply@blogger.com (Ahmad Maryuki) — Mon, 22 Jun 2015 01:33:00 -0700

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:&quot;Pacifico&quot;, 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>

Cara Membuat Google Adsense Responsive Javascript

noreply@blogger.com (Ahmad Maryuki) — Wed, 17 Jun 2015 22:32:00 -0700

Memasang iklan google adsense tidaklah sulit, salah satunya dengan menambah javascript di kode iklan kita. Cara membuat iklan adsense dengan javascript ini tidak melanggar tos adsense maupun blogger.

Baik untuk kalian yang ingin membuat iklan google adsense dengan javascript dapat menggunakan cara berikut.

Menggunakan Template Responsive

Iklan google adsense yang akan kita buat nanti akan berjalan sempurna untuk template responsive. Jika kalian belum mempunyai template responsive, segera pasang ke blog kalian, saya jamin perubahannya akan memuaskan.

Menentukan Target Device Mobile

Menentukan target device mobile berarti ukuran layar berapa yang diguanakan. Sebagai contoh untuk template hypothesis berpegang dari list berikut :
Phone : 0-450px
Tablet :451-599px
IPad : 600-950px
Laptop : 951-1024px
Other : 1024px - max
Selengkapnya lihat di bagian target device!

Menentukan Ukuran Iklan

Untuk hasil terbaik adsense responsive kami memilih beberapa iklan yang "menampilkan iklan bergambar pada mobile" lihat penjelasan adsense support 6002621. Untuk ukuran iklan di sidebar akan terlihat seperti berikut :

Ukuran 1 : Adsense ukuran 300x600, Jika device max-width and min-width : 951px (Layar Laptop)

Ukuran 2 : Adsense ukuran 728x90, Jika max-width: 950px and min-width:728px (Layar Ipad)

Ukuran 3 : Adsense ukuran 468x60, Jika max-width: 727px and min-width: 599px (Layar Tablet Besar)

Ukuran 4 : Adsense ukuran 300x250, Jika max-width: 598px and min-width: 450px (Layar Tablet Kecil)
Ukuran 5 : Adsense ukuran 250x250, jika max-width : 450px and min-width : 0px (Layar Phone)

Menyesuaikan Dengan Template Responsive

Kode Javascript:
<script type="text/javascript">
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Anda juga bisa pasang dengan ukuran dan perubahan di setiap layar agar lebih memuaskan pilihlah yang dapat menampilkan iklan bergambar di semua ukuran. Atau anda juga bisa pasang dengan script synchrounous disertai dengan demo tampilan iklannya. Itu cara dari kami.

SEO Page Template Jason McDonald di Blogger

noreply@blogger.com (Ahmad Maryuki) — Tue, 16 Jun 2015 04:32:00 -0700

Mungkin anda pasti tidak asing dengan nama McDonald sebuah restourant cepat saji asal paman sam. Namun pada halaman ini saya akan menjelaskan struktur template yang kami masukkan atau kami design tidak hanya untuk waktu tertentu tetapi "selamanya". Sebelum berbicara tentang SEO page template sebaiknya kita kenalan dengan om JM ini.

Sekilas tentang Jason McDonald

Jason McDonald adalah seorang internet marketing dan SEO consultan di San Fransisco. Beliau sering di undang untuk berbicara tentang isu SEO secara global. Beliau juga menulis buku tentang zero cost internet marketing yaitu pemasaran di internet secara gratis. Kalian bisa mengenal lebih jauh tentang beliau di web personalnya di jasonmcdonald.org.

Fakta Page Template Blogger

Kita tinggalkan sejenak tentang profil master internet marketing tersebut. Nah sekarang kita bicara penerapan metode HTML serta heading di sebuah halaman menurut referensi JM. Kalian bisa melihat basic HTML versi JM di sini. Setelah melihatnya apa yang kamu pikirkan? Apakah HTML blogger seperti itu juga? Jawabannya adalah tidak, untuk itu kami merubahnya untuk kualitas SEO tanpa melanggar TOS blogger.

Blogger secara default atau kebanyakan template yang ada sekarang menggunakan heading biasa. Kalaupun telah dimodifikasi, perbedaan hanya sebatas peletakan H1 dan H2 yang dirubah. Tapi di template hypothesis kami menawarkan sesuatu yang berbeda dan sudah kami uji kualitasnya tanpa ribet. Sampai di sini apa kalian sudah paham?

Mari bicara Heading

Heading atau H Tag sering ditujukan ke judul, baik itu judul blog, judul posting, judul widget dan lain sebagainya sesuai penerapannya. Banyak master SEO menegaskan bahwa H1 adalah heading untuk ditempatkan pada nama judul. Ini bertujuan untuk menekankan pada hal yang paling penting. Kemudian H2, H3 dan seterusnya.

Template designer akan memindah atau mendesign ulang tampilan, tata letak, maupun jumlah H tag nya untuk tujuan SEO Page (halaman). Dalam hal ini designer juga paham betul perbedaan antara design 1 dengan design lainnya jika posisi H tagnya dirubah. Kami juga merasakan hal ini, apakah anda pernah mengalami kejadian bahwa ganti template berbeda pula posisi di mesin pencari (Google)?

SEO Page Template di Hypothesis Skin Template
Basic HTML Strict on Blogger dan teruji di w3c validator

Home

H1 : Judul Blog
H2 : Judul Posting
H2 : Judul Widget
H3-H6 : 'Tidak Ada'

Page Post

H3 : Judul Blog
H1 : Judul Posting
H2 : Deskripsi Blog
H3 : About Me
H3 : Related Post
H2 : Judul Widget
H4 : Komentar

Kenapa judul blog H3 serta deskirpsi blog diberi heading H2?
Kami beranggapan bahwa merubah heading H1 di judul posting belumlah cukup, maka kami menambah deskripsi di bawah judul sehingga redirict H1 ke judul posting akan diperkuat dengan H2 deskripsi. Ini jelas berpengaruh pada hasil pencarian dan tidak melanggar TOS blogger.

Sampai disini dahulu penjelasan kami tentang seo page template. Masih banyak SEO page template yang kami menyadari belum memeahaminya dan sekarang tugas kalian untuk mencobanya pada hasil pencarian. Happy blogging sob!

Test Readmore or Spoiler Pure CSS

noreply@blogger.com (Ahmad Maryuki) — Sun, 10 May 2015 10:29:00 -0700

Just HTML code like this

<div id='readmore'> <input type="checkbox" class="read-more-state" id="post-1" /> <p class="read-more-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="read-more-target">Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt officia quis ab? Excepturi vero tempore minus beatae voluptatem!</span></p> <label for="post-1" class="read-more-trigger"></label> </div> <div id='readmore'> <input type="checkbox" class="read-more-state" id="post-2" /> <ul class="read-more-wrap"> <li>lorem</li> <li>lorem 2</li> <li class="read-more-target">lorem 3</li> <li class="read-more-target">lorem 4</li> </ul> <label for="post-2" class="read-more-trigger"></label> </div>

And CSS like this

<style> .read-more-state { display: none; } .read-more-target { opacity: 0; max-height: 0; font-size: 0; transition: .25s ease; } .read-more-state:checked ~ .read-more-wrap .read-more-target { opacity: 1; font-size: inherit; max-height: 999em; } .read-more-state ~ .read-more-trigger:before { content: 'Show more'; } .read-more-state:checked ~ .read-more-trigger:before { content: 'Show less'; } .read-more-trigger { cursor: pointer; display: inline-block; padding: 0 .5em; color: #666; font-size: .9em; line-height: 2; border: 1px solid #ddd; border-radius: .25em; } /* Other style */ #readmore { padding: 2%; } #readmore p { padding: 2%; background: #fff9c6; color: #c7b27e; border: 1px solid #fce29f; border-radius: .25em; } </style>

Finally demo readmore pure CSS like this :

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt officia quis ab? Excepturi vero tempore minus beatae voluptatem!

lorem
lorem 2
lorem 3
lorem 4

That's work perfectly on mobile view too.

Add Font Awesome Use @Font Face in Blogger CSS

noreply@blogger.com (Ahmad Maryuki) — Sun, 10 May 2015 06:23:00 -0700

Are you use UI design in your blog? Sometime we need many plugin to aply that. I dont understand font awesome most popular too. May coz simple to apllied or another purpose to do it.

This is my way to apllied font awesome using @font face, and i was test in my mobile device as well work.

Font Awesome

In this May font awesome was at version 4.3.0 but in this version not well work in ie by font awesome and that is original explain. So we can use 3.2.1 version and this is my way :

Basic Font Awesome using Font Face

@font-face {
font-family: 'FontAwesome';
src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/font/FontAwesome.otf');
src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome-ie7.css?#iefix') format('embedded-opentype'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/font/fontawesome-webfont.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/font/fontawesome-webfont.ttf') format('truetype'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/font/fontawesome-webfont.svg#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal; }
[class^="icon-"],
[class*="icon-"] {
font-family: FontAwesome;
font-family: FontAwesome-webfont;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
*margin-right: 0.3em; }

Spesific Icon Font

.icon-twitter:before, .icon-mobile:before,
.icon-facebook:before,
.icon-google-plus:before {
font-family: 'FontAwesome'; }
.icon-mobile:before {
content: '\f10b'; }
.icon-twitter:before {
content: '\f099'; }
.icon-facebook:before {
content: '\f09a'; }
.icon-google-plus:before {
content: '\f0d5'; }

Target Aplied Font Awesome

#footer .profile-icons {
float: right;
display: inline-block; }
#footer .profile-icon {
margin-left: 13px; }
* p:last-child,
.sidebar :last-child {
margin-bottom: 0; }

And this is HTML on Footer

<div class='full_width' id='footer'>
        <div class='profile-icons'>
              <a class='profile-icon icon-mobile' href='http://hypothesisdemo.blogspot.com?m=1'/>
            <a class='profile-icon icon-twitter' href='https://twitter.com/pearsonified'/>
            <a class='profile-icon icon-facebook' href='https://www.facebook.com/diythemes'/>
            <a class='profile-icon icon-google-plus' href='https://plus.google.com/u/0/110923553081534378300/'/>
        </div>
</div>

Conclution

We not use <link href> cos will critical on Google Page Speed Insights. See orange code, why doble coz different format to IE 7 and other browser. We not generate original CSS font awesome, because we under licence if we apply in our blog. So we can use another link on CDNJS and chose 3.2.1 version and put url by category svg, ttf, eot and much more. I hope this way as well work.

Blogger Conditional Tag for Mobile and Dekstop

noreply@blogger.com (Ahmad Maryuki) — Fri, 1 May 2015 19:34:00 -0700

Hi all, I think you are too often forgotten in the conditional tag blogger. Moreover, the mobile version certainly makes us repeatedly see the past records. So I gave the article the tag blogger conditional on the desktop and mobile versions.

Only for dekstop and mobile version

<b:if cond='data:blog.isMobile'>

/* visible on mobile */

<b:else/>

/* for desktop */

</b:if>

Only for dekstop version

<b:if cond='data:blog.isMobile == "false"'>

//Contents inside this, will only appear in Desktop version.

</b:if>

Hide on mobile version

<b:if cond='data:blog.pageType != "data:blog.isMobile"'>

/* hide on mobile or widget not show in mobile version */

</b:if>

I think it's work, i find this article on here http://mrafizeldi.tumblr.com/post/91521420963/blogspot-mobile-desktop-conditional-tag.
Still need more? you can see here http://www.vktechzone.com/2015/02/blogger-conditional-tags-for-showhide.html
This article more powerfull too http://code.blogger.com/2011/11/introducing-custom-mobile-templates.html

10 Pondasi HTML Pada Hypothesis Blogger

noreply@blogger.com (Ahmad Maryuki) — Wed, 8 Apr 2015 00:07:00 -0700

Tanpa menambah ataupun merubah versi asli dari DIY Thesis Skin Promo, bahwa ada 10 pondasi HTML yang saya aplikasikan ke blogger. Berikut ini penjelasan sesuai gambar dan berdasarkan HTML dan CSS Layout original.

1. ID Header
Header kami bungkus bersama tag ID header/ Judul blog bersama class navigasi sehingga menjadi kesatuan heading. Apabila ingin mengeditnya, anda harus menentukan target di header atau di navigasi. 2. Class Navigation
Bersama dengan header navigasi berada di sebelah kanan header yang dibungkus dengan ID Header 3. ID Promo Bar
Memungkinkan kita untuk menambah widget seperti hotnews dan lain-lain. 4. Content Box
Induk dari content, headline container, post box, dan sidebar menjadi kesatuan layout. Ini berfungsi untuk layout responsive. 5. Content
Area pembungkus untuk area posting blog. Atau area artikel seperti judul isi artikel. Area ini membungkus headline, post box, dan sidebar. 6. Headline Container
Ciri khas Thesis template yaitu mengubah judul posting ke tag header. Maka dari itu template ini tidak luput dari metode ini. Silahkan lihat semua template thesis mengubah area posting ke dalam tag

atau H1 7. Post Box
8. Sidebar
9. Foot
10 Footer

Pada content box dan content mencakup sidebar, bisa juga disebut content box adalah outer-wrapper atau sejenisnya.

Jika dari area terluar kemudian lebih detail lagi ID dan Class akan seperti ini
Untuk lebih komplit tentang ID HTML Hypothesis Skin Template silahkan lihat di ID HTMLnya

Social Media Meta Tag for Hypothesis Blogger Template

noreply@blogger.com (Ahmad Maryuki) — Mon, 6 Apr 2015 10:10:00 -0700

This is social meta tag update for hypothesis blogger template. If you dont using our template you can add this script if your twitter cards for blogspot not working.

Test in Twitter cards validator at : 05 July, 2015
Type Summary Cards with normal image

<meta content='summary' name='twitter:card'/>
<meta content='@ahmadmaryuki' name='twitter:site'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
<b:else/>
<meta content='https://googledrive.com/host/0B9TVRU0AhL0yfkkxcllpRnN1NFhIMmtHYXZxZjQ2azQ2NXB3cnhkWlhCUnl2M3NXMXBweUU/1435922914_vector_65_11.png' name='twitter:image:src'/>
</b:if>

Please following this alert coz very important!

This code should be add in <b:includable id='post' var='post'>
<div class='post hentry'>
This code for XHTML 4.1 strict, for HTML5 will be error code on meta tag
This code if in hypothesis was included.

Before i publish this post about social media meta tag for blogger, i find a powerfull social media tag. I find on github by Milan Aryal 11 day ago. You can see it's original code on github here and see the result.

Test in Facebook Debuger at : (Under Test)
Type open graph protocol

Hypothesis Blogger Template Style Inspirated

noreply@blogger.com (Ahmad Maryuki) — Thu, 19 Mar 2015 07:39:00 -0700

Hypothesis Blogger Template is inspirated from DIY themes style Promo by Nina Cross Design

We not plagiarizing or converting original theme cos an wordpress and blogger are different of set. In original have HTML5 but in blogger still HTML 4.1 type strict DTD. This template purpose to creative personal home work only and not for commercial use.

If your blog use wordpress please buy Promo style on DIY Themes

Upload Template Versi Hypothesis Skin Template for Blogspot

noreply@blogger.com (Ahmad Maryuki) — Thu, 1 Jan 2015 23:52:00 -0800

Tentu kamu sudah tahu cara upload template ke blogger. Namun untuk template hypothesis perlu cara khusus agar fungsi template ini berjalan sempurna di blog kalian. Berikut cara dan ulasannya.

Setelah agan dan sista memiliki template Hypothesis Skin Template for Blogspot versi XML sekarang kita tinggal upload ke blogger.Sebelum upload template, samakan atau setting atau mengkonfigurasi "Blog Post" di "Tata Letak" dan "Setting" dulu perintah-perintah berikut :

Konfigurasi di menu Blog Post

Tata letak > Blog Post > Edit
A. Opsi Laman Utama : 4 posting
B. Opsi Laman Entri (Pilih dan abaikan dengan cara memberi check list)

Date blog : 'yes'

Diposkan oleh : 'yes'

Di Jam : 'yes'

Komentar : 'yes'

Link ke posting ini : 'no'

Label : 'yes'

Reaksi : 'no'

Tunjukkan pengeditan cepat : 'no'

Tampilkan tombol berbagi : 'no'

Lokasi : 'yes'

Tampilkan pengarang : 'no' Jika sudah akan tampil seperti ini :

Konfigurasi di menu Setting

Template > Setelan > Dasar
Ubah atau masukkan deskripsi blog kamu. Deskripsi ini akan menunjukkan despkripsi untuk home-page. Sementara untuk deskripsi setiap posting akan kamu tentukan sendiri secara manual. Jika sudah silahkan simpan dan kembali ke dashboard namun perhatikan cara upload templatenya :

Upload template Hypothesis Skin Template

1. Login ke blogger
2. Pilih nama blog yang akan diganti template
3. Pilih menu Template
4. Convert ke template standar dahulu seperti Simple Template
5. Setelah itu simpan.

Kalian akan dibawa kembali ke tampilan standard blogger. Cara ini dengan tujuan untuk mensterilkan template sebelumnya dari kode-kode ataupun script yang masih tertinggal dari template sebelumnya.

6. Setelah itu buka template XML ke Notepad.
7. Copy semua kode didalamnya dan ulangi cara nomer 2 dan 3 setelah itu,
8. Paste semua kode ke Edit HTML
9. Terakhir simpan dan pekerjaan kamu selesai

Selamat! Kini kamu telah mempunyai blog dengan tampilan profesional dan dengan fitur yang mumpuni untuk blogger Indonesia.