Entries in the ‘tutorials’ Category:

How to add Recent Posts and Recent Comments on Blogger?

Wordpress prepared lots of plugins for its users especially the common ones Recent Posts and comments plugins but not on Blogger.com. However, I am going to show you the easiest way to add the Recent posts and comments widget into your blog.

Firstly, go to Dashboard –> Layout. Then, click ” Add a gadget “.

Secondly, choose RSS. I use RSS because it’s faster and you do not need any plugin.

FEED 1

Now you got to configure the RSS URL, simply type in your own blog URL address.

Like this.

Feed Link

I typed my own blog URL and it will detect it as RSS.

Don’t forget to change the Title to “recent posts” or anything you wish such as “older posts” etc. You can choose how many posts you wanna show, dates and authors.

Recent posts

Voila! Your Recent Posts widget is almost done in less than 3 minutes.

I am sure you manage to master these few steps. Now, recent comments is much easier.

Do you notice the Change Feed URL? Hurry up! Click it!

change URL

You will see this link http://yourbloglink.blogspot.com/feeds/posts/default.

Change the posts to comments.

comments

Now, you’ll see similar thing. Change the Title again and choose how many items you wish, dates and authors.

recent comments done

I suggest you put ‘Recent Posts’ as it’s useful and let readers know if there is any latest post from you.

Adding Social Bookmark Button On Blogger

Sister Pauline noticed there’s changes below my blog labels -’Sharing Is Caring’. It’s actually Social Boomarking Buttons which I have just added into my blog last night.

Social bookmarking is a method for Internet users to store, organize, search, and manage bookmarks of web pages on the Internet with the help of metadata, typically in the form of tags that collectively and/or collaboratively become a folksonomy. Folksonomy is also called social tagging, “the process by which many users add metadata in the form of keywords to shared content”.

Social Bookmark button allows others to bookmark your blog post to websites such as facebook, twitter, negaraku.net etc. It helps you to get lots of quality traffics too.

Step to step installing Social Bookmark Button into your blog.

1) Go to Layout->Edit Html and then click Expand Widget Template.

Search(Ctrl+F) for ]]></b:skin>

2) Add the following codes before it.

.social-bookmark-v1 {

padding-top: 3px;
}
.social-bookmark-v1 .label {
font-weight: bold;
}
.social-bookmark-v1 ul.links {
margin:0;
padding:0;
}
.social-bookmark-v1 ul.links li {
background: none;
display:inline;
list-style-type:none;
padding: 0;
}
.social-bookmark-v1 ul.links li img {
border: none;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
padding: 3px;
}
.social-bookmark-v1 ul.links li img:hover {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
}
.social-bookmark-v1 ul.links li a {
border: none;
text-decoration: none;
}

3) Search for this code : <div class=’post-footer-line post-footer-line-3′>

4) Add the following after it.

