Wordpress & Blogger Templates

How to Fix the "Sharing is Caring" Icons in Community Blogger Template

2009-11-20T02:10:00.000-08:00

This template is really cool. But weeks ago the 'Sharing is caring' button turns out having a problem. The reason why the icons does not appear because its using a free image hosting that was presently expired. To fix this problem you must host the Sexysprite.png image with your own hosting service. Or you can use my hosted Sexysprite.png image in this link: http://lh6.ggpht.com/_MCXYw12Ztzw/SwZgfRNWtiI/AAAAAAAAA5U/MDghewifFNU/s800/Sexysprite.png. But if you prepare to host it with your own hosting service follow the steps below.

Download the image here and extract it.
In the extracted zip file select the Sexysprite.png image and upload it to your hosting service and get the image link
Now, login to your Blogger account. Go to your blog Layout > Edit HTML and find the codes showed below:

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {background:url('http://lh6.ggpht.com/_MCXYw12Ztzw/SwZgfRNWtiI/AAAAAAAAA5U/MDghewifFNU/s800/Sexysprite.png') no-repeat !important;}

After you find the codes change the red hightlighted link with your image link then click Preview if it is working and save.

NOTE: On the Edit HTML the quotation mark ' appears '&#39' with a semi colon ' ; '

Update:

12/10/09: The images of the "Sharing is caring" that you about to download here is actually red in color and Community Blogger Template uses the same images except that it was blue. But in this tutorial we just need the Sexysprite.png image not the sharingsexy.png that is red in color. Community Blogger Template already uses a blue color "Sharing is caring" the sharing.png and we are not going to change that image, only the Sexysprite.png image. Below is an image to understand it more.

GWS965R7X8PV

Community Blogger Template

2009-09-22T20:47:00.000-07:00

Click the image for Demo & Download

Community Blogger Template is designed by BieTemplates. The wide screen layout of is great. The colors is very appealing and has different features. This template is suitable for portfolio project or magazine type blogs.

Features:

Automatic thumbnail and read more
Bookmarks post icon
RSS Subscribe
Twitter update
Banner advertisement
Adsense ready
Three column
Three column at lower section
Navigation menu

How to directly embed the "Automotic Read More" option to your template?

2009-08-23T23:44:00.000-07:00

Recently on my post Types of 'Read More' option in blogger blogs I had discussed that the Automatic Read More option uses a javascript and needs you to host it. Now we will do some trick to let our script embedded directly to our template that makes the script no need to host.

What is the advantages of doing this trick? It saves our time to upload the script to our hosting account. Also, because the script is not hosted, it speeds up the page load of our blog. Does it means if I hosted the script my blog will run slow? No, this is only for a prevention. Why? It sometimes happen (the slow loading) when the host is some kind of busy like doing maintenance and some other related issues.

How to do this trick? Just follow the instructions below: (FireFox Mozilla is the browser that was used in the illustrated images below)

In your Dashboard, go to your template Layout, click to Edit HTML.
IMPORTANT: Now before editing our Template, please make a backup of your template so if something wrong happen we can restore the original template just like it was before. To do this click the Download Full Template like illustrated below, (click the images below to enlarge)

and Save.

Now download the automatic-read-more-script+postbodycode.zip, extract it and open the text file.
Then search the following codes in your template, don't forget to expand your template. For easy search press Ctrl + F in your keyboard and type the code below (the </head> or <body>) and press enter.

</head>

<body>

When you find it, copy the script below the Automatic Read More Script: in the automatic-read-more-script+posrbodycode.txt text file that you opened and paste it between the </head> and <body>.
Then again search following codes below. For easy search press Ctrl + F and type the code below (I recommend the <data:post.body/>) and press enter.

When you find it replace the red highlighted code with the codes below the Post Body Code: in the automatic-read-more-script+posrbodycode.txt
Now Save your template and your done.

For the preview of what the automatic read more option that we just added look like check this blog homepage.

You can also customize the size of the image thumbnails and how long the summary of your article will appear on your homepage. Just search our script that we embedded and find the couple of codes below and change the number highlighted in green for the image thumbnails size and the number highlighted in blue for the length of article summary for whatever would you like.

</script>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 390;
summary_img = 390;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

