Create a blog, blogging: blogger

Showing posts with label blogger. Show all posts

Saturday, May 12, 2012

Add Facemoods Emoticons To Your Blogger Comments

Want to add Facemoods emoticons in your Blogger comments? Then follow the next steps:

DEMO

Step 1.

If you are using the old Blogger interface:

Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)

If you are using the new Blogger interface:

Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)

Step 2. Search (CTRL + F) for this code:

For previous commenting system:

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

For threaded comments:

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

Step 3. Add the below code just above it
(for threaded comments, add the code after):

<b:if cond='data:blog.pageType == "item"'>
<div style=' width: 450px; text-align: left; border: 1px dashed #0084ce; background: transparent; padding: 10px; color:#000000; font-weight:bold; '>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7DtJVVjwIXr2uoLLdh4-iXo73peDwfkTo_MG5fgxH4yh-bcc5SdHwv0GMQEoCyvHrbeMzc6iCmwjQbzNj-emRwanzO0ykC9krUkOxTXZuxyi8fm1oawDpcDqPZKkGdYLjIHgzEFnaUkne/s1600/bloggingcreate.blogspot.com(1).gif'/> :a
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUhl5MoXjKtU081CLkgXWELiD0Zy-SxHdb69mC5ElNBh0i-zaWqkRZPR_g4NAnLSIN9qoR8yQ9BQvhqNwrvjILsSJQZDH_Ag0vCYT_1WG0P5AoFWLjzCaCRh27ySBXK7HnVwRnnQflLr83/s1600/bloggingcreate.blogspot.com+(2).gif'/> :b
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNTgglsGU32-Amn5t8H0otTpK5QChSmp5uiI1X0yI0eWKJSrudS6NjflMlE7benPcfMGPn5DCMn0Esw13KriGQ43NRonNJyVKSnngQh6w8wN-F2XBNWwF7L5Brii3MdlgEbvqKkL5mH2U8/s1600/bloggingcreate.blogspot.com(3).gif'/> :c
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCP-TKj8STahOJ7VzBtbzP-kuVyJehBN_YFBdczDEaJhcXPcTPACKjZI-nC5LqOvU9-NM-10CvXaQxgTS2Gm31mbjSj3JmTXuCheok-oLc9pSpDhk3Mc36cWANs0mGu494XzNEMYtdbcOC/s1600/bloggingcreate.blogspot.com(4).gif'/> :d
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGO4HvhPv8-ZwiE3Olos81I5_87Nna4_5KBlMWYeqlyiIkY305ikpDx6Z2N0p0ZqXa_0VPqmtl842yGGVM23-UzQkfFZDTKIisdn8hYUCcfpxROFLTnlOlls7hSZuHicINMQeg3lKzmg2a/s1600/bloggingcreate.blogspot.com(5).gif'/> :e
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWOufGgrfIyiDMVE5CD8yMrdyvz6EybaNoeteUM0CJha_W6BS8Xp32JrNRS0E_CHBwZb27_hKxmD14r-w2y8yAD5lnJOk3WiP-rW4T0VSub6tbgmOZZUoiwphF2s5FGhS5yxT6CQFVHT6M/s1600/bloggingcreate.blogspot.com(6).gif'/> :f
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4XKIzzD3pVUVxZPF5SW1VZp8YOa3dI_wKBLMvaU6_UIvLOO0OsV1Y30bw0xyI5Vzl0un8ytLZQmvyktSXOnsRSGP2PfGE6IGMfXiMeItOjp_4ZcplNngYKOjyv3D4PmPNC6G-Q4TX0gM5/s1600/bloggingcreate.blogspot.com(7).gif'/> :g
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9RM8NjjNO36ZEcvWiJJEzJAvIf0Mt_rFYWKKeIRo98gHZtZes8bvJJXRFbdT0W9lQlOH_pRQMDhUzhvnSInwPCgFP9VlBcJHrITWumjtjDxUy04fhBluIeSJYY7AcpJkrDOAi-knTdh9N/s1600/bloggingcreate.blogspot.com(8).gif'/> :h
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMERkuj7P5u9Of7ZDwGkLjyssEvC3vKnESdkHliqWFjYTdyqBbFgBX9vByfq8sJCpcIgA04b8AeF4VOYUkl4TtsflXBmF6i1QNpqLygRW7VyhO0qnFzPOTQr97Gx3eeqOYn4LaM5YN2PT3/s1600/bloggingcreate.blogspot.com(9).gif'/> :i
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu7xxFwTxVhoRbMIExn5YuQnm_-dMd9bzY5zIvyXEV7ufdlZQxWPmwTfrS1qnIjKSObBkHCEsPXUmdioD80DJ6FrWadB7rDX1PvOkyFc1fvbTlB4FzHXItoaDoBVv9it70lIwx_tq2PNO2/s1600/bloggingcreate.blogspot.com(10).gif'/> :j
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUqHj2Tu1oy1AjIQRUgn7cKwCS9RHg0qSBILQ6U8QYb571164Chpgsq5QJX6x4FS5YY8uyq0lgXLIbgEn-W8Ht8qmu0b8uaveFvTte4mmbazUEQCcujG1VnaS4tFK1t8fC-sJNKd1wUUzq/s1600/bloggingcreate.blogspot.com(11).gif'/> :k
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPKqGrWWZIrNUSiHcCyX3Cg-sLqxqOWI2yB7cVjm85JFJ1adlJH6MwUeRsjIbN44sys6Z8KW-ac38vBoLKdNq_xfap8k5PSemQhH3OluBMZFu_ZfD_VFvouU8q4enP47zvIJzik679meve/s1600/bloggingcreate.blogspot.com(12).gif'/> :l
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrzBhz18ovCnwJLU2d-QJKQ3g40Zbjm3i4hs_JzCPd-8BfVntocLY9B3pHAmEZkb3EzWghaE3ynfgLTqDjC1EpVUMcWuI6u_hPSmh9nVJpuwc4T83cBTvc8pI52lsIsyNoUXsacJ4n2Vbu/s1600/bloggingcreate.blogspot.com(13).gif'/> :m
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhlxWFuJShJ03FA-4ahHkoWdGCPJUfEXjJqoGNvd8jSzHFv070Lrd_nJygm55yEFcKwETNIVRhgB3BkPopYRRs0QdhsBNdBlz9Ntm1m_RkJHT0fXTARdrmySVPMRHsdjcDakL6cpvYgC1U/s1600/bloggingcreate.blogspot.com(15).gif'/> :n
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivdS6OWZVbxPKmUc6zgGRL1owHP1S7O6bNUOjY0awKO_ydVmiVuw2q5Dj0gHRP_53s-8Vwv2OSSZ47jOdNbIJ4qGeg9fk-l0K0nUnDf_W-e3TLU6xbg8X46tB0CeEZcsWkbbBihwxj0RIR/s1600/bloggingcreate.blogspot.com(16).gif'/> :o
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQTWmL1A6t0ZXjDgj2Le7Feb0MfuGA5_h-4N6TzBkA7eXk9iBLWEJYR6b8C96yGrDZEAZPQSGrEhHoP5ShwAsM_61vl5ZFYEj-a8OGaLqZcS14TupivqDM_iKpnGh8Sb0WBpkZ1UC9scyI/s1600/bloggingcreate.blogspot.com(14).gif'/> :p
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizqTGjrAQkVg5R8K2WsJxfbMWpFeJrOo0rjTBsEK3r3aefr72GoHHzYGgMtRfhm9uM66Md8HTbWuw1LhCdpTgKsS8MDsaFUUSocXFkzpXkNe4hr6Qw2zgfFV_LTZB6EJzhoTGAdBdtEKKA/s1600/bloggingcreate.blogspot.com(17).gif'/> :q
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXQ1vMxc4eWi4FP3giJ2TNCx6rshxkPa6gzuiCjWcE1RxCeSnNdx_J05wHC5dob1WkyR5EwULcuazYIGqsnAdGbwtOro69vb4pxZIUxy820NlCt3MdLbSwWIszuqqrPFi3d_gzmPIvaGcA/s1600/bloggingcreate.blogspot.com(18).gif'/> :r
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIwlhp14Rj6RTmiiZVOLVum0KYi-QMtiCHhbxk4ib_vftovyhY9gnfslsskJyk_K6Y-sAlQWa25HLnTbCTC_UYnOE-G7Pkjmm0gnNnFFPu7lRVmIKqC_lLk1QPlOB9xZDJhvK05ryteeSx/s1600/bloggingcreate.blogspot.com(19).gif'/> :s
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJtNkZzrQ-8-CxwqO7-ljn__LJnLeti4AlCaZsPqGPmXN0qfkuHf6-75g3m0yHsNYtYQydTT75MpSlm-vlTJr83o3aKsUQG6YPHcMXXfkB7RBq7F1TuYMYzTyoW7JB6mymNruoAS-QsQW4/s1600/bloggingcreate.blogspot.com(20).gif'/> :t <a href='http://bloggingcreate.blogspot.com/2012/05/add-facemoods-emoticons-to-your-blogger.html' style='color: rgb(30, 122, 183); font-size: x-small;'>Add smileys to Blogger + </a>
</div></b:if>

