How to make money with blogging

Making money with blogging is being the hot topic nowadays. people tend to make Blogs just to make money rather than sharing their knowledge and thoughts.
If you are one of them (I hope you are not),if you are one of them you should know about things that will happen after you decide to make money on the fly with blogging in a day or two.

You need to be patient enough.  Keep in  mind that, patience is the door to success.

Read Article →

Blogger.. Go Social..

If you want more people to see your blog,
there are many ways than before.
world has gone social.
with the arrival of Facebook, twitter,and Google plus Social networking sites, things got much easier than ever.

Read Article →

Attracting Visitors

Attracting your blog visitors is the crucial part of winning the blogging game.

When it comes to the Word "Attraction" it means just not the appearance but the total performance of your blog.  There is four base things that is used to attract a visitor. 

if you do concrete your blog with these base things, you can make your blogging Kingdom. Where the ultimate ruler is being you.

Read Article →

Writing&Posting Strategies For Blogger.

Many out there create a blog, design it. write posts, and publish, and within no time, they find it hard to attract their visitors and  something is not just right. but what? hmm no .. they wont get an answer and they quit.
What's happening here is they are missing the basic strategies to write and post a blog post and visitors find it hard to be there.

Read Article →

Why Should I Blog?

Have you ever wonder or asked yourself this Question?  Why should I Blog?
This "Why Should I Blog" question can be raised on two occasions.  One is when you start to think about blogging. another one is when you lack self-confidence on your blogging. 
If you are thinking about "Why Should I Blog", Lets Make a  List for that "Why".

Read Article →

What to Blog?

As you could see, there are much things that helps us blogging that quick and ease.
you may ask yourself, What should I blog about? What should I write about.?
Here is a Quick overview on the topic that you might find helpful.

Read Article →

What is Blogger?

Blogger is someone who updates/write a blog. For Example, someone asks you. Are you a Blogger??? then you pause and think. do I update or write a blog?? and if you do.. you tell.. yes... I am a Blogger.

Or It can be Google's free blogging platform that lets us create,customize, and write blog posts and publish a blog.
For better understanding, we will call it as "Google Blogger" from now.

What Is Google Blogger 


As Google Team officially quoted,
Blogger is a free, powerful publishing platform that provides us with all the tools we need to start and grow our blog.
It's fully-customizable and packed with advanced features like HTML editing, gadget support, mobile publishing, and much more.
Blogger seamlessly integrates with other Google products including Google+, Google Analytics, and YouTube.
Better yet, 100% of any AdSense revenue earned is ours to keep.

What's up there, you got it?

Free?

Blogger is free. You might wonder you can create one.
yes. you can.. all you need is to spend some time to set up your blog, and something unique to share with the world .

Fully Customizable?

FULLY Customizable.. as much as wordpress[cute huh? it is...]!
and there are features that will help us to make blogging much easier than any other pl;atform.

What are the best features?


HTML Editing
Gadget Support
Mobile publishing
Standalone Pages

Html Editing is one of brightest feature of Blogger.
You will feel like you are painting your house's wall. feel free to design  your blog as per your needs. Learn! you'll never regret ]

Gadget support is another feature that helps Blogger users to add plugins, that are adding functionalities or features to Blogger.
Example for gadgets : Recent posts Gadgets, Popular Posts gadgets, Contact form Gadget.

Mobile Publishing is another nice feature that Blogger provides.
Publish your blog from anywhere if you have a mobile device.
Blogger has made it possible to upload your posts to update from mobile devices or via email messages.


Do you want to tell or guide people about something than your daily blog posts?
Static pages in Blogger is made for this purpose.
Make a contact us page, create a privacy policy page, or a gallery. or anything you would like to show apart from posts.

That's NOT all about Blogger! There are much things to tell about Blogger.
Don't ever try to gasp everything at Once! it will make you lazy to do things. Learn it only when you needed.

You have found Blogger!. Now ... What you should you write about?

Read Article →

Effective steps to replace old synchronous Adsense code with new asynchronous code in blogger blogs.



On 2-7-2013 , +Google AdSense  team announced that they are giving a new option for publishers to load Google adsense ads asynchronously.
As they mentioned in there official Google+ Post, new asynchronous ad code lets Website content load quicker for users when they experience intermittent connection problems.

Why Asynchronous?