If you have some expertise in editing CSS (short for Cascading Style Sheets) to change the appearance of the Read More option you can use the codes below:

a.readmore { /*your prepared style here*/ }

Types of "Read More" option in blogger blogs

2009-08-16T02:55:00.000-07:00

I have seen many topics about adding "Read More" option in blogger and some of them are really difficult to follow. And I categorize them in two. One is the "expandable" and the other one is the "automatic."

What is the "Expandable" type? "Expandable" type is the type that is little too tricky. It needs you to add some codes in your blog template in the upper and lower section of <data:post.body/>. It also needs you to add some other codes in the Post Template section of your blog settings under the Formatting area. It looks like this:

Write summary here
<div class="restofpost">Write rest of post here</div>

or

<span class="fullpost">

</span>

In the homepage all your post will be summarize. Also in the archive pages and label pages. But this type of "Read More" option has several disadvantages. First is it only summarizes the posts that you added the codes above. It will not apply to others that you didn't added the code. This type is not advisable if you already have 50 to 100 posts. Second is, it happen sometimes when you are editing your post content the codes get lost or erase and that needs you to paste the code again. It happens to me when I was using this type. You can get more information about this type of read more option here.

What is the "Automatic" type? "Automatic" type is the type that once you set it up it don't needs you to add more codes in your post content. It automatically summarize your post in the home, archives and labels page. This type is recommended for bloggers that already have 50 to 100 posts in their blog because it automatically summarizes all your posts. This type is using a script called "summary-posts.js" and you need to host this script but you can use the script that was hosted in Quite Random. You can also find instructions of how to install the automatic "Read more" option there. (Browse to it here)

In my next post I will teach you how to directly add the script right on your blog template to speed up the loading of the script.

Unusual differences of Zinmag Remedy 2.0 to Zinmag Remedy

2009-08-10T00:08:00.000-07:00

Zinmag Remedy blogger template is a very professional looking template. The only problem is that if you don't have any knowledge about HTML editing it is not advisable to pick this professional looking template. It happens to me before, but usually being a blogger we need to adapt the trend.

Zinmag Remedy template is originally a wordpress theme or template and converted by Falcon Hive into a blogger/blogspot template. This template is great and comes with hundreds of features. You can read more about the the template in my post The Zinmag Remedy Blogger Template.

What are the differences of the Zinmag Remedy 2.0 to Zinmag Remedy? The 2.0 version is much easier to customize. Falcon Hive who converted the template said that they fixed every possible SEO issue and improved the ‘h tag’ of the template. They also rearrange the code to make its structure more completely similar to the standard template, the Minima’s structure.

The 2.0 version is 99% widgetized or customized. Like I said, the old version needs you to have HTML knowledge to setup and that's often causes unpredictable error. But for the 2.0 version it is "99% widgetized" all the part from the top navigation bar to the bottom tabber section. So as Falcon Hive said: "you can now wipe out all your worries and just customize Remedy in Page Element section!"

The CSS and template structure of 2.0 version has improved. The new modified template’s CSS code fixes some issues like misaligned image in the ads space on the main page. Modifications on JavaScript/HTML gadget have made also to make customization faster and easier. And lastly, a new layout view is been made. See more to Zinmag Remedy 2.0 page.

So what is the unusual difference to the two version? See the images below. (Click the images to enlarge)

New Version:

Old Version:

Did you see the unusual differences? You notice it in the ‘Carousal Panel’. The new version uses a scrolling image navigation and the old version uses the sliding image navigation. I have notice this unusual thing when I installed the new version on my new blog. Thinking it might be an upload error, I try to upload the new version many times but it don't resolve the problem. So I end up uploading the old one. See my next post for the solution to the problem of 2.0 version ‘Carousal Panel’.

Update:

The differences of two templates here only happens if you use the default hosted javascript files which is been disabled by the host. For best results upload all javascript files located in the js folder to your hosting account. If don't have hosting account you can try hosting it here. It is free to host and to register.

Mini-Hotrod 3 Column Blogger Template

2009-08-04T03:29:00.000-07:00

Hotrod is originally a 2 column Wordpress theme created by Jinsona designs and converted into blogger by Templates Novo Blogger. I saw this template in Templates-blogger.com. But as I experienced the converted blogger version has some problems. It seems OK in the homepage, but if you browse to the individual post, the content of your post is not appearing. It also happens on archive page and label page.

