Ubuntu / Linux news and application reviews.

Individual Post Views Counter For Blogger - Using Your Own Web Host

| Date: September 20, 2009 | View Comments | Tags: blogger, blogging, counter, hack, image counter, text counter

Some time ago, we published a way to have individual post views displayed in each of your Blogger post. The problem is: there is no hosting plan to handle all the post views for all Web Upd8 readers which have installed this Blogger hack, so the only way around this would be for you to install the script on your own server / web host.

I know of two PHP scripts which can do this, so I will handle each one in this post. Read on!


How To Implement (Fix) The New, Default "Read More" For Your Custom Blogger Template

| Date: September 10, 2009 | View Comments | Tags: blogger, blogging, hack, read more, web

Like I told you yesterday, Blogger has finally implemented (it took them 10 years) the "Read more" - post summaries on the main page - by default. But if you have a custom Blogger template, this won't be activated for you as there is some code missing from your template and this needs to be fixed manually. If you have an older Blogger hack for achieving this "Read More", don't worry, you can keep the old Blogger hack and still use the new one.

Here is what you need to do to activate (fix) this new Blogger feature for your custom template:

Go to your Blogger Dasboard > Layout > Edit HTML and check the "Expand Widget Templates" box. Then search for something like:

How to Add Sexy Social Bookmarking To a Blogger Blog

| Date: July 26, 2009 | View Comments | Tags: blogger, blogging, hack, social bookmarks

sexy bookmakrs

To add the social bookmarking icons like in the screenshot above (you can also see it in action at the bottom of this post), all you need to do is add some CSS and HTML to your Blogger blog. For Wordpress blogs, there is a plugin for this.

To add it to your Blogger (blogspot.com) template:

1. Go to your Blogger Dashboard > Layout > Edit HTML and search for the following piece of code: "]]></b:skin>" and paste the following code right before it:

div.sexy-bookmarks {
height:54px;
background:url('http://www.netupd8.com/w8img/2ueii3t.png') no-repeat left top;
position:relative;
width:540px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://www.netupd8.com/w8img/2ueii3t.png') no-repeat right top;
position:absolute;
right:-17px;
}

div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;

}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url('http://www.netupd8.com/w8img/21ndq48.jpg') no-repeat !important;
}

.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}


2. Check "Expand Widget Templates" and search for the following tag in your template: <data:post.body/> and paste the below code right after it:
  <b:if cond='data:blog.pageType == "item"'>
<br/>
<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='del.icio.us'/></li>

<li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='Digg'/></li>

<li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='Technorati'/></li>

<li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='Reddit'/></li>

<li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='Stumbleupon'/></li>

<li class='sexy-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='Designfloat'/></li>

<li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='Facebook'/></li>

<li class='sexy-twitter'><a href="javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('src','http://bigtweet.com/ext/bigt/bigt.js');document.body.appendChild(e)})())" /></li>

<li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='Furl'/></li>

<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/webupd8' rel='nofollow' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='" mailto:?subject=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Email this'/></li>

</ul>
<span class='sexy-rightside'/></div>
</b:if>


If the above code gives you an error, try it from this location.

This will make the Sexy Bookmarks only show up on the posts page, and will not be visible on the main page. It also uses a cool effect for the Twitter button.

How to Block (Ban) Users From Visiting Your Blogger Blog

| Date: July 24, 2009 | View Comments | Tags: blogger, blogging, hack

As always, it's not that simple implementing something that needs PHP in Blogger (blogspot.com) so I keep an eye on new Blogger hacks.

Recently I discovered a script on ChicaBlogger which allows users which on a blogspot.com blog to ban someone by his IP address. You can do this with JavaScript and PHP, by adding the following code at the beginning of your blog's <head> tag:

<script type="text/javascript" src="http://code.vietwebguide.com/php/addr.php"></script>
<script type="text/javascript">
//&lt;!CDATA[
// Banned ip script 2.0
//(C)2009 Anhvo
//homepage: http://vietwebguide.com

var banned_ip = new Array();

banned_ip[0] = '85.142';
banned_ip[1] = '22.98.69.1';
banned_ip[2] = '22.98.69.146';
banned_ip[3] = '85.78';

var mes_bi = "Your IP is banned so you cannot visit this website!";

for(var i=0;i&lt;banned_ip.length;i++) {
eval('var re = /^' + banned_ip[i] + '/ ;');
if (re.test(mc_user_ip))
{
document.write('&lt;style type="text/css"&gt;');
document.write('BODY{display:none;}');
document.write('&lt;\/style&gt;');
alert(mes_bi);
break; 
}
}
//]]&gt;
</script>


