Teknologi Android

Moving from blogger to wordpress has quite lots of advantages ranging from better SEO to freedom to do ‘whatever’. That’s not the main issue here and I suggest you read this post if you’re wondering whether you need to use wordpress or blogger. If you’ve already made up your mind and want to move your blog posts and comments from blogger to wordpress without breaking anything, read on.
We’re surely achieving four major aims by doing this:

1. Moving all blog posts and comments

2. Maintaining all links without generation any error 404

3. Retaining feed subscribers, posts facebook likes and tweets

4. Maintaing your traffic and google pagerank

Seriously, importing your blog posts from blogger to wordpress and so simple and you should be done in just a few minutes if you followed everything correctly. Hey, I’m assuming your blogger’s blog is already hosted under a custom domain, right? If you’re still using a blog spot sub domain, it might be a bit difficult achieving all the four goals set above. The only thing you can do in such case is to redirect your blogspot site to your new domain on wordpress but this isn’t even ideal. The best way to migrate is when you already have blogger’s blog pointed to a custom doamain, the domain you’re gonna be using for your wordpress site.

You still don’t understand? Well, my blogspot site was www.doncaprio.com, ok? And I chose to move my stuffs from blogger to wordpress still using the same www.doncaprio.com. All the goals set above would have been impossible to meet if I was using doncaprio.blogspot.com, the only thing I could do was to redirect traffic from doncaprio.blogspot.com to www.doncaprio.com.

The move is super easy if you already have your blogspot site running on a custom domain for a long time.

Alright, enough of the story and back to the real business!

1. If your blogspot site is using the same domain you want to use for your new wordpress blog, go to blogger settings and revert back to publishing under blogspot sub doamin.

2. Set your DNS entries to point to your hosting account and Install wordpress. It’s easier doing it using the auto installer on your cPanel. Log in to cPanel and locate Fantastico Deluxe, Simple Scripts, Elephante Installer or any other one-click installer provided by your web host.

3. From your WordPress Dashboard, go to Settings > Permalinks and then select Custom Structure option. Paste the following value next to it and save changes.

/%year%/%monthnum%/%postname%.html