Step 4. Now search for this piece of code:

</body>

Step 5. And add the following code immediately above it:

For previous commenting system:

<script type='text/javascript' src="http://bloggingcreate.googlecode.com/svn/trunk/facemood emoticons.js"/>

For threaded comments:

<script type='text/javascript' src="http://bloggingcreate.googlecode.com/svn/trunk/facemood emoticons threaded.js"/>

Step 6. Save the Template. And enjoy your comments :>

Friday, May 4, 2012

Saturday, April 28, 2012

Google Translate Widget with Flags For Blogger

The Google Translate Widget allows your visitors to translate your site or blog in their own languages.
This widget auto detect your blog language and translate it to the readers chosen language.
It supports 12 different languages: English, French, German, Spanish, Italian, Dutch, Brazilian, Russian, Japanese, Korean, Arabic And Chinese.

How To Add It To Blogger

Go to your Blogger Dashboard >> Design >> Page Elements >> Click on "Add A Gadget" link, choose HTML/JavaScript and paste the following code in the empty box:

Then click on Save

Enjoy (:

Thursday, April 26, 2012

A Beautiful jQuery Drop-Down Menu For Blogger Blogspot

Steps Adding the jQuery Drop-Down menu

Step 1. If you are using the old Blogger interface:

Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)

If you are using the new Blogger interface:

Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)

