Test Readmore or Spoiler Pure CSS

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.

[click to continue]

Add Font Awesome Use @Font Face in Blogger CSS

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: &#39;FontAwesome&#39;;
  src: url(&#39;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/font/FontAwesome.otf&#39;);
  src: url(&#39;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome-ie7.css?#iefix&#39;) format(&#39;embedded-opentype&#39;), url(&#39;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/font/fontawesome-webfont.woff&#39;) format(&#39;woff&#39;), url(&#39;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/font/fontawesome-webfont.ttf&#39;) format(&#39;truetype&#39;), url(&#39;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/font/fontawesome-webfont.svg#fontawesomeregular&#39;) format(&#39;svg&#39;);
  font-weight: normal;
  font-style: normal; }
[class^=&quot;icon-&quot;],
[class*=&quot;icon-&quot;] {
  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: &#39;FontAwesome&#39;; }
.icon-mobile:before {
  content: &#39;\f10b&#39;; }
.icon-twitter:before {
  content: &#39;\f099&#39;; }
.icon-facebook:before {
  content: &#39;\f09a&#39;; }
.icon-google-plus:before {
  content: &#39;\f0d5&#39;; }

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 footer star ]-->
        <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.

[click to continue]

Blogger Conditional Tag for Mobile and Dekstop

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 == &quot;false&quot;'>

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

[click to continue]