AplBlog – Professional Blogger Layout

My favorite website with professional design is Apple Website. I have run this layout for my personal blog on Blogger for long time already. Some guys asked me about this layout and after a couple of month have not published any entries on my blog, I return to continue blogging by release this theme for Blogger. This one is free for download, you can copy, change and distribute it freely. Just mentioning this site should be fair. This layout comes along with 2 options: one with original comment system of Blogger, another one is with DISQUS Comment system.

So, now, check a demo or download it now, it’s free.

To install this layout, you have to replace your current layout by this AplBlog layout. At first, you must know replaceing your blogger layout by another one will be dangerous for your blogger. But, if you’re familiar with HTML and CSS design, it’s not your problem anymore.

Using this layout with Blogger Comment System or DISQUS Comment

Find somewhere in the code with the following

 <b:includable id='comments' var='post'>
.......
</b:includable>

Replace the following codes below with which one you want to use

Original Blogger Comment System:

<b:includable id='comments' var='post'>
 <div class='comments' id='comments'>
  <a name='comments'/>
  <b:if cond='data:post.allowComments'>
   <h4 class='buddy-comment'>
    <b:if cond='data:post.numComments == 1'>
     1 <data:commentLabel/>:
    <b:else/>
     <data:post.numComments/> <data:commentLabelPlural/>:
    </b:if>
   </h4>

   <b:if cond='data:post.commentPagingRequired'>
    <span class='paging-control-container'>
     <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
                                                 <data:post.oldestLinkText/></a>
     &#160;
     <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
                                                 <data:post.olderLinkText/></a>
     &#160;
     <data:post.commentRangeText/>
     &#160;
     <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
                                                 <data:post.newerLinkText/></a>
     &#160;
     <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
                                                 <data:post.newestLinkText/></a>
    </span>
   </b:if>

   <dl id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
     <div class='comment-inside'>
     <dt expr:class='&quot;comment-author&quot;' expr:id='data:comment.anchorName'>
      <a expr:name='data:comment.anchorName'/>
      <b:if cond='data:comment.authorUrl'>
       <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
      <b:else/>
       <data:comment.author/>
      </b:if>
      <data:commentPostedByMsg/>
     </dt>
     <dd class='comment-body'>
      <b:if cond='data:comment.isDeleted'>
       <span class='deleted-comment'><data:comment.body/></span>
      <b:else/>
       <p><data:comment.body/></p>
      </b:if>
     </dd>
     <dd class='comment-footer'>
      <span class='comment-timestamp'>
       <a expr:href='data:comment.url' title='comment permalink'>
        <data:comment.timestamp/>
       </a>
       <b:include data='comment' name='commentDeleteIcon'/>
      </span>
     </dd>
     </div>
    </b:loop>
   </dl>

   <b:if cond='data:post.commentPagingRequired'>
    <span class='paging-control-container'>
     <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
      <data:post.oldestLinkText/>
     </a>
     <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
      <data:post.olderLinkText/>
     </a>
     &#160;
     <data:post.commentRangeText/>
     &#160;
     <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
      <data:post.newerLinkText/>
     </a>
     <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
      <data:post.newestLinkText/>
     </a>
    </span>
   </b:if>

   <p class='comment-footer'>

    <b:if cond='data:post.embedCommentForm'>
     <b:include data='post' name='comment-form'/>
    <b:else/>
     <b:if cond='data:post.allowComments'>
      <a class='postCommentMsgA' expr:href='data:post.addCommentUrl' 
      expr:onclick='data:post.addCommentOnclick'><span class='postCommentMsgSpan'>
                                                 <data:postCommentMsg/></span></a>
     </b:if>
    </b:if>

   </p>
  </b:if>

  <div id='backlinks-container'>
  <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
    <b:if cond='data:post.showBacklinks'>
     <b:include data='post' name='backlinks'/>
    </b:if>
  </div>
  </div>
 </div>
</b:includable>

DISQUS Comment:

Note: You have to register an account on DISQUS

<b:includable id='comments' var='post'>
<div id='disqus_thread'/><script src='http://disqus.com/forums/lamnguyenblog/embed.js'
                                                              type='text/javascript'/>
     <noscript>
       <a href='http://lamnguyenblog.disqus.com/?url=ref'>View the discussion thread.</a>
     </noscript>
       <a class='dsq-brlink' href='http://disqus.com'>blog comments powered by 
                                              <span class='logo-disqus'>Disqus</span></a>
</b:includable>

You must customize your template after replace.

This layout comes along with some features: Recent Comments, Recent Entries, Twitter and some Social Bookmark. You have to customize that to replace your own.

Recent entries and Recent comments in this layout are powered by FeedBurner, you must create one account with that site. And find these codes bellow:

Recent Entries:

 <b:widget id='HTML2' locked='false' title='Recent entries' type='HTML'>
<b:includable id='main'>
   <!-- only display title if it's non-empty -->

   <div class='sidebar-widget' id='recent-entries-widget'>
    <div class='widget-corner-topleft'>
     <div class='widget-corner-topright'>
       <a class='section-rss' href='http://feeds.feedburner.com/prlamnguyen'>
       <h2 id='recent-entries-rss'>RSS</h2>
       </a>
       <b:if cond='data:title != &quot;&quot;'>
      <h2 class='section-title' id='recent-entries-title'><data:title/></h2>
       </b:if>
     </div>
    </div>
    <div class='widget-inside'>
      <data:content/>
      <!-- <script src='http://feeds.feedburner.com/prlamnguyen?format=sigpro'
                                        type='text/javascript'/> </SCRIPT> --> 

       <b:include name='quickedit'/>
    </div>
    <div class='corner-content-left'>
     <div class='capbottomright'/>
    </div>
   </div>
  </b:includable>
</b:widget>

Recent Comments:

<b:widget id='HTML3' locked='false' title='Recent comments' type='HTML'>
<b:includable id='main'>
   <!-- only display title if it's non-empty -->

   <div class='sidebar-widget' id='recent-entries-widget'>
    <div class='widget-corner-topleft'>
     <div class='widget-corner-topright'>
       <a class='section-rss' href='http://feeds.feedburner.com/prlamnguyen-recentcomments'>
       <h2 id='recent-entries-rss'>RSS</h2>
       </a>
       <b:if cond='data:title != &quot;&quot;'>
      <h2 class='section-title' id='recent-entries-title'><data:title/></h2>
       </b:if>
     </div>
    </div>
    <div class='widget-inside'>
      <data:content/>
      <!-- <script src='http://feeds.feedburner.com/prlamnguyen-recentcomments?format=sigpro'
                                                                 type='text/javascript'/> --> 

       <b:include name='quickedit'/>
    </div>
    <div class='corner-content-left'>
     <div class='capbottomright'/>
    </div>
   </div>
  </b:includable>
</b:widget>

Change Twitter Profile:

Find the codes below (near at the bottom):

<script src='http://twitter.com/statuses/user_timeline/prlamnguyen.json?callback=twitterCallback2&amp;count=4'
                         text='text/javascript'/>

Replace my profile with your one.

Change RSS Feed Button and Email Subscription:

Find and customize these codes below with your one feed url:

   <div class='sidebar-widget' id='subcribe'>
    <div id='formDIV'>
     <form action='http://www.feedburner.com/fb/a/emailverify?feedId=2211409' enctype='multipart/form-data' id='subscribeForm' method='post' name='subscribeForm' target='popupwindow'>
       <div class='subscibe-input'>
        <input class='feedinput' name='email' type='text' value='your e-mail'/>
      </div><div class='subscribe-btn'>
        <input id='imageField' name='imageField' src='http://lh6.ggpht.com/_eum50fCHUAE/STnz9WWjtBI/AAAAAAAAAxw/T5pCeBIbBM8/subscribe-btn.png' type='image'/>
       </div>
     </form>
    </div>
    <div id='prlamnguyen-feeds'><a alt='prlamnguyen feed' href='http://feeds.feedburner.com/prlamnguyen'><h3>prlamnguyen&#39;s rss feed - powered by feedburner - blog focus on java, php, design (css HTML)</h3></a></div>
   </div>

Others Social Bookmark:

You have to replace all the social button on my layout. You will find it in Main Page, Post pages…Just change the value to your url.

Add Google Adsense into Sidebar:

Add new Widget from your Blogger Control Panel as a new Adsense Widget. Replace the current widget code with below:

<b:widget id='AdSense1' locked='false' title='' type='AdSense'>
<b:includable id='main'>
   <!-- only display title if it's non-empty -->

   <div class='sidebar-widget'>
    <div class='widget-corner-topleft'>
     <div class='widget-corner-topright'>
       <b:if cond='data:title != &quot;&quot;'>
      <h2 class='section-title'><data:title/></h2>
       </b:if>
     </div>
    </div>
    <div class='widget-inside' id='sponsored-link' style='border-top: none; margin-top: -30px;'>
      <data:adCode/>
    </div>
    <div class='corner-content-left'>
     <div class='capbottomright'/>
    </div>
   </div>
  </b:includable>
</b:widget>

Some words:

This layout is free for download, you can copy, change and distribute it freely. Just mentioning this site should be fair. Any suggestion will be greatly appreciated. Another verson will be release for Wordpress. I’m just working on it. Thank you for reading.

Posted in: Freebies
Tags: Blogger, Layout