Step 2. Search for the following code:

]]></b:skin>

And before/above it, add the following CSS code:

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #C8C8C8;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}
#jsddm li ul li a:hover {
background: #A3CEE5;
}

Step 3. Now find this piece of code:

</head>

And add this code immediately before/ABOVE it:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout', jsddm_timer)});
document.onclick = jsddm_close;
//]]>
</script>

Step 4. Click on Save Template button.

Step 5. Now go to Design (or Add a layout) > Page Elements > click on "Add a gadget" link and choose HTML/JavaScript, then paste the following code in the empty box:

<ul id="jsddm">
<li><a href="#">Home</a>
<li><a href="#">Link 1</a>
<ul>
<li><a href="#">Drop 1-1</a></li>
<li><a href="#">Drop 1-2</a></li>
<li><a href="#">Drop 1-3</a></li>
</ul>
</li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Drop 2-1</a></li>
<li><a href="#">Drop 2-2</a></li>
</ul>
</li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Drop 3-1</a></li>
<li><a href="#">Drop 3-2</a></li>
<li><a href="#">Drop 3-3</a></li>
<li><a href="#">Drop 3-4</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</li></ul>

Note :
You must change links titles and replace the # symbol with the URL address of each of your links
Then click on Save

Important:

- if your menu is on the sidebar, or footer, just drag it to your page header and click and click Save again.
- if drop down links are not showing, do the following:

Go back to Design > Edit HTML and search (CTRL + F) for this code:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

You should change 1 with 3 and no with yes like this:

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

Save the Template.
Now go to Page Elements and drag your menu immediately below your header.

Here you can see the DEMO.

Monday, April 16, 2012

How to Add A Comment Count Bubble To Blogger Post Titles

Having a comment count bubble to each blogger post titles makes your blog more attractive. This improves not only your comments count but also allows your visitors to see what are the most popular posts on your blog. If a post has more comments then it will show the popularity of posts to your readers and visitors. So let's start adding this feature to your blog post titles by displaying the total count of the comments for your Blogger posts:

Step 1.

If you are using the old Blogger interface:

Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)

If you are using the new Blogger interface:

Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)

Step 2. Find (CTRL + F) the following piece of code in your template:

]]></b:skin>

Step 3. Place this code just above ]]></b:skin>:

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPlp-Y00_sIpQerGWN6olaQxmIO-U57_BNaxTduTSPtrptKkj6pEodEPo5R3AR6Zaxtk-vGwVv9kG6f9A-hRjsbFp0MZRLy_SdGhMRD3gkqFHUrq31EapZ8_7hs_K_XKFcvN8teKCei6c2/s1600/speech+bubble+green.png);
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