<script> tags will block HTML renderer if they are found in between any other elements.
That means if you are loading a huge JavaScript file with a blocking <script>  tag at the top of markup, you will not see any progress on the page as the mentioned script is getting loaded and evaluated.
Here adding async tag will help the performance.
if we tag with a aync, the browser will no longer stop the html renderer process,and it will load and evaluated the script block asynchronously.

How to replace old code with Asynchronous adsense code in blogger blog?


If you have approved by adsense,and enabled that in your blogger powered blog, blogger will automatically show ads in posts and sidebar. and you might have added extra ad codes using blogger template editor or "Add a widget". option in layout tab.

Lets see how to change default adsense code to new one. please not that this is not mandatory. its optional.


  • Backup template



Before make any change to your template, Backup your template. if you don't know how, here is an article that will help you to backup your template.

  • Check Earnings tab.

Open blog's dashboard, and on left side, click on the tab named "Earnings". Make sure you have set "true" for "Show ads on blog "   option. and save changes.


  • Optimize template for new adsense code



Open Template Html editor. and find </head> , if you don't know how to search inside blogger template, here is an article that will help you.

Just before the closing head tag, Add below script
 <script async="async" src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Save this for now


  • Replace old adsense script blocks with new asynchronous codes.



Search for "<data:adcode/>" (without quotes), inside blogger template.
Replace that with your new asynchronous code you copied from "Myads" section in adsense dashboard.

It will look similar to this.

<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="yyyyyyyyyy"></ins>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>


PLEASE NOTE that you dont have to call  <script async="async" src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
script everywhere.  as +Michael Kleber  said in +Google Developers  blog, only calling on top of document is enough even if you have multiple ads in page .

If you have added other ads manually ,using 'Add a gadget' option in layout tab, Open layout tab, edit gadget contents, and replace the old adsense code with new one.

  • Save template. and test your blog.


Troubleshoot


If you are getting error message,  Error parsing XML, line --, column --: Attribute name "async" associated with an element type "script" must be followed by the ' = ' character.Make Sure your async is followed by the ="async" property. (async="async").

If you found any other problems setting it up, feel free to start discussion in comments.

Read Article →

How to search text inside blogger template , in new blogger template editor.- Explained with Screenshots.

This time, after blogger applied a new interface for template editor, in blogger dashboard, there are many who just get confused on how to search inside the blogger template.

before, when it was old blogger template editor, it was same as searching any other text in whole webpage, you just click anywhere on webpage, and press Ctrl+F and you start searching for texts.

Old Approach on searching words inside blogger template.[Using web browser's built in search]


Things has changed a little, Now. you cannot use browser's search function to search inside blogger template.

lets see how to do this.

You Just click anywhere inside your blog's template editor.and not outside the editor.

And you press Ctrl+F

search for something.
for example, <body

New Approach on searching words inside blogger template.[Using blogger template search option]


it will show you where is <body is located and scroll to there and highlight the searched text in template editor.


If you have further comments, please leave it in comment box below.




Read Article →

Remove "Powered By Blogger" Attribution from blogger mobile template in 2 minutes - Tutorial With screenshots.



For a beginner, its hard to find an option to remove "Powered by Blogger" text at the bottom of mobile version of blogger blog .(at first,me too), then gradually after learning the blog's layout and core concepts, i found it is easy as anything to remove whatever we need to remove,

So i came up with this article where you can learn how to remove "Powered By blogger" from mobile versions. Keep reading.

Before you experiment with this, i suggest you to backup your template. So, if something go wrong, you can rollback the changes.

Go to template section of your blog.


There you can see a mobile version

Click on the configure icon below mobile template.



A box will appear titled as Template> Choose mobile template.

There , below on "on mobile devices ,show a mobile version of your current template"

you can see 2 options .
Select the first on "Yes, Show mobile template on mobile devices.".
And below, that Choose mobile template, as "CUSTOM" From dropdown.

and click on save.

Step 2:

Open template editor

Search for "Attribute" in template.


you will see  aline like this.
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

Change locked='false'

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
TO
<b:widget id='Attribution1' locked='false' title='' type='Attribution'>


And
Change the parent section's showaddelement='yes'

<b:section class='foot' id='footer-3' showaddelement='no'>
to
<b:section class='foot' id='footer-3' showaddelement='yes'>


Save your template for once. (Important).

After saving once, search again for "Attribution" in template, and delete below part from your template.

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
<b:if cond='data:feedbackSurveyLink'>
<div class='mobile-survey-link' style='text-align: center;'>
<data:feedbackSurveyLink/>
</div>
</b:if>
<div class='widget-content' style='text-align: center;'>
<b:if cond='data:attribution != &quot;&quot;'>
<data:attribution/>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>


Resulting page will look like,


Save your template, Visit your blogs mobile version , if you see "Powered By Blogger"  removed from blog's mobile version, feel free to share that news here in below in comments.
If you face any problem applying this, Start a discussion.

Read Article →

Add Google plus comments plugin in blogger - Steps to follow




Now you can replace your default blogger comment system with Google plus comment plugin.
To replace Commenting system in blogger with Google + comment plugin,You don't even need knowledge of template editing. it can all be done in less than a minute.

Why should i replace default commenting system in blogger?

So, why should you replace your blogs commenting system with Google plus comments?
Lets see how it is when we compare to blogger comment system.

  • When someone comment on a blog post in your blog, using old blogger commenting system,ONLY YOU will be knowing about this via e-mail notification.
  • When someone comment on your post publicly or with someone, who have them in circles,their friends or with whom hey used to share it (in Google plus network) will be knowing about your blog post. Thus the traffic increases.
  • blogger comment frame was not that beautiful i would say, and bloggers always wanted to change the appearance of the comment iframe with css.
  • Google plus comments have a nice and beautiful interface.
  • While blogger comments iframe takes time to load in slower connections, Google plus comment plugin loads faster than blogger comments(I Just tested it using a dial up connection).
  • Less spam.


How to add Google plus comments in blogger blog?

To replace blogger commenting system with Google plus comments, follow the steps below.
Sign in to blogger.
Select your blog in dashboard .
Under 'pages'  tab, you can see a tab named 'Google+'.




Click on Google + tab.
There you can see an option 'Use Google+ Comments on this blog'.
Tick the check box next to it as shown as in the figure below.


Now, save the settings, and reload any post in your blog.
Blogger's default comment system will be replaced by Google plus commenting system.




Enjoy the new Google plus commenting system in your blog.  :)