<div class=’social-bookmark-v1′>
<div class=’label’>Bookmark and share: </div>
<ul class=’links’>
<li class=’social_links_negaraku’>
<a class=’social_links_negaraku’ expr:href=’&quot;http://negaraku.net/submit.php?url=&quot; data:post.url &quot;&amp;amp;amp;amp;title=&quot; data:post.title’ rel=’nofollow’ title=’Bookmark this post on negaraku.net.’>
<img alt=’Negaraku’ src=’http://tinyurl.com/cdjfcu’/>
</a>
</li>
<li class=’social_links_digg’>
<a class=’social_links_digg’ expr:href=’&quot;http://digg.com/submit?phase=2&amp;amp;amp;amp;url=&quot; data:post.url &quot;&amp;amp;amp;amp;title=&quot; data:post.title’ rel=’nofollow’ title=’Digg this post on digg.com.’>
<img alt=’Digg’ src=’http://tinyurl.com/d3wazp’/>
</a>
</li>
<li class=’social_links_stumbleupon’>
<a class=’social_links_stumbleupon’ expr:href=’&quot;http://www.stumbleupon.com/submit?url=&quot; data:post.url &quot;&amp;amp;amp;amp;title=&quot; data:post.title’ rel=’nofollow’ title=’Bookmark this post on StumbleUpon.’>
<img alt=’StumbleUpon’ src=’http://tinyurl.com/cxc5au’/>
</a>
</li>
<li class=’social_links_delicious’>
<a class=’social_links_delicious’ expr:href=’&quot;http://del.icio.us/post?url=&quot; data:post.url &quot;&amp;amp;amp;amp;title=&quot; data:post.title’ rel=’nofollow’ title=’Bookmark this post on del.icio.us.’>
<img alt=’Delicious’ src=’http://tinyurl.com/cqoy6x’/>
</a>
</li>
<li class=’social_links_reddit’>
<a class=’social_links_reddit’ expr:href=’&quot;http://reddit.com/submit?url=&quot; data:post.url &quot;&amp;amp;amp;amp;title=&quot; data:post.title’ rel=’nofollow’ title=’Submit this post on reddit.com.’>
<img alt=’Reddit’ src=’http://tinyurl.com/cgpppu’/>
</a>
</li>
<li class=’social_links_newsvine’>
<a class=’social_links_newsvine’ expr:href=’&quot;http://www.newsvine.com/_tools/seed&amp;amp;amp;amp;save?u=&quot; data:post.url &quot;&amp;amp;amp;amp;h=&quot; data:post.title’ rel=’nofollow’ title=’Submit this post on newsvine.com.’>
<img alt=’Newsvine’ src=’http://tinyurl.com/djn4ph’/>
</a>
</li>
<li class=’social_links_facebook’>
<a class=’social_links_facebook’ expr:href=’&quot;http://www.facebook.com/sharer.php?u=&quot; data:post.url &quot;&amp;amp;amp;amp;t=&quot; data:post.title’ rel=’nofollow’ title=’Share on Facebook.’>
<img alt=’Facebook’ src=’http://tinyurl.com/crhurk’/>
</a>
</li>
<li class=’social_links_google’>
<a class=’social_links_google’ expr:href=’&quot;http://www.google.com/bookmarks/mark?op=add&amp;amp;amp;amp;bkmk=&quot; data:post.url &quot;&amp;amp;amp;amp;title=&quot; data:post.title’ rel=’nofollow’ title=’Bookmark this post on Google.’>
<img alt=’Google’ src=’http://tinyurl.com/ca6aal’/>
</a>
</li>
<li class=’social_links_yahoo’>
<a class=’social_links_yahoo’ expr:href=’&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot; data:post.url &quot;&amp;amp;amp;amp;t=&quot; data:post.title’ rel=’nofollow’ title=’Bookmark this post on Yahoo.’>
<img alt=’Yahoo’ src=’http://tinyurl.com/d9s2mr’/>
</a>
</li>
<li class=’social_links_technorati’>
<a class=’social_links_technorati’ expr:href=’&quot;http://technorati.com/cosmos/search.html?url=&quot; data:post.url’ rel=’nofollow’ title=’Search Technorati for links to this post.’>
<img alt=’Technorati’ src=’http://tinyurl.com/cno3dq’/>
</a>
</li>
<li class=’social_links_twitter’>
<a class=’social_links_twitter’ expr:href=’&quot; http://twitthis.com/twit?url=&quot; data:post.url &quot;&amp;title=&quot; data:post.title’ rel=’nofollow’ title=’Twit this.’>
<img alt=’Twitter’ src=’http://tinyurl.com/dzlvd5′/>
</a>
</li>
</ul>
</div>

Special credit to Abang Marzuki for this tutorial. According to him, these 10 social bookmark websites are the basic and best for beginners like me.

How To Add Read More On Blogger

I keep my promise and to share with you this awesome tips on how to add “Read More” for your blog.

Before I start, let me share with you why I like to put read more in my posts.

1. Increasing my blog loading speed. Besides setting my blog reading to 2 posts per page, this is useful to boost your blog speed as well.
2. Let my readers choose what post they would like to read. I can’t stand reading extremely long post and I know not everyone likes rubbish talk. Let them read if they want by clicking Read More. :)

Adding “Read More” is easy in Wordpress but not in Blogspot. I have followed many guides from different bloggers and I discovered this one really easy and it works. Are you ready for it? Let’s go on.

1. Go Layout-> Edit Html and search(CTRL+F) for </head> and add the code below before it.


<style>

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

span.fullpost {display:inline;}

<b:else/>

span.fullpost {display:none;}

</b:if>

</style>

2. Expand Widget Templates and Replace the code below with <data:post.body/>

<div class=’post-body’>

<p><data:post.body/>

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

<a expr:href=’data:post.url’>(Read more inside ..)</a>

</b:if></p>

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

</div>

3. Go Settings then Formatting then Post Template

Add the below and save.

<span class=”fullpost”"></span>

For every post you want to add Read More, simply put the rest of the post within the <span class=”fullpost”"></span> in Edit Html.