Step 4. Now find the below code:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>

Note: If you can't find it, search this code instead:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>

Step 5. Add this code immediately after it:

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='color: #ffffff; font-size: 18px; font-weight: bold;'><data:post.numComments/></a>
</b:if>

Note:
- to change the color of the comments number, replace #ffffff with the hex value of your color;
- to change the font size, increase/decrease the 18px value;

Step 6. Now Preview your template and if everything is ok, Save the Template.

You can choose one of these images below (Right click on the desired image and select "Copy Image Address/Location" - paste it instead of the red code from step 3)

bubble comment count, bubble blogger posts

bubble comment count, bubble blogger posts

Enjoy (:

Didn't find what your were looking for? Then you might be interested in this tutorial:
Display post author, date, labels and comments with icons below post titles

Saturday, April 14, 2012

How to Create Static Pages in Blogger

What are Blogger static pages?

Blogger Static Pages allows you to create specific pages like About Me, Contact page, Privacy Policy etc. on stand-alone pages that are linked from your blog. The static pages basically are the same as post pages, but there are several things that make them different. One of the differences is that static pages don't appear in the home page, don't have a label, and are not indexed as archive pages.

So, let's see how to Create Static Pages in Blogger.

1. Log in to your Blogger Dashboard

2. Click on New Post or Pages for the Newer Interface

(Old Interface)

(New Interface)

3. Then click on Edit Pages (for the New Interface: New Page - Blank Page)

(Old interface)

(New Interface)

4. Insert the title and write the content.

(Old inteface)

(New Interface)

5. Click Preview to view the display of content before you publish it.

6. When you have finished editing, click on PUBLISH PAGE button.

7. Now you are given 3 options: to display the page in your blog's sidebar (Blog Sidebar or Side Links), to keep it as nav menu below header (Blog Tabs or TOP TABS) or to Add the page's link manually to your template (select No Gadget / Don't Show)

(OLD INTERFACE)

(NEW INTERFACE)

8. Finally, SAVE AND PUBLISH your page (for New Interface click on "Save arrangement")

Now you have owned the static page. If you want another static page, repeat the above steps.

Note: if you have opted for No Gadget option - go to Edit Pages again and make Right Click on View, then select Copy link location (in firefox). You can add the link manually to your sidebar via Link widget or add the link in your template, via Edit HTML.

Wednesday, April 11, 2012

Ways To Increase Page Impressions and Traffic on Your Blog

What is a Google AdSense "Page Impression"?

In general, AdSense reports show the following fields of information:

Page Impression: how many times the page or pages containing the AdSense advertisement was shown to your blog/website visitors
Clicks: the number of times visitors clicked on an advertisement from your site
Page CTR: The clickthrough rate of an advertisement is defined as the number of clicks on an ad divided by the number of times the ad is shown (impressions), expressed as a percentage. (1) In most cases, a 2% click-through rate would be considered very successful, though the exact number is hotly debated.
CPC: is Cost Per Click. That is what Google pay you per click.
Estimated earnings: Your account balance for the time period selected. This amount is an estimate that is subject to change when your earnings are verified for accuracy at the end of every month.(2)

As mentioned above, the page impressions or page views shows how much time a user stays on your website and how many pages he visits. This is one of the most important things when talking about advertising. Page impressions are the result of good high quality traffic which is mostly based on the quality of the content available on your blog/website. If you build high quality content then people will enjoy navigating throw your site and create page views.

Here are some methods that may help you increase page impressions:

1. Navigation Menu

Create a navigation structure that is clear and easy to follow. You want to make sure that once you have a visitor, they can easily make it to other parts of your blog. Creating links within your blog pages is one of the best ways to increase the number of impressions for your website.

2. Posts Summary on Homepage

A very good method to increase your page views is to have a summary of your posts on your blog/website homepage. That will force visitors of your blog to click on posts link / read more button in order to see the full article. To show only a part (excerpt) of Blogger posts, read this tutorial:
Automatic Posts Summaries for Blogger with Thumbnails

3. Improve Blog/Website Load Time

If a blog’s pages load very slowly, visitors will eventually stop visiting more pages, sometimes sooner rather than later. A blog that has quick loading pages is a pleasure to browse and it encourages more clicks.

4. Add a Popular Posts widget

Another great way to engage your readers to stay more, browse through your content and make more pageviews is to add a Popular Posts Widget where you share some of the best posts on your blog.

Here are some cool Popular Posts widgets for your Blogger blog you might be interested in:

Popular Posts widget above Blogger Posts
Multi-Colored Popular Posts widget

5. Add a Random Posts Widget

If you have loyal visitors who come to your blog on a daily basis, a popular article widget will become boring just because they see it every day, with same posts. A random posts widget will mix the articles so that the probability for a post to repeat will be very low.

Want to add a Random Posts Widget for your Blogger blog? Then take a look at this tutorial:
Random Posts widget with thumbnails

6. Link to Related Posts at the End of a Post

Displaying a related posts is a smart way for keeping your site visitors around. The widget links to stories that are relevant and interesting to readers of a particular post, keeping them engaged with your blog, and increasing your traffic.

If you don't have it on your blog yet, see this Related Posts Widget tutorial for Blogger blogs: Add the Related Posts Widget with Thumbnails to Blogger

7. Add internal links to your content using related anchor text

Include a link in a new post to related information in a previous post. When you link to a previous post that you've written you should consider doing so with descriptive words of the post rather than generic words. (don't use simple words like "click here for more"). Adding links to previous articles will determine your visitors to view articles and automatically will be converted into page impressions.

8. Provide links into your social networks profiles or forums

Share your blog links on Facebook, Twitter or any other websites or popular forums. Answer to questions on the web. However be careful to not be too intrusive and always give pertinent info.
You wouldn't want to support or to be considered as a spammer, don't you?

9. Add a search box

A lot of websites does not have a search box. As a result, the visitor will leave the site if he didn't find anything further relevant. For best results, you should be using the Google custom search widget. You can embed the Google search box directly in your blog. The search results will be more relevant than those that are provided by your default search box.

10. Add Social media buttons

Give your visitors multiple options to tweet, bookmark and share your posts via Facebook as well as save your whole blog. Put social icons below your post and in the sidebar, make them visible and let them be found easily.

11. Use a clean background for your posts and readable fonts

Avoid dark backgrounds, tiny and sophisticated fonts, and make written content the visually most distinct part of your blog. If your main objective is to deliver a message and get the visitors reading your stuff, then you should make this process comfortable for them.

12. Advertising

And finally, getting people to your site may just be a matter of getting the word out. By using pay-per-click advertising, you can create an inexpensive advertising campaign to get more people to your site.

Following these tips will surely increase your blog's page views, which will make your blog traffic high in the future. Good luck!

How to Replace Older Posts and Newer Posts Links with Blogger Post Titles

If you have ever visited a WordPress blog, you might have noticed that the blog pager on these blogs displays the actual post titles, not just links to the older and newer posts that you find at the bottom of your Blogger blog. This links are parts of the so-called blog pager which helps readers navigate between pages and posts.

If you want to increase your page impressions, one of the ways is to replace the older/newer posts links with the Blogger post titles.

How To Add Post Titles Instead of Older Post/Newer Post Links On Your Blog

1. Log in to Blogger, go to Design > Page Elements
2. Click on "Add A Gadget" link
3. Choose "HTML/JavaScript" and paste this code into the empty field of the HTML/JavaScript gadget:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" h3:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link:first").text();
$("a.blog-pager-older-link").text(olderLinkTitle);
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" h3:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text(newerLinkTitle);
});
</script>

