Browse > Home / Archive: July 2008

Basic Template Customization

July 16, 2008

A reader of my book, kelapkelip_inthedark@yyy.com, just drop me an email because she’s having problems on applyling some Blogger customization that I wrote on the book. Yes, my own blogging books :) . Here’s a recap of the book.

I’ve posted the tricks that I wrote on the book here:

  1. Add Smiley to Your Blogger
  2. Make Your Own Label Cloud
  3. Cut Your Post to Show The Real Blog

If you still having problems, feel free to contact me again ;)

Written by retsu782000 · Filed Under Uncategorized 

Add Smiley to Your Blogger

July 16, 2008

Do you want to make your blogger a bit fancy? Like adding smilies to it? Thanks to Aditya I manage to get some collection of smilies.

 :)  or  :-)   :(  or  :-(   :P  or  :-P   :D  or  :-D  :$ or :-$  ;)  or  ;-)

All you need to do is add this script in your <head> section. Go to your layout and edit HTML, no need to expand the template.

<script src=’http://aditya.vm.googlepages.com/addSmiley.js’ type=’text/javascript’></script>

And your done. You might want to save the script for yourself to avoid slow loading on the script ;)

Technorati technorati tags: , , ,

Written by retsu782000 · Filed Under Uncategorized 

Blogger Now Schedules Future-Dated Posts

July 16, 2008

Blogger now schedules future-dated postsBlogger lately has been tailing wordpress for some of it’s awesome features, like schedules postings. When it was appeared on the Blogger Buzz: Blogger now schedules future-dated posts
I bet many people are celebrating it.

You know how the blogging inspiration doesn’t always come as you want it to be. So, it helps you to save no matter how much inspiration you’ve got and publish it any time in the future. Or perhaps you want to publish something on a certain date but knew you wouldn’t be at a computer to make a post? Or to make your blog still alive when you’re on a long vacation. I’ve done this several times now on my Funny and Interesting Emails blog.

Blogger now schedules future-dated postsYou’ll see the scheduled posts on my blog according to date that I’ve set before. All you have to do is set the post options date to somewhere in the future. Don’t forget the date’s format is mm/dd/yyyy, coz’ some times I got myself confused too :P

When you hit “Publish”, your post will become “scheduled.” When the date and time of the post arrive, Blogger will automatically publishing the post.

Blogger now schedules future-dated postsOne quick note from the blogger team:

If you want to give a post a date in the future but have it appear on your blog now, you’ll need to add in an extra step. First, publish your post with the current date and time. This will make it appear on your blog. Then, edit the post to change the date into the future and publish it again.

We don’t re-schedule posts that are already published, so the post will stay on your blog but sort to the very top. The same is true of future dated posts you’ve already made, so there’s no need to worry about your existing posts disappearing, or having your blog assaulted by unplanned entries in, say, 2027.

So, go a head and try it now…. :)

Technorati technorati tags: , , ,

Written by retsu782000 · Filed Under Uncategorized 

Cut Your Post to Show The Real Blog

July 15, 2008

Have you ever visit a blog index and you need to scroll over and over just to get to see the title of the second most recent post on the blog? It’s depressing isn’t it? Most of the time you arrive on a blog you wanna take a recap of the newest posts the author has made and you want it quick. It’s even more crucial when it’s your first time visit. You don’t want to make your potential visitor to go away without seeing the “whole blog”. It’s the law of the first impression to me.

So how do we make the readers check on the blog better? By cutting those long posts into pieces so the they can pick on the post they’d like to read on. It’s an old trick that news sites already doing it for ages. See what I mean?

Let’s go to the details now…

1. Open your template –> edit HTML
2. Check on “expand widget template”
3. Find this line:


<div class='post-header-line-1'/> <div class='post-body'>

4. Place the next code under it:


<b:if cond=’data:blog.pageType == “item”‘>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

5. Find this code under it:


<p><data:post.body/></p>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

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

Put this code:

<a expr:href=’data:post.url’>Read More……</a>

</b:if>

7. So it will look like this ( the blue one is the extra code):


<div class=’post-header-line-1′/>

<div class=’post-body’>

<b:if cond=’data:blog.pageType == “item”‘>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href=’data:post.url’>Read More……</a>
</b:if>