The main essence of this is to keep your permalinks intact, making them look like blogger URLs. Personally, I won’t advice you to use something different at this time but you can definitely change it later. I’m not sure I’m gonna change mine because it means reverting facebook like counts back to zero whereas I have a single post with almost 700 facebook likes! :) I don’t wanna lose that :(

4. The next step is importing your blog posts from wordpress to blogger. Go to Tools -> Import options and select Blogger options.

5. A pop-up box will appear, click on Install Plugin to install the importer plugin in WordPress.


6. Click on Activate Plugin & Run Importer. You’re asked to grant access to your google account. Click on Grant Access and you may be prompted to login to your google account if you’re not already signed in.


7. Once you grant access, you will be taken back to the Blogger importer on WordPress. If you have more than one blog on your Blogger account, you will see all of them listed here. Just click on the import button next to the blog that you want to import into WordPress.


8. Now you have to wait for some minutes because the time it’s going to take depends on the number of posts you have. I imported 271 posts and over 1000 comments in less than five minutes.

At this point, you should note that only blog posts and comments are imported, your static pages are not imported. You have to do this manually.

If the import button changes to continue, hit the button till the process completes and Set Authors is displayed on the button.

9. You can now refresh your wordpress blog and see your posts on blogger show up. Wait a minutes, we’re not done here.

10. In step 3, we configured wordpress permalinks to look similar to blogger permalinks in order to retain traffic and search engine optimization, right? There’s likely to be a little problem though – wordpress links may look a bit longer than your original blogger permalinks.

http://www.yourblog.com/2011/how-to-move-you-blog-posts-from.html

It’s gonna look like this when it becomes a wordpress permalink:

http://www.yourblog.com/2011/how-to-move-you-blog-posts-from-blogger-to-wordpress-without-losing-traffic.html

Both permalinks have the same structure but the slug is different and we must make it look exactly like it was on blogger in order to make search traffic point to that very blog post instead of your visitors getting Error 404 (Not Found).

Copy the code below to a notepad and save it as fixlinks.php

<?php
require_once(â??wp-load.phpâ??);
$res = $wpdb->get_results(â??SELECT post_id, meta_value FROM $wpdb->postmeta WHERE meta_key = â??blogger_permalinkâ??â??);
$wpdb->print_error();
foreach ($res as $row){
$slug = explode(â??/â??,$row->meta_value);
$slug = explode(â??.â??,$slug[3]);
$wpdb->query(â??UPDATE $wpdb->posts SET post_name =â??â?? . $slug[0] . â??â?? WHERE ID = $row->post_idâ??);
$wpdb->print_error();
}
echo â??DONEâ??;
?>

11. Now upload this to your public_html or the folder in which your wordpress blog is installed. Run the script like this: http://your-blog.com/fixlinks.php

The moment you do this, you should see DONE written on your computer screen. That’s all, the permalinks are now fixed.

You can run a search on google for your old blog posts and click on it to verify if everything is working fine.

Moving Your Blogger Feed Subscribers Over To WordPress

If you’ve been using feedburner on your blogger’s blog, all you need to do is to log in to your feedburner account and edit feed details with the new wordpress RSS feed. Your subscribers count remain intact but it’s a different case if you haven’t been using feedburner.

If you’re not using feedburner, you’re going to redirect your old blogger RSS feed address to WordPress RSS feed URL by editing your .htaccess file and pasting the following piece of code on the first line:

#ATOM Feeds
RewriteRule atom.xml feed/atom/ [L,R=301]
RewriteRule feeds/posts/default feed/atom/ [L,R=301]
#RSS FEEDS
RewriteRule feeds/posts/default?alt=rss feed/ [L,R=301]
RewriteRule rss.xml feed/ [L,R=301]
#Comments Feed
RewriteRule /feeds/comments/default comments/feed/ [L,R=301]
RewriteRule /feeds/comments/default?alt=rss comments/feed/ [L,R=301]

Retaining Facebook likes, tweets and other sharing counts

If you intend to change you sharing counts, then you won’t have to change your permalinks. I wanted to change my permalinks to a much nicer one but realized my facebook likes on blog posts reverted back to zero and there was absolutely no way to fix it despite running frantic searches on google.

Removing Your Old blogspot Site From Google Index

First and foremost, I must warn you never to delete your blogger’s blog because your blog images are still hosted on blogger. Notwithstanding, you must remove your blogspot site from google’s index. Why? Having similar contents on the same blog can get you penalized by google and drop your search engine ranking. To remove your blogspot from google, paste this code in the head section of your blog

<meta content=â??NOINDEX, NOFOLLOWâ?? name=â??ROBOTSâ??/>

Now you’re done. Log in to your wordpress blog, get used to the interface and install cool plugins!

Know Issues With Migrating Blog Posts From Blogger To WordPress

While importing my blog posts, I encountered a problem which someone else might come across and that was on Step 6. I saw exactly this error:

The page you have requested cannot be displayed. Another site was requesting access to your Google Account, but sent a malformed request. Please contact the site that you were trying to use when you received this message to inform them of the error. A detailed error message follows:

The site “http://example.com” has not been registered.

The fix for this is registering your domain with google to access all google’s services by following this link: https://www.google.com/accounts/ManageDomains

- Enter your domain name in the box provided, ex., doncaprio.com

- Click on Manage Domain

- Select Alternate Method which is much more easier if you don’t want to mess around with DNS settings.

- You wil be given an HTML file to upload after which you will click the Verify button.

- Add your domain name and description and save

- Save OAuth key and OAuth secrete for your future reference

- Now you domain is registered

If you are one of those with long page titles, you sure won’t like the way your blog shows up on search results with your post title looking so wierd.

By default, blogger’s posts title always places your whole site title before the real post title. If your site title is too long, your real post title containing your keywords might not show up on search results.


Now check this example: here’s a blog with site title as “Tips And Tricks on Building A Better Blog, SEO and Online Money Making” and a blog post titled “How to Make Money Reading Mails“

By Default, the Post title appears like this:

(Tips And Tricks on Building A Better Blog, SEO and Online Money Making : How to Make Money Reading Mails)

But after going through this tutorial, the title will look like this:

(How to Make Money Reading Mails | Tips And Tricks on Building A Better Blog, SEO and Online Money Making)

The second title definitely looks better as the subject matter of the blog post is easily seen. This is also good for search engine optimization. This blogger title swap is a must-do hack for your blog.

1. To change the title, Go to “design”

2. Select “Edit HTML”

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

If you can’t find that, search for this:

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

4. Replace completely with:

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

5. Save your template.

6. View your blog and watch the title swap change your post title format

Now this won’t reflect immediately on search engines as your indexed pages will only be updated when search bots come visiting.

If you’re a blogspot platform blogger and want to show HTML source codes in your blog posts then you must had a hard time how to make it done.


For fix this you have to take two simple steps,

Step 1

You have to add a special code inside your blogger template. Go to your blogger Dashboard > Layout > Edit HTML. Now hit CTRL+D on your keyboard and search this tag,


Now you have to add this code above that code,

Source BlogKori.Com : How to show HTML/java codes in blogger(blogspot) blog posts with table + Raw HTML converter | BlogKori
Under Creative Commons License: Attribution Share Alike

pre
{
background:#efefef;
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000 }
pre:hover {
border:1px solid #efefef;
}
code {
font-size:120%;
text-align:left;
margin:0;padding:0;
color: #000000;}
.clear { clear:both;
overflow:hidden;
}

Now it will look something like this,
 

After you done it, click the “Preview” button to see if your blog shows or not. If everything’s okay, then click, “Save template“

Step 2

Now each time you create a post and you need to add some HTML codes inside your post, you have to convert it into escapable characters. For this go to this tool called Quick escape and insert your code. Click, “Convert to escaped character” the converted code will be different than the original.

Now create a new blog post and add the converted code. You have to enclosed the code with a “pre” tag(marked as blue) For this I’ve added the same code twice. One normally and the other one with the hack.


Publish your post and see the magic! The normal code showed up with the effect but the hacked on remained intact inside the table.


Please leave a comment with your response and any suggestion for this blogger hack. If you run into any trouble, feel free to ask me a question. Please do share/save this page if it helped you.

It has been a long time since @Twitter released the @AnyWhere Developer Tool. AnyWhere allows you to seamlessly integrate Twitter into your site using a few lines of JavaScript. You can read more about it at  @AnyWhere Developer Page. Tweet Box is one such @AnyWhere Application, which allows you to add a 140 char Tweet Box onto your blog.

Here is a screen shot of how the Tweet box appear on my Previous Post.

Hope that now you got a good idea of how this works, If not scroll down to the bottom of the post and see it in live action :)

How to add the Tweet Box on a Blogger Blog?

1. Go to the @AnyWhere Developers Page and create an Application there with your blog details.

Make Sure that you have checked the Read & Write Option when you Register your Application

2.When you complete the signup process, you will get some JavaScript codes, with a unique API Key

Copy out the JavaScript from there(the code in the red box) as shown in this Screenshot.

3.Now Login to your Blogger Dashboard and navigate to the Edit HTML Tab under Design and “Expand your Widget Templates”
4.Look for

</head>

and paste the copied Twitter JavaScript just above that line and save the template. 
5.Now look for 

<data:post.body/>

and immediately below that paste the following JavaScript Code and save your template. (Editable parts are shown in red) 

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

<div id='bp_tweetBox'/>

<script type='text/javascript'>

bp_tweet_link=&quot;<data:post.url/>&quot;;

twttr.anywhere(function (T) {

T("#bp_tweetBox").tweetBox({

width: 560,

label: "Share the L❤ve  & Retweet",

defaultContent: &quot;RT @bloggerplugins <data:post.title/>&quot;+&quot; &quot;+bp_tweet_link

});

});

</script>

</b:if>

Now you should see the Tweet Box on all of your post pages
Currently, this doesn’t do any URL shortening . You can expect that 
it my next post. I will  also try to post about the other @AnyWhere 
features soon :) 

