Blog on Blogspot

Facebook Recommendations Bar, How To Add?

2012-11-11T12:48:00.000+10:00

Facebook launched Facebook Recommendations Bar (FRB) in July 2012 to engage readers browse more articles in your blog by suggesting what articles Facebook friends explicitly liked and shared. It entices readers to read more, and spend more time on your blog. This makes viewers more likely to click on the recommended articles/posts as they were liked or shared by other; which means they are worth to read. More pages being viewed, more engaged visitors become. And they will more likely subscribe your blog. Another thing to consider is, the readers will create more impresions to your blog as they are surfing around the site, thus create more cost per thousand impressions (CPM), and potentially more cost per click (CPC).

Facebook Recommendations Bar suggests additional articles as soon as visitors finish reading the blog post, after sometimes, or after readers reach a specific location on your blog. The Facebook Recommendations Bar consists of the Like button, and post/article recommendations. And it only displays posts/articles already being shared and recommended by others on Facebook. It will pop up at the bottom right corner, the same as Facebook chat box, and users can miminize it. Very user friendly, right?. That's why many popular bloggers have implemented FRB in their blog, such as Mashable..etc.

How Facebook Recommendations Bar works?

When viewers concentrate on reading a post/article, or almost finish reading it, FRB pops up, annoys, and reminds readers the existence of Facebook which they may forget. FRB recommends the other posts/articles visitors should read as these articles were likes and shared by Facebook friends, as well as, prompts to like the blog post. If the reader liked the article, it would be seen in his or her timeline, and appeared in his or her friends' feeds. We can say this is a more invasive versioin of the like button, and recommendations box of Facebook. So, this is a must-have plug-in for any bloggers, right?

How to add Facebook Recommendations Bar to your blog?

Follow the simple steps below, and you'll have the most powerful widget of Facebook available at this date and age.

Step 1: Add this code After/Below <head> tag

<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>

<meta expr:content='"en_US"' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>

Step 2: Go to Facebook Recommendations Bar Official Page

Step 3: Scroll down to the middle of the page, you will see something like this

Step 4: Click Get Code => Create a new app

Step 5: Enter your blog name and blog URL, then click Continue => Submit.

Step 6: Click Get Code again

Step 7: Copy the code in the first box ( you will paste this code into your template )

Step 8: Go to Template => Edit HTML => Proceed => Tick Expand Template Widgets box

Step 9: Paste the code you copied in Step 7, After/Below <body> tag.

Step 10: Save template

Adding social bookmarking sharing

2012-11-09T21:33:00.000+10:00

Now, there are so many options for bloggers, like you and me when it comes to ulitizing social bookmarking sharing widget. And, the fixed social bookmarking sharing buttons which I'm about to show you is one on them.

It looks something like this, placing on the top of every blog post.

Similar to the floating social media widget, but it is displayed horizontally. And it stays visible to readers while they are scrolling to the bottom of the blog post. It's cool, right!.

How to integrate this social bookmarking sharing widget to your blog

Step 1: Go to Template >>> Edit HTML >>> Proceed >>> Tick Expand Template Widget box

Step 2: Add this code Before/Above </head> tag (Press Ctrl + F to find </head> )

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
	#w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
	#w2bSocialFloat td{padding:4px;margin:0;border:none;}
	#w2bSocialFloat td iframe{max-width:82px;width:82px !important;}
	#w2bSocialFloat.w2bFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Set the Top Offset
$theOffset = 0;

jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
/*]]>*/
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_blogger_pinit.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
	// Twitter
	(function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
	// Google + (plus)
	(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
	// Stumbleupon
	(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
	// Digg
	(function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})();
/*]]>*/
</script>
</b:if>

Step 3: Add this code Before/Above <data:post.body/> tag.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="w2bSocialFloat" class="w2bSocialFloat">
<table  width="100%" class="w2bSocialFloat">
	<tr>
		<td>
			<a href="https://twitter.com/share" class="twitter-share-button" expr:data-url="data:post.url" expr:data-text="data:post.title">Tweet</a>
		</td>
		<td>
			<iframe expr:src="&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
		</td>
		<td>
			<div expr:id="&quot;w2bPinit-&quot; + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton"> 
				<data:post.body/>
				<script type="text/javascript">
					w2bPinItButton({ 
						url:"<data:post.url/>", 
						thumb: "<data:post.thumbnailUrl/>", 
						id: "<data:post.id/>", 
						defaultThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg63yvqDOhK-iak3cjhj69L8m21hoCuSTn72Wr1NC-ehQ0UxToQE3iOo9RmjGwWI2iqHUXt3zFfhToeoGp9vhDIOOu5gI7eaX47zABpneg_1oEMVITnBp-5lxQ8HeqJVu1WaHjaQqhQ2V1C/s1600/w2b-no-thumbnail.jpg", 
						pincount: "horizontal" 
					}); 
				</script> 
			</div>
		</td>
		<td>
			<div class="g-plusone" data-size="medium" expr:data-href="data:post.url"></div>
		</td>
		<td>
			<su:badge layout="1" expr:location="data:post.url"></su:badge>
		</td>
		<td>
			<a class="DiggThisButton DiggCompact"></a>
		</td>
	</tr>
</table>
</div>
</b:if>

Step 4: Save Template

*Note: If you're using Read More function in your blog, paste the code in step 3 in the middle of this 2 lines

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>

You might be interested in my other post on how to add floating social bookmarking sharing here.

How to delete a blog on blogspot

2012-11-09T11:36:00.000+10:00

Some people have asked me about how to delete a blog on blogspot or blogger. There are some reasons that make them want to delete a blog on blogspot, such as they don't want to blog anymore, or they just want to switch to another popular services like Wordpress, Tumblr, TypePad, and so on. However, some people don't know much about the benefits that Blogger provides, particularly you can make real money while expressing your interests. Anyway, the main topic I am going to talk about today is how to delete a blog on blogspot. To do that, you need to follow these steps:

1. In draft.blogger.com/home, click on the blog you want to delete
2. Click on Settings
3. Click on Other, and you will see something like this

4. Click on Delete blog

It's done !

How to add post title under newer and older links

2012-11-08T15:28:00.000+10:00

Sometimes you need to show your readers what are your next or previous posts in your blog. In this casse, the readers will more likely to click on you newer or older post links, and thus you will gain more page views for your blog, more visits, and better rank on Google. How does that sound? It's great, right!. So how do you do it. It's simple, just follow the steps below.

Make sure you back up your template before making any changes.

Step 1: Go to Template => Edit HTML => Proceed => Click Expand Widget Templates box.

Step 2: Paste this code Above/Before </head> tag. (Press Ctrl + F to find </head>)

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

Step 3: Place this code Above/Before </body> tag.

<b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> // Post titles to Older Post and Newer Post links (without stats skew) // by MS-potilas 2012. See http://yabtb.blogspot.com/2012/01/add-post-titles-to-older-and-newer-post.html //<![CDATA[ var urlToNavTitle = {}; function getTitlesForNav(json) { for(var i=0 ; i < json.feed.entry.length ; i++) { var entry = json.feed.entry[i]; var href = ""; for (var k=0; k<entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { href = entry.link[k].href; break; } } if(href!="") urlToNavTitle[href]=entry.title.$t; } } document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"></'+'script>'); function urlToPseudoTitle(href) { var title=href.match(/\/([^\/_]+)(_.*)?\.html/); if(title) { title=title[1].replace(/-/g," "); title=title[0].toUpperCase() + title.slice(1); if(title.length > 28) title=title.replace(/ [^ ]+$/, "...") } return title; } $(window).load(function() { window.setTimeout(function() { var href = $("a.blog-pager-newer-link").attr("href"); if(href) { href = href.replace(/\.blogspot\.[^/]+\//, ".blogspot.com/"); var title=urlToNavTitle[href]; if(!title) title=urlToPseudoTitle(href); if(title) $("a.blog-pager-newer-link").html("<< Newer Post<br />" + title); } href = $("a.blog-pager-older-link").attr("href"); if(href) { href = href.replace(/\.blogspot\.[^/]+\//, ".blogspot.com/"); var title=urlToNavTitle[href]; if(!title) title=urlToPseudoTitle(href); if(title) $("a.blog-pager-older-link").html("Older Post >><br />" + title); } }, 500); }); //]]> </script> </b:if><a href="http://www.blogonblogspot.com/">Gadgets By Blog on Blogspot</a>

Step 4: Place this code Above/Before ]]></b:skin> tag.

