Social Share Count Fluctuated After Custom Domain Change

If your are on Blogger or any other website being run on a sub-domain for example .blogspot.com or .wordpress.com you have the option to have your own purchased domain on it but if you have did it already then you would have noticed the share count on post are all reset.

Are you using social share plugins from AddThis or a self made code that works for blogger automatically in the template ? Let's say you have 100s of +1, Tweets or Like on one of your post and all the shares were made when your blog was on the sub-domain (eg. .blogspot.com, .wordpress.com) but when you changed the domain to your own purchased domain what you see is all shares have been reset.

If you don't have much information about these then at first you will shocked because all the shares on your hard work are not there anymore but is that true, should it be called an issue ?

What's the reason

If you know how the share buttons work and how the web works then you don't need to read this but many people who don't have the knowledge about it would be tensed about it. The reason is that the shares were made when your blog was on blogspot domain eg.
http://yourblog.blogspot.com/2012/03/some-post.html
And the social sites will send data to the share counters that redirects to this URL but when the URL is changed the counters are redirected to other URL (your new domain) and it then count shares for
http://yourblog.com/2012/03/some-post.html
If you try to add a code that will redirect to your old domain then you will see back the counters to normal as it fetches the count for the old URL but you shouldn't do it.

What to do ?

If you ask me I would  just sit back and relax, it won't have any bad effect on your blog. If the redirection of your old blog domain to the new custom domain is working then you don't need to worry at all because the old shares for the sub-domain are yet on the social sharing sites.

You need to remember that social sharing widget don't see your blog it sees the URL. 

Sinhala Font in Blogger

Bloggers in different country needs different fonts that supports their language, most of them are already in the computer but when you are talking about some forgotten languages then you hardly get it on computers, then you need to get a font for it on your web page and so in Blogger.

Sinhala or Sinhalese language is mainly used in Sri Lanka and if you are here in search of getting Sinhala font then you are probably a blogger from Sri Lanka or Blogging in that language, because Sinhala is not that a famous language, people wanting it on their blog find it difficult to get a perfect solution.

Being not a famous or talked language doesn't mean that need for it is not there. Bloggers, blogging mainly in their language need that the most, however big blogs manage to get fonts for their blog easily by hiring professional web designers but if you can't afford to hire one then we are free to help you.

Adding the font

Easy as eating a cake, you don't need any extra knowledge about computers. First we need the font to load on the page or you blog, that can be done adding this CSS. Don't add the CSS directly in the document or it will load the page slow, I am hosting the CSS file on host, you just have to link it

<link href="http://dl.dropbox.com/u/93278694/stylecssff.css" rel="stylesheet" type="text/css">

If you open the link in href value you will realize how big the CSS code is, it's because we aren't loading the font file, we are directly rendering it's data content.

Note: We are hosting the CSS file on Dropbox and we have no guarantee when it get deleted, so i suggest you to host it on your own server and then link it.

Add this in your template

To add the <link> HTML given above you need to first access your HTML of your page, follow the steps to add it.

1. Go to Blogger Dashboard 
2. Select the Template tab
3. Click Edit HTML and Proceed
4. Use CTRL+F to find </head>
5. And paste the HTML given just above/berfore </head>

Save the Template, that's it. Now move to the next section to learn how to put it to work.

CSS to change the font

