Test uji coba Pre dan Code

Test Code CSS

code {
  color:#888;
  font-family:"Courier New",Courier,Monospace;
  font-size:0.923076923077em;
}

code a,
code a:hover {color:inherit}
code a:hover {background-color:#E6ECF5}

.underline {border-bottom:1px dashed #839496}
.highlight,mark {background-color:skyblue}

pre .highlight,
pre .highlight span,
pre mark,
pre mark span {
  background-color:white;
  color:#839496 !important;
}

code .branch-link,
code .branch-link:hover {
  background-color:#052127;
  color:#839496;
  text-decoration:none;
  border:1px dotted;
  line-height:12px;
}

Test Code HTML

<b:includable id='post' var='post'>
 <article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <b:if cond='data:post.thumbnailUrl'>
    <script type='text/javascript'>
     //<![CDATA[
     function bp_thumbnail_resize(image_url,post_title) {var image_size=55; image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" class="gambar-home" alt="'+post_title+'" title="'+post_title+'"/>'; if(image_url!="") return image_tag; else return ""; }
     //]]>
    </script>
    <a expr:href='data:post.url'>
     <script type='text/javascript'>
      document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
     </script>
    </a>
    <b:else/>
    <a expr:href='data:post.url'><img class='gambar-home' expr:alt='data:post.title' expr:title='data:post.title' src='/favicon.ico' width='55'/></a>
   </b:if>
   <b:if cond='data:post.title'>
    <h2 class='post-title entry-title'>
     <b:if cond='data:post.link'> <a expr:href='data:post.link ' expr:title='data:post.title'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </b:if>
    </h2>
   </b:if>
   <b:else/>
   <strong><h1 class='post-title entry-title'>
    <b:if cond='data:post.link'> <a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a> <b:else/> <data:post.title/> </b:if>
    </b:if>
   </h1></strong>
   <b:if cond='data:post.firstImageUrl'>
    <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
   </b:if>
   <div class='sandal-jepit'>
    Ditulis oleh: <span class='vcard' id='hcard'> <span class='fn n'> <span class='given-name'><a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'><data:post.author/></a></span></span></span> - <b:if cond='data:post.dateHeader'><a class='timestamp-link' expr:href='data:post.url' expr:title='data:blog.pageName' itemprop='url' rel='bookmark'><abbr class='updated published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.dateHeader/></abbr></a></b:if>
   </div>
  </b:if>

        <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
   <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
    <b:else/>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div expr:id='&quot;summary&quot; + data:post.id' itemprop='articleBody'>
     <data:post.snippet/>
    </div>
    <script type='text/javascript'>createSummary(&quot;summary<data:post.id/>&quot;);</script>
    <div class='jarak'/>
    <div class='info'>
     <div class='clear'/>
     Label : <span class='kategori'>
      <b:if cond='data:post.labels'>
       <b:loop values='data:post.labels' var='label'>
        <a expr:href='data:label.url' expr:title='data:label.name' rel='nofollow'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
       </b:loop>
      </b:if>
     </span>
     <div class='clear'/>
     <abbr class='updated published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr> | <span class='vcard'><span class='hcard'> <span class='fn n'> <span class='given-name'><data:post.author/></span></span></span></span> | <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='data:post.numComments + &quot; Komentar &quot;' itemprop='discussionUrl'> <b:if cond='data:post.numComments == 0'> Beri Komentar </b:if> <b:if cond='data:post.numComments == 1'> 1 Komentar </b:if> <b:if cond='data:post.numComments &gt; 1'> <data:post.numComments/> Komentar </b:if> </a> </b:if>
    </div>
    <div class='clear'/>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div itemprop='articleBody'>
     <data:post.body/>
    </div>
    <div class='clear'/>
    <div class='sharing'>
     <ul class='kapukganteng-social' id='kapukganteng-cssanime'>
       <li class='kapukganteng-facebook'>
        <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
       </li>
       <li class='kapukganteng-twitter'>
        <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
       </li>
       <li class='kapukganteng-googlebuzz'>
        <a expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a>
       </li>
       <li class='kapukganteng-stumbleupon'>
        <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
       </li>
       <li class='kapukganteng-digg'>
        <a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
       </li>
       <li class='kapukganteng-delicious'>
        <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
       </li>
       <li class='kapukganteng-linkedin'>
        <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
       </li>
       <li class='kapukganteng-reddit'>
        <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
       </li>
       <li class='kapukganteng-technorati'>
        <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>
       </li>
      </ul>
    </div>
    <div class='related_posts'>
     <h4>Artikel terkait :</h4>
     <b:loop values='data:post.labels' var='label'>
     <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;amp;callback=related_results_labels&amp;amp;max-results=5&quot;' type='text/javascript'/></b:loop>
     <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
     </script>
    </div>
    <div class='clear'/>
   </b:if>
  </b:if>
 </div> 
</article>
</b:includable>

Artikel terkait :