.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;} .blog-pager-older-link {background-color:transparent !important;padding: 0 !important;} #blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;} #blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}

Step 5: Save Template

How to make money with Adsense

2012-11-07T11:36:00.000+10:00

Since Google AdSense was launched by Google in 2003, it has been vastly adopted by thousands of bloggers, and integrated in their blogs or websites. This phenomenon has driven advertisers spending more and more funds for their ads with Google AdSense. This means Google AdSense would also give you an opportunity to monetize, too. It sounds great, right?

So, how are you going to make money out of this?
The concept of this is you will have to create a site or blog that you are familiar with and even expert at, then you generate rich contents consistently over time. This will help you from getting traffic coming into your blog, and you will make money from it.

How much will you make?

Publishers don’t know how much per click they are paid, only Google knows it, as advertisers pay for different prices for different ads; sometimes it’s only $0.02 per click, but sometimes it could be $1 or $2 per click. It depends on different keywords being advertised. That is the more competitive the keywords are the more rewards it has to offer publishers. Keywords, like making money online, trading etc., are very competitive; therefore, you will get paid more if they are offered.

How do you start?

Given that you don’t have any blogs, or you have already had a blog, this will make no difference if you want to make reasonable income from AdSense. What you need is “traffic”, the most important thing that all bloggers and marketers are always after. Years of rich content and everyday communication with hundreds to thousands of readers would be a must if you’re lucky to have them as your subscribers. It requires so much efforts and timing, isn’t it?

But, don’t worry; there is another way for you. Site Build It (SBI) will solve your difficulty as it will provide you everything you would need, from registration, web hosting, website builder, to marketing help. And even if you’re a beginner, SBI’s got a simple-to-follow video action guide which will walk you step-by-step until your pocket being filled full of cash. SBI advises you on your contents using its keyword analytics and other techniques. More importantly, it will help you boost traffic in a pace that you wouldn’t believe.

Let’s see how it works for other people, and it will work for you, too.

Click here to Find Out more about Site Build It

How to join Google AdSense?

To join Google AdSense, visit http://adsense.google.com/ and Apply
To create ads, visit http://support.google.com/adsense/bin/answer.py?hl=en&answer=179887 and follow the steps in there and you can launch your first campaign with Google AdSense

How to add facebook widget to blogger

2011-08-02T14:55:00.000+10:00

As you know, Facebook has been implemented by most of bloggers, and Facebook has created a great oportunity for us to increase number of loyal readers just by one click. So, have you got a cool Facebook fan page widget? If not, this tutorial would be for you. I will show you how to add facebook widget to blogger in a absolutely cool way with hover effect. You can see the demo here. And you can implement it for your blog also. What you need to do is following exactly the steps below:

Step 1: Add Jquery Javascripts plugin (if your blog is already added this plugin, you can skip this step)

Go to Design / Templates >> Edit Templates >> Tick the expand widget templates box
Find the tag </head> (Press Ctrl + F to find it)
Place this code right above the tag </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

SAVE the templates

Step 2: Add Facebook widget code to blogger

Go to Page Elements / Layout >> Add a Gadget >> HTML/Javascripts
Place the code below into the content box

<script type="text/javascript">

//

</script>

<style type="text/css">

.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCbZhol5YlIBvjhG6iKUCLcALHN6P1F5I8cOv5M2MKbnu3WMMJ2g84VDt9cgda_Ngpld3gmbHIODQQdi77jv313YN9oE4je-FKFDRCocf7Egi-_DgBrakxhmixq8jlaj-V_SOMIcp4CO02/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}

.w2bslikebox div{border:none;position:relative;display:block;}

.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}