Note: The line in red is for acquiring jQuery framework. If you have acquired jQuery in your template, then you can just delete this part.

4. Now Save the Widget and drag it under the Blog Posts section.

View your blog and see if the older/newer posts links have been replaced with your post titles.
For any questions, leave a comment below. Cheers!

Friday, April 6, 2012

Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect

In this tutorial i will show you how to add a cool floating Facebook like widget for Blogger that slides to the left on mouseover. Demo: You can see a static facebook badge at the right side of this blog

Adding Static Facebook Like widget on blogger

Just follow the steps:

1. Log in to your Blogger Dashboard, go to Design >> Edit HTML

2. Check the "Expand Widget Templates" box

3. Search (CTRL + F) for this tag:

</head>

4. Add the following code just before/above </head> tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

5. Save the Template.

6. Now go to Design >> Page Elements >> Add a new Gadget >> Choose HTML/JavaScript and in the HTML box, paste the code below:

<style type="text/css">
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhguQhGoV24hrHCBuJFyC9k9xfa226LjDvodjL4NhXbCItY5jPW5LpBlySBso75zHgSITfBTBPD6keb1x3XrpXLVxUUc6FpXKfVIXIv0YbQBqO8tEzVc9eAYMOrDKnYf8tEEitfXjA_mYw/s1600/vertical-right.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            w2b("#fbplikebox").css({right: -250, "top" : 100 })
            w2b("#fbplikebox").hover(function () {
                w2b(this).stop().animate({
                    right: 0
                }, $dur);
            }, function () {
                w2b(this).stop().animate({
                    right: -250
                }, $dur);
            });
            w2b("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
    <div class="fbplbadge"></div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=YOUR-FACEBOOK-PAGE&width=250&height=250&colorscheme=light&show_faces=true&border_color=%23C4C4C4&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#FFFFFF;" allowtransparency="true"></iframe>
</div>

7. Replace YOUR-FACEBOOK-PAGE text above with the URL of your facebook fan page.
Also replace the : symbol in your URL with %3A and / with %2F

For example, my facebook fan page is:

http://www.facebook.com/pages/Helplogger/120574614736021

After replacing the characters above, your facebook fan page should look like this:
http%3A%2F%2Fwww.facebook.com%2Fpages%2FHelplogger%2F120574614736021

Other settings (optional):
- to change the width and height of the facebook box, change the bolded values (250)
- to change the background color of the facebook fan box, replace #FFFFFF with the hex code of your color (you can choose it from here)
- if you want to change the color of the facebook badge (facebook button) replace this code #3B5998
with your own.

8. Now you can save your widget. Enjoy!

Credit goes to Harish (way2blogging)

Thursday, April 5, 2012

A Simple Related Posts Widget For Blogger

In the last tutorial, i've been talking about the Related Posts widget that shows related posts along with thumbnails just at the end of your blog articles. Some of the users, however, would prefer a simpler and cleaner displaying of their related posts so that it would show just the posts titles. So let's begin adding it!

related post, related post blogger, blogger tricks

How to add Related Posts Widget to Blogger

Step 1. Go to Template >> Edit HTML and tick the "Expand Widget Templates" checkbox

Step 2. Find the below tag

</head>

Step 3. And just above it, paste the following code:

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
margin-top: 20px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 17px;
font-weight: normal;
color: black;
font-family: Arial Narrow;
margin-bottom: 0.75em;
padding-top: 0em;
}
#related-posts a{
font-size:16px;
color: #555555;
font-variant:small-caps;
}
#related-posts a:hover{
text-decoration: none;
color: #ffffff;
font-weight: bold;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:none;
text-color:#000000
}
#related-posts ul li{
list-style-type: none;
border-left: 2px solid #1399CF;
border-bottom: 1px dotted #1399CF;
margin-bottom: 3px;
padding-left: 30px;
padding-top:0px;
}

