9 Blogger Template | Mayumi Posted by Asad On Monday, July 19, 2010

Mayumi is a 2 column blogger template with elegant design and nice layout. This template has very nice features especially the "Featured Content Gallery". Mayumi is not only well designed but also seo optimized for search engines. It has automatic read more hack with thumbnails feature which will keep your blog safe from duplicate content penalty.

Logo PSD files to change header logo is also available in the template folder you downloaded.   

Features of Mayumi Blogger Template

- 3 columns
- Right sidebar
- 3 Footer columns
- Magazine Style

Hacks Supported By Template

- Search Box Ready
- Read more Hack With Thumbnails
- Featured Content Slider
- Top menu navigation

Mayumi Installation

- Edit Header Logo
The template file contains 3 logo psd files for site logo,name and description. Edit them with Photoshop and change them to your site's logo,name and description.
Now go to Layout > Design > Edit HTML from blogger dashboard and find the below links.

Logo-Image Link: http://1.bp.blogspot.com/_j82W7u9kZbs/S1yKrlgwXbI/AAAAAAAABDo/15hMfFlN4jk/s400/logo.png

Site Name Link: http://2.bp.blogspot.com/_j82W7u9kZbs/S1yINxLQF1I/AAAAAAAABCA/NQlH8ObVnbw/s400/site-name.png

Site-Description Link: http://4.bp.blogspot.com/_j82W7u9kZbs/S1yIOGWxcLI/AAAAAAAABCI/oRJ81Mo-9gM/s400/site-description.png

Upload your edited PSD files to blogger or any other image hosting service. Replace the above highlighted links with your links.
- Edit Top Most Menu Links
In order to edit Home, About and Contact menu links find the below code in "Edit HTML" tab.

<ul>
<li class='current_page_item'><a href='/' title='Home'><span class='l'><span class='r'><span class='c'><span><span>Home</span></span></span></span></span></a></li>
<li class='page_item page-item-13'><a href='/about' title='About'><span class='l'><span class='r'><span class='c'><span><span>About</span></span></span></span></span></a></li>
<li class='page_item page-item-18'><a href='/contact' title='Contact'><span class='l'><span class='r'><span class='c'><span><span>Contact</span></span></span></span></span></a></li>
</ul>

Replace the above highlighted text with relevant links.

 - Featured Content Slider
Search for below code.

<li class='s3sliderImage' id='featured-1'>
<a href='YOUR-URL-HERE'><img alt='' height='313' src='http://1.bp.blogspot.com/_j82W7u9kZbs/S0tvaDXfqKI/AAAAAAAAA5k/ZrdEi3WisBk/s1600/logo blog navidades.jpg' width='630'/></a>
<span class='right'><strong><a href='YOUR-URL-HERE'>POST TITLE</a></strong><br/><p>POST DESCRIPTION</p></span>
</li>

Replace the highlighted content with relevant post url, post image, title and description.The above code is for first featured post. Do the same for second and third featured post.
 - Edit Facebook,Twitter and RSS Links
Find below code.

<li class='rss'>
<a href='/feeds/posts/default' title='RSS Feed'>Get the latest via RSS</a></li>
<li class='twitter'><a class='icon-twitter' href='http://www.twitter.com/your-user-name'>Want to know my tweets?</a></li>
<li class='facebook'><a class='icon-facebook' href='http://www.facebook.com/your-user-name'>Join me at Facebook</a></li>

Replace highlighted text with your links and usernames.

I am sure that you will love this template. Do give your feedback about this template. If there is any problem in installing this template please do tell me.

Read more »

72 SEO Tips for Blogger / Blogspot Blogs to Increase Traffic Posted by Asad On Friday, July 02, 2010

The one question which i have been asking to myself from a few days.Is Blogger SEO friendly?I researched on this topic and i found that "No, Blogger is not much SEO friendly". If we see the Blogger biggest rival Worpress, it provides many plugins with which you can easily make your blog search engine optimized but in case of Blogger it is not so easy because you can't use plugins in Blogger.
Search engine optimization is very important for any website or blog to index higher in search engines.Therefore, I want to share some important tips that can help your blogger blog rank higher in search engines and ultimately you will get huge traffic.

1. Add rel='nofollow' to your Categories and Social Bookmarking Links

Do you know that Google do not crawl category pages in Blogger? Google don't know what is on the page but still index these pages. Check out the below screenshot.

These category pages are blocked by robots.txt but they still have pagerank.
Every page of the blog and website has pagerank power and the link to external pages such as categories and social bookmarking result in sharing pagerank power. Therefore, you should add rel='nofollow' to your categpries and social bookmarking links.
Below are the examples.

<a href='http://twitter.com/bloggertemps' rel='nofollow' target='blank' title='Follow on Twitter!'>

