FEATURES

Complete Fonts and Colors Tags for Layout
Now you can change fonts and colors with your own style without HTML/CSS knowledges. Go to Template - Fonts and Colors and paint your own TypoXP 2.1 Blogger Template.
Header Image supported
Now you can change header image with your own image directly from your Template - Page Elements area.
Top Navigation Links
Now you can add links in your top navigation directly from your Template - Page Elements area.
Four Sidebar Widgets Area
There are 4 sidebar area. They are Top Sidebar, Middle Left Sidebar, Middle Right Sidebar, and Bottom Sidebar.
Selective expandable post summaries
I wrote a complete explanation for this hacks here.
TypoXP Sidebar Title Icon Set
Different widgets will have different icons (default) , but you can change this icon using this trick.
Author Comment Highlight
Label (Tags) Cloud Widget (no longer available)
Some of you reported some errors when using this widget. If you want to add this feature in TypoXP 2.1 Blogger Template, you can follow instructions here.
Archive Calendar Widget (no longer available)
Some of you don't like or need this widget. If you want to add this feature in TypoXP 2.1 Blogger Template, you can follow instructions here.
Recent Posts Widget
Recent Comments Widget
Search Widget

Demo | Download

Designed by BlackQuanta

Read More...

When you are showing posts in certain label or using "search facility" in Blogger, your blog will display a "Status Message". You can customize it with your own style.



You only need to add some CSS code for your "Status Message". BlogAndWeb give us an example on his article.

#main .status-msg-wrap {  
  width:90%;  
  padding:5px;
}    
#main .status-msg-body {
  font-size:80%;
  text-align:left;
  padding:5px 5px 5px 30px;
  width:auto;
}    
#main .status-msg-border {
  border:1px solid #a19a36;
  opacity:1;
}    
#main .status-msg-bg {
  background: #FFF9B3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjxVd-SR6WfHSrkJxgeD4k5k8dqmAjb1j0sqpChRlBVE0Qz0tKW92K4FkLe6EO0a20f7SBEXo-pApw2XxDRY0NBysc4IqQXsDpi58Q3ODJen4H0KbDiaEFS7-Av5Fwt9VNA8xr84WPQ2rj/s1600/gnome-status%5B2%5D.png) center left no-repeat;
  opacity:1;
}

Edit your blogger template and add this code before ]]></b:skin> tag.

Resources: BlogAndWeb

Read More...

Hoctro made a simple tutorial about adding a frontpage to your blog. Your frontpage section will be shown only at your blog home page. The secret is two lines conditional (if) code below,

<b:if cond="data:blog.url == data:blog.homepageUrl">

[ Add everything you want for your frontpage here... ]

</b:if> 

Okay, be creative and make a frontpage for your own blog!

Read More...

Since October is breast cancer awareness month, K2 Modify created 10 "Shades of Pink" Blogger Template for you.



Pink I | Visit and Download
Designed by K2 Modify



Pink II | Visit and Download
Designed by K2 Modify



Pink III | Visit and Download
Designed by K2 Modify



Pink IV | Visit and Download
Designed by K2 Modify



Pink V | Visit and Download
Designed by K2 Modify



Pink VI | Visit and Download
Designed by K2 Modify



Pink VII | Visit and Download
Designed by K2 Modify



Pink VIII | Visit and Download
Designed by K2 Modify



Pink IX | Visit and Download
Designed by K2 Modify



Pink X | Visit and Download
Designed by K2 Modify

Read More...

Demo | Visit and Download

Designed by K2 Modify

Read More...

Demo | Visit and Download

Designed by BlogAndWeb

Read More...

Demo | Visit and Download

Designed by BlogAndWeb

Read More...

Demo | Visit and Download

Designed by K2 Modify

Read More...

Demo | Visit and Download

Designed by JackBookDotCom

Read More...

Blogger Help provides a simple hack to create expandable post summaries for your new blogger. But, it shows "Read More" link in every posts and some of you don't like this. Hackosphere tried to make a selective expandable post summaries for his Neo blogger template. In this post, i'll try to make it easier for you.

First, we have to edit your template code. Login to your Blogger account and go to Template - Edit HTML.
Find the </head> tag and add all of this code before it.

<b:if cond='data:blog.pageType == "item"'>
 <style>.fullpost{display:inline;}</style>
<b:else/>
 <style>.fullpost{display:none;}</style>
 <script type='text/javascript'>
 function checkFull(id) {
   var post = document.getElementById(id);
   var spans = post.getElementsByTagName(&#39;span&#39;);
   var found = 0;
   for (var i = 0; i &lt; spans.length; i++) {
     if (spans[i].className == &#39;fullpost&#39;) {
       spans[i].style.display = &#39;none&#39;;
       found = 1;
     }
     if (spans[i].className == &#39;showlink&#39;) {
       if (found == 0) {
         spans[i].style.display = &#39;none&#39;;
       }
     }
   }
 }
 </script>
</b:if>

Find the CSS style tag for your post content,

<div class='post-body'>
  <p><data:post.body/></p>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

and replace with this code.

<div class='post-body' expr:id='"post-" + data:post.id'>
  <p><data:post.body/></p>
  <b:if cond='data:blog.pageType != "item"'>
    <span class='showlink'>
      <p><a expr:href='data:post.url'>Read More...</a></p>
    </span>
    <script type='text/javascript'>
      checkFull(&quot;post-<data:post.id/>&quot;);
    </script>
  </b:if>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Finish!

Implementation

Each post that you want to use this feature on will need this code:
<span class="fullpost"></span>

You'll enter the summary text outside the span tags and the remainder inside, like so:
Here is the beginning of my post.
<span class="fullpost">And here is the rest of it.</span>

Now, when a reader visits your blog, this post will appear like this:
Here is the beginning of my post.
Read more...

When they click the link, they'll go to the post page where they'll see the whole thing:
Here is the beginning of my post.
And here is the rest of it.

Read More...

Demo | Visit and Download

Designed by JackBookDotCom

Read More...

Demo | Visit and Download

Designed by JackBookDotCom

Read More...

Demo | Visit and Download

Designed by JackBookDotCom

Read More...