Blogger Magazine Templates

Blogger has not yet achieved the best improvements ever. After a year of collecting opinions from its subscriber, they are now again gathering suggestions and feedbacks.

Theses are some improvements that they have done for inclusion of the new Blogger.

New Template Designer

Spam Comment Filtering

Built-in Blog Stats

Improved Post Editor

Static Pages

Jump Breaks

Background Image Uploads

Accurate Post Previews

Photo Captions

More Default Templates

In my own opinion, here are some of the features that I want to be included and they should prioritize or focus properly;

• Tags for every post. This will be a great help for the popularity of the blog site. Search engine will easily find every post that has the corresponding tag.
• Storage for Javascript files. Blogger should allocate separate storage for javascript files or if not they should allow javascript files for uploading in the media listing.
• Label with Autolink Photos. Every post with the same label will suggest a list of previous used photos.
• Breadcrumbs. A navigational aid for the readers. This is to track what location of the site they are visiting.
• Date on Post. Blog owner should have an option or preferences to include date on post.
• Customized Monetization. Aside from Amazon, blog user should automatically has an Adsense account.

Social bookmarking button is now commonly use on our blog but some still don't know where to place it and sometimes buttons were not properly added to their respective positions and places.

Here is my clearer version of tutorial:

• First, go to "Lay-out/Edit HTML".
• Click "Expand Widget Templates"
• Using Control F in your keyboard, Search this code:  <data:post.body/>
• Copy and Paste this code before the above searched html.

<div style='float:right'><script src='http://w.sharethis.com/button/sharethis.js#publisher=aa79922b-5642-48c7-8763-0d4f68890e62&amp;type=website&amp;buttonText=Share%20This%20Post&amp;embeds=true&amp;style=rotate&amp;post_services=facebook%2Cdigg%2Cdelicious%2Cybuzz%2Ctwitter%2Cstumbleupon%2Creddit%2Ctechnorati%2Cmixx%2Cblogger%2Ctypepad%2Cwordpress%2Cgoogle_bmarks%2Cwindows_live%2Cmyspace%2Cfark%2Cbus_exchange%2Cpropeller%2Cnewsvine%2Clinkedin' type='text/javascript'/></div>

Note: This position is to place the button on the right side position below the title of the post. You can also edit if you don't want to be on the right side by simply removing the "float:right".

• Then, Save.

But if you want to place at the bottom part of the post, just put the code after <data:post.body/>, then save.

I was stuck-up with my programming job when I reached the implementation of rounded corners for my new template design (Anaraar) . Some online rounded corner programs are too complicated to follow and required a lot of hours to scrutinize and sometimes it mess the entire design.

But with just one - three (1 -3) lines of code my problem was being solved. No other CSS needed for inclusion.

Here's the code:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
behavior:url(border-radius.htc);}

Include this codes in the CSS part of your program; a field where you want to have a rounded corner. You can specify also like;

And the size (px) can be adjusted to make it smaller or bigger . Be sure that you're familiar of the outcome of your sizes.

Have it try and see for yourself.

Are you getting bored of having a front page template that was too long and very slow to load? Well, I hope this next tip will greatly help you to ease your burden.

Here are the codes:

1. First, you have to back-up your template. Go to LAY-OUT/ Download Full Template.

2. Copy and Paste below codes before the ]]></b:skin>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

3. Save

4. Then search for this codes, using "CONTROL F" in your keyboard.

<b:section class='main1' id='main_left' preferred='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>

5. Right after this code copy and paste this:

&lt;script type=&quot;text/javascript&quot;&gt;

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;

var pageCount = 1;
var displayPageNum = 5;
var upPageWord = &#39;Previous&#39;;
var downPageWord = &#39;Next&#39;;


var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=&#39;&#39;){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=&#39;&#39;){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!=&#39;&#39;) postNum++;
htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p&lt; htmlMap.length;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}

fFlag++;
}

if(p==(thisNum-1)){
html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;
}else{
if(p==0){
if(isLablePage){
html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
eFlag++;
}
}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
}//end for(var p =0;p&lt; htmlMap.length;p++){

if(thisNum&gt;1){
if(!isLablePage){
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}else{
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}
}

html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;

}

if(postNum==1) postNum++;
html += &#39;&lt;/div&gt;&#39;;

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html =&#39;&#39;;
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
html =&#39;&#39;;
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
&lt;/script&gt;

&lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot;; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

6. Save

It is really annoying for us to scroll and look for the next article in a blog with long post. We're bored sometimes on our mouse just to get rid with trash paragraphs. I will share to you what I have done with my post to keep them short.

Here's the code:

1. Go to "Lay-out/Edit HTML". Check "Expand Widget Template"

2. Find this code <div class=post-body>

3. Copy this code, and place below the above code.
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

4.Below the code we pasted, we see a code like this: <p><data:post.body/></p>

5. Again, copy this code and paste after the above code.
<div style='float:right'>
<a expr:href='data:post.url'><strong>Read Full Post Here</strong></a>
</div>
</b:if>

6. Save.

7. Go to "Setting/Formatting/Post Template"

8. Paste this code:
<div class="fullpost">

</div>

9. Save Setting.

PREVIEW RESULT:


Tip: When Posting, be sure to post using "Edit Html"

With the new feature of Blogger's BLOGLIST, we can subscribe to our Atom Feeds. Using our label, the sidebar of our blog will look like a part of the template. This can be updated every time we post an article that is the same with the label that we subscribe.

So here's the code:

1. You have to get your own blogID. BlogID can be found when you post an article.


2. Type this in a new tab: www2.blogger.com/feeds/YOUR-BLOG-ID/posts/default/-/YOUR-LABEL. Be sure of your Label because this is case sensitive. Copy the link.

3. Go to "Lay-out / Page Elements". Add Gadget to the are where you want the sidebar to be seen.

4. Select Bloglist. Paste the link that you derive from the Atom Feed. Check "Add a blog to your list". Then check box of Title, Thumbnail, & Snippet of the Most Recent.

5. You can rename it. Save.