<div style=’clear: both;’/> <!– clear for photos floats –>
</div>

Note that you can change the words “Read More” with anything else, like “ Continue reading”

8. Go to SETTINGS, choose FORMATTING. Fill this code on the box of the POST TEMPLATE menu:


<span class=”fullpost”>

</span>

Don’t forget to save :p.

9. How to use it
When you write a new post choose EDIT HTML. This code will appear automatically. This is because we did step number 8.

<span class="fullpost">

</span>

Place the part of the post that you want to hide between <span class="fullpost"> and </span> . You can make the first two paragraph to appear on the front and make the rest is hidden.

If you want to cut your older post that still appearing as a whole on the front page just do step 9 on the post.

Note that you don’t have to edit all your previous post because it is useless. This is only has effect on the front page so why bother about those old posts that already got buried ;)

Technorati technorati tags: , , ,

Written by retsu782000 · Filed Under Uncategorized 

Make Your Own Label Cloud

July 13, 2008

label cloud in blogger betaIf you are thinking that label from blogger is not good enough since it’s taking large space on your blogroll, why not try to make your own label clouds like it did on my blog here. It’s catchy and it sure belongs for the web 2.0 design style. I found these nice blogger hacks from
phydeaux3.

Let’s start to make one:

  1. go to your template and choose edit HTML and leave the the widgets NOT exapanded.
  2. find ]]></b:skin> and paste these codes before that.
    /* Label Cloud Styles
    ———————————————– */
    #labelCloud {text-align:center;font-family:arial,sans-serif;}
    #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
    #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
    #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
    #labelCloud a{text-decoration:none}
    #labelCloud a:hover{text-decoration:underline}
    #labelCloud li a{}
    #labelCloud .label-cloud {}
    #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
    #labelCloud .label-cloud li:before{content:”" !important}

  3. paste these code after ]]></b:skin>and before the </head> tag

    <script type=”‘text/javascript’”>
    // Label Cloud User Variables
    var lcBlogURL = ‘http://YOURBLOG.blogspot.com’;
    var cloudMin = 1;
    var maxFontSize = 20;
    var maxColor = [0,0,255];
    var minFontSize = 10;
    var minColor = [0,0,0];
    var lcShowCount = false;
    </script>

  4. Find this line <b:widget id=”‘Label1′” locked=”‘false’” title=”‘Labels’” type=”‘Label’/”></b:widget> . If you can’t find it just go to the page elements sub menu and add a label widget first and replace it with
    <b:widget id=’Label1′ locked=’false’ title=’Label Cloud’ type=’Label’>
    <b:includable id=’main’>
    <b:if cond=’data:title’>
    <h2><data:title/></h2>
    </b:if>

    <div class=’widget-content’>
    <div id=’labelCloud’/>
    <script type=’text/javascript’>

    // Don’t change anything past this point —————–
    // Cloud function s() ripped from del.icio.us
    function s(a,b,i,x){
    if(a>b){
    var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
    }
    else{
    var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
    }
    return v
    }

    var c=[];
    var labelCount = new Array();
    var ts = new Object;
    <b:loop values=’data:labels’ var=’label’>
    var theName = “<data:label.name/>”;
    ts[theName] = <data:label.count/>;
    </b:loop>

    for (t in ts){
    if (!labelCount[ts[t]]){
    labelCount[ts[t]] = new Array(ts[t])
    }
    }
    var ta=cloudMin-1;
    tz = labelCount.length – cloudMin;
    lc2 = document.getElementById(‘labelCloud’);
    ul = document.createElement(‘ul’);
    ul.className = ‘label-cloud’;
    for(var t in ts){
    if(ts[t] < cloudMin){
    continue;
    }
    for (var i=0;3 > i;i++) {
    c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
    }
    var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
    li = document.createElement(‘li’);
    li.style.fontSize = fs+’px’;
    li.style.lineHeight = ‘1′;
    a = document.createElement(‘a’);
    a.title = ts[t]+’ Posts in ‘+t;
    a.style.color = ‘rgb(‘+c[0]+’,'+c[1]+’,'+c[2]+’)';
    a.href = ‘/search/label/’+encodeURIComponent(t);
    if (lcShowCount){
    span = document.createElement(’span’);
    span.innerHTML = ‘(‘+ts[t]+’) ‘;
    span.className = ‘label-count’;
    a.appendChild(document.createTextNode(t));
    li.appendChild(a);
    li.appendChild(span);
    }
    else {
    a.appendChild(document.createTextNode(t));
    li.appendChild(a);
    }
    ul.appendChild(li);
    abnk = document.createTextNode(‘ ‘);
    ul.appendChild(abnk);
    }
    lc2.appendChild(ul);
    </script>

    <noscript>
    <ul>
    <b:loop values=’data:labels’ var=’label’>
    <li>
    <b:if cond=’data:blog.url == data:label.url’>
    <data:label.name/>
    <b:else/>
    <a expr:href=’data:label.url’><data:label.name/></a>
    </b:if>
    (<data:label.count/>)
    </li>
    </b:loop>
    </ul>
    </noscript>
    <b:include name=’quickedit’/>
    </div>

    </b:includable>
    </b:widget>