.w2bslikebox span a{color: #808080;text-decoration:none;}

.w2bslikebox span a:hover{text-decoration:underline;}

</style><div class="w2bslikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBlog-On-Blogspot%2F114178088675094&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>/ <a href="http://www.blogonblogspot.com/">+Gadget</a></span></div></div>

SAVE

Adding animated twitter bird

2011-07-30T18:20:00.000+10:00

In this blog tutorial, I will show you how to add animated twitter bird to blogger. This is a very interesting thing that you should implement it for your blog. By implemeting the animated twitter bird, you would likely get more followers and posts being shared as the flying bird can generate more impressions. See demo here . You need to follow the steps below:

Go to Design / Template >> Edit Templates >> Tick the Expand Widgets box
Find the tag </body>
Place this code right above the </body>

<script src='http://bloggerblogwidgets.googlecode.com/files/way2blogging.org-tripleflap.js' type='text/javascript'> </script> <script type='text/javascript'> var twitterAccount = "Blog_onBlogspot"; var tweetThisText = " <data:blog.pageTitle/> : <data:blog.url/> "; tripleflapInit(); </script> <a href='http://blogonblogspot.com' target='_blank' title='Blog On Blogspot'><span style='color:#fff;font-size:11px;position:absolute;'>Gadget</span></a>

SAVE the Template

Animation for Recent Post Gadget

2011-07-27T21:33:00.000+10:00

In this tutorial, we will learn how to make an animation for the Recent Post gadget. As you can see an example here, it looks quite attractive, isn't it?. When the recent posts keep changing the positions, it can actually draw attention from visitors, thus more posts will be read, and visitors will probably stay longer on your site. You can see the instruction below:

Go to Page Elements / Layout >> Add a Gadget >> HTML/Javascripts
Place this code into the content box

<style type="text/css"> #rp_plus_img{height:377px;} #rp_plus_img li {height:60px;padding:5px;list-style:none; background-color:#ffffff; border:solid 1px #000000;} #rp_plus_img a{color:#00000;} #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px; text-align:justify; -moz-border-radius: 5px;} #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/recentpost.js"></script> <script type="text/javascript"> var speed = 1500; var pause = 3500; $(document).ready(function(){ rpnewsticker(); interval = setInterval(rpnewsticker, pause); }); </script> <ul id="rp_plus_img"> <script style="text/javascript"> var numposts = 5; var numchars = 0; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script> </ul><small><a href="http://www.blogonblogspot.com/" target="_blank"><span style="color:#fff;">get this widget here</span></a></small>

SAVE

How to add Twitter button to blogger

2011-07-25T16:40:00.000+10:00

Twitter has become so popular with more than 200 million users, and about 350 million tweets per day. This trend has made most of bloggers approaching Twitter to gain more loyal readers by adding Twitter share button, and Twitter following button. Therefore, in this tutorial, I will share the tip about Twitter buttons for blogger. That is how to add a Twitter button to Blogger. You can follow some steps below:

1. Go to Layout / Page Elements >> Add a Gadget >> HTML/Javascripts (if you don't know how to add a gadget, you can see addind gadget to Blogger)

2. Copy and paste this code into the content box:

<a href='http://twitter.com/USERNAME' title='Follow me on Twitter'><img alt='Follow me on Twitter' src='your twitter icon URL' /></a>

3. Change the red code to your Twitter username ; and blue code to your Twitter button image.

4. Save

There are some Twitter button examples here, you can use them if you'd like to.

https://lh5.googleusercontent.com/_qf2_jbv7m4k/TdtSbcSMaQI/AAAAAAAAAGM/Vp43oTj-1Cg/110835_27721_128_twitter_icon.png

http://www.805county.com/wp-content/uploads/2011/01/twitter-icon.png

You have learned how to add Twitter button to Blogger, and you may also like to learn how to add floating share button to blogger if you want drive even more traffic generated by your readers. Or just simply return to Blog On Blogspot to get the latest tips.

How to remove Subscribe to: Posts (Atom)

2011-07-24T16:22:00.000+10:00

Sometime, Subscribe to: Posts (Atom) are quite annoying to you if you never need it. So, you want to get rid of this as soon as possible. I support you because I don't have to use it also. Now, I will show you how to remove Subscribe to: Posts (Atom). This tip is very simple, and it takes no more than a minute to accomplish as long as you follow correctly the steps below:

Go to Layout / Template (for new blogger) >> Edit Template >> Tick on the Expand Widget Templates box (remember to back up your template first)
If you just want the Subsribe to: Posts (Atom) disappear for sometime, add this code just above the ]]></b:skin> :

