Software Download: blogger

Showing posts with label blogger. Show all posts

Wednesday, August 5, 2015

Guide to change your blogspot.com to dot.tk in Blogger

Are you publishing your blog with Blogger.com? Are you feeling that your long domain name like your-blogname.blogspot.com, giving you bad reputation at many points of view? If your answer is yes! Then you came to right place and read out my post....

Why should I change to custom domain?

Search engines except Google, rest of all will never result your blogspot well at their listing. Social networking sites don’t like your blogspot.com tag when compared with top level domain. They don’t love to back link you. Moreover, the blogspot.com domains are blocked by some Internet service providers including China. You can also get custom e-mail like admin@your-domain.com with Google Apps. So this time, I am posting step by step guide to set up a custom domain using Dot.tk.

Guide to set up a Dot Tk custom domain using free DNS service:

Registering Dot Tk Domain:

Step-I:

Go to Dot.tk website.
Enter your preferred Dot Tk domain name and click Go. If entered domain is available, you will be promoted for further steps.

Now it shows availability of your domain. For free domain you need to produce minimum of 25 hits per 90 days. Free domain has same services as paid domain. Select your choice and move on to next step.

Enter your blogspot URL and set registration length as 12 months. Now sign up with Dot Tk. Here you have to verify your Dot Tk account by email or you can also use social Networking accounts like facebook, yahoo, flicker etc.

Dot Tk settings in Blogger:

Step-II:

Log on to your blogger account.

Go to Settings and find Publishing option in your dashboard. Now click on Add a Custom Domain. You will be prompted to buy a domain for your blog.

Simply click on Switch to advanced settings. Then enter your Dot Tk domain with www in the place of www.filmyhub.tk (as shown in the picture). Now you have to verify domain ownership by adding two CNAME records. For this, click on Settings instructions. You will be landed to a page that having dynamically generated CNAME valus with detailed set up instructions.

DNS Configurations in Dot TK:

Step-III:

Now log on to your Dot Tk account and click on Domain Panel. It gives the list of your Dot Tk Domains. Now, click on Modify option to configure DNS Settings for your domain.

Here, you will get a pop up window of Domain settings. Select Dot TK DNS Service and configure your DNS settings like above shown screenshot according to your domain name. You will find dynamically generated CNAME values in below image.

For the first CNAME, enter Host Name as "www" and IP address as "ghs.google.com". It is fixed for any blog. Second CNAME record needs dynamically generated values. It means Host name with dynamically generated name (which is highlighted in blue) and IP Address with dynamically generated value like "gv-xxxxx.domainverify.googlehosted.com" (which is highlighted in pink). These fields are different for different blogs. Do not forget to select record type as CNAME record.
To make your naked domain available, you have to add A record with following details. select record type as A record, then fill Host Name field with your dot tk domain without www (example: filmyhub.tk )
You'll need to create four separate A-records which point to four different Google IPs.
216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21
Before you move onto next step, wait about 30 min or an hour for your DNS settings to activate.

Saving Custom Domain settings in Blogger:

Step-IV:

Again go to advacned settings that configured in second step under publishing and save them. If you get any error, come back after some time and save settings.

Once you are done with saving, under publishing edit your custom domain and set redirection option by putting tick mark as shown in picture.
If you have any trouble in following any step, put a comment that helps me to catch you back.

How to Add Adsense Ads In the Middle or Anywhere inside Blogger Posts

In a previous post we saw how and where we can place Adsense ads on our blog; however, these methods would only work when we place the ads on predetermined and fixed locations. For posts area, the most common places are below the title, at the beginning of the post or at the end of the post.

But what if we want to display an AdSense ad in the middle of a post?

We can manipulate the location of the ads to be displayed by adding a script inside the template and using a tag inside our post to where we want the AdSense ad to appear. Once added, we can place the ads anywhere, be it between paragraphs or in the middle of the content etc.

Manually inserting Adsense ads in the middle of posts in Blogger is pretty simple, just follow these steps below:

Before proceeding, it is recommended do backup your template (go to Template > click on the Backup/restore button)

Step 1. First thing we need to do is to "parse" the AdSense code, in other words, convert it to plain text. Then go to Template, click on the Edit HTML button, click anywhere inside the code area and look for this tag (CTRL + F):

<data:post.body/>

Note: you may find it several times, but we need to stop at the second one or if you can't see any changes, test the third one

Screenshot

Step 2. Replace the <data:post.body/> tag with this code:

<div expr:id='"adsmiddle1" + data:post.id'></div>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div style="clear:both; margin:10px 0">