Among the two popular commenting system Intense Debate was there, with millions of users. Intense Debate comments basically looks good with cool features and plugins. However, there is a little drawback in the commenting system and that is lack of nofollow option. Since spammers take advantage of dofollow comments blog for a link back, why do we need to give a backlink for a spammer? Literally you shouldn’t allow that. So, here is a little tweak to make both the avatar link and the link that comes inside the comment box nofollow.


To disable nofollow links, I am using the script made by Thaya Kareeson using his jQuery code to add nofollow to external links. Download this javascript and upload this on your own server. If you dont have your own server, you can use my link.

<script src='https://sites.google.com/site/bloggermint/nofollow.js' type='text/javascript'/>

For WordPress – Go to footer.php and paste the code before </body> and save it
For Blogger – Go to Edit Html and paste the code before </body> at the end of the template and save it.

When I was looking for my next blog post, I came around a website, which has an opacity header in fixed position. The next thing came in my mind was to come make that same feature happen in Blogger. So to make that happen I used opacity script developed by David Walsh and I modified the script to make it work on Blogger platform. This tutorial will let you to add a header with opacity using jQuery and you can its easily editable to add more options within this feature and before heading into the tutorial, take a backup of your template. So here we go.

Step 1: Login to your Blogger dashboard and navigate to Layout > Edit HTML. Now check the “Expand Widget Templates” and searc