As you might notice some of the variables in the code can be customized, you can find more explanation about how to get the label cloud fits in your blog Code for New Blogger Tag Cloud

Technorati technorati tags: , , , , ,

Written by retsu782000 · Filed Under Uncategorized 

Search This Blog Widget

July 10, 2008

This widget is a must for me, not to mention after the new Google Adsense for search can’t be modified to give user selection whether they want to search on web or the site. Actually this feature already built in on you Blogger navigation bar. However we already talk about how keeping this navigation bar is a waste. If you haven’t read it, read my previous post here.

For the search this blog widget I prefer to put it on my blogroll or sidebar, like I did on this blog. If you don’t know what a sidebar is then take a look at this blog dictionary that will give you a look at some terminology that you’ll find once you live on the blogosphere :p

Okay, enough with the chit chat here are the codes for the widget:

<div id=”search-box”><form id=”searchthisblog” action=”/search” style=”display:inline;” method=”get”> <input id=”search-box” name=”q” size=”20″ type=”text”/> <input id=”search-btn” value=”Search” type=”submit”/> </form></div>

This is how to add the widget:

  1. Go to Layout choose Page Elements sub menu
  2. Add a HTML/Script page elements on section that you’d like to see this widget
  3. Insert the codes above and your done.

Technorati technorati tags: , , ,

Written by retsu782000 · Filed Under Uncategorized 

Blogosphere Dictionary

July 8, 2008

This a list of some terminologies that you have to know when you are blogging. It’s a newbie list but it will help you to understand what bloggers are talking about in the bloghosphere :)


  • blog

    short for Weblog. A Web site that contains an online personal journal with reflections, comments, and often hyperlinks provided by the writer.”

  • archive

    a blog widget that give links to all your previous post

  • blogger

    a person who owns a blog and blogging

  • blogosphere

    is a collective term encompassing all blogs and their interconnections. It is the perception that blogs exist together as a connected community

  • bookmark

    is when you save the URL of a web on a browser, so when you want to visit it again you don’t have to type the URL all over again

  • comment

    a respond from visitors or even the author about a post

  • CSS
    A method of markup that allows users to define how certain HTML, XHTML, or XML structural elements, such as paragraphs and headings, should be displayed using style rules instead of additional markup.

  • default

    In general computer-speak, a selection made automatically in a program if the user specifies no explicit selection.

  • feed

    is a technology that gives blog abilities to provide a way for visitors to have updates of the blog without have to visit the blog itself.

  • footer

    the lowest section of a blog usually shows copyrights of the blog

  • form

    HTML
    markup that lets browsers solicit data from users and then deliver that data to specially designated input-handling programs on a Web server. Briefly, forms provide a mechanism to let users interact with servers on the Web.

  • full time blogger

    a person who makes a living from blogging by making money online from placing ads e.g Adsense, selling links, etc

  • header

    the top section of a blog usually shows title of the blog and its descriptions

    HTML

  • HTML

    (Hypertext Markup Language) nevertheless provides a rich lexicon and syntax for designing and creating useful hypertext documents for the Web.

  • link

    a part of the web document that connect you to a different URL. It can be a picture or text.

  • post

    a piece of article in a blog usually it has its own URL and can contain text, images, videos, and links.

  • sidebar

    similar to a blogroll it usually the narrower colom of a blog. The wider usually contains the post and it called the main colom

  • URL

    The primary naming scheme used to identify Web resources. URLs define the protocols to use, the domain name of the Web server where a resource resides, the port address to use for communication, and a directory path to access named Web files or resources.

  • widget

    a small gadget or mechanical device. Computing a component of a user interface with a particular function.”

  • XHTML

    Extensible Hypertext Markup Language, a reformulation of HTML as an application of XML 1.0

  • XML

    Extensible Markup Language, A system for defining, validating, and sharing document formats. Its main difference from HTML is that you can create your own elements.

