Monday, February 10, 2014

How to Add Adsense Ads In the Middle or Anywhere inside Blogger Posts

 
In a previous post we saw how and where we can place Adsense ads on our blog; however, these methods would only work when we place the ads on predetermined and fixed locations. For posts area, the most common places are below the title, at the beginning of the post or at the end of the post.

But what if we want to display an AdSense ad in the middle of a post?

We can manipulate the location of the ads to be displayed by adding a script inside the template, then using a label inside our post to where we want the AdSense ad to appear. Once added, we can place the ads anywhere, be it between paragraphs or in the middle of the content etc.
Manually inserting Adsense ads in the middle of posts in Blogger is pretty simple, just follow these steps below:

Before proceeding, it is recommended do backup your template (go to Template > click on the Backup/restore button)

Step 1. First thing we need to do is to "parse" the AdSense code, in other words, convert it to plain text. Then go to Template, click on the Edit HTML button, click anywhere inside the code area and look for this tag (CTRL + F):
<data:post.body/>
Note: you may find it several times, but we need to stop at the second one or if you can't see any changes, test the third one

Screenshot
Step 2. Replace the <data:post.body/> tag with this code:
<div expr:id='"adsmiddle1" + data:post.id'></div>
<div style="clear:both; margin:10px 0">
<!-- Add here the code of your ad -->
</div>
<div expr:id='"adsmiddle2" + data:post.id'>
<data:post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementById("adsmiddle1<data:post.id/>");
var obj1=document.getElementById("adsmiddle2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>
Step 3. Put the converted Adsense code to where you see the <!-- Add here the code of your ad --> annotation, then save the changes by clicking on the Save template button

Step 4. When you create a New Post, add this tag inside the HTML section in the exact location where you want the Google AdSense ads to appear:
<!-- adsense -->
For example:
<div>This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text.</div>
<!-- adsense --><div>This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text.</div>

Screenshot
Note: If you don't add the label to bring up the ad then the ad appears below the title by default.

This method doesn't violate Google's Terms of Service because you are not changing the structure of the ad.

How to Add an Admin Control Panel in Blogger

A while ago I've posted some tutorials on how you can remove the Blogger Navbar or add a Peek A Boo Effect so that it would show only when we mouse over on top of our page.

However, customizing or removing the Blogger Navbar also has its downside because the admin links for "New post", "Customize" and "Log Out" will be no longer visible and navigating through the blog functions could be really frustrating sometimes. When the navbar is visible, blog administrators can easily create a new post or customize their template with just one click; however, when the navbar is hidden, many more clicks are required to access the Blogger dashboard panel again.

So in this tutorial, we'll see how to add an "Admin Control Panel" menu with many cool additions such as:

- access to the Blogger's Homepage
- create a New Page or Post
- view all your posts
- read your comments
- access the Blog's layout to add or rearrange gadgets
- edit the HTML of your Template
- refresh current page or post
- open a new tab with your blog's homepage
- access the blog' settings
- view your stats
- ...and finally, log out

We will put all these options on the top of your page as a menu and we will make it visible only to the administrator of the blog, so our blog visitors will not be able to see it.

The result will be something like this:

admin control panel for blogger

Getting the Blog ID 

The first thing we need to do is get the ID of our blog by clicking on any option from our Blog Dashboard, for example Settings. Once we have clicked there, take a look at the address bar in your browser:

blogger id number

Within the URL you will notice a string like this:
blogID=XXXXXXXXX
Where XXXXXXXXX is the unique identifier (ID) for your blog.

Copy the ID for the blog you wish to work with so we can add this in the links for your admin control panel.

Adding the admin control panel to Blogger template


The Admin Control Panel will only be visible when the blog author is logged in. It is invisible to blog readers, similar to the Edit post/widget pencil icons which are only visible to you while you are logged in.

To add the control panel to your Blogger template, follow the steps below:

Step 1. Go to Template and click on the Edit HTML button:


Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box

Step 3. Paste this line inside the search box then hit Enter to find it:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Note: if you can't find this line, try to find the <body> tag.

Step 4. Just below this line, add the following code:
<span class='item-control blog-admin'>
<style>
.control-panel ul{z-index: 20; position: absolute; margin: 0px auto; background-color: #F6F6F6; width: 100%; }
.control-panel ul li{display: inline-block; float: left; padding: 7px 0px;}
.control-panel ul li a {color:#686868;padding: 7px 15px;border-right: 1px solid #E3E3E3;font-weight: bold;font-size: 13px;}
.control-panel a:hover {text-decoration:none; color:#FC8F44;}
</style>
<div class='control-panel'>
<ul>
<li><a href='http://www.blogger.com/home'>My Blogs</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#editor/src=sidebar'>New Post</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#editor/target=page'>New Page</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#posts'>All Posts</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#comments'>Comments</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#pageelements'>Layout</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#templatehtml'>Edit HTML</a></li>
<li><a href='#' onclick='location.reload(true); return false;'>Refresh</a></li>
<li><a href='/' target='_blank'>New Tab</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#basicsettings'>Settings</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#overviewstats'>Stats</a></li>
<li><a href='http://www.blogger.com/logout.g'>Logout</a></li>
</ul>
</div>
</span>
Change XXXXXXXXXXXXX with your unique Blog ID previously copied, and be careful not to delete anything, like quote or any other character.

Step 4. Click on the Save template button to save the changes.

Now take a look at your blog. While you are logged in to Blogger, you should notice your control panel appear on top of your blog. Enjoy!

With this admin control panel for Blogger you can easily access the functions of the blog and you will not have to always open your blog page and the Blogger homepage at the same time.

How to Add Adsense Ads In the Middle or Anywhere inside Blogger Posts

In a previous post we saw how and where we can place Adsense ads on our blog; however, these methods would only work when we place the ads on predetermined and fixed locations. For posts area, the most common places are below the title, at the beginning of the post or at the end of the post.

But what if we want to display an AdSense ad in the middle of a post?

We can manipulate the location of the ads to be displayed by adding a script inside the template, then using a label inside our post to where we want the AdSense ad to appear. Once added, we can place the ads anywhere, be it between paragraphs or in the middle of the content etc.
Manually inserting Adsense ads in the middle of posts in Blogger is pretty simple, just follow these steps below:

Before proceeding, it is recommended do backup your template (go to Template > click on the Backup/restore button)

Step 1. First thing we need to do is to "parse" the AdSense code, in other words, convert it to plain text. Then go to Template, click on the Edit HTML button, click anywhere inside the code area and look for this tag (CTRL + F):
<data:post.body/>
Note: you may find it several times, but we need to stop at the second one or if you can't see any changes, test the third one

Screenshot
Step 2. Replace the <data:post.body/> tag with this code:
<div expr:id='"adsmiddle1" + data:post.id'></div>
<div style="clear:both; margin:10px 0">
<!-- Add here the code of your ad -->
</div>
<div expr:id='"adsmiddle2" + data:post.id'>
<data:post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementById("adsmiddle1<data:post.id/>");
var obj1=document.getElementById("adsmiddle2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>
Step 3. Put the converted Adsense code to where you see the <!-- Add here the code of your ad --> annotation, then save the changes by clicking on the Save template button

Step 4. When you create a New Post, add this tag inside the HTML section in the exact location where you want the Google AdSense ads to appear:
<!-- adsense -->
For example:
<div>This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text.</div>
<!-- adsense --><div>This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text.</div>

Screenshot
Note: If you don't add the label to bring up the ad then the ad appears below the title by default.

This method doesn't violate Google's Terms of Service because you are not changing the structure of the ad.

Recent Rotating Post Gadget with Excerpt For Blogger

This Javascript code will display the latest posts of any feed with the distinction of having two parts that can be used individually or combined. At the top this widget will show a single post along with the title (link), author, date and a brief summary of its content. In addition, this post will rotate automatically within a list whose number of elements will be decided by us. At the bottom, we'll find a full list with chosen posts that will change the post above when we mouse over them, thus breaking the automatic cycle.
Before installing anything, let's see it in action to decide if it does what we want.


Loading...

How to Add Recent Rotating Posts Widget to Blogger


Step 1. Go to Layout > click on Add a Gadget link.


Step 2. From the pop-up windows, choose the HTML/Javascript gadget


Step 3. Paste this code inside the empty box:
<style>
.gfg-root {
width: 100%;
height : auto;
position : relative;
overflow : hidden;
margin: 0 auto;
text-align : center;
font-size: 12px;
border: 1px solid #DBDBDB;
}
.gfg-title {
font-size: 16px;
font-weight : bold;
color : #6B6B6B;
background:#F3F3F3;
background-repeat: repeat;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
padding: 5px;
text-shadow: 0px 2px #fff;
}
.gfg-entry {
background-color: #FFFFFF;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
.gf-title a {
text-transform: capitalize;
color: #0000ff;
font-size: 14px;
}
.gfg-subtitle {
display: none;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
}
.gfg-listentry-odd {
background-color : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-even {
background-color : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-odd a{
color: #595959;
padding: 0 0px 0 10px;
}
.gfg-listentry-even a{
color: #242424;
padding: 0 0px 0 10px;
}
.gfg-listentry-highlight {
background: #FFFFFF;
}
.gfg-listentry-highlight:before {
position: absolute;
left: 0;
content: '\25BA ';
font-size: 14px;
color: #DBDBDB;
}
.gfg-listentry-highlight a {
color: #242424;
}
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color: #ffffff;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 14px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
margin-bottom : 2px;
margin-top: 5px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
.clearFloat {
clear : both;}</style>
<script src="http://www.google.com/jsapi" type="text/javascript"></script><script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {var feeds = [{title:'List',url:'http://helplogger.blogspot.com/feeds/posts/default?redirect=false&start-index=1&max-results=10'},];
new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'Latest Posts', numResults : 10, displayTime : 5000, hoverTime : 500});} google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>

Customizations:

The url in blue is the feed address. Obviously, the http://helplogger.blogspot.com address should be replaced with yours.

Next is start-index=1. This number indicates which post will appear first on the list. By default it is the latest post published on our blog, so if we want to begin displaying older posts, we need to change the 1 value.

max-results=10 indicates the maximum number of posts that we will be reading from the feed, beginning from the one that we have set up before in the start-index=1. This number always needs to be equal or greater to what we should see later and its purpose is to set the number of posts that will be shown in the gadget. The easy thing would be to put 500 in order not to fail, but the higher the number is, the longer the gadget will take to load, so it's better to adjust to what we need to show.

Finally here are some other parameters of the script:

title: 'Latest Posts', is the widget's title that appears on top.
numResults: 10, number of posts that will show in the list
displayTime: 5000, the delay time between posts in the rotator (in milliseconds)
hoverTime: 500, minimum time for an item in the list to be displayed at the top.

If you want to hide the list and show only the posts, then change this part:
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
}
 to :
.gfg-list {
display:none;
}
and if you want to display only the list, then change this part:
.gfg-entry {
background-color: #FFFFFF;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
to:
.gfg-entry {
display: none; }

Step 4. Save the gadget and you're done. Enjoy!

Filter out your visits to your blog from Google Analytics traffic statistics

The results of daily visits in the web hit counters always have a margin of error. In most of them, this margin is very high, therefore the statistics shown are not even a bit closer to the actual visits we have. Google Analytics has a very short margin of error, which makes it more reliable, so that we have a better idea of how many people visit us.

However, if you visit your own website, either to check if everything works well, to review comments, to answer them, to see if anyone is online, or just because you need to enter, then your visit will also be registered in the counter. This implies that the margin of error is larger again, because those visits are not our actual visits and we are not interested in knowing how many times we are coming back to our site, but how many people from elsewhere are visiting.
Therefore what we can do is to filter our IP so that we won't be registered in the statistics and thus to get "cleaner" results on the total number of visits and page views.
  1. The first thing is to find out what is your IP address. Just type "what is my ip address" on google and above all of the results it will say "Your public IP address is..." or you can use an online service that shows your IP. There are many of these sites, one of them being http://whatismyipaddress.com... just go to the site and it will automatically show your IP.
  2. Login to your Google Analytics account and click Admin in the orage bar on the right side. This will take you to the account administration screen 
  3. On the left is the Account section and below you'll find a tab called All Filters, just click the "+NEW FILTER" button.
  4. Give the filter any name you'd like. Filter Type is "Predefined filter", "Exclude", choose "traffic from the IP addresses" and "that are equal to" then enter your four numbered IP address you looked up in step 1.  Check whether it's IPv6 or not (if you don't know leave it unchecked).
  5. Save the changes.
Screenshot:

google analytics filters


You can add as many IP as you want, depending on how many different computers you use to access your site. And that's it. Now you can browse your site without registering a click in the Google Analytics metrics.

How to Use Character Entities in CSS, HTML and JavaScript

 
Sometimes, when using scripts, we must write special characters like accents by using a special set of codes called character entities, however these don't always look good or we get a question mark or other strange symbols. Usually, this is solved if the character encoding is done right but the logic may not always work.

In Blogger, special characters most of the time appear correctly, but when it is about other services, like external files, things can get complicated.

For example, this usually looks good and when you click on this link, you should see the letters in the right way:
alert(" á é í ó ú  ☺ ✛ ❤ ");
If we are trying to use other method and we want to use this type of characters, sometimes we need to write them in a special format called escape sequence which is nothing but a backslash followed by a letter and a number in hexadecimal format. In the case of common characters or accents, it would be \x followed by two hex digits:
\xe1 is the letter á
\xe9 is the letter é
\xed is the letter í
\xf3 is the letter ó
\xfa is the letter ú
Other combinations generate special characters:
\n is a line break
\t is the tab character
\' is single quote
\" is double quote
\\ is a back slash
Or we can use \u followed by the Unicode character code expressed as four hexadecimal digits:
\u00e1 is the letter á
\u00e9 is the letter é
\u00ed is the letter í
\u00f3 is the letter ó
\u00fa is the letter ú
this will allow us to see correctly what we couldn't before if we were using some other services:
alert(" \u263a \u2764 \u271b ");
On this page you can find a comprehensive list of all the characters, both symbols and different alphabets.
Although rare characters are not often used in the CSS, there is a case when they are necessary as well, like when using the content property with the :after and :before pseudo-elements.

The same criteria applies there, but we only need to add a backslash followed by the four-digit hexadecimal code. For example:
content: ":\24d1\24d4\24d5\24de\24e1\24d4";

content: ":after  \263a  \2724  \2602";
:ⓑⓔⓕⓞⓡⓔ
:after ☺ ✤ ☂

Remember that IE doesn't understand the :before pseudoclass with content, and you would have to set the list-style-type property as none, or you would get 2 bullets in CSS compliant browsers.

Spacegallery: image gallery/slideshow made with jQuery

 
There are many types of galleries for images that can be found on the internet, but we rarely find one showing images so differently like this one. Those using Mac OS X will surely notice a lot of similarity with TimeMachine and those who don't, for sure will enjoy this type of effect for viewing images.
I'm talking here about Spacegallery, an image gallery done with jQuery in which images are being displayed one after another when clicking on them. Click on the pictures below to see how it works:


How to Add Spacegallery Image Slideshow to Blogger

To implement this gallery is very simple. Just follow the steps below:

Step 1. Log in to your Blogger Dashboard and select your blog > go to Template and click the Edit HTML button.

Step 2. Click anywhere on the code area and search by using the CTRL + F keys for this tag
</head>
Step 3. Before the </head> tag, paste the following scripts:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/eye.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/utils.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/spacegallery.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
(function($){
var initLayout = function() {
var hash = window.location.hash.replace('#', '');
var currentTab = $('ul.navigationTabs a')
.bind('click', showTab)
.filter('a[rel=' + hash + ']');
if (currentTab.size() == 0) {
currentTab = $('ul.navigationTabs a:first');
}
showTab.apply(currentTab.get(0));
$('#myGallery').spacegallery({loadingClass: 'loading'});
};

var showTab = function(e) {
var tabIndex = $('ul.navigationTabs a')
.removeClass('active')
.index(this);
$(this)
.addClass('active')
.blur();
$('div.tab')
.hide()
.eq(tabIndex)
.show();
};

EYE.register(initLayout, 'init');
})(jQuery)
//]]>
</script>
Screenshot
Note: if you have already jQuery added in the template, then delete the line in red.

Step 4. Next, search for ]]></b:skin> (CTRL + F) and when you found it, click on the arrow next to it:


Step 5. Paste just above ]]></b:skin> the following CSS style:
#myGallery {
width: 100%;
height: 400px;
}
#myGallery img {
border: 2px solid #52697E;
}
a.loading {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqaP1gAFWpz04lX0bnL2bTEen91-Ilfz0dL71Kp5XCSNjklcBBPdDXfedGo25Ssp2KjA0HqLWEqbZbSp05fHQx62TEBHuFFS6mrp8YTwrKLmZHXa4om37Xr_YtFlhTiwD_GHt387R0Fft/s1600/ajax_small.gif) no-repeat center;
}
.spacegallery {
position: relative;
overflow: hidden;
}
.spacegallery img {
position: absolute;
left: 50%;
}
.spacegallery a {
position: absolute;
z-index: 1000;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Step 6. To save the changes, click the Save template button.

Step 7. Finally, go to Layout > Add a Gadget > HTML/Javascript and copy-paste the code below:
<div class="spacegallery" id="myGallery">
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
</div>
Replace the Image URL text with the image addresses that you want to appear on the gallery, considering that the last image is the first to be displayed. And if you want to add this slideshow inside a post, just go to your dashboard and create a New Post, then paste the code in the HTML section.
That's it! Now, you can enjoy this simple image gallery on your blog and although, it has no display options or settings, is without a doubt a gallery that will draw the attention of your readers.