UPDATE: The script no longer works because the address which got the ip of the user (http://code.vietwebguide.com/php/addr.php) is now redirecting to another website. To remove the code from your template, click on edit template and then quickly click the stop button on your template... that should work.

Replace the IP ranges from the above code with the IPs of the visitors you want to keep out of your blog. Example: If you want to block all IPs in the range '66.45.XXX.XXX', simply add "66.45" as the IP number in the above code.

Note: if entering the above code into your template returns the following error: "XML error message: The content of elements must consist of well-formed character data or markup.", use the code from this location (exactly as it is there) instead of the one above.

How to Install the Latest PulseAudio (0.9.15) in Ubuntu Jaunty

| Date: May 23, 2009 | View Comments | Tags: audio, hack, pulseaudio, software, ubuntu

Even Ubuntu’s developers admit they implemented wrong in order to expose bugs in the ALSA system. So if you want the latest PulseAudio in Ubuntu Jaunty, go to System > Administration > Software Sources, second tab, click "Add":
deb http://ppa.launchpad.net/themuso/ppa/ubuntu jaunty main
deb-src http://ppa.launchpad.net/themuso/ppa/ubuntu jaunty main
Then import the PPA key:
sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys B88A1AA8
And then to install the latest PulseAudio (0.9.15):
sudo apt-get update && sudo apt-get dist-upgrade

After that, you may want to restart (in my case, some PulseAudio settings didn't work until I restared).

Breadcrumbs for Blogger (blogspot.com)

| Date: May 05, 2009 | View Comments | Tags: blogger, blogging, blogspot.com, breadcrumbs, hack

I found two types of breadcrumbs for Blogger, one based on the category of a post and the second one based on the post's date:

1. Breadcrumbs based on a post's category


photobucketThis is how it will look like: Browse » Home » Tutorials » Breadcrumbs for Blogger

Step 1: Save your template
Go to the Layout tab, and click Edit HTML.
Download your template as an XML-file and save it onto your harddisk. If anything goes wrong, upload it again and not much harm will be done.

Step 2: Expand the widget code
Now check the checkbox to display your template's XML-code. Ready to hack? Here we go!

Step 3: Add a new Includable
We are going to modify the code of the Blog-widget. The default-widget uses a so-called "includable" (a chunk of code) to display a status-message above your posts when you have selected all posts with a certain label. We will turn off this default status message, and replace it with our breadcrumbs.

Scroll down through your expanded widget code and look for the following piece of code:
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<data:adStart/>

(It doesn't have to be exactly like that) Now we will switch off the default status-message, by putting comments-brackets around it. (You can also delete the line, but I think leaving it there and commenting it out is more elegant in case you want to track back and debug).

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
  <!-- disable default status message
<b:include data='top' name='status-message'/>
  default status message disabled -->
<data:adStart/>

Now add the following line, that will call our breadcrumb includable:
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<!-- disable default status message
<b:include data='top' name='status-message'/>
default status message disabled -->
    <b:include data='posts' name='breadcrumb'/>
<data:adStart/>

Immediately above this 'main' includable, insert our new breadcrumb includable:
<b:includable id='breadcrumb' var='posts'>
  <b:if cond='data:blog.homepageUrl == data:blog.url'> 
  <!-- No breadcrumb on front page -->
  <b:else/> 
    <b:if cond='data:blog.pageType == "item"'> 
       <div class='breadcrumbs'> 
         Browse »  <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> 
         <b:loop values='data:posts' var='post'>
           <b:if cond='data:post.labels'> 
             <b:loop values='data:post.labels' var='label'> 
               <b:if cond='data:label.isLast == "true"'> » 
                 <a expr:href='data:label.url' rel='tag'><data:label.name/></a> 
               </b:if> 
             </b:loop> 
             » <span><data:post.title/></span> 
           </b:if> 
         </b:loop>
       </div> 
    <b:else/> 
      <b:if cond='data:blog.pageType == "archive"'> 
        <div class='breadcrumbs'> 
          Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/> 
        </div> 
      <b:else/> 
        <b:if cond='data:blog.pageType == "index"'> 
          <div class='breadcrumbs'>
          <b:if cond='data:blog.pageName == ""'>
            Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
          <b:else/>
            Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/> 
          </b:if>
          </div> 
        </b:if> 
      </b:if>
    </b:if>
  </b:if>
</b:includable>
<b:includable id='main' var='top'>

Step 4: Add some CSS to the skin
The basic code of your breadcrumb is now in place. You can change its looks by adding a CSS-class .breadcrumbs to the skin of your Blog.
This is just an example:
<b:skin><![CDATA[/*

....

.breadcrumbs {
float: left;
width: 590px;
font-size: 11px;
margin: 5px 10px 20px 10px;
padding: 0px 0px 3px 0px;
border-bottom: double #EAEAEA;
}

....

]]></b:skin>

Step 5: Save your template and you are done.

2. Breadcrumbs based on a post's date

photobucketThis is how it will look like: You are here: Home > Year > Month > Post Title

Step 1: Go to Template -> 'Edit HTML' and check the box for 'Expand Widget Templates'. Now search for some code that looks like this (it doesn't have to be exactly like it):

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts'>

  <b:include data='top' name='status-message'/>

  <data:adStart/>
  <b:loop values='data:posts' var='post'>
and paste this right under it:
<b:include data='post' name='breadcrumbs'/>
Step 2: Now scroll down to the end of this widget (as pictured below)

photobucket

and paste the following between the </b:includable> and </b:widget> tags:
<b:includable id='breadcrumbs' var='post'>
<b:if cond='data:blog.pageType == "item"'>
    <p class='breadcrumbs'>
    <span class='post-labels'>
        You are here:
        <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<script type="text/javascript">
//<![CDATA[
var strCrumbHref = location.href.toLowerCase();
var intCrumbHtml = strCrumbHref.indexOf('.html');
var intCrumbWhereAt = strCrumbHref.lastIndexOf('/', intCrumbHtml);
var intCrumbYearStart = intCrumbWhereAt - 7;
var intCrumbMonthStart = intCrumbWhereAt - 2;
var intCrumbYear = parseInt(strCrumbHref.substr(intCrumbYearStart, 4));
var intCrumbYearPlusOne = intCrumbYear + 1;
var strCrumbMonthNum = strCrumbHref.substr(intCrumbMonthStart, 2);
var strCrumbMonth = '';
switch(strCrumbMonthNum) {
case '01':
 strCrumbMonth = 'January';
 break;
case '02':
 strCrumbMonth = 'February';
 break;
case '03':
 strCrumbMonth = 'March';
 break;
case '04':
 strCrumbMonth = 'April';
 break;
case '05':
 strCrumbMonth = 'May';
 break;
case '06':
 strCrumbMonth = 'June';
 break;
case '07':
 strCrumbMonth = 'July';
 break;
case '08':
 strCrumbMonth = 'August';
 break;
case '09':
 strCrumbMonth = 'September';
 break;
case '10':
 strCrumbMonth = 'October';
 break;
case '11':
 strCrumbMonth = 'November';
 break;
case '12':
 strCrumbMonth = 'December';
 break;
}
var strCrumbOutput = ' > ';
strCrumbOutput += '<a href="/search?updated-min=' + intCrumbYear;
strCrumbOutput += '-01-01T00%3A00%3A00-08%3A00&updated-max=' + intCrumbYearPlusOne;
strCrumbOutput += '-01-01T00%3A00%3A00-08%3A00&max-results=50">' + intCrumbYear + '</a> > ';
strCrumbOutput += '<a href="/' + intCrumbYear + '_' + strCrumbMonthNum + '_01_archive.html">' + strCrumbMonth + '</a>';
document.write(strCrumbOutput);
//]]>
</script>
<noscript>
      <b:if cond='data:post.labels'>
         >
        <b:loop values='data:post.labels' var='label'>
          <b:if cond='data:label.isLast == "true"'>
            <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
          </b:if>
        </b:loop>
      </b:if>
</noscript>
        <b:if cond='data:post.title'>
          >  <b><data:post.title/></b>
        </b:if>
    </span>
    </p>
</b:if>
<!-- End of Breadcrumbs Hack -->
</b:includable>

Step 3: Finally, you can style this newly added section. For example, add the following css to your page's header:
.breadcrumbs {
border-bottom:1px dotted $bordercolor;
margin:0 0 0.5em;
padding:0 0 0.5em;
}


Credits: BeautifulBeta & PurpleMoggy

Change Firefox's "View Source" Default Editor

| Date: April 15, 2009 | View Comments | Tags: firefox, hack

If you often need to see the page source in Firefox (using "View Source"), then you know how irritating it is to see the code in Firefox's default text editor which does not include syntax highlighting and other cool features. But you can change the default "View Source" editor by typing:
about:config

then search for:
view_source.editor.external

and toggle it to True, then search for
view_source.editor.path

and modifiy it with the path to your favourite editor. I use Ubuntu, so for my editor i added the path to GEdit: /usr/bin/gedit

Blogger Post Views HitCounter Using an Image Counter

| Date: April 02, 2009 | View Comments | Tags: blogger, blogging, hack, image counter, webmaster

Image Counter

Some website, such as blogspot.com (Blogger) are not written in PHP and there are no external tools for allowing us to add a post hit counter to this kind of website / blog. By post counter i mean: a visible counter that display (on the website, for every user to see) the number of views (page loads) of each individual post.

But here is a way to do this using an image counter (installation instructions for Blogger, but you can use it on any website):

Go to Layout > Edit HTML, click "Expand Widgets Templates", and copy this code:
Post views: <img alt='counter' expr:src='&quot;http://www.mortgagemeter.net/counter.php?page=&quot; + data:post.id + &quot;&amp;digit=v88&quot;' />

Where you want it to show up. I can't say exactly where because it depends on your theme, but to have it show when on a post page only (item), make sure it's under a line of code that looks like this:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

And also it would make sense to be somewhere around: <data:post.body/>

If you do not use Blogger, use this code instead:
Post views: <img alt="counter" src="http://www.mortgagemeter.net/counter.php?page= + data:post.id + &digit=v88"/>

and replace data:post.id with something that will generate a unique number/text that is always the same for a particular post but different for each post, like I used the post id, or something similar. You can view a visitor counter demo under my posts. (only when clicking on a post, not on the main page!).


Update: there is no hosting plan to handle all the post views for all Web Upd8 readers which have installed this Blogger hack, so the only way around this would be for you to install the script on your own server / web host. Read how to do that, HERE.
License: (cc) BY-NC-SA WebUpd8 | Privacy