#related-posts ul li:hover{
background-color: #1399CF;
border-left: 2px solid #B3CA3D;
border-bottom: 1px dotted #B3CA3D;
}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggingcreate.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/>
</b:if>

Note:
- if you want to change the size and color of 'Related Posts' title, change the bolded values (17 for the font size and black for the color)

-to change the related post title color, replace the value in red;
-to change the background color on mouseover, replace the color value in blue;

Step 4. Now find (CTRL + F) the below line:

<div class='post-footer'>

Step 5. Just above it, paste the code below:

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script> </div> </b:if>

Note: In order to change the number of maximum related posts being displayed for each label, search for the code max-results=5 and change the number "5" to any desired number.

Step 6. Save Template

Enjoy!!!

Wednesday, March 28, 2012

How To Add Related Posts Widget To Blogger with Thumbnails

Now here is a wonderful hack for displaying related posts beneath each of your blog posts, along with thumbnails. The related articles are chosen from other posts in that same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest.

related post, related posts blogger, blogger widgets

Steps adding the Related Posts Widget to Blogger/Blogspot

Step 1. Go To Blogger Dashboard >> Template >>Edit HTML;

Step 2. Check the "Expand widgets template" box;

Step 3. Search (CTRL + F) for this piece of code:

</head>

Step 4. Copy and paste the below code just before/above </head>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPKHlicr49-Ez82erWrcz4fIsj-5_nhzm_HlzzoU9zl9ul4l2I6goUCLAUvnZVlu1l0XGtGr8QbuWTYdlGZ_bNTr9ebmaZ2oogiEY627-JbfBEzO5UKNL0hI389-kDsr8rjAKKXun4YO86/s1600/no_image.jpg";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggingcreate.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
</b:if>