.feed-links { display:none; }

If you want to get rid of it forever, find this code , then delete it

<b:include data='feedLinks' name='feedLinksBody'/>

<b:include name='feedLinks'/>

SAVE the template

How to change blog title tags

2011-07-23T16:27:00.000+10:00

Today, I will show an esay tip that can make your blog post likely listed in Google search results. And this has been implemented by many bloggers already. But if you haven't done this, it would be useful for you. As you can see an example below for my blog:

Which one is better? The first one is absolutely the best because Google would read your blog post title first, then blog title (in the first one); and if your blog title is too long, it would be a big disadvantage for you if your blog is still displaying as the second example. Thus, now I will guide you how to change blog title tags in every blog post. You can see the instruction below:

You're in draft.blogger.com , go to Template
Scroll down until you find Backup/Restore Template >> Click on it, then Download full template
Click on Edit Template >> Tick the Expand Widget Templates
Find this code (to find it, press Ctrl + F)

<title><data:blog.title/></title>

Replace it with this code

<b:if cond='data:blog.pageType == "item"'> <title><data:blog.pageName/> |<data:blog.title/></title> <b:else/> <title><data:blog.pageTitle/></title> </b:if>

Click Save Template

Note: if you just want to show the post title only which can even make your blog posts ranked higher in search engine, you can replace

<title><data:blog.title/></title>

with the following code

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

How to make a contact form

2011-07-22T21:13:00.000+10:00

For a large online business, they need to make a contact form by themselves. However, for most of bloggers, they want to use contact form already made from a service. This is because we would rather spend time on other things than wasting time on building such a contact form. Hence, I want to share some free contact form that you can get easily with you, and may steer you away the time wasters.

	MORE TO COME, SUBCRIBE TO GET THE LATEST UPDATE

How to add rss feed to blog

2011-07-22T19:55:00.000+10:00

RSS Feed has become so popular because of its usefulness. It ties bloggers and their readers together as it updates the latest posts from a paticular blog and bring it to the blog's readers. For a normal readers, they just need to get the updates and read it themselves. On the other hand, for bloggers like as you and I, we can also use RSS Feed as a secret weapon to attract our readers by updating the latest interesting information from elsewher. If you just need to know how to add an RSS Feed icon to your blogger, you can see How to add Rss Feed icon to blog. Today, I will show you how to add RSS Feed to blog. Just follow the instruction below:

You're in draft.blogger.com, go to Layout >> Add a Gadget (a pop-up window will open)
Scroll down until you see Feed >> Select Feed

Add RSS Feed URL from your favorite blog (to get the URL, go to your target blog, click on the Feed icon, then copy the URL from your browser address bar)

Click Continue >> SAVE

How to add rss feed icon

2011-07-22T19:52:00.000+10:00

Today, I will show you how to add rss feed to your blog. This tip is quite simple, and easy to follow. You can see the instruction below. If you have any problems while doing this, please don't hesitate to leave a comment below this post, I will response as soon as I can.

You're in draft.blogger.com, go to Layout >> Add a gadget
Find the HTML/Javascripts

Copy and paste this code into the content box

<a href="YOUR FEED URL" target="_blank">
<img src="YOUR RSS PICTURE URL" border="0" />
</a>

naldzgraphics.net

Click SAVE

How to add read more to blog

2011-07-21T23:33:00.000+10:00

Sometime you want to add a read more function to your blog home page because it doesn't look cool if you only have one (few) posts in the home page; and when visitors first time land on your blog, they just only see your very single post (if your post is too long). Does it look right to you? Actually, there are quite a few tutorials out there where you can learn to add the read more function to your blog. But in most of them, you have to use the tag <span class="fullpost"></span> every time you write a blog article. It's quite inconvenient, isn't it? Therefore, today I will show you how to add read more to blog just by one click. Just follow the instruction below:

You're in draft.blogger.com, go to Template (on the lower left sidebar)
Scroll down to the end >> Backup/Restore Template >> Download Full Template
Click on Edit Template >> Tick the Expand Widget Templates box
Press Ctrl + F , and type " ]]></b:skin> "
Just right above it, copy and paste this code:

/*READ MORE*/ .jump-link a { background: #ffff00; padding: 3px; color: #fff; } .jump-link a:hover { background: #000000; padding: 3px; color: #ccc; }

Place this code between the ]]></b:skin> and </head>:

<b:if cond='data:blog.pageType != "item"'> <style> .post-body img { img { max-width: 100px; width: expression(this.width > 100 ? 100: true); float: right; } </style> </b:if>

In the search box, type " <data:post.body/> " or " <p><data:post.body/></p> " if you use custom template
Place this code right below <data:post.body/> or <p><data:post.body/></p>

<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <span style='float:right; font-weight:bold;'><a expr:href='data:post.url + "#more"'><span><a expr:href='data:post.url + "#more"'>Read more >></a></span></a></span> </div> </b:if>

Click SAVE Template
To add read more: Just after your introduction paragraph, click on the "break" icon located above the content box like this.

If you can't follow the instruction, just leave a comment below. I will sort it out for you. Best luck !
Thank you for dropping in this blog and reading my tip.

Different blog post background in each blog post

2011-07-21T21:10:00.000+10:00

Hi all bloggers, have you thought of styling blog post background in your every blog post. If No, you don't have to continue to read this post, and you may discover some interesting posts inside this very lovely blog (for me i think :)). This tip is not too hard for a newbie, so don't think that you can't do it. All you need is that.... just follow some simple steps below:

You're in draft.blogger.com, go to Create a new post
Click on HTML (there are Compose and HTML options on the top left corner)
Copy and paste this code into the content box (if you just want to change the background color)

<div style="background:YOUR COLOR CODE GOES HERE; padding:5px 10px 5px 10px;"> WRITE YOUR CONTENT HERE </div>

html-color-codes.info

Copy and paste this code into the content box (if you want to change the background image)

<div style="background:url(YOUR IMAGE URL HERE) no-repeat;"> WRITE YOUR CONTENT HERE </div>

5. Click Preview to check the result, then Publish or Save

How to make a block quote

2011-07-20T14:31:00.000+10:00

Block quote is commonly used to reference a long passage from other in a comprehensive and interpretative format. Block quote is alos used as an evidence for someone to prove something. As its ease of use, block quote has soon become popular over the internet. You can probably see it in most of blogs you have visited. For bloggers, we use block quote to share the codes as well. So how to make a block quote? To make it you just need to use the simple tag:

<blockquote>

I wanted to say thank yous
To all of you who read my poems
And leave your comments and reviews
Which to me are precious gems

Gems that make me a better writer
See everything I think of goes into my poetry binder
And I only keep writing because of all of you
For helping me be better at what I do

<blockquote/>

It will become like this:

I wanted to say thank yous
To all of you who read my poems
And leave your comments and reviews
Which to me are precious gems

Gems that make me a better writer
See everything I think of goes into my poetry binder
And I only keep writing because of all of you
For helping me be better at what I do

Sometime the block quote default design doesn't look right to you, so you can customize it by reading how to customize a block quote or return to the home page to get the latest tips

How to customize blockquote style

2011-07-20T14:16:00.000+10:00

In this tutorial, I will show you how to customize blockquote style in blogger. I will do all of these changes in CSS style. By using CSS, we can change the look of the blockquote such as changing margin, background, colour, padding, etc..So, you just need to follow the steps below:

Go to Layout >> Template >> Download full template >> Click on Expand Widget Template
Press Ctrl + F, search for " .post blockquote ", you will see something like this:

.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

If you use custom template, and cannot find it, search for " .entry blockquote " ; it looks very similar with the codes above.

I have a few examples, so just replace the codes in Step 2 with the code in each example

EXAMPLE 1:

.post blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; }

.post blockquote p {
margin: 0; }