Read Article →

Say goodbye to cheap javascript way of summarizing blogger posts - Alternative Serverside method for any blogger template


So, Ho do you Summarize your blog Posts to Show in your blog' homepage or archive page.?
If it i the Same cheap JavaScript method or trick(As you call it) that will trim out the received post, then its the time to change.

It Was Super slow,when i added JavaScript summarize and 4 posts on main page, then i understood that if it is like so, visitors will be running away from my blog because of its slow loading.
after analyzing and  studying about blogger tags in detail, i found that it is possible to summarize blogger posts in server side.
Finally I came up with the solution and i recognized how fast my blogger blog is than before.!

JavaScript method to summarize Blogger posts

You open template editor.
Then you add  below configuration in head to summarize received posts.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 200;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;

function removeHtmlTag(a,b){if(-1!=a.indexOf("<")){for(var c=a.split("<"),d=0;d<c.length;d++)-1!=c[d].indexOf(">")&&(c[d]=c[d].substring(c[d].indexOf(">")+1,c[d].length));a=c.join("")}for(b=b<a.length-1?b:a.length-2;" "!=a.charAt(b-1)&&-1!=a.indexOf(" ",b);)b++;a=a.substring(0,b-1);return a+"..."}
function createSummaryAndThumb(a){var a=document.getElementById(a),b="",c=a.getElementsByTagName("img"),d=summary_noimg;1<=c.length&&(b='<span class="summary_img_span" style="float:left; padding:0px 10px 5px 0px;"><img class="summary_img" src="'+c[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>',d=summary_img);b=b+"<div>"+removeHtmlTag(a.innerHTML,d)+"</div>";a.innerHTML=b};

</script>
</b:if>
</b:if>

And then you Find <data:post.body/>  and replace that with below code.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.canonicalUrl' rel='bookmark'><b>Read more &gt;&gt;</b></a></span>
</b:if>
</b:if>


So, It will be summarizing your blogposts in all other pages, except item page and static page.


BUT, Whats happening? [Disadvantages of JavaScript method]


  • your blogger blog takes too much time to load
  • Your blog downloads unwanted images and text blocks or scripts that are in each post.
  • It may show full post before it get trimmed out! thus the beauty of blog goes away.
  • If JavaScript i not enabled in visitor's device,it ill give your blog's homepage an awkward look because no blog post will be summarized.
  • It will throw your visitor away because many hates slow website/blog


Server side trimming / Summarizing of blogger posts.

You open template editor
Search for <data:post.body/>  (If JavaScript summarize already enabled, the whole block).
Replace that with below Code.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div id='&quot;summary&quot;'>

<b:if cond='data:post.thumbnailUrl'>
<span class='summary_img_span' style=''>
  <img class='summary_img' expr:src='data:post.thumbnailUrl' style='width:100%;'/>
</span>
</b:if>

<div class='post-body'>
<b:if cond='data:post.snippet'><data:post.snippet/></b:if>
</div>
</div>

<div style='clear: both;'/>
<span class='readmoreblock'>
  <a class='readmorehref' expr:href='data:post.canonicalUrl' rel='bookmark'>
    <span class='readmorespan'>Read more &#187;</span>
  </a>
</span>
</b:if>
</b:if>

Whats Happening here? [Advantages of This method]

What we do is actually make use of the data:post.snippet tag in blogger.
and we also make use of data:post.thumbnailUrl tag.

  • You blogger blog loads faster because summarizing done on server-side.
  • Doesn't load whole blog post contents if its not the item page/post page.
  • Simple to apply. No coding knowledge required.
  • It will never show full post if it is not an item/post page.
  • Doesn't require JavaScript.

Summary

Make use of this feature and say goodbye to javascript method! you will not regret. ;)

Read Article →

How to Customize new blogger contact form gadget with CSS


Its a  very nice thing that blogger has a new contact form gadget that can be installed in any blogger blog.
before this, many, used to adopt contact from from Google docs.
but the thing is something simpler than anything, user enter a valid name, valid email, and subject text to form and when submit, it send to to owner of blog  without loading the page.
if you have not already installed blogger contact form gadget in your blog, its time to add that, here is how you can add blogger contact form gadget to your blog.

So, after installing the new blogger contact form for blogger, you can customize the appearance of contact form with css.

Here is a simple css Snippet that change the appearance of the Blogget contact form.



#ContactForm1_contact-form-name {} //Style Input field where use have to enter name
#ContactForm1_contact-form-email {} //Style Input field where use have to enter e-mail
#ContactForm1_contact-form-email-message {}  //Style TextArea field where use have to enter e-mail message.
#ContactForm1_contact-form-submit {} //Style submit button of the form


Example (Which i have used in my blog)



#ContactForm1_contact-form-name {border: 1px solid #6B0C23;border-top: 1px solid #350E0E;}
#ContactForm1_contact-form-email {border: 1px solid #6B0C23;  border-top: 1px solid #350E0E;}
#ContactForm1_contact-form-email-message {border: 1px solid #6B0C23;  border-top: 1px solid #350E0E;}
#ContactForm1_contact-form-submit:active,#ContactForm1_contact-form-submit:focus:active,#ContactForm1_contact-form-submit.focus.active {-webkit-box-shadow: none;  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.3);box-shadow: none;}
#ContactForm1_contact-form-submit {background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDFNC0Sr_xXjcdRgGYYZEgUuW_KmFKumWwp65nhqqVXy2owuvuqlwpRiZjyoU3Nnvb0O3pV5Aprv6mvYwDB5o8AbVbUi9dvFvWopWwQ5yP6f0g4YW7a1Kx413XOstZ4fP_uYIwul_kMn8F/s1600/footer_button.png) no-repeat scroll -2px 0;  height: 42px;  width: 97px;  border: 0px transparent;  color: white;  margin: 0px auto;}
#ContactForm1_contact-form-submit:hover {-webkit-box-shadow: none;box-shadow: none;}



Read Article →

Contact form gadget for blogger




Now, a blogger can add contact form widget in blogger blogspot blog,within seconds ! that too come with a good styling and also customization possible with css.
Blogger's new contact form is a nice, simple and fast one.
There are many ,who uses google docs to create contact form
I have tried many contact forms already, but this one worth to add it. because we can trust Google.

If a user enter a valid Name , email address and Fill the subject message in to the form, owner of blog will receive an email to their email account which they have created the blog with.

Lets see how to add this contact form to your blog.

Go to blogger dashboard - > Layout/page elements, and click on add a gadget. it will popup a window of gadgets that you can install.
in More Gadgets tab, you can see a gadget named Contact form for  blogger.
Click to add.

Save This , drag the gadget to any section you want it to appear.




Read Article →

Setup Open graph for blogger effectively

What is open graph?

Definition for opengraph(from wiki):
The Open Graph protocol enables developers to integrate their pages into the social graph. These pages gain the functionality of other graph objects including profile links and stream updates for connected users.The implications that the Open Graph may have on the web as a whole relate significantly to the idea of search engines. While currently Google still attracts more traffic than any other website, Facebook is a close second. Even without a good internal search engine, Facebook already drives more traffic for some searches, specifically social searches, than Google itself.And in attempting to link Facebook with the rest of the web, the Open Graph is creating Face book's own extensive and highly interactive version of a search engine. Web pages are turned into Open Graph Objects by adding metadata.
As you may already know, there are already meta tags that defines our content, title, description, keyword, and so on. then why opengraph meta tags?
as facebook being the fastest growing social community, we have  to look at it, and keep our standards to go with the current trends.
open graph is applied everywhere today. in many websites, and in their product pages, in articles, everywhere!
When it get shared, it can visible like a story in facebook timeline and news feed with the details , pictures and content types what the user have shared.

Blogger doesn't automatically create opengraph tag for your blog. maybe that may happen in feature.. but blogger does generate standard meta tags for each blog this time when i write this article,if we include below line in our blog's head.

<b:include data='blog' name='all-head-content'/>

Now , we have to tweak our blogger template to generate opengraph tags for each page.
Before that you should be knowing,

Why is it important?

You may thinking why is it important to add opengraph because there are already meta tags  which define our description, title, keyword etc.
so here is answer for your question.
Assume you own a blogger blog. and you have many articles, pages,and products in your blog.
and you also have a share button ,like button, or a comment plugin that you obtained from facebook.
Someone share your article.
it Shows on their timeline and other friend's feed.
if you have no opengraph meta tag assigned, it will likely jut an writing that make no attraction and just a url.
and When a user likes your article, it will show as a url.
Here we need to apply opengraph tags.
What if someone sees a story in feed, someone have something, followed by a link and article picture, and a small description with it? yes. he will be attracted, and his moue cursor moves to that, and click the story.

How can you set up opengraph in your blog effectively?

You will be surprised if you come to know the full features blogger gives to a blogger.(if you understand the full feature)
we can automate the process of generating opengraph tags for each and every post in our blog, each page in our blog, or in the very homepage of our blog. we can do it all once and we have option to do that in simple.
This is how you can setup opengraph for blogger.

Here is Open graph tags for blogger.
Just put this between your <head>` and `</head> tags.

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <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='&quot;en_US&quot;' property='og:locale'/>
    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>


Remember, og:image will only shown if your post contains an image.
Or if you want to show your site logo here if there is no picture in post, you could call an alternate og:image that contains your logo!
Just after all meta tags in your template add below code.
<meta expr:content='http://URL_TO_LOGO.jpg' property='og:image'/>' 

Replace URL_TO_LOGO with the URL to your logo or the default image that to be shown.

Troubleshooting

After done with above code, try to share any of your blog' page .
if you don't know how,below is the way to share a webpage in Facebook.

If you are not able to see any change after adding above code to your blogger template,
Go to  https://developers.facebook.com/tools/debug
and type your URL to post, in the field and click on debug, it will refresh cache in Facebook and will reload your post detail from scratch.

Its a pleasing thing that to hear from you about this article. ;)
Recommended link : http://ogp.me

Read Article →

jQuery is not working in blogger blogspot mobile version - issue solved


if you are wondering why your j Query code doesn't work in your blogger mobile version, here i the answer.

The problem, is that blogger loads different template for blogger for PC and mobile, you can disable it and show PC version only in any device.
this solution i for those who want to show different template but still query doesn't work for them.

whatever code and script you have in your main template, it doesn't affect blogger mobile template.
so you need to make some  change to template to make it work in mobile too.

Here we go.


<b:if cond='data:blog.isMobile'> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script> // your script </script> </b:if>



Place it anywhere in your template. better to place it net to the original one.
and save template. check it in your PC itself first. to do so, jut add ?m=1 at the end of your blog URL.


The edit for mobile template can be done via main template itself.

to do that, find <b:if cond='data:blog.isMobile'>

and check between that, you might find things to edit.



Read Article →

Facebook comments and like count problem in blogger blogspot - Solved



After blogger started applying Country Redirection in blogs, it is being a problem that Facebook comments and likes are not working properly because each visitor gets different result depends on current blog address. for example, my blog address is http://aslamise.blogspot.com , and when i visit that blog, it becomes http://aslamise.blogspot.in , because i visit from India , this is called country specified redirection.

BUT, we can overcome this problem of Facebook comments or like count problem or any other problem which caused by the redirection, by setting data:blog canonical URL in Facebook plugins

The solution is to tweak your plugin's code and relace data:blog.Url with data:blog.canonicalUrl .
So that it will always point to .com version of your blog.

Here is the Facebook comment plugin code many blogger users,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-comments' data-num-posts='20' data-width='610px' expr:data-href='data:blog.Url'/>
</b:if>


Perfect one is below one.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-comments' data-num-posts='20' data-width='610px' expr:data-href='data:blog.canonicalUrl'/>
</b:if>


We Change  the expr:data-href='data:blog.Url' to expr:data-href='data:blog.canonicalUrl'

Facebook like plugin also need this to Work perfectly in blogger blog.

Enjoy blogging. if you have any doubts , feel free to ask in comments.

Or

If you want to know how to replace blogger comments with Facebook comments plugin, Go here





Read Article →

Add a simple yet beautiful "Recent Posts" Gadget in blogger blogspot

So, here you are, for adding a recent posts widget in your blogger blogspot.
Without wasting time, lets get to that straight.

I will be explaining how this works, at the end of this tutorial,
Now lets add this to your blog.


<script>var numposts=5,cmtext="Comments",pBlank="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3jYmQ_0k596lugKZoJh6IDq3FqAsSIs285cb0gkbp5JIl9LPmrZolwlnIItvn7CGI7cEeQXHN0zx0Vagy4DYKJygQfdBdFbSgnTDITdwemk4AT9PqD6N-K1aua7-cfO3T_leunLTmZQZ8/s798/no-image-72x72.png"; function rpthumb(b){document.write('<ul class="rpthumb">');b=b.feed.entry;for(var c=0;c<numposts;c++){for(var e,a=0;a<numposts;a++)if("alternate"==b[c].link[a].rel){e=b[c].link[a].href;break}for(a=0;a<numposts;a++)if("replies"==b[c].link[a].rel&&"text/html"==b[c].link[a].type){cmnum=b[c].link[a].title.split(" ")[0];break}var a=b[c].title.$t,d=b[c].published.$t.substring(0,10),d=d.replace(/-/g,"/");postimg="media$thumbnail"in b[c]?b[c].media$thumbnail.url:pBlank;document.write('<li><img src="'+postimg.replace(/\/s72-c/, "/s40-c")+'" class="rp-thumb" alt="thumb" />');document.write('<a href="'+e+'" target="_parent">'+a+'</a><span class="footer-outer"><span class="dt">'+d+'</span><span class="cm"> - '+cmnum+" "+cmtext+"</span></span></li>")}document.write("</ul>")}; </script><style type='text/css'>ul.rpthumb{background-color:transparent;margin:0 0;padding:0 0;border:1px solid #CCC}ul.rpthumb li{display:block;padding:7px 7px;margin:0 0;overflow:hidden}ul.rpthumb li a{text-decoration:none;display:block}ul.rpthumb li a:hover{}ul.rpthumb img.rp-thumb{padding:0 0;outline:none;border:1px solid #CCC;background-color:#02406C;display:block;float:left;margin:0 10px 0 0;width:40px;height:40px}ul.rpthumb span{font-size:10px;color:#666} </style><script src="http://aslamise.blogspot.com/feeds/posts/default?alt=json-in-script&callback=rpthumb&max-results=5"></script> <a href="http://aslamise.blogspot.com/2013/04/How-to-add-beautiful-recent-posts-widgets-in-blogger-with-javascript-and-css-full-code-with-demo.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmpWOoqo6ps0M3Q6lAo0L0d1JMyOdV6G-Zsr2W-5zoO5dyTwmAgUTfqXVaRqYfdH1qUfFMaoqa6TeOjqDaozjAYEapOgr1ESy1OPHOK4iTAOnCwUheRdJ9Eg0Zkr2TWxTHMv7B40Oy7V95/s1600/bullet_add.png" style="float: right;height: 20px;margin-top: -20px;position: relative;z-index: 10;" title="Get This widget for your blog" alt="Get This widget for your blog"/></a> <noscript></noscript>
Copy Above code and Open your blogs layout,
click on add a gadget option, then select html/javascript option then paste this code.
Don't forget to replace http://aslamise.blogspot.com with your blog's address,and set number of posts to retrieve. if not set, default is 5 posts.
save the gadget with a title of recent post or something.
Save layout. and load your blog.
It will show a recent posts widget where it will show
Enjoy blogging ;)



Read Article →