<a expr:href='data:label.url &quot;?max-results=5&quot; ' rel='nofollow'>

First example is for social bookmarking link and second is for category link.

2. Use SEO Friendly Title

 Two type of titles can be said SEO friendly.See below examples.

SEO friendly title are either "Post Title" only or "Post Title | Blog Title" not "Blog Title | Post Title". I use the first one for my blog.
If you don't have search engine friendly title then find below code in your template code.

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

Replace it with below code.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

If you don't want your blog title to appear in search engines, then delete the highlighted text.

3. Use Keywords in Title

 Always use important keywords in the title of the blog post.Most important thing for search engines while crawling your post is the title of the post.

4. Use Meta Tags

Use meta tags to tell search engines what your blog and blog post is about.You can read more about it here.

5. Increase Backlinks

 Backlinks are important not only for blogger blogs but also all websites over the internet. More backlinks pointing to your blog will increase your blog authority and ultimately your ranking in search engines. Follow below techniques to gain more backlinks.

1. Link Exchange: Exchange links with other blogs in your niche especially the blogs with higher PR.
2. Comment on DoFollow Blogs and Forums: Comment on blogs which are DoFollow. Find blogs in your niche using Comluv and Top Commentators widget. Keep one thing in mind, do not spam blogs with irrelevant and comments like "Nice Post". Only write comments which add value to the article. Join high PR DoFollow forums and add your blog signature. Take part in forum discussions.
3. Guest Posting: Guest post on other blogs in your niche and gain Promotion+Backlinks+Traffic.
4. Deep linking: Make backlinks for not only the homepage of the blog but also the deep links such as "Blog Post Links". It will help your posts to rank higher in SERPs(Search Engine Result Pages.

and last but not least

6. Write Quality Content

You might have read it many times but it is the most important thing. 'Content is King' and this king will never die in the blogosphere. Search engines always like unique and quality content. If you have good material on your blog, your readers will come back to your blog because "Good Content" is the only reason for the readers to become loyal to your blog.
These are some tips which are in my mind right now. If you have any extra tips feel free to add it and if you have any questions about above tips, do tell me and i will try my best to help you.

Read more »

5 Add Beautiful jQuery Auto-Playing Featured Content Image Slider to Blogger Posted by Asad On Wednesday, June 30, 2010

A few months back i came up with the tutorial that how you can add auto move featured carousel or slider to blogger. In that tutorial i told you that this slider will appear in the same way as appearing at the top of my blog. Some of my readers asked me to come up with new kind of slider because that type of slider was not suitable for every blog design.
Today i am going to introduce an amazing and different kind of auto playing image slider which you might not have seen on many blogs. I am sure that you will love this slider.You can see the demo here.

Now follow the below steps to make it work in your blogger blog.

Step1- Add CSS

 Go to Design > Edit HTML from blogger Dashboard.Find ]]></b:skin> or find ]]></b:template-skin> using the browser "Ctrl+F" feature. Add the below CSS code before it.

*{
margin:0;
padding:0;
}
html{
height:100%;
}


a img{
border:0;
}
div.wrap{
width:540px;
margin:0 auto;
text-align:left;
}
div#top div#nav{
float:left;
clear:both;
width:540px;
height:52px;
margin:22px 0 0;
background:url url(http://img708.imageshack.us/img708/7593/navbgq.png) 0 0 no-repeat;
}
div#top div#nav ul{
float:left;
width:700px;
height:52px;
list-style-type:none;
}
div#nav ul li{
float:left;
height:52px;
}
div#nav ul li a{
border:0;
height:52px;
display:block;
line-height:52px;
text-indent:-9999px;
}
div#header{
margin:-1px 0 0;
}
div#video-header{
height:683px;
margin:-1px 0 0;
}