You see, this template is very cool and hot because of the red sport car viewed on its header. Because of its coolness I tried to fix the problems. But as you can I really love 3 column templates, specially the Minibox 3 Column Modified, and this template is a 2 column version. So instead of fixing the problem I thought it is easier if I just combine it to my favorite 3 column template.

As the result the Mini-Hotrod 3 Column Blogger Template was born. This template is a combination of the Minibox 3 Column Modified and the Hotrod. It has the same features of Minibox 3 Column Modified and the coolness and hotness of Hotrod.

Features:

NavBar has been remove
Google Translate Widgets
Live Traffic Feed Widgets
No Right Click Widgets
"Post Title | Blog Title" SEO Trick
"Read more posts filed under + Labels Name" Widget tags
"Title" Widget tags
"Related Post" below each of your posts

You can see the demo here. Download it here.

Minibox 3 Column Modified Blogger Template

2009-07-28T00:45:00.000-07:00

Minibox is a free 3 column blogger template created by James William that was heavily based on the popular Minima template. This template is an XML based. The code uses here is very similar to the structure of the Minima template. It is almost identical in variable names and section identifiers so that people can be familiar with it to modifying the Minibox template code. Minibox is completely compatible with Blogger's drag-and-drop layout manager.

I love this template but as I see and experience this template has three major problems. So I try to correct those errors and made good solutions for that. And it comes out so great. I also added some features to this template. But if you don't want the added features just remove it in the Layout Manager. So enjoy.

Problems that Minibox 3 Column has:

You can't upload it, if you try to upload it some errors occured.
You can't add gadget between the header and the templates body.
The codes is not full coded.

Minibox 3 Column Modified capable with:

You can upload it directly.
You can add gadgets between the headers and the templates body.
The code is fully coded for modification.

Added Features:

Navbar has been remove
Google Translate Widgets
Live Traffic Feed Widgets
No Right Click Widgets
"Post Title | Blog Title" SEO Trick. (Click the image to enlarge it)

"Read more posts filed under + Labels Name" Widget tags. (Click the image to enlarge it)

"Blog Title" Widget tag. (Click the image to enlarge it)

Show a "Related Posts" below each of your posts. Related Posts will only appear in your single posts page. It will not appear in your homepage. (Click the image to enlarge it)

You can download the Minibox 3 Column Modified here.

No Right Click for Blogger/Blogspot

2009-07-24T03:02:00.000-07:00

How to disable right click on Blogger(blogspot)? It is easy to disable the right click option in blogger, we just need to add a javascript code to our page.

Why we do this? We all knew that if we right click to the images and articles (highlighted) in our pages a menu will pop out for many options like copying the links, to save, to open a link to a new tab or window and etc. We want to disable this option to prevent people for copying our blog posts, articles, images and other kind of information owned by you.

How to setup the No Right Click to our blog? Simply, just follow the steps below:

Download the script here and extract the file.
Log in to your account and go to your blogs' Layout. In my blog it looks like this (click to the images to enlarge it):

At the sidebar click Add a Gadget and select the HTML/JavaScript gadget by clicking the plus sign.

Now open your extracted file that you downloaded, the no-right-click-1.txt. Copy the codes there and paste it to your added gadget, just like the picture below:

and Save, and your done.

Now browse to your blogs' home page and test if our codes is working. If it is not working as the way you enter the code, post your comment here and I will assist you.

The Minibox 3 Column Blogger Template

2009-07-13T18:59:00.000-07:00

Minibox is a free 3 column blogger template heavily based on the popular Minima template. This is an XML based Blogger template for newer Blogspot blogs. The code uses very similar structure and almost identical variable names and section identifiers so that people familiar with modifying the Minima template shouldn't have much trouble modifying the Minibox template code.

Minibox is completely compatible with Blogger's drag-and-drop layout manager. The original 2 column version of Minima was written by Douglas Bowman of stopdesign.com. Here's a quote from his website:

The goal was to provide a fresh selection of well-designed and efficiently-coded, standards-based templates that provided solid yet flexible starting points for anyone to use as a design for their new or existing blog.

Download it here. If you're having trouble downloading the template try right-clicking and choosing "Save As". If you're still having trouble post a comment.