<head>
<script src='http://sites.google.com/site/bloggermint/jquery-1.4.2.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
(function() {
//settings
var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
var topbarME = function() { $(&#39;#opacitybar&#39;).fadeTo(fadeSpeed,1); }, topbarML = function() { $(&#39;#opacitybar&#39;).fadeTo(fadeSpeed,fadeTo); };
var inside = false;
//do
$(window).scroll(function() {
position = $(window).scrollTop();
if(position &gt; topDistance &amp;&amp; !inside) {
//add events
topbarML();
$(&#39;#opacitybar&#39;).bind(&#39;mouseenter&#39;,topbarME);
$(&#39;#opacitybar&#39;).bind(&#39;mouseleave&#39;,topbarML);
inside = true;
}
else if (position &lt; topDistance){
topbarME();
$(&#39;#opacitybar&#39;).unbind(&#39;mouseenter&#39;,topbarME);
$(&#39;#opacitybar&#39;).unbind(&#39;mouseleave&#39;,topbarML);
inside = false;
}
});
})();
});

</script>

h for the code <head> and replace it with the below code

 
In this step you can remove the jQuery script, if you have already initialized it on your blog.
Step 2: Now we are going to add the CSS code, which is responsible for appearing the opacity header on the top. So search for the code ]]></b:skin> and replace it with the below code

#opacitybar {
 border-bottom:1px solid #ECF1EF;
 background:#151715;
        font-color:#000000;
 padding:10px 20px;
 position:fixed;
 top:0;
 left:0;
 z-index:2000;
 width:100%;
}
]]></b:skin>

Here you can change the color of the header bar by changing the background value.
Step 3: At this stage, we are heading to insert the functions to be visible on the header bar. So here I inserted basic navigation link to be seen inside the header bar, but this can be changed according to your own ideas. Search for the code <div id=’header-wrapper’> and replace the below code before <div id=’header-wrapper’>

<div id='opacitybar'>
 <a href='#'>My Projects</a> |
 <a href='#'>Freebies</a> |
 <a href='#'>Tutorials</a> |

</div>

Save the template, to see the changes. If you have any troubles in making it work on Blogger platform, drop in your comments.

Facebook comment box is one of the useful tool for bloggers to increase conversations. Recently Facebook has launched many social plugins for bloggers and web developers and one such is improved Facebook comment box. So here in this post I will teach you how to add/integrate Facebook comment box to blogger in simple steps. Before getting into the process I recommend you to back up your template and previous comments in blogger wont be visible if you use Facebook commenting system.


Step 1: Visit Facebook developer page and enter your blog name, URL and click on Create application.

Now copy the App ID and save it in a notepad
Step 2: Login to you Blogger dashboard and navigate to Layout > Edit HTML and check on Expand Widget Templates. Search for the code <data:post.body/> or <div class=’post-header-line-1′/> and paste the code below <data:post.body/> or <div class=’post-header-line-1′/> and save the template.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><img alt='' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPa6mawqZMMfCOP-KHuqbC90KCQAjSpttmjxdfiY7pbWl4Mjc3K4GJYF6NpHuYq8p7Juit6CvDppxnP3oM7Cat32T4ie0Jrk5uBs3kX5JTRYQhVrlp92jKGObCYbaStfbrqFHnyhQC4odB/s1600/cmds.png'/></p>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: &#39;APPID&#39;, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(&#39;script&#39;); e.async = true;
e.src = document.location.protocol +
&#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>
<fb:comments/>

</b:if>

Change the APPID on the code with your APP ID provided from Facebook and save the template.
Step 3: Now you need to hide default blogger commenting system. So navigate to Settings > Comments and select hide and save settings.
Live Demo
Note: Using Facebook Comments will hide your blogger comments. So use this comment box wisely.

Having a Shorter Version of your Blog Post’s URL is much useful especially when sharing links with others. For example Take a look at this Link http://bit.ly/aJMJNI . If you visit that link, you will end up right back here. This URL shortening was done with the Help of the Bit.ly API. Bit.ly is one of the most reliable URL shortening services on the Web. Wordpress has got its own URL shortener namely WP.me. If you are interested in providing Short Sharable URLs of your Blogger Posts to your readers, then read on. Demo is present on the post page.

Template Tweaking to Add the  Short URLs