div#header div#slide-holder{
z-index:40;
width:540px;
height:299px;
position:absolute;
}
div#header div#slide-holder div#slide-runner{
top:9px;
left:9px;
width:540px;
height:278px;
overflow:hidden;
position:absolute;
}
div#header div#slide-holder img{
margin:0;
display:none;
position:absolute;
}
div#header div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:540px;
height:46px;
display:none;
position:absolute;
background:url(http://img155.imageshack.us/img155/9281/slidebg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text{
float:left;
color:#fff;
display:inline;
font-size:10px;
line-height:16px;
margin:15px 0 0 20px;
text-transform:uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav{
float:right;
height:24px;
display:inline;
margin:11px 15px 0 0;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:bold;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
color:#fff;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(http://img85.imageshack.us/img85/934/sildenav.png);}
div#nav ul li a{background:url(images/nav.png) no-repeat;}

Please use your own image hosting to host above highlighted images links. You can use tinypic or re-upload images to imageshack.us.

Step2- Add jquery.js and scripts.js File

Now find </head> and add below code before it.

<script src='http://www.yourjavascript.com/41506852131/jquery.js' type='text/javascript'/>
<script src='http://www.yourjavascript.com/56841175202/scripts.js' type='text/javascript'/>

The above highlighted text is the link to the jquery.js and scripts.js file which i hosted on my hosting. I advise you to to download these files from here and host them on your hosting because my hosting can exceed bandwidth limit.You can download these files from here.

Step3- JavaScript for Slider

Find </body> and add below code before it.

<script type='text/javascript'>
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty2","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty3","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty4","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty5","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty6","desc":"add your description here"}];
</script>

Edit the above highlighted text with your own text.

Step4- Add HTML code in HTML/JavaScript Widget or Template

Go to Design > Page Elements and select "Add a Gadget" and then HTML/JavaScript widget. Add the below code in the widget.You can also add below code within <body> section of your template code at appropriate place.

<div id="header">
<div class="wrap">
<div id="slide-holder">
<div id="slide-runner">
<a href="Your Post link here"><img id="slide-img-1" src="http://img338.imageshack.us/img338/9756/naturephotoc.png" class="slide" alt="Your image title here" /></a>
<a href="Your Post Link Here"><img id="slide-img-2" src="http://img145.imageshack.us/img145/7564/naturephoto2.png" class="slide" alt="Your image title here" /></a>
<a href="Your Post Link Here"><img id="slide-img-3" src="http://img31.imageshack.us/img31/5550/naturephoto3.png" class="slide" alt="Your image title here" /></a>
<a href="Your Post Link Here"><img id="slide-img-4" src="http://img34.imageshack.us/img34/2006/naturephoto4.png" class="slide" alt="Your image title here" /></a>
<a href="Your Post Link Here"><img id="slide-img-5" src="http://img130.imageshack.us/img130/4637/naturephoto5.png" class="slide" alt="Your image title here" /></a>
<a href="Your Post Link Here"><img id="slide-img-6" src="http://img820.imageshack.us/img820/3824/naturephoto6.png" class="slide" alt="Your image title here" /></a>
<div id="slide-controls">
<p id="slide-client" class="text"><strong>post: </strong><span></span></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</div>
</div>
</div>
</div>
</div>

Replace highlighted text with your blog post link,image link and title.
This is the end of the tutorial. I hope you will love it. If you have any kind of problem in implementing this tutorial please feel free to ask me.

Read more »

12 How to Add Facebook Share Button or Widget to Blogger Posts Posted by Asad On Sunday, June 27, 2010

Nowadays Social Media Websites have become the integral part of bloggers strategy because they can bring as much traffic to your blog as search engines like Google can bring. Facebook is the second most visited website in the world so it is very important that you make proper strategy to get humongous traffic from it.
A Facebook share button in the post should be provided to your visitors so they can easily share your content with their Facebook friends. Therefore, i have made a tutorial for my readers so they can easily add it in their blogger posts.

The Facebook Share Count button will be the same as appearing in my blog posts but i will explain you how you can change its text and color to suit your blog design.
In order to add it to your blogger blog posts go to Design > Edit HTML and check "Expand Widget Templates".Find the below code using "Ctrl+F".

<data:post.body/>

Add the below code just after the above code.

<script>var fbShare = {
size: 'large',
badge_text: 'C0C0C0',
badge_color: '0066FFF',
google_analytics: 'true'

}</script>
<script src='http://widgets.fbshare.me/files/fbshare.js'/>

The highlighted parts in the above code are the CSS colors. The highlighted part in green in the color of the text in the share button and highlighted part in the red is the color of the share button.The size of the button is set to 'large' by default but you can change it to 'small'.
If you want to change the colors of the text and button you can change it by changing above highlighted CSS color values.You can see different CSS color values from this chart. 

I hope this tutorial will be helpful for you. If you have any problem please do tell me.

Read more »

12 How to Add Official Social Media Sharing Buttons to Blogger Posted by Asad On Saturday, June 26, 2010

Blogger is undergoing many changes. A few days back blogger introduced template designer and now there is another great news. Blogger has added a functionality to add social media sharing buttons below blog posts. This addition is particularly useful for people who don't want to get their hand dirty by playing with CSS and html.The sharing buttons include Facebook, Twitter, Google Buzz, Gmail and Blogger.

If you want to add sharing buttons follow simple below procedure.

Go to Design section from Blogger Dashboard and select "Edit" from Blog Posts section.

Now check "show share buttons" and select save.

Now sharing buttons will appear below each blogger post.

Do tell me how much you liked new feature of Blogger.

Read more »