EXAMPLE 2:

.post blockquote {
margin: 1em 20px;
padding-left: 50px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNyJ7KaCHUS1KsWjj0UeD0359PmtfB9-fTMkWq4ZbpGksE1V9kV8wigbCT8kx66iD2FVvQa7TXj8fGg0XMd3Iyn-cVeAYm1aeNDhatFitC7Jfg9ZeTixEs8XOtF1YCQMlE3yjPYo9dKCDN/s1600/Next-icon.png) no-repeat; }

EXAMPLE 3:

.post blockquote {
margin: 1em 2em;
border-left: 1px dashed #999;
padding-left: 1em; }

.post blockquote p:first-letter {
float: left;
margin: .2em .3em .1em 0;
font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
font-size: 220%;
font-weight: bold; }

.post blockquote p:first-line {
font-variant: small-caps; }

EXAMPLE 4:

.post blockquote {
background: #ffffff url(http://i44.tinypic.com/slh4yu.jpg);
background-repeat:no-repeat;
background-position:top center;
margin: 6px 6px 6px 6px;
padding: 8px 36px 8px 40px;
font-size: 14px;
line-height:1.4em;
}

4. Click SAVE and check result. If you don't know how to add a blockquote to your post you can see How to make a blockquote

Enjoy !

How to customize next and previous post link

2011-07-20T12:05:00.000+10:00

Today, I am going to walk you through how to customize next and previous post link. As we know, there are "Older Posts" and "Newer Posts" located in every blog which can make readers stay longer in your blog. But, is it attractive enough to draw visitors' attentions? I would recommend you change this. It won't take long to customize the next and previous links, so just follow the steps below:

Go to Layout >> Template >> Download the full template >> Click on Expand Widget Templates
Press Ctrl + F, and find this code:

<data:newerPageTitle/>

Replace it with: NEXT POST or this code if you want to show an image:

<img src="YOUR--IMAGE--ADDRESS--HERE" />

Find this code:

<data:olderPageTitle/>

Replace it with PREVIOUS or this code:

<img src="YOUR--IMAGE--ADDRESS--HERE" />

Find this code: (note: there are two similar code, use the first one)

<data:homeMsg/>

Replace it with HOME PAGE or

<img src="YOUR--IMAGE--ADDRESS--HERE" />

I have these cool NEXT and PREVIOUS post link icons, you can use it also:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwMDEjxzeoNc2g9fJAivTZWBB2sHc9HZR-SPo9lqhyphenhyphennrWGDZLUdAnQw_3S9eV7bHR0cbZGEA8a_FhK6fhcTBAQGw9lABrPf_8Wen-YIXrlbtC74wtrvCA1Jvc22sRpK_tbSYSMleJKSY6J/s1600/Home-page.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFQdldoHXW79qjR7r9WpyR_mw5t67PkZIHQx5Zb2LyT3Suy_9CgCME_HFiqqrvt0KQhHhhsyT4iGFTqb4hvVcvIP_P0K48WDP1jjnW4STdAGFa0FeKWS9qOeiwgKxoMThgGcdQ-f9PS7Uy/s1600/Next-page.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYH0yBkxocqtN8FJ-ZrH9lu86lokq1N1WgEGyEKyXLXGqjhpG6ww5XRUzlzuSzBk9recet6tBgjwjsUTBeBPHegfpkHEA9KFgCC5MSCrDsr5tpk0c8NVSOpmsX4t2jqo0BtznpTe0f2eP-/s1600/Previous-posts.png

Adding gadgets to Blogger

2011-07-19T21:04:00.000+10:00

Blogger has been well known since it was launched by Pyra Labs in August 23, 1999. Blogger has millions of active users which include you and I. Moreover, more and more new users have switched from other services to Blogger. Therefore, I would guess some of you may not know some of the basic tips in Blogger. This thought has encouraged me to walk you through some basic tips. Note: if you're an blogger guru, you shouldn't see this post. The first tip I want to show you is that adding gadgets to Blogger. If you want to know the latest tips in this blog, just simply to the home page of Blog on Blogspot. To add a gadget to a Blogger blog is quite simple, so it wouldn't take you much time. You just need to follow these steps:

If you're using the Old Blogger with its ugly blue skin, you can follow this tutorial.
If you want to use Blogger's new cool design, you can follow the steps below:

Log in into your Blogger in draft.blogger.com
Select your Blog by clicking on the Blog name, you will see something like this

Click on Layout (on the left sidebar)

Click on Add a Gadget (where you want to add your Gadget in you blog); a pop-up window will open

Choose your a Gadget you want to add (if you cannot find the gadget you want to add, just the search box at the top right corner). I've listed some of the best Gadgets in Best Gadgets for Blog, so you can see it as an idea.
For example, I will choose Follow by Email Gadget

Click Save, then Click SAVE arrangement (on the top right corner)

I hope you will enjoy blogging in Blogger. Go to the front page to learn more

How to add blog to Google

2011-07-19T20:10:00.000+10:00

The main purpose of creating a blog is to let people readind your blog. But how can your blog be visible to readers all over the world. The easiest way is that you need to let search engines such as Google, Yahoo, Bing, etc.. know your blogs first as people tend to type in a search box whenever they want something. For now, I just focus on Google as it's the most popular search engines in the world. So, how to add your blog to Google?. To do that you need to go to Google directory, then fill the form and click Add URL button. You're done. I wish your blog will be soon indexed by Google. You can go back to Blog on Blogspot home page to get the latest tips.

How to add slideshow in blogger

2011-07-19T18:14:00.000+10:00

Hi guys, someone has asked me how to add slideshow in blogger a while ago. Therefore, now I want to share my answer to anyone who can visit my blog. This tip is not too hard, so I would expect that you can get to know how to add slideshow in your own blog easily. All right, let's do these steps:

Go to Google Picasa (you probably have a google account, don't you?)
Upload your photo into a album that you want to make it as a slide show in your blog posts

After you have uploaded your photos into a specific album, click on the album
Click on " Link to this album " (located in the right hand side)

Click on " Embed Slideshow "

Copy the code in the yellow box.
Now, you've already have the code, Go to create a new post
Paste the code into the content box where you want your slideshow to be displayed
Click on Preview to check the result, then Click on Save or Publish.

You're done
Note: You can place your slideshow anywhere in your blog by copying the slideshow code into a Gadget.

You can go back to Blog on Blogspot home page to get the latest tips

Embedding YouTube Code To Blog Posts

2011-07-18T23:12:00.000+10:00

Today, I'm going to guide you how to embedding Youtube code to blog posts. It would take you a few minutes as long as you follow exactly the following steps:

Go to Blogger and click New Post
In the Post section, you will see Compose and HTML, click on HTML. (actually, you can use any)
Open Youtube.com in a new window
Select your video
Click on the Share button
Click on Embed
Copy the code
Paste that code to your post
Click Preview to see the result, then click Publish or Save

It should look like this

You're Done
You can also return to the home page to see the latest posts

Getting one way backlinks

2011-07-16T22:23:00.000+10:00

Since Google page ranking was determined by how many backlinks your site has, bloggers have been attempting to get as many as backlinks as they can. Thus, it has made backlinks become the hot topic in the blogosphere. To get a high page ranking in Google, you don't just get as many backlinks as you can because it will take a lot of your time and your page rank may not be increasing. This is because mots of your backlinks are listed on low page ranked sites. The imporant things you need to know about backlinks is that quality backlinks are far more important than quantities of backlinks. I would say that 1 backlink in a high page ranked site would be equal to backlinks in 10-20 PR0-PR1 sites. That's why I am here today to share some quality backlinks that you can easily get from some popular sites such as StumbleUpon, Technorati, Google Bookmarks, Google Profiles, Blink List, Del.icio.us, directory free, puppyurl.com.

It would take sometime get backlinks from these sites, however, when your links have been indexed by Google on these sites, just watch your blog growing.

Create Random Posts for blog

2011-07-15T20:29:00.000+10:00

1. In Dashboard, go to Layout
2. Click on Add a Gadget
3. Find HTML/Javascript
4. Paste this code to the content box

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=6;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

5. Click SAVE