1. Login to your Blogger Dashboard and navigate to Design > Edit HTML
2. Click on the Check Box which says “Expand Widget Templates.
3. Locate
   

   </head>

   and add the following JavaScript Snippet just above that

   <script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=tweettrackjs&amp;apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>
   <script src='http://blogger-plugins.googlecode.com/files/bloggerplugins.org.bit.ly.short.url.generator.js' type='text/javascript'/>

4. Now Locate
   

   <p class='post-footer-line post-footer-line-3'>

   Or if that is not there then find
   

   <div class='post-footer-line post-footer-line-3'>

   Or if that is not there then find
   

   <data:post.body/>

   and place the  following code  just below any of these lines[whichever is present in your template].
   

   <div id='bp_shorturl'>
   <form expr:id='"bp_short_holder_" + data:post.id'/></div>
   <script type='text/javascript'>
   Bloggerplugins_shortener.init(&quot;bp_short_holder_<data:post.id/>&quot;,&quot;<data:post.url/>&quot;)
   </script>

Save the changes and now you should See a Sharable Short URL below each of your posts .If you want to tweak further, then read on.

Optional Tweaks

1.Styling the Share Link
Locate the following line in your template

]]></b:skin> 

and just above that line add

#bp_shorturl {

color:#666;

font-size:11px

}

#bp_shorturl input {

color:#999;

border:inset 1px #CDCDCD;

padding:1px 5px;

}

and save.

2. Display the Short Link on Post Pages Only
If you want to restrict the Short URLs to your post pages, then wrap the codes mentioned in Steps 1 and 4 within Conditional tags like :

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

<script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=tweettrackjs&amp;apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>

<script src='http://blogger-plugins.googlecode.com/files/bloggerplugins.org.bit.ly.short.url.generator.js' type='text/javascript'/>

</b:if>

and

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

<div id='bp_shorturl'>

<form expr:id='"bp_short_holder_" + data:post.id'/></div>

<script type='text/javascript'>

Bloggerplugins_shortener.init(&quot;bp_short_holder_<data:post.id/>&quot;,&quot;<data:post.url/>&quot;)

</script>

</b:if>

3. If you have your own Bit.Ly Login and API key, then you can replace them in the code of Step 1(tweettrackjs and R_7e9987b2fd13d7e4e881f9cbb168f523). Its free to signup and it is advised to use your own login and API because too many API calls on the same login can create an undefined error

If you've decided that you definitely want to remove your blogger navbar, it's actually a very simple process that any non-technically-inclined person can accomplish with ease. Just follow these steps:

1. Login to your blogger dashboard.
2. Click "Design"
3. Click "Edit HTML"

4. Find the BLUE code you see in the image to your right. The code will be quite near the top of your HTML section, you shouldn't have to scroll very far at all. The blue code should definitely be there, but the data box you see may not be, depending on where your template came from.
5. ADD the code you see in red precisely where you it see it in the image to your right. If you want to copy and paste it, do so from the bold text you see below:

#navbar-iframe {
display: none !important;
}

Preview It First!

Use your preview button before you click save! If you like what you see, go ahead and save.

What happens if I want the navbar back in the future?
Simply go back into your HTML the same way and delete the part you just added. It's really that simple!

every blog in Blogger with the standard orange "B" blogger favicon. Having your own unique favicon is a great way to give your blogger template both a distinct and explicit brand. These small 16X16 pixel images will most definitely help your blog stand out from the rest of the blogspot blogs.

What is a Favicon?
A favicon is a small 16X16 image located at the top of your browser in the url bar.

How to Change your Favicon

1. First go to Layout >Edit HTML in your Blogger Dashboard.
2. Backup your existing template before making any changes!
3. Place the code below directly below the </head> tag in your template.

<link href='http://bsaves.com/HowHero/Blogger%20Templates/moonspot/images/favicon.ico' rel='shortcut icon' type='image/vnd.microsoft.icon' /> <link href='http://bsaves.com/HowHero/Blogger%20Templates/moonspot/images/favicon.ico' rel='icon'/>

4. Now save your template.
5. Once your template is saved view your blog and make sure to refresh the page and delete your cookies.

Creating your own Favicon

1. Replace the image URL (2X) with your own 16 pixel by 16 pixel image hosted on the internet.
http://bsaves.com/HowHero/Blogger%20Templates/moonspot/images/favicon.ico

1. You can host your own favicon blogger image at sites such as ImageShack; PhotoBucket; Flickr; Fileden ; etc.
2. Check out this Favicon Generator Tool which allows you to upload an image and it will format it for you!