</div>
</b:if>
</b:if>
<div expr:id='"adsmiddle2" + data:post.id'>
<data:post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementById("adsmiddle1<data:post.id/>");
var obj1=document.getElementById("adsmiddle2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

Step 3. Put the converted Adsense code to where you see the  annotation, then save the changes by clicking on the Save template button.

Note: For centering ads, add the center tag before and after the AdSense code, like this:

<div style="clear:both; margin:10px 0">
<center>

</center>
</div>

Step 4. When you create a New Post, add this tag inside the HTML section to where you want the Google AdSense ads to appear:

For example:

<div>This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text.</div>
<div>This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text.</div>

Screenshot

Note: If you don't add the label to bring up the ad, then the ad will appear below the title by default.

And you don't have to worry about violating the Google's Terms of Service because applying this method we are not changing the structure of the ad.

online HTML to XML parser | Blogger Any Ads code converter | escape tool

This online converter will convert your adsense,chitika, adbrite and any HTML code into XML coding which are compatible with the blogger templates.

This Adsense Parser / escape Online tool is Very Cool. Instead of Manually parse adsense code you can easily conver any html code to xml format. This tool are very easy and accurately escape tool which are hassle free parse the any html code. How To use ? when you enter html code in to above box parse code will be generated automatically just copy and past this code to your blogger use.

Adsense parser will make the google adsense, chitika, infolink, adbrite, adsforindian ad code converted to Encoded HTML code for adding in your blogger templates. Blogger templates don't allow html code in to xml templates so this tool are very important for every blogger user.

If you have a website or blog then you always want to prevent users and other bloggers from copying contents from your website or blog.You may be written an article with great efforts and lots of research and other peoples or bloggers just copy paste it on their websites or blogs.To prevent such type users and bloggers from copying content from your website i will show you a javascript trick to disable right click on your website or blog with stylish image.So let's started without waisting the time.Follow my instructions carefully:

Screenshot:

First of All Login to your Blogger Account

Now Go to Blogger Dashboard >>Template>>Edit HTML

Press CTRL+F and Find </head> tag in your template.

Copy the following javascript and paste just above the </head> tag.

<script type='text/javascript'>
var DADrightclicktheme = 'Dark';
var DADrightclickimage = 'http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIkR8gHGv2JIy_f3isOjmYNRIGuyHJJXXSprt3ECROYk8lC7E8z5PTUgKhLEuzVa8jW2lbo6EDefu5-GlSqvp1UOZ4W_d2NwblXYaXkIajbqx-_9LMRPmx60NCZsoBoG3zZnuwjG3tcSX8/s1600/No+Right+Click+copy.png';
</script>
<script type='text/javascript' src="https://sites.google.com/site/antictrlu/DEBLIZER/AntiCopas.js"> </script>

Now Save your template and Visit your blog.

5 Cool Recent Post Widgets for Blogger

For bloggers that pride themselves on always staying up-to-date with new content, a recent post widget for Blogger can be an invaluable tool. A recent post widget for blogger is in many ways similar to a 'breaking news alert' that journalists love to use during their reports, providing the most recent and relevant posts that you have to offer.

Adding a recent post widget for Blogger helps to reduce the dependency on email marketing, because you don't have to send out an email just to let people know you made a new post. Instead, it updates automatically for everyone to see. You can then use this information to design scheduled email newsletters, and take advantage of what's often referred to as the 'Twitter effect' where audiences will regularly check back on your site for the possibility that new posts are available. Without this, you force people to do run their own search for information and content, increasing the likelihood that they'll leave the site and hurt your bounce rate.

Once you've managed to attract visitors to one of your posts using the recent post widget for Blogger, it will continue to act as an accessible secondary resource to navigate around your site. That way, you can avoid having them sifting through old content that might be outdated. If you'd rather show off some of your best posts instead of your most recent posts, you can do that instead, or add that feature to the bar with just a few alterations.

Apart from looking great and taking up minimal space, there are too many benefits for you not to have a recent post widget for Blogger. The best part about these add-ons is that they come in a wide variety of designs that will fit any theme. If you're interested in adding a widget to your site, here are 5 cool recent post widgets that might catch your eye and fit perfectly with your Blogger template:

Style #1

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://softwaresnomi,blogspo,.com/2015/05/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: 5px -5px 0px 0px; border-radius: 100%; padding: 3px;background: #fff}
.recent-posts-container {font-family: 'Ubuntu Condensed', sans-serif; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px; }
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;min-height:50px; list-style-type: none; margin: 0px 5px -5px 5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>

Style #2

<div class="recentpoststyle">
<script src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts.js"></script>
<script>
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts">
</script><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://softwaresnomi,blogspo,.com/2015/05/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none; color: #49A8D1;}
.recentpoststyle a:hover {color: #000;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;}
li.recent-post-title { padding: 5px 0px;}
.recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;}
.post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
.recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}
</style></div>