This is the first release. If anyone notices any glitches please post a comment and I will try to resolve ASAP.

Alternate colour combinations or slight variations are also likely to follow. If there are any requests, please post a comment and I will take requests into consideration.

The Zinmag Remedy Blogger Template

2009-02-04T03:24:00.000-08:00

This free professional magazine template comes with hundreds of features, so it need skills for customization. Here is the demo for the template before customization (click here) and here after customization (click here).

This template is compatible with Internet Explorer 8, Firefox RC3, Opera 9.6, and Google Chrome 0.3.154.9. This template has 4 columns, gadget ready, 2 navigation bars ready, search box ready, 3 feature content boxes, 2 rss icons ready, 3 ads blocks ready, video space ready, footer gadget ready, and the amazing thing is the great top navigation bar that you must check it out.

You can download it here in a zipped file. Extract it and read the instruction file called installing-zinmag-remedy-Help.txt that will help you to set up the First Header Navigation Bar, the Second Navigation Bar, the ‘Feature Slide Carousal’ on the top of the main page, the ‘Featured Content’ on the top of the main page, the Main Page’s Ads Space, the ‘Video of the day’, the Tabber, the ‘Highlight Reel/ Featured Content’ on the top of the sidebar, the 125×125 Ads, the Email Subscribe button, the Content page’s Ads Space and how to hide article’s content on the main page.

If you want some more information about this template visit here.

The Morning After Wordpress Theme

2009-01-26T07:05:00.000-08:00

Without a doubt, this is by far the best free WordPress theme I’ve yet to come across. Created by Arun Kale, the theme was developed based on a user survey about the features needed in a magazine like WordPress theme. It’s very powerful and setup like a newspaper or magazine.

This theme requires some work or rather creativity from your part too, to utilize it’s full potential. You need to create your own header image, latest post images etc. Don’t be surprised at how vanilla it looks once you install it. Take some time and read through the author’s release notes to understand how to best setup everything. Download it here.

Basic Usage

Once the theme is activated, the first thing you need to do is to create two categories called ‘Asides‘ and ‘Featured’. After that’s done, your home page will be displayed correctly.

Also, for the best results, please disable the visual rich text editor from the Users > Your Profile page in your WordPress administration panel.

The theme also requires some plugins (not mandatory) to enable the extended functionalities.

Plugins Recommended

Customizable Comment Listings
WP-Email
WP-Print

These plugins are all included in the download file but might need to be updated to the latest version. Be sure to check after you install in your plugins area.

Important Note: If you’re running WordPress 2.3+, you’ll want to make a fix to a part of the code. You can find the details here.

To read a more detailed review of the WordPress theme, check out themecritic.com’s nicely done The Morning After review.

The WP-Polaroid Blogger Template

2009-01-26T04:46:00.000-08:00

eBlog Templates is very pleased to announce the release of WP-Polaroid for Blogger! This template is full of cool features and took a long time to convert from the original WordPress theme (by Adii) so the author hopes to appreciate it.

This template is very popular with WordPress users and for good reason. It’s stylish, nicely laid out, and very web 2.0. Not only that, it’s also got the following sidebar page elements built in. It just need to configure in order for them to work properly.

Page elements that needs to configuration:

Flickr photo slideshow area where you can display your personal or random pictures
Mybloglog recent blog readers section (you’ll need a mybloglog account)
Three 125×125 ad spots to help you make money from your blog
Recent posts list
Recent comments list
Two sidebar link lists
Page navigation links in the header
RSS feeds for your posts and comments
A header spot to display your personal photo

Make sure to read through all the steps (here) in order for the template to function on your blog properly. It's free to download, just register. Click here to download.

How To Manage Your Keyword?

2008-09-22T19:47:00.000-07:00

Managing your keyword is very important to optimize your webpage/blog. Here are where to put those keyword:

Title Tags: The most common place where to put keywords is on title tag. The title tag identifies the content of a web page and appears at the top of the browser window. Title tag tells search engines and users what a web page is about. The text in title tag is also what the search engines use when they link back to web pages through the search results.

Meta Tags: The Meta Description tag is often used as the summary text in search results. The Meta Keywords tag is no longer a factor in ranking web pages, but if you use the Meta Description tag you can at least have some influence over how your listing is displayed.

