Referring URL Tips Tricks to Blogger Blog

Welcome Messages

Quickly give your site a personal feel by including a welcome message on your page or in an alert box that pops up when your page loads.

Use this to place it in the BODY of the document:

<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
<!-- Hide script from old browsers
if (document.referrer != )
document.write(Thanks for visiting from + document.referrer);
//-- Stop hiding script -->
</SCRIPT>


If you prefer an alert box, use this in the HEAD section:

<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
<!-- Hide script from old browsers
if (document.referrer != )
alert(Thanks for visiting from + document.referrer);
//-- Stop hiding script -->
</SCRIPT>

In this particular script, using the NOSCRIPT tag is optional because you arent including any important site information in the alert box or document.write statement.

UPDATE:  I updated some of my posts, this post I update Free Backlinks for Blog and Website........

Do you want to know Where to get free backlinks? This is a free, fast, and simple immediate automatic backlinks for optimizing your blog or web page on search engines result.Everyone knows how important backlinks are to getting a good rank.Here, we offer a backlink for free and very fast for your sites. Copy the html code first (no change needed), and then paste to your website or blog.To view your backlink you can click the image link from your website or blog. And well... your website url done and will be displaying in first references.If any visitors click this banner from your website or blog, your url backlink will be creating automatically in this website.You can build backlink as many as you want, no limitation and restriction, but no spam ! Wish your websites ranking quickly on Top Google, Yahoo and Alexa!


Free Automatic Backlink for Blog and Website
Copy this html code to your website >>

<!-- Dont edit this code or it will not work --><a target="_blank" href="http://bdlab.blogspot.com/" title="Free Backlinks"><img border="0" alt="Free Backlinks" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsHB5Lg7Br4YA4yX2m82YUdYVzezEMo_M5f75N0saujS-eMPaLdbO60aRzyrHEpOUEavtMIhvjUwTwYWK3t7yxbELJtOsjAaBzYghoV6x7FwGtzppWmUFIDQoiH40HAQkXdKXISPeDjF7C/s1600/24works-backlinks.gif" /></a><!-- End http://bdlab.blogspot.com-->

* Please note:- After you paste the code into the website, please click on the button to create backlinks to your website.
- If you remove the code from your website where your backlink will be deleted automatically.
- if you know any free backlink info, please submit here, Lets share the free backlink list to everyone.

Read More..

Fading Box With Newer Older Posts Links and Titles for Blogger

The navigation links are those that appear at the bottom of the page that says "Older Posts", "Newer Posts" and "Home" and help us to move through the blog posts. This tutorial will show you how to change the word "Older Posts" and "Newer Posts" for post titles and make these to appear in a box "fading" when you scroll down the page.

You can see it in action on this demo blog - when you scroll down, the navigation links will appear showing the post titles for the older/newer entries.

This way to display the navigation links will be seen only in individual entries, while those on the homepage and other parts of the blog will still be displayed as usual.

How to Add Navigation Box with Newer & Older Posts on Blogger

Step 1. From your Blogger Dashboard, go to Template > Edit HTML, click anywhere inside the code area and search - using CTRL + F - for this line:

<b:include name=nextprev/>

Screenshot:

Step 2. REPLACE the code above with this one:

<b:if cond=data:blog.pageType != &quot;item&quot;>
<b:include name=nextprev/>
</b:if>
<b:if cond=data:blog.pageType == &quot;item&quot;>
<div id=blog-pager-box>
<h4>Other posts published:</h4>
<b:include name=nextprev/>
</div>
</b:if>

Note: you can change the "Other posts published" title with your own

Step 3. Now add just above </head> the following code:

<b:if cond=data:blog.pageType == &quot;item&quot;>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js type=text/javascript/>
<script>
// <![CDATA[
$(function() {
$(#blog-pager-box).toggle()
.css({
width: 520px,
height: 150px,
position: fixed,
padding: 1em,
bottom: 0,
right: 0,
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIvE_yeDv-5ha1cjifbQhZYHeuoYyKe3_WEX8qdjqBkYdHADsn57bMv1sPjvSkJXL6V8mJDTf23Ra3CVwVCEhstDzngqM3qDlt-v-YfdU4yEp8eh0RwIlwbzJs9Uv1BD_S1QQYVVbeSGxv/s1600/paper.jpg)
});

$(window).scroll(function() {
if($(this).scrollTop() > 100) {
$(#blog-pager-box).fadeIn();
} else {
$(#blog-pager-box).fadeOut();
}
});
});
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$(".blog-pager-newer-link").html("<div>Newer Posts:</div>" + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$(".blog-pager-older-link").html("<div>Older Posts:</div>" + olderLinkTitle);
});
});
// ]]>
</script>

<style type=text/css>
<!--
#blog-pager-box {
box-shadow: 0 0 3px #AEAEAE;
z-index:9;
}

#blog-pager-box h4 {
margin:0;
padding:0;
color:#4898B9; /* Widgets title color */
font-size:16px; /* Title font size */
}

#blog-pager-newer-link {float:left;clear:both;line-height:30px;}
#blog-pager-older-link {float:left;clear:both;line-height:30px;}
.home-link {display:none;}
.blog-pager-older-link, .blog-pager-newer-link {
background-color: transparent !important;
background-image: none !important;
border:0 !important;
color: #4B4B4B !important; /* Color of the links */
float: left;
width: 500px;
clear:both;
}

a.blog-pager-older-link:hover, a.blog-pager-newer-link:hover {
text-decoration:none !important;
}
 
a.blog-pager-newer-link:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjyfFbwhfXB4JP7zLTPe0Ep68ifa7sfDKDiAMl6Rdc0bLT9ZbAkUT5aZux6qVJ3QW3HJjjzPGBYm7YsALbyRtCKpRVXbczXh3qZ9EZ060Rof22k9Am4g8ssCdHgkTOa4hrUoyMYPDkuD4/s1600/back.png);
float:left;
}
a.blog-pager-older-link:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoTjlqBCqKfjaJ8V65vwzMBE3nFOKWIBmxZwuh1qJ-vCUJ5Rsgf4oJT2p6ylob8btnyFeIzsEvaEphbaG1p1_piWchdNsDCOSsNZ4IdiEmcH9TKzTTXE-ytdZvqjnKx6i20pb9IbCo9RU/s1600/forward.png);
float:left;
}
#blog-pager {
width:500px;
background-color: transparent !important;
background-image: none !important;
border:0 !important;
text-align:left;
}
 
#blog-pager div {
color:#0577AB; /* Color for the "Newer Posts" and "Older Posts" text */
font-weight:bold;
margin-bottom: -5px;
}
a#blog-pager div:hover {
text-decoration:none !important;
color:#4898B9; /* Color for the "Newer Posts" and "Older Posts" text */
}
-->
</style>
</b:if>

Note that this gadget uses jQuery, so try to have only one version.

Customization:

- There are three URLs in blue, the first is the paper background image for the box, the other two are the icons that correspond to the arrows. You can replace these with your own.
- In green you can see where to change the text colors.
- The red number is the distance in pixels that activates the gadget, this means that the box will appear when you scroll down the 100px. You can use a higher value if your posts are usually long and therefore the "height" of the scroll is greater.

Step 4. Now, Save the Template and thats it!

You can also change the "Older Posts" and "Newer Posts" links with posts titles or images.

Read More..

Show Recent Posts With Thumbnails For Particular Label or Category in Blogger

Sometimes we want to have everything organized so that our readers can find topics of interest more easily, and thats when instead of putting a widget with the latest posts, we can put together the latest entries sorted by category, so that well be able to show the latest posts for each label we want and also display a thumbnail for our category.

Screenshot

To add this cool gadget/widget for the latest categories, just follow the next steps:

Steps

Step 1. From your Blogger Dashboard, go to Template/Edit HTML

...then tick the Expand Widget Templates checkbox:

Step 2. Search for this piece of code:

]]></b:skin>

and just above it, paste this one:

/* Recent posts by labels
--------------------------------- */
img.label_thumb{
float:left;
margin-right:10px !important;
height:65px; /* Thumbnail height */
width:65px; /* Thumbnail width */
border: 1px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}

.label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}

.label_with_thumbs a { text-transform: uppercase;}
.label_with_thumbs strong {padding-left:0px; }

Step 3. Now search for this tag (CTRL + F)

</head>

...and add the following script above it:

<script type=text/javascript>
//<![CDATA[
function labelthumbs(json){document.write(<ul class="label_with_thumbs">);for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel==replies&&entry.link[k].type==text/html){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel==alternate){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src="",a);c=s.indexOf(""",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Kzu_z6V9zssKEZsGZuKDfJjdFgRXxWjHe71hsQfp5Xpy3BYwxCy9WK-Pr5dFZpyQ9giTL4dlGHXpJL5smBUgMSjrLPmNgIP88sTZWvIPYpqJcE8bI028-aaFHuS9CEWaP3tqeZxnRoY/s1600/picture_not_available.png;}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write(<li class="clearfix">);if(showpostthumbnails==true)
document.write(<a href="+posturl+" target ="_top"><img class="label_thumb" src="+thumburl+"/></a>);document.write(<strong><a href="+posturl+" target ="_top">+posttitle+</a></strong><br>);if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write();document.write(postcontent);document.write();}
else{document.write();postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+...);document.write();}}
var towrite=;var flag=0;document.write(<br>);if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+-+cdday+ - +cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+ | ;}
if(commenttext==1 Comments)commenttext=1 Comment;if(commenttext==0 Comments)commenttext=No Comments;commenttext=<a href="+commenturl+" target ="_top">+commenttext+</a>;towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+ | ;towrite=towrite+<a href="+posturl+" class="url" target ="_top">More »</a>;flag=1;;}
document.write(towrite);document.write(</li>);if(displayseparator==true)
if(i!=(numposts-1))
document.write();}document.write(</ul>);}
//]]>
</script>

Note: to add your own pic for the posts with no thumbnail, replace the image url in blue with your own

So we have added the Css to style the widget and the script to make it work. Now all we have to do is to add the widgets code to the blog sidebar in a Html/Javascript gadget:

Step 4. Go to Layout - click on Add a Gadget

Step 5. Choose the HTML/Javascript widget and paste this code inside the empty box:

<script type=text/javascript>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Name-of-the-label?published&alt=json-in-script&callback=labelthumbs"></script>

Note: Where it says Name-of-the-label is the name of the label you want to display, and if your label is case sensitive, like in my example, then you should type it that way.

Also within the last code, there are parts that we can customize, just change true with false or vice versa:

var numposts ← Number of posts to display
var showpostthumbnails ← Show/hide thumbnails
var displaymore ← Show or hide the read more link
var displayseparator ← Show/hide separator
var showcommentnum ← Show/hide the number of comments
var showpostdate ← Show/hide the posts dates
var showpostsummary ← Show or not the posts summaries
var numchars ← Number of posts characters (here you have to change the 100 value)

Remember that the gadget displays the latest posts from a particular label, therefore, if you want to display the latest posts from other labels then just repeat step 5 for each additional category you want to add.

Thats it :) Enjoy!

Read More..

Add Random Posts Widget to Blogger

The Random Posts Widget will show random posts you have added to your blog. The main advantages of this widget is that it is loading pretty fast and shows thumbnails of your posts too, along with the comments link.

How to add Random Posts Widget to Blogger

Step 1. Log in to Blogger Dashboard, and select Template > Edit HTML (click on Proceed button if needed)

Step 2. Select "Expand Widget Templates"

Step 3. Find (CTRL + F) the following tag:

]]></b:skin>

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

#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}

Step 5. Save Template.

Step 6. Go to Layout, click on Add a Gadget 

Step 7. Add a new HTML/JavaScript Gadget

Step 8. Paste the following code in the empy HTML box:

<ul id=random-posts>
<script type=text/javaScript>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info=yes;
var rdp_comment=Comments;
var rdp_disable=Comments Disabled;
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write(<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts"></script>);function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type=text/javaScript>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if(contentin entry){var rdp_get_snippet=entry.content.$t}else{if(summaryin entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if(thr$totalin entry){var rdp_commentsNum=entry.thr$total.$t+ +rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel==alternate){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if(media$thumbnailin entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyAK8iAKDJGFVKdJMTW1m_bZEdr4TKeASyK-8tdm2Ql1EoDcNjBB4CaKqw2weRloI-sYqzlR18p37wwtWhVRES5eOfIl4jcJJNE-0lS8y2J90clU6XLnMxm1fZJk3dOpOSSPbc6blCyZk/s1600/default.jpg"}}};document.write(<li>);document.write(<img alt="+rdp_posttitle+" src="+rdp_thumb+"/>);document.write(<div><a href="+rdp_posturl+" rel="nofollow" title="+rdp_snippet+">+rdp_posttitle+</a></div>);if(rdp_info==yes){document.write(<span>+rdp_postdate.substring(8,10)+/+rdp_postdate.substring(5,7)+/+rdp_postdate.substring(0,4)+ - +rdp_commentsNum)+</span>}document.write(<div style="clear:both"></div></li>)}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write(<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index=+rdp_current[i]+&max-results=1&callback=random_posts"></script>)};
</script>
</ul>

Note: Replace no. 5 with the number of posts you want to be show.

Step 9. Press Save and Enjoy!

Read More..

How to Remove Showing Posts With Label in Blogger

For any default Blogger layout, the "Showing posts with label" message shows up above the posts whenever you click on a label link. As its a pretty useless and annoying message, many people like to have it removed. If that is your wish, just follow the tutorial below:

Removing "Showing post with label...show all posts"

Step 1. Go to Dashboard - Template - Edit HTML (if necessary, click on Proceed button)

Step 2. Click somewhere inside the template code, then search - using CTRL+F - this code:

<b:includable id=status-message>

After you found it, click on the sideways arrow next to it, to expand the rest of the code.

Screenshot:

Step 3. Below is this code that you need to remove - along with the first one, as well:

     <b:includable id=status-message>
      <b:if cond=data:navMessage>
      <div class=status-msg-wrap>
        <div class=status-msg-body>
          <data:navMessage/>
        </div>
        <div class=status-msg-border>
          <div class=status-msg-bg>
            <div class=status-msg-hidden><data:navMessage/></div>
          </div>
        </div>
      </div>
      <div style=clear: both;/>
      </b:if>
    </b:includable>

Screenshot 

 Step 4. Replace it with this one:

<b:includable id=status-message>
<b:if cond=data:navMessage>
<div>
</div>
<div style=clear: both;/>
</b:if>
</b:includable>

Step 5. Save the template. Now view your blog and click on some label....there should be no box anymore.

Read More..

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.

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>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond=data:blog.pageType == &quot;item&quot;>
<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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG0vxfF_MHiz0EAzpTG1YQixKwB59uz7_mP_MWYoDhk20SZOa0i2aA11Gu7OjaK8Rw-j3J4VRyQCDFFgpahsQgs259cpN-pZ5cScdyYJZZYBRVYCtZOMQuLrltQMQELHd6T9kEowCBiYFb/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src=http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js type=text/javascript/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

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:

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

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

Read More..

How to put Adsense ads on Blogger Blogspot

If you want to earn money from your site/blog, Google Adsense is the most popular service to monetize your blog or website content. When implemented, Adsense will display targeted Google ads on your blog and they can generate revenue on either a per-click or per-impression basis.
Of course, to display ads on your site, you should first Sign Up to Google Adsense program.


Before adding your ads, keep in mind that Adsense allows only up to 3 ad units, 3 link units and 2 search boxes per page.

In this tutorial i will show you the three ways you can add Adsense ads to your blog.

1. Adsense Gadget

Use this method to add ad unit as a widget, in places outside the blog post area. You can position it by simply dragging it in Page Elements, just like any other widget. To add the Adsense Gadget, go to:

1. Blogger Dashboard >> Design >> Page Elements >> click on the "Add a Gadget" link
2. From the pop-up window, select AdSense Gadget:

3. Configure ad format and colors.
4. Click Save and youre done.

2. Inline Ads

This will display an ad unit at the end of each post. To show ads between posts:

1. Go to Design > Page Elements and click the Edit link in Blog Posts gadget box.

2. Check the "Show Ads Between Posts" box.

3. Configure ad frequency, ad format, and colors. Live preview is provided beneath the settings.
4. Click Save.

3. Adsense code

The most notable benefits of using this method are:

• You can place ad anywhere in your blog
• You can add the code anywhere in your blog template - in your post content or page.
• To find out which format perform the best, custom channels will help you to track the performance of specific groups of ad units.
• You can choose types other than ad unit i.e. link unit, search box.

To create an ad unit:
1. Go to Google Adsense website.
2. Click on My ads tab, go to Ad units and then press on the "New ad unit" button.

3. Choose your ad type, choose format and colors and assign channels.
4. When you have finished editing, click on the Save and get code >> button and copy the code provided.

To add an ad unit to your blog, you have the following options:

• Paste the code in a HTML/Javascript gadget
• Paste the code in a blog post or page, or
• Paste the code direct in your template. (if you choose this option, first you should convert adsense ad code)

If you have any more questions, leave a comment below.

Read More..

How to Add Different Background Color or Image in Each Blogger Post

When you have multiple authors on a blog and want to make a specific post stand-out, then you can change your posts background color or place a background image behind them, each time is needed. Therefore, this tutorial will show you how to style each post differently by adding some codes in your Blogger posts. (this wont take effect if you have the read more function enabled on your blog)

 Demo

How to Change the Color of the Post Background

When you create a post, switch to HTML, near the Compose tab and add the following code just at the beginning and at the end of your post content.

<div style="background-color: #DCC368; padding: 5px 8px 5px 8px;">
Your text goes here...

</div>

• add the red line at the BEGINNING of your post.
• add the div tag in blue at the END of your post.
• replace the part in green with your own color (search for colors hex value)
• "Your text here...." is where the Post content goes

Its done by wrapping your Post content into a "div" element. You can apply this setting anytime to your already published posts as well or you can change/remove it later.

Heres the example of the placed code in the Post Edit box:

How to Add a Background Image in a Blogger Post

Add the following code just at the beginning and end of your post content.

<div style="background-image: url(IMAGE-URL-HERE); background-repeat: no-repeat; ">
Your text goes here...

</div>

• in green, you need to paste the URL address of your hosted picture (use Photobucket, Tinypic etc.)
• the red line has to be added at the beginning of your post.
• the blue part has to be added where your post ends.
• "Your text here...." is where your Post content should be

Now click Publish and you are done.

Read More..

How to add Facebook Like Fan Box to Blogger

A Facebook Fan Box or Like Box is a great plugin that allows blog visitors to subscribe to your blog updates via their Facebook accounts, without leaving your blog. After subscribing (by pressing like button), visitors will receive your most recent blog updates on their Facebook page. This box also displays faces of the "likers" on your blog. Before creating a fan box you should already have a facebook fan page. If you havent yet created, click here to learn How to Create a Facebook Fan Page.

Add Facebook Like Box to Blogger

1. Find out your Facebook fan page URL by visiting your Facebook fan page and copy the url in the address bar, you can see how your url should look like in my screenshot:

2. Then visit this page: http://developers.facebook.com/docs/reference/plugins/like-box

3. Paste your url into the Facebook Page URL field as it is shown below:

4. Once you are satisfied with the looks of the Like Box, click on the "Get Code" button

5. Youll be given two codes, titled HTML 5, XFBML and IFRAME. You only need the iframe code.
Select it and copy the code generated for your box as it is shown in the example below:

6. Then go to your Blogger Dashboard > Layout > click on the Add a Gadget link

 7. From the pop-up window, scroll down and select HTML/JavaScript

8. Paste the code in the empty HTML box.

9. Click Save and youre done.

Read More..

A Simple Related Posts Widget For Blogger

In the last tutorial, ive 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 lets begin adding it!

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:

<!--Related Posts Scripts and Styles Start-->
<!--Remove--><b:if cond=data:blog.pageType == &quot;item&quot;>
<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=&quot;Related Posts&quot;;
</script>
<script src=http://helplogger.googlecode.com/svn/trunk/related_posts.js type=text/javascript/>
<!--Remove--></b:if>
<!--Related Posts Scripts and Styles End-->

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:

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

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!!!

Read More..

Add Floating Social Media Sharing Buttons To Blogger

The Floating Social Media Sharing is a very popular widget on all the top blogs, being a very good way to increase the number of times your posts get shared on Twitter, Facebook and other social networks. It has some of the following functions: Facebook Like, StumbleUpon, Twitter Share, Digg This, Google+ and RSS Feed Icon and each of them comes with a live counter. You can add more sharing buttons or social bookmarking icons later if you wish.

How to add the scrolling social bookmarking bar

1. Go to Layout
2. Click on Add A Gadget link
3. From the pop-up window, scroll down and select HTML/Javascript
4. Copy the code below and paste it inside the empty box.
5. Save the gadget.

The code to copy-paste (updated!):

<!-- floating share bar Start helplogger.blogspot.com--> <style type="text/css"> #pageshare {position:fixed; bottom:5%; margin-left:-721px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id=pageshare title="Get this from Helpblogger.com">
<div style="margin-left:8px;"><div class=sbutton id=like style=margin: 5px 0 0 5px;><script src=http://connect.facebook.net/en_US/all.js#xfbml=1></script><fb:like layout=box_count show_faces=false></fb:like> </div></div>
<br /><div class=sbutton><a class=twitter-share-button data-count=vertical data-via=Helplogger expr:data-counturl=data:blog.url href=http://twitter.com/share rel=nofollow>Tweet</a><script src=http://platform.twitter.com/widgets.js; type=text/javascript></script>
<br /><div class=sbutton id=su> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class=sbutton id=digg style=margin-left:3px;width:48px> <script src=http://widgets.digg.com/buttons.js type=text/javascript></script> <a class="DiggThisButton DiggMedium"></a> </div> <div class=sbutton id=gplusone> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone></div><br/><a href=http://feeds.feedburner.com/helplogger rel=nofollow target=_blank title=Subscribe To Our Rss Feed><img src=http://2.bp.blogspot.com/-MoGJ9Y3EdzQ/T8f4cj6LHMI/AAAAAAAACP4/VsM0eaG2EM4/s1600/icon_rss_reader.png/></a><div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://helplogger.blogspot.com/">widget</a></div><!-- Do not remove this link --> </div> <!-- floating share bar End --></div>

Customization:

• Vertical alignment - Change the value of bottom in code line 3. The code positions the button relative to the bottom of your browser window. To fix the distance even when window is resized, specify the value in px (pixels) instead of %.
• Horizontal alignment - Change the value in red of margin-left. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right. Increase or decrease the value based on your needs.
• Twitter setting - Replace Helplogger with your Twitter username
• Replacing and removing buttons - You can replace existing buttons with your own. Each button is represented by this code: <div class=sbutton> BUTTON CODE HERE </div>
• RSS Feed - Change the text in blue with the url address of your RSS feed.

Enjoy :)

Read More..

Recent Comments Widget For Blogger

The Recent Comments Widget for Blogger displays the recent blog comments on your blogs sidebar, showing a snippet of the last comments along with the title of the post to which the comment was made. If you want to encourage your readers in leaving comments on your blog, this is a widget I would recommend.

How To Install The Recent Comments Widget For Blogger

Step 1. Go to your Blogger Dashboard >> Layout >> Add a Gadget

Step 2. From the pop-up window, scroll down and choose the HTML/JavaScript option:

Step 3. Now copy and paste the below code in the HTML/JavaScript box:

<script style=text/javascript src="http://helplogger.googlecode.com/svn/trunk/recent comments widget.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://your-blog-name.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><span id=rcw-cr><a href=http://helplogger.blogspot.com/2012/03/recent-comments-widget-for-blogger.html>Recent Comments Widget</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>

Step 4. Replace your-blog-name with your blog url.

Step 5. Click Save and youre done.

Hope youll enjoy it!

Read More..

Style blogspot blogger date header

To change your blogs date header color and font style, you can do it with a very simple CSS adjustment that will make the date header to float on the left side of your post and to be partially out of the structure like a banner with a colorful appearance.
See the result in the image below:

How to do it

Step 1. Login into your Blogger Dashboard, select Template option > click on Edit HTML 

Step 2. Select Expand Blogger Template and search (CTRL + F) for the following code:

date.header

Or...

.date-header

Step 3. Add the following code snippet just below of it

background:white;
border-bottom: 1px solid #000000;
font-size:12px;
margin-left:-105px;
padding:3px 3px 3px 3px;
width:90px;
word-wrap:break-word;
float:left;
}

Putting it all together, it should look something like this:

.date-header span {
background:#FFD465;
border-bottom: 2px solid #cc0000;
color:#000000;
font-size:12px;
margin-left:-105px;
padding:3px 3px 3px 3px;
width:90px;
word-wrap:break-word;
float:left;}

To modify the style, replace the above bold/colored codes...

to change the background color:

• #FFD465: replace with the hex code of the color you want

to change the border style:

• delete -bottom if you want border all around
• change: 2px to a higher or lower value
• change: solid with dotted if you want a dotted line
• change:  #cc0000 with the hex code of border color

to change the font size and date color:

• for a bigger text, change: 12px to a higher value
• color: replace the hex code (#000000) with the hex of date color

Example:

color: #0000cc;

to change margin-left:
(represents the distance between date and blogger post)

• replace -105px with a bigger/smaller value

float:

• change left to right

Read More..

Simple Recent Posts Widget for Blogger Blogspot

The main advantage on this Recent Posts widget is that it will show not only post titles but also post excerpts or snippets and its easy to customize/ apply different style on it. To style it into your own design, you just have to modify the CSS style - you can change the link or background color, the size and color of text/links.

What you can do with this widget:

• display post titles only
• change the number of posts
• change the number of characters of the post snippet/excerpt
• show the post dates

See the screenshot below:

How to add Recent Posts Widget to Blogger

Step 1. Log in to your Blogger Dashboard, then go to Layout and click on Add a Gadget link

Step 2. From the pop-up window, scroll down and choose HTML/JavaScript

Step 3. Select & Copy the code from one of the options below and paste it into the new HTML/JavaScript:

Option 1: Recent posts widget with snippets

<div id="hlrpsa">
<script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjckPo4VGPg5ZPkuQZ-wDDei1-XInSfB6f92c2UkP9xtDT1BqLmOILDjlotR3zBg0doc6qK6hC2gTOWBCzDLXC8HkmJtcR0vmMxBpZhJiOPqHc_ZwzBG1SZ-V61et-gy46OHNSRLsOi_1pT/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>

Option 2: Recent Posts Widget Showing Post Titles Only

<div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjckPo4VGPg5ZPkuQZ-wDDei1-XInSfB6f92c2UkP9xtDT1BqLmOILDjlotR3zBg0doc6qK6hC2gTOWBCzDLXC8HkmJtcR0vmMxBpZhJiOPqHc_ZwzBG1SZ-V61et-gy46OHNSRLsOi_1pT/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

Step 4.

• Change 5 (option 1) and 10 (option 2) with the number of posts you want to display. 
• Change false to true if you want the posts dates to appear 
• Change 100 (option 1) if you want more characters to be displayed.
• To change the color and font size of the links, modify the values in blue (links) and violet (font-size)
• To change the style of posts summary, modify the values in green (color) and orange (font size)
• Replace the your-blog text with the name of your blog or if you have a custom domain change all the bolded line with your address like in this example:

http://www.your-site.com/feeds/posts/default....

Step 5. Save your widget. And thats it! Enjoy!

If you need any help, leave a comment below.
And if you liked this post, please consider sharing it. Thanks.

Read More..