Technorati technorati tags: , , , ,

Written by retsu782000 · Filed Under Uncategorized 

Remove Your Blogger NavBar and Gain More Space

July 7, 2008

You see it by default for all blogger blogs especially when you are using blogger’s default template. There is this navigation bar on top of your blog. And it’s kind of distracting since it takes your hot spot on the top of your blog.

More reason to remove it because it also have flag button to mark your blog as spam. What if someone is evil enough to give you a flag? :p The next blog button can make your visitor gone and navigate away from your blog. So I don’t think there is a reason to keep it, except it provides searching abilities to your blog. But hey… just put adsense searching box and you can make money too :D and plus I know how to move the search this blog feature to somewhere suitable.

Not to worry, here is a simple script to remove it:

#navbar-iframe {
display: none !important;
}

All you have to do is edit your blog template in html mode ( you don’t have to expand it) and paste it after your <head> tag and you’re done.

Technorati technorati tags: , , ,

Written by retsu782000 · Filed Under Uncategorized 

Combining Technorati Tags to Your Posts

July 5, 2008

Do you know Technorati? If you haven’t this is a good way to know where you must first claim your blog. Here’s a quick brief of Technorati. Although the site is not that powerful like in the early days it’s still gain its credibility.

Now what’s the catch? You have a blog but it won’t mean that much in the web unless you make it loud so everyone can read your posts. How? Promote your blog. Here’s one way you can do it. You can use Technorati fame. By combining Technorati tags to your post. It really helps to get a link from a big rank like Technorati.

Let’s say you want to add blogging as your tag, like this.

Technorati technorati tags:

You must add this code below at the end of your post in the html section. Pretty neat, right?

<p><img id=”image329″ src=”http://static.technorati.com/static/img/pub/icon-utag-16×13.png” alt=”Technorati” /> technorati tags: <a href=”http://www.technorati.com/tags/blogger” rel=”tag”></a> <a href=”http://www.technorati.com/tags/blogging” rel=”tag”>blogging</a> </p>

That just one tag. What if your post talks about bloggers, fame, make money online, and so on? You must do it again by replacing the word blogging in the code below. aaa.. that’s not cool. Doing it and have to write all those code, right?

Now for the real thing you can do this instead of tying long codes. You can do it automatically. This is how:

  1. Copy the code below.
  2. Right-click on your bookmarks toolbar and select New Bookmark.
  3. Change the Name to whatever you want. I use “Technorati tags”.
  4. Paste the code into the location box.

javascript:(function(){var a=”;var t=prompt(‘Enter Tags without commas:’,”);if(!t) return;var tr=t.split(‘ ‘);a+=’<p><img id=%22image329%22 src=%22http://static.technorati.com/static/img/pub/icon-utag-16×13.png%22 alt=%22Technorati%22 /> technorati tags: ‘;for(var i=0;i<tr.length;i++){if(i > 0){a+=’, ‘;}a+=’<a href=’+unescape(‘%22′)+’http://www.technorati.com/tags/’+tr[i]+unescape(‘%22′)+’ rel=’+unescape(‘%22′)+’tag’+unescape(‘%22′)+’>’+tr[i]+’</a>’;}a+=’</p>’;prompt(‘Copy this code, press OK, then paste to your blog entry:’,a);})()

If your tag consist of two words use ‘+’, like real+blog. Just like that. I found this cool hack on Hogg’s blog, but I already change the code a bit. Feel free to use it and tell me what do you think about this trick :)

Technorati technorati tags: , , ,

Written by retsu782000 · Filed Under Uncategorized 

Comments are closed.