Style #3

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://softwaresnomi,blogspo,.com/2015/05/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding:2px;width:65px;height:65px;float:left;margin: 0px 10px 10px; background: #fff; border: 1px solid #69B7E2;}
.recent-posts-container {font-family: 'Oswald', sans-serif; float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin-bottom: 5px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 15px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;padding: 4px 10px; border-radius: 100%;}
.recent-posts-container a { text-decoration:none; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px; }
.recent-posts-details a{ color: #777;}
</style>

Style #4

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://softwaresnomi,blogspo,.com/2015/05/5-cool-recent-post-widgets-for-blogger.html">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
.recent-posts-container {font-family: 'Oswald', sans-serif; float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #4DACE3;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}
.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #4DACE3;}
</style>

Style #5

<script style="text/javascript" src="https://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://softwaresnomi,blogspo,.com/2015/05/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}
.recent-posts-container {font-family: 'Gloria Hallelujah', cursive; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}
ul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px; border-top: 2px solid #FCD6CB;}
ul.recent-posts-container {border: 2px solid #FCD6CB; }
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #616662;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #888;}
.recent-posts-details {padding-bottom: 5px;}
a.readmorelink {color: #4DACE3;}
</style>

How to Add Recent Posts Widget on Blogger

Want to add one of the styles above? Just follow the following steps below:

Step 1. Log in to your Blogger dashboard and click on your blog
Step 2. Go to "Layout" and click the "Add a gadget" link on the right side
Step 3. From the pop-up window, scroll down and select the "HTML/JavaScript" gadget:

Step 4. Paste the code of the chosen widget found below it.
Step 5. Hit the "Save" button... and that's it!

Keep Your Blog Updated

Using a recent post widget for Blogger can truly benefit you and improve your skill as a blogger. As you can see, these designs can look great on Blogger sites, but they do act a little bit like a progress report for the author. If you start to fall behind, the dates on your recent post widget will definitely give you away.

Set a schedule and make sure that you are making regular posts on the blog. These posts will be automatically updated on your widget and readers can view this information whenever they want. Add your recent post widget for Blogger on the every page of the blog or in your template so that these posts can encourage others to continue reading, thus increasing the total time spent on your site.

If you're running a blog in blogger platform, you should notice, sometimes your site is redirected to local domains. I mean your site is redirected to country specific URL. But it doesn't happen in all countries. Maybe 15 - 20 countries have their own blogger domain. But Google will implement the local domains for blogger blogs in other countries very soon!

Let's give me an example:

You know the URL of Marks PC Solution is - http://softwaresnomi.blogspot.com

If you're Italian you will see my site's URL as- http://softwaresnomi.blogspot.it

A Canadian will see my site's URL as - http://softwaresnomi.blogspot.ca

An Indian will see my site's URL as- http://softwaresnomi.blogspot.in

Okay fine! Blogger has its own local domains for different countries. But what's wrongwith this country specific URL? There are a number of problems:

Your social stats (+1, Likes, Tweets) may fall dramatically due to the variations in domain.

Your search ranking might be affected.

If blogger is banned in a country with the help of local domain, your site can't be visited from there!

Though Google says, they are trying to minimize the negative consequences of hosting blogger. But why are you waiting for Google's effort? You can force local domains to redirect to .com version of your site with a simple code!

Prevent Blogger's from Redirection:

Officially Google never mentioned any permanent way to stop redirecting. But it said if you type /ncr just after the domain name for example- http://softwaresnomi.blogspot.com/ncr, then it will not redirect to your local domain.

And if you want to do this for individual post then it should be like that:

http://softwaresnomi.blogspot.com/ncr/exaplepage

Anyway, as a blog master your shouldn't let the visitors follow any boring way to prevent redirection. Because you can control the redirection by the code below! Okay let's try:

Make sure you're signed in to your blogger's control panel I mean design or dashboard.
Now go to the template option. (Backup your template if necessary)
Click on Edit HTML. Now you can see the code of your template.
Hit on the template box and Press Ctrl+F to enable search within the code box.
find the <head> of your template and then copy the code below and place it just below the head tag. (Look at the image below)
Save the template. Done!

<script type='text/javascript'>
var blog = document.location.hostname;
var slug = document.location.pathname;
var ctld = blog.substr(blog.lastIndexOf("."));
if (ctld != ".com") {
var ncr = "http://" + blog.substr(0, blog.indexOf("."));
ncr += ".blogspot.com/ncr" + slug;
window.location.replace(ncr);
} 

</script>

Prevent your blog from redirecting by a simple code

From now and then your visitors will only be able to visit the .com version of your site. I mean like that: http://softwaresnomi.blogspot.com.

You can also test whether it works or not. Type http://softwaresnomi.blogspot.it in your browser. But it will redirect you to http://softwaresnomi.blogspot.com. Also check this for your site.

Removing the Code:

I don't think it is necessary. For any reason, if you are reluctant to use this code, follow the steps above again. And then at the 5th step, delete the code and save your template. Or if you have a backup of your template, you can also restore it. But deleting the code is much easier.

What about the Registered/ Custom Domain?

If you blogger blog is registered I mean if you have a custom domain like .com or .org you don't need implement this code. Because the redirection is not applicable for a site with custom domain.

What happened if blogger is banned in a country?

Naturally when blogger is banned by the Govt. of a country the visitors from that country will not be able to see your site. But they will be able to visit the .com version of your site by using /ncr just after the domain. But if you use the above code in your site, visitors will automatically be able to visit your site!

I think now you understand the importance of using this code . . . :)

Software Download

Pages