Adding the font in Template won't work alone and also it won't change your font automatically, to tell the browser to load a specific font (this time it's Sinhala) you have to define a CSS.

You can make the whole body (full page) font to Sinhala or can also make only the Post area to be in Sinhala, it's completely depends on the CSS selector. If you know how CSS selectors works then you can detect the class or id of an element on page (can be post area) and then change the selector, to know how to  do that read this post.

If you don't have any idea about the selector then these two different CSS will help you.

#1 Sinhala font only in Post area

.post-body {
font-family: Dhananjayaweb;
}

#2 On full document/page

body {
font-family: Dhananjayaweb;
}

Add the CSS 

Now when you have choose one of the CSS either for the full body or just the post body, now you have to add it into your template. Do it easy with this tutorial on adding CSS in your template.

This is the end of this tutorial but do remember to subscribe our email newsletter for more post. We are excited to hear from you in comments.

Seperated Box for Gadgets in Blogger

Blogging is about the content and it's most important thing you need on your blog but design matters too for your readers and visitors to be on the page for a longer time. This design tutorial will teach you to add designed borders around your gadgets to make it more beautiful on your blog.

Why is it important to give a more sleek look to your gadgets, they aren't that important for your visibility in search engines but if you want your users to find it easy to read your blog then you must give good looks and structure to your aside contents.

In many blogger templates, gadgets are in their own separated boxes and in other's they are not, but they won't look that good without a little more touch with CSS. It works the best when you don't want to have titles for your gadgets but yet want them to look as different gadgets on the page.

Add borders to gadgets

Giving clean and good looking borders to a gadget on Blogger don't takes more than 2 minutes. You just need the CSS for it, which i will provide in the tutorial and the instructions to add it. I have added two different effects, check it below.

Normal borders

If you don't want a simple but yet eye catching borders around your gadgets then the CSS below will give you what you want. - See the Demo

.sidebar .widget {
border:3px dashed black;
padding:10px; 
}

The CSS above will give a black dashed border of 3px width on all your gadgets/widget on the sidebar. Changes can be made in the CSS code.

1. There are three different parts in the border property.The first value which is 3px is the width of the border.In the middle it's the type of border we will use, currently it's dashed, they can be solid | dashed | dotted | double | groove | ridge | inset | outset .Last is the color, you can change the color with the help of our color picker.
2. Padding is the space between your gadget content and the borders. 

Funky hover border effects

This one is little different, little more funky and responsive. Can react on user movements over the gadgets, when you mouse over the gadget the borders will appear else it will remain without border. What i like the most in this is that it reacts on user interaction. CSS for this border design is below - See the demo

.sidebar .widget {
border:3px dashed transparent;
padding:10px; 
-webkit-transition:all 0.8s ease;
-moz-transition:all 0.8s; 
-ms-transition:all 0.8s;
-o-transition:all 0.8s;
}
.sidebar .widget:hover {
border:3px dashed black;
padding:10px; 
}

The first CSS style block is what the gadget should appear when it's not being hovered and the other block is for styles when it's being hovered.

Add CSS to Blogger

Check the link below to know how add CSS to a Blogger blog.
http://www.stramaxon.com/2012/03/how-to-add-css-to-your-blogger-blog.html

That's it, once you apply the CSS check your blog with the border designs, hope you like it and your readers will like it too. Please comment for feedback.

Change default styles of heading in Blogger template

This has been a minor disturbance for users using default templates from blogger or also on some premium or free third party templates. Blogger have some very odd styles for headings like <h1><h2>...<h6>. This post shows you an easy and effective way to make it as the way you want.

Heading tags are normally supposed to be larger font than the body content but in blogger it's not everything well with the heading tags, many of the heading tags are uppercase and others are even smaller than the text in the body, and that's not what we actually want.

You see the examples on blogs using Simple template and more other templates available for your blog by Blogge. The template i made this template from was 'Simple template' but you won't see the headings that looks odd or smaller than the body text, because it's not a rocket science to do such things on the web.

Fixing the sizes and styles

Sizes is one thing and styles are another. If you don't like it then don't keep it, it's your blog and you have the full control on it and so you can change it easily. All just you need is guides that can guide you through this. Before we change it you must understand how it's made like that, CSS. New to CSS ? No worry, you need basic knowledge of copy-pasting and you will get links to learn more about it. The CSS below can help you out of this weird problem of template.

h1 {
font-size:18px;
text-transform:normal;
}

1. Study each and every property, value and try to learn what does it mean. Simply seeing the h1 at the selector place tells that the stuffs between the curly brackets are going to be applied on an <h1> tag. You change the selectors as you desire. Don't worry, you can put different CSS for your different heading tags e.g : <h1> <h2> <h3> <h4> etc.

2. Next is the styles between the brackets, CSS is so easy to understand that you can start customizing your website with a little bit of knowledge about CSS. Here you can see the first property is font-size, i am sure you know what to do there, changing the 18px value will do the job. Make sure you give appropriate value so it looks better.

3. The most common reason people wants to however fix it is that some heading tags are all in uppercase by default, and no matter how did you format the text into the post editor, when it's published, it becomes what you don't even expect. The different values into text-transform property can be uppercase | lowercase | capitalize | normal | initial
If you are interested in knowing more about this property then you can do it here [click link]

Tip : Sometimes adding CSS doesn't override the existing styles on an element, so we need to use !important at the end of value before the semi-colon to force it be applied on it. For example :

h1 {
font-size:18px !important;
text-transform:normal !important;
}

Adding CSS

When you have your CSS ready then it's time for you to add that CSS to make it take effect on your blog and the heading tags. For a quick guide check this tutorial about adding CSS into Blogger.  

Need further help ? We are always ready with proper answers of your questions, if you don't understand something from this post then feel free to comment and if you are helped then comment can be useful to say thanks !

Creating more than 20 pages on Blogger

Blogger already has amazing features for bloggers but there are some limitation which are not acceptable sometimes. And one of the limitation is that you can only create 20 Static pages and in this article i will be telling how can you create more than 20 pages.
You heard it right, you are going to learn how to add more than 20 Pages. Sometimes you may need more pages on the tabs, it's where your blog page's link are situated normally. All the static pages that you want to display are there but the limit is 20 static pages per blog.

Let's get to the point and learn how to get more than 20 pages on your blog.

The idea

The simple but effective idea is to create a blog post, backdate it so it doesn't appear on the home page of your blog. And then use the link of the post to create new page, not static but choose the Web Address option and put the link to post in it's URL field and Save it. If you don't get it, then the tutorial is below.

Creating a post

This will not be a normal blog post on your blog. Edit the post and put whatever you want (this is going to be work as the page). Now when you are finished writing the post you have to backdate it so it doesn't appear on the homepage as a new page.

Backdate the post

To backdate the post, click on Schedule under Post Settings. Select the 'Set Date and Time' and choose a past date and click Done. The post will be now archived but remember, do not copy the link before change the post date. Because the middle of the URL depends on it's date for example :
http://stramaxon.com/2012/05/...
2012 in URL is the year and 05 is the month, but when you change the date, the date in the URL also get's changed. Be sure to get the link which points to the date which you have set the date of the post.

Using the post as page

The ability to put a web address as a tab gives the birth to this trick. You maybe thinking how could we use a post as a page ? That's very easy. Follow the steps below :

1. Go to your Blogger Dashboard -> Pages
2. Click on the New Page drop down button 
3. Select Web Address from the option
4. Write the Title you want it to appear on pages tab and the URL to the Post
5. That's it, now you can Save it.
   
   
   

When everything is okay you can check the new extra page on your blog and with this method you can create as many pages as you want.

Removing the date

Using this trick gives a complete effect of a static page on the blog but the date you will see on the post page doesn't make it look completely like a static page. But we have a clear solution for that, adding CSS that will hide the date will work great.

<style>
.date-header {display:none;}
</style>

If you add this CSS in your template code then date on all post will hide and just because that you have to place it at an unusual place, into the HTML of the post. Open the Post in Post Editor, switch to HTML view, scroll to the bottom and Paste the HTML/CSS code at the end. 

Helpful ?

Were we helpful to you in helping you create more than 20 pages on Blogger blogs ? If you have any suggestions regarding this post then do drop comments below and join the discussion.

Infolinks is giving a chance to win iPhone 5

Infolinks have just launched their new mobile application, that not just giving you more control on your Infolinks account but also giving it's user (like me) a chance to win iPhone 5

If you are also a user and regular reader of their blog then you may have seen many competitions going on, the last time, it was for $100. I have never won a competition there but always took part in the lucky games, who knows, you could be the next winner.

Honestly speaking, i don't have any Apple gadget but i always have a dream to own a brand new shinny Apple product. What can be better than that to become a hero in your friends ? But my blogging career is just at the start and still needs to give more to this blog to get established and start earning big money.

Enough about me and my story but Infolinks is surely encouraging their users and that's what i like about Infolinks.

I have took part in many competition from Infolinks, never won but never gave up and this time the competition is very special for me, it's about my one and only dream. The iPhone. And the most amazing thing about it ? They are giving out iPhone 5 ! Which is yet to launch.

My tweet

@infolinksinc Tweeting for an iPhone 5 is too easy,So wrote a small blog post about the competition and #InfolinksAppgoo.gl/ksfov
— Deepak Kamat (@xxxdepy) August 8, 2012

Join the Competition

Wanna take part ? Here's the link and we will enjoy the competition together
http://blog.infolinks.com/2012/08/07/new-infolinks-mobile-app/
Tweet as much louder as you can, make sure to add a hash tag #InfolinksApp
The winner will be announced next month on 12th and you know a special thing about that ? It's just 6 days before my B'day. So, best of luck for the competition and give me luck to.

Add a Paypal donate button in Blogspot blog 2012

Paypal has now become the biggest way of receiving and sending money online, Paypal provides a wide variety of tools to help you earn more and one is the donation button, you will get to know how to easily add a Paypal donate gadget in Blogger.
If you are running a non profit organization or just a blog then you might want to add a donation button to increase your income and get donations from people without messaging each and every single person. Paypal donation buttons can be very helpful as i said that you can just put up it on your blog and website and any person that likes your blog or work can donate you for your work to keep on.
Demo : You can see on the right sidebar.
The reason i have put 2012 in the title is that there are many tutorials online about adding a Paypal button but they don't work now and many people don't get a proper answer about adding the feature on their blog or website.

Adding the donation feature

The adding process is as easy as copying and pasting, no need of any coding language. Please follow and read each and every step carefully to avoid any misunderstanding.

Setting up your Paypal

Note : If you haven't yet signed up for Paypal then do it here http://paypal.com
We were having difficulties receiving Payments in Personal Paypal account, so you have to make your Paypal account Premier in order to receive donations. Upgrading your account to Premier is absolutely free.
Login to your Paypal account -> On your account dashboard you will see the account type you have, if Personal is mention there, click on it and upgrade to Premier. That's it.

Generate the donation button

In many old tutorials you may have seen that you need to log into your account to get to a page where you can create the buttons, but Paypal interface and system has changed since the way to get a button is also different.
Paypal provides a free tool with which you can create a button, you just need to enter your details, that's not more than your Paypal email id and the organization name you want your donation received as.
Note : I suggest you to log out from Paypal while creating the button.

1. Go to this page and click on 'Create button' link https://www.paypal.com/us/cgi-bin/?cmd=_donate-intro-outside
2. Now when you are on the page with Paypal button creating tool you will see a drop down menu with different options (button type) choose Donations from the drop down.
3. Put your organization name and donation id (it's optional)
4. If you want a more customized button then you can use the customization options, you can put your own image instead of the normal donate button (optional)
5. Choose the currency. If you want a fixed amount to get donated from the donors then you can choose the 'Donors contribute a fixed amount.' and enter the amount.
6. The last and the most important step is to enter the email id for your Paypal
7. Skip Step 2 and 3 there and click on 'Create Button' and you will get the HTML code for your donate button. Copy that code.

Next is to add the code for Paypal donate button into your blog's sidebar.

Add the code in your blog

We are going to simply add the code into the blog by an HTML/JavaScript gadget. To do that go to your Blogger Dashboard -> Layout -> Add a gadget -> Select HTML/JavaScript from the list -> Title the gadget and in contents paste the HTML code you got from the Paypal donation button generator.
Save the gadget and that's it.
Tip : You can add the donation button HTML anywhere applicable, for example inside the posts.
Tip : If you want to add the gadget below your posts then this tutorial[click to open] will help you.

Yeah ! That's it

Wasn't it so simple ? Adding a Paypal donation button could be so easy with a latest tutorial. I will be publishing another tutorial on custom Paypal donate button, subscribe to our feed to get the updates.

Drop your awesome comments to give us a feedback of this post/tutorial, we will be glad to hear from you.