Headings: A heading briefly describes the content of the section that follows it, similar to a newspaper headline. Trying to put your keywords here can also add points to get optimize.

Page Content: Here is where the most obvious place to put your keywords. A piece of advice, don’t over do it to insert your keywords here. Try to write naturally so that your visitors are drawn in to your content. If you do that, more visitors will come to your page. Today there are still many SEO's who fret about the ideal combination and placement of keywords on a page. These SEO's would be better served if they spent more time building quality content.

What Is Gray Hat Search Engine Optimizers?

2008-09-22T19:42:00.000-07:00

Most Search Engine Optimizers (SEO’s) falls into the Gray Hat category. And there are many shades of gray out there. Some Gray Hat SEO's tend to use more questionable tactics and take greater risks.

Other Gray Hat SEO's may not do anything controversial, but may place more emphasis on optimization over content. Gray Hat search engine optimization is all about risk vs. reward. And some Gray Hat techniques may be frowned upon by the search engines, including White Hat SEO’s techniques, but are not necessarily against their rules, while other techniques may be more risky and should be used only after careful consideration.

What Is White Hat Search Engine Optimizers?

2008-09-22T19:40:00.000-07:00

White Hat Search Engine Optimizers (SEO's) focus on building quality content first and search engine optimization second. They like to play by the rules and tend to stay away from techniques that would jeopardize their website's search engine listing.

White Hat SEO's may use technology and automation to build their websites too, but they use it to accomplish different goals. They write content for people, not search engines. White Hat SEO's tend to rely more on their writing and marketing skills to achieve a top ranking, rather than automated programs. White Hat SEO's understand that good search engine rankings take time and don't try to rush results. White Hat SEO's are able to get more inbound links from other websites because their content is considered valuable. When you use White Hat SEO tactics you run absolutely no risk of being banned by the search engines. Visitors who come to your website will also be more likely to convert.

What Is Black Hat Search Engine Optimizers?

2008-09-22T19:37:00.000-07:00

Black Hat Search Engine Optimizers (SEO), also known as search engine spamming, are those who creates web pages/posts that have little or no value, intended to trick the search engines into offering irrelevant, redundant or low-quality search results. Black Hat SEO's disregard the rules and the goals of the search engines in an attempt to lure visitors to their website/blog through deceptive practices. They often take pride in gaming or out smart the search engines.

Black Hat SEO's will heavily leverage technology and automation in order to create tons of poor-quality pages/posts and gain inbound links from other websites (link spam). Once the visitor has arrived at their site they will often use some kind of cloaking or redirect to show the visitor a "sales friendly" page. Black Hat SEO's are all about getting fast results. The methods they use to optimize their websites/blogs will often propel them to the top of the search results very rapidly, but when the search engines catch-on their websites/blogs crash-down and burn. This is of little consequence to many Black Hat SEO's as they can easily reproduce their results with a new website/blog. Below is a list of some Black Hat SEO techniques:

Black Hat Strategies:

Keyword stuffing
Scraper sites
Mirror/duplicate content
Tiny or unreadable text
Doorway pages
Link Farms
Cloaking
Keyword stacking
Hidden text
Domain Spam
Hidden links

How Search Engines Rank Web Pages/Posts?

2008-09-22T19:25:00.000-07:00

The rank of web pages/post on search engines are comes from a SEO's reverse engineering the Search Engine Results Pages (SERP's). And they do a somewhat complex matter. Why? Because they essentially type in a keyword, review the results returned, then closely examine the websites that rank well.

They look for patterns and information that may indicate why a particular website has a high ranking, then share this information with other SEO's through blogs, forums and other mediums to try and validate their findings. Now, once there is an informal consensus about a specific technique or strategy, it becomes widely accepted as a SEO Theory. Then these theories are published on white papers, patent applications, and research projects, which give additional clues as to how they rank websites/blogs. And these publications only provide a few pieces of the puzzle, but provide valuable insight.

In addition, if we start discussing the technical details and algorithms that power search engines it would be more complex. However, some webmasters get lost in these details and forget that search engine optimization is really only about two things: (1) writing quality content containing your keywords and (2) getting important websites with similar content themes to link to your website. These two things are much easier said than done, but to illustrate that search engine optimization is not overly complicated. If these two things get right, a website/blog will be 90% optimized.