Note:
- to change the default picture, replace the URL in blue with your own
- for displaying more than 5 posts, replace 5 value from "var maxresults=5;"
- remove the code in violet if you want the related posts to be displayed in homepage too

Step 5. Now find the following code:

<div class='post-footer'>

Step 6. And just above it, copy and paste the below code:

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://bloggingcreate.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5PStQ4X6UACUL5zZbAxVOc8OOuw6f7oigKzKBb0bDP9DN44G1_49q06dDKKISHuWK_aK17T0R4Pku19vdELShLM5yPsq_rMgpZAeq_v49GiXwu0Mh-pBYiZ15Oe_uHgCCymo7GaVCI7Ya/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>

Note:
- change the 6 value from max-results=6 with the number of posts you want to be displayed.
- If you want the related posts to be displayed on homepage too, remove the code in violet.

Step 7. Save the Template

Enjoy :)

Credit goes to: bloggerpluggins.org . Modified by me

How to change Blogger "Post A Comment" Message

In this tutorial i will show you how to replace the 'Post A Comment' text that appears above the comment form with an image. Also, I will make available to you a few cool images or you can add your own image if you like... so let's get started.

How to replace Post a Comment with an image

To replace "Post A Comment" message in your Blogger / Blogspot blog follow the next steps:

Step 1. Log in to Blogger, go to your Blogger Dashboard >> Design >> Edit HTML

Step 2. Tick the "Expand Widget Templates" checkbox.

Step 3. Now search (CTRL + F) for the code marked in red:

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>

...and for this one too:

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

Step 4. Replace <data:postCommentMsg/> with one of the below images codes:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc88ZJzpEORTU7CBtZ61PQkNv27C0xkX-mgy25KYppihhPGn8jcA0Jk34KYG1UupImPMepEb1vdOjPaTNwaA82XEYDhOsGlEZFAwzdf_zNG5DjP9i6fyvKlryNiz66aULqJw1Qu_COEbU/s1600/leave+a+comment.png" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPIV1rKF_FvRw2JmP3mcw_tO19FllnLxl2cfP9klDbompiUu__AC-0_ZGivQTLS0OuJUp-nKAOzJ9-hMzPgmUdgK10v0V0qHVlxGHe4CQVp8FtWtCkj5C4ZQyPc1S3Pf-oFwbDcmW-1k4/s1600/Post+a+comment+blogger.png" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsg9x4Byr-OgAK5-JK172oFpTqxDLL59pLDgfzWDbvMUCr7Kruz_l4BS3XmDnIOUMkA_CgIOS7nOn3JQLjZeRfDSVVmdXPXfIi4MOcnQNUrMUvP0Cw7ILlWvz7FhhlH3T6G1_4a-nTq6GJ/s1600/animated+comment+arrow.gif" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8t0S_g0i_-f5NlzzsKhX-HLeijUO-gn63M-ErytcfFIxyoaqOVCILfzX8f2QVkTJJIV0F-wDFajrHnVb2UfYX6d-iQifBt76lUnCD-LEcITaB5RRUZVIyfMB4ErznEOOzlP2F_-tYLiVZ/s1600/leave+a+comment2.png" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig7BFPU6JA-JhCNAsKFvMIFymVeBRmicd4qByH4XGHxtOwtiF35WSC_gkEq_ce0-zSPQGu8qN41IBZuTx-cdV7Yl_3fVKyK6x-M3Mt27Yf4vizwGo-jFJBZxFFyx8Ee2518JeIeACTuRx7/s1600/comment.gif" />

You can use your own image instead. Just upload your image on Blogger, switch to Edit HTML tab, copy the image code and replace <data:postCommentMsg/> with your code.

UPDATE! Step 5. The first steps will replace the text only when there are no comments available. To show the image each time new comments are added, we should add the code of the image we want to appear after the 4th of the below code (search 4 times for it):

<p><data:blogCommentMessage/></p>

Step 6. Save Your Template.

Thats it! I hope you like your new comment form !