Aspire is a great template and is a popular one at that. I have been using it for quite sometime.
Thinking of changing to something else. Have no idea what I would be looking for.
But The Search Begins.
Please give your suggestions.
So you have got a blog. You have tweaked it’s appearance the way you wanted it. Now your blog has that stamp of your individuality all over it. Right? Think again.
Your blog stands out in all respect, yet it has the most common Favicon you could lay your hands on. Let’s change this.
What is Favicon?
In simple words… This
And we want to change it to this (at least in my case) :)
Now lets get down to change this. A favicon is a 16X16 px ico file. You need to have an ico file(*.ico) which will become your favicon. It can be any image file. Open any image file in IrfanView and then resize the image and save it as ico file. If you are short of ideas, you can head over to huge number of favicon collection.
Now a place to save your favicon online. You can use any online image hosting service or use the Google Sites. Create a site in google sites and then Click on Home as shown.
Then you can upload your ico file to your site
Once uploaded, note down its path. It should be something like this =>
http://sites.google.com/site/YOURSITENAME/Home/FAVICON.ico?attredirects=0
Now go to your blog’s Layout => Edit HTML.
Backup your blog’s template before making any changes.
Now find
<head
and just below it paste the following code
<link href='http://sites.google.com/site/YOURSITENAME/Home/FAVICON.ico' rel='shortcut icon'/>
<link href='http://sites.google.com/site/YOURSITENAME/Home/FAVICON.ico' rel='icon'/>
Change YOURSITENAME and FAVICON.ico as per your “Site Name” and your favicon file name respectively.
Save the page and view your blog. Site showing same old Blogger Favicon. Try to reload a few times or Clear the cache of your browser and then reload the page.
Your Blog is popular, unlike mine :) , and a lot of visitors leave comments on your posts, again unlike mine, do you wish you could number the comments. Numbering comments have lots of advantages.
First “It looks Cool” and that’s hot.
It gives you permalink to your comment, which can be given in other posts.
So lets start the project……
Go to Layout => Edit HTML and then click “Expand Widget Templates”.
Now search for
]]></b:skin>
and just above this copy and paste the following code
/*Start Changes to be made to Put Comment Numbers */
.numberingcomments {
/* add the CSS properties here */
text-align:right; font-size: 25px;
}
/*End Changes to be made to Put Comment Numbers */
This is where you can change the font size and align your Comment Number.
Now we have to add some more code so the the functionality of adding comment numbers could be achieved.
Part One
First search for the code
<b:loop values='data:post.comments' var='comment'>
Just Above this line paste the following code
<script type='text/javascript'>var CommentsCounter=0;</script>
So that the code looks like this
<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'>
Part Two
Now is the tricky part. You have to be careful while following this.
Search for this code below.
<div class='message-by'>
<b:if cond='data:comment.authorUrl'>
<div class='message-by'>
<!-- Add Code One here -->
<table border='0' width='100%'>
<tr>
<td width='10%'/>
<td width='60%'>
<!-- Code One Ends here -->
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<b:include data='comment' name='commentDeleteIcon'/>
<!-- Add Code Two here -->
</td>
<td width='20%'>
<div>
<span class='numberingcomments'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>CommentsCounter=CommentsCounter+1;document.write(CommentsCounter)</script>
</a>
</span>
</div>
</td>
</tr>
</table>
<!-- Code Two Ends here -->
</div>
Save your Template and view your blog.
If you are still facing any problem then do leave a comment. Even if you are not facing any problem then also do leave a comment.
This blog post is inspired by a problem faced by one of my reader. He has a blog about Philately and has text scrolling at the end of the page. What he wanted to do is to have that text scrolling at the top. The shortest and easiest possible answer to his problem was to have his message as blog’s description. But somehow Aspire does not show Description.
Yipeeeee, another addition to my (gradually) increasing number of posts.
Before doing anything with your template Please Backup Your Template.
As I have already told you… Aspire does not show your post’s Description. So first we will tackle this problem.
First search for
<h1><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>
Just below it add
<h2><data:description/></h2>
So the final code should look something like
<b:includable id='main'>
<h1><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>
<h2><data:description/></h2>
</b:includable>
Just one more tweak and you will see the description of your blog.
Find the code
#head {position:relative; width:990px; height:250px;
And
.header {width:627px; height:250px; background: url(http://www.webpagedesign.ws/aspire/header-bg.jpg) no-repeat;}
and replace height:250px to height:265px.
That’s it… Job done. Save your template and See the description of your blog.
Now Something specifically for Mr. Prashant Pandya.
To add scrolling text, in this case Description of your blog, just change the code from
<h2><data:description/></h2>
TO
<h2><marquee><data:description/></marquee></h2>
Save the template and see your message or blog’s description scroll.
Ever wanted to put a widget that shows the Recent Comments being written on your blog. My blog is to put what I learn about computers and in the process share my experience with everyone. Now continuing the purpose of this blog, I will share with you the procedure on how to add “Recent Comments” widget.
First go to layout => Edit HTML and search for
</head>
<script type='text/javascript'> function commentDisplay(json) { for (var i = 0; i < numcomments; i++) { var entry = json.feed.entry[i]; var alturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } alturl = alturl.replace("#", "#comment-"); if (entry.content) { comment = entry.content.$t; } else if (entry.summary) { comment = entry.summary.$t; } var re = /<\S[^>]*>/g; comment = comment.replace(re, ""); document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> commented:<br/>'); if (comment.length < numchars) document.write(comment + '<br/><br/>'); else document.write(comment.substring(0, numchars) + '...<br/><br/>'); } } </script>
Now go to Layout => Page Elements and in sidebar click add a gadget and choose HTML/JavaScript and in Configure HTML/JavaScript paste the following code
<br/><script language="javascript"> var numcomments = 5; var numchars = 50; </script> <script src="http://yourblog.blogspot.com/feeds/comments/default? alt=json-in-script&callback=commentDisplay"></script>
Change yourblog.blogspot.com to the address of your blog
Save the page and then view your blog. You can tweak the number of comments and number of characters in each comment as shown below.
We all have at some point or other downloaded files from Rapidshare or Megaupload or from many other such sites. Many of them cap the download speed, Use Captcha or waiting period or a combination of these methods. This still makes their service attractive to all those who don’t want to register (pay) thus keeping them “in the running” and also lures people to register (pay) at these sites if they don’t want to encounter these “obstacles”. To overcome these restrictions; sometimes partially; there are several programs, standalone as well as plugins.
One of my favorite standalone program is CryptLoad about which I have already HERE. But today I will write about an Add-in for Firefox called SkipScreen. Though out on 2 April 2009, I was able to find it about a week later.
This is what a part of their web page looks like, telling us about its feature.
I, as usual, installed it and started to test it. First I downloaded a file from Rapidshare. I simply clicked on the link and SkipScreen took over. Though it was not able to bypass the mandatory wait time limit, the rest was taken care of.
Next came Megaupload. Megaupload first presented me with a captcha. SkipScreen was not able to fill the captcha. So after manually filling the captcha, SkipScreen almost instantly started downloading the file, bypassing the wait time!!
MediaFire- Just had to click the link and download started instantly.
DepositFile- Just had to click the link and download started instantly.
zShare- Just had to click the link and download started instantly.
Sharebee- This site has links to same file but from multiple file sharing sites. SkipScreen automatically chooses the best compatible site from the list and starts the download almost instantly.
In conclusion a very good Add-on for Firefox to have if you download from multiple file sharing sites. A must have in addition to Cryptload.
Continuing my “Tweak Aspire” series is another useful addition. Placement of “Comments Form” at the end of the post so that it becomes easier for everyone to add comments our post instead of being taken to a new page for adding comments or having a popup opening up.
Let’s start the process of enabling the Comments Form below Post. But first a word of Caution.
Always backup your template…. Just in case
First go to Settings => Comments
And Select Embed Below post.
Now Save and go to Layout => Edit HTML. Here Check Expand Widgets Templates.
Here find the code
<b:include data='post' name='comments'/>And just below this line insert the following code
<b:include data='post' name='comment-form'/>So that the code looks like
<b:include data='post' name='comments'/> <b:include data='post' name='comment-form'/>
Though I had already written on how to Show post date Correctly HERE it actually involved more code to be added.
I am again writing it for the benefit of others and also to have some continuity in posts.
Let’s start this small tutorial….
Go to Layout -> Edit HTML
Click Expand Widget Templates.
Now find the following Code
var timestamp = "<data:post.timestamp/>";
The code around it should look like this
<script type='text/javascript'> var timestamp = "<data:post.timestamp/>"; if (timestamp != '') { var timesplit = timestamp.split(","); var date_yyyy = timesplit[2]; var timesplit = timesplit[1].split(" "); var date_dd = timesplit[2]; var date_mmm = timesplit[1].substring(0, 3); } </script> <script type='text/javascript'>document.write(date_dd);</script> <div class='month'><script type='text/javascript'>document.write(date_mmm);</script></div>
Now Change the line from
var timestamp = "<data:post.timestamp/>";
var timestamp = "<data:post.dateHeader/>";
<script type='text/javascript'> var timestamp = "<data:post.dateHeader/>"; if (timestamp != '') { var timesplit = timestamp.split(","); var date_yyyy = timesplit[2]; var timesplit = timesplit[1].split(" "); var date_dd = timesplit[2]; var date_mmm = timesplit[1].substring(0, 3); } </script> <script type='text/javascript'>document.write(date_dd);</script> <div class='month'><script type='text/javascript'>document.write(date_mmm);</script></div>
Of course Choose the Time Zone as per your location :)
There is a way on Adding year to the date, but I am still working on it.
I have been receiving a lot of mails regarding tweaking of my present theme “Aspire”. Many of you are facing problems in deploying this theme and getting desired results. So to help all those who want to help themselves……
Go to Layout => Edit HTML
Do not Check “Expand Widget Templates”
Now lets start with the Navigation bar at the top.
By Default Navigation Bar is Hidden in this theme. Some of you would want to see the NavBar. So to enable it, you have to change the code as follows:-
1: /* === Hide the NavBar === */
2: .Navbar {
3: visibility:hidden;
4: display: none;
5: }
6: /* === Hide the NavBar === */
Now let’s Add the Calendar for blog archive. Search the code below in your Aspire theme.
.up {text-transform:uppercase;} .center {text-align:center;} .l, .left {float:left;} .r, .right {float:right;} .textleft {text-align:left !important;} .clear {clear:both;} ]]></b:skin>
Now you will have to add the code for calendar at the place as shown below.
]]></b:skin> <!-- Add your Calendar code here --> </head>
Copy and paste the code for adding calendar:-
<!-- Blogger Archive Calendar --> <script type='text/javascript'> //<![CDATA[ var bcLoadingImage = "http://phydeauxredux.googlepages.com/loading-trans.gif"; var bcLoadingMessage = " Loading...."; var bcArchiveNavText = "View Archive"; var bcArchiveNavPrev = '◄'; var bcArchiveNavNext = '►'; var headDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; var headInitial = ["Su","Mo","Tu","We","Th","Fr","Sa"]; // Nothing to configure past this point ---------------------------------- var timeOffset; var bcBlogID; var calMonth; var calDay = 1; var calYear; var startIndex; var callmth; var bcNav = new Array (); var bcList = new Array (); //Initialize Fill Array var fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"]; function openStatus(){ document.getElementById('calLoadingStatus').style.display = 'block'; document.getElementById('calendarDisplay').innerHTML = ''; } function closeStatus(){ document.getElementById('calLoadingStatus').style.display = 'none'; } function bcLoadStatus(){ cls = document.getElementById('calLoadingStatus'); img = document.createElement('img'); img.src = bcLoadingImage; img.style.verticalAlign = 'middle'; cls.appendChild(img); txt = document.createTextNode(bcLoadingMessage); cls.appendChild(txt); } function callArchive(mth,yr,nav){ // Check for Leap Years if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) { fill[2] = '29'; } else { fill[2] = '28'; } calMonth = mth; calYear = yr; if(mth.charAt(0) == 0){ calMonth = mth.substring(1); } callmth = mth; bcNavAll = document.getElementById('bcFootAll'); bcNavPrev = document.getElementById('bcFootPrev'); bcNavNext = document.getElementById('bcFootNext'); bcSelect = document.getElementById('bcSelection'); a = document.createElement('a'); at = document.createTextNode(bcArchiveNavText); a.href = bcNav[nav]; a.appendChild(at); bcNavAll.innerHTML = ''; bcNavAll.appendChild(a); bcNavPrev.innerHTML = ''; bcNavNext.innerHTML = ''; if(nav < bcNav.length -1){ a = document.createElement('a'); a.innerHTML = bcArchiveNavPrev; bcp = parseInt(nav,10) + 1; a.href = bcNav[bcp]; a.title = 'Previous Archive'; prevSplit = bcList[bcp].split(','); a.onclick = function(){bcSelect.options[bcp].selected = true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return false;}; bcNavPrev.appendChild(a); } if(nav > 0){ a = document.createElement('a'); a.innerHTML = bcArchiveNavNext; bcn = parseInt(nav,10) - 1; a.href = bcNav[bcn]; a.title = 'Next Archive'; nextSplit = bcList[bcn].split(','); a.onclick = function(){bcSelect.options[bcn].selected = true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return false;}; bcNavNext.appendChild(a); } script = document.createElement('script'); script.src = 'http://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive'; document.getElementsByTagName('head')[0].appendChild(script); } function cReadArchive(root){ // Check for Leap Years if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) { fill[2] = '29'; } else { fill[2] = '28'; } closeStatus(); document.getElementById('lastRow').style.display = 'none'; calDis = document.getElementById('calendarDisplay'); var feed = root.feed; var total = feed.openSearch$totalResults.$t; var entries = feed.entry || []; var fillDate = new Array(); var fillTitles = new Array(); fillTitles.length = 32; var ul = document.createElement('ul'); ul.id = 'calendarUl'; for (var i = 0; i < feed.entry.length; ++i) { var entry = feed.entry[i]; var link = entry.link[0].href; var title = entry.title.$t; var author = entry.author[0].name.$t; var date = entry.published.$t; var summary = entry.summary.$t; isPublished = date.split('T')[0].split('-')[2]; if(isPublished.charAt(0) == '0'){ isPublished = isPublished.substring(1); } fillDate.push(isPublished); if (fillTitles[isPublished]){ fillTitles[isPublished] = fillTitles[isPublished] + ' | ' + title; } else { fillTitles[isPublished] = title; } li = document.createElement('li'); li.style.listType = 'none'; li.innerHTML = '<a href="'+link+'">'+title+'</a>'; ul.appendChild(li); } calDis.appendChild(ul); var val1 = parseInt(calDay, 10) var valxx = parseInt(calMonth, 10); var val2 = valxx - 1; var val3 = parseInt(calYear, 10); var firstCalDay = new Date(val3,val2,1); var val0 = firstCalDay.getDay(); startIndex = val0 + 1; var dayCount = 1; for (x =1; x < 38; x++){ var cell = document.getElementById('cell'+x); if( x < startIndex){ cell.innerHTML = ' '; cell.className = 'firstCell'; } if( x >= startIndex){ cell.innerHTML = dayCount; cell.className = 'filledCell'; for(p = 0; p < fillDate.length; p++){ if(dayCount == fillDate[p]){ if(fillDate[p].length == 1){ fillURL = '0'+fillDate[p]; } else { fillURL = fillDate[p]; } cell.className = 'highlightCell'; cell.innerHTML = '<a href="/search?updated-max='+calYear+'-'+callmth+'-'+fillURL+'T23%3A59%3A59'+timeOffset+'&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'" title="'+fillTitles[fillDate[p]].replace(/"/g,'\'')+'">'+dayCount+'</a>'; } } if( dayCount > fill[valxx]){ cell.innerHTML = ' '; cell.className = 'emptyCell'; } dayCount++; } } visTotal = parseInt(startIndex) + parseInt(fill[valxx]) -1; if(visTotal >35){ document.getElementById('lastRow').style.display = ''; } } function initCal(){ document.getElementById('blogger_calendar').style.display = 'block'; var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a'); var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li'); document.getElementById('bloggerCalendarList').style.display = 'none'; calHead = document.getElementById('bcHead'); tr = document.createElement('tr'); for(t = 0; t < 7; t++){ th = document.createElement('th'); th.abbr = headDays[t]; scope = 'col'; th.title = headDays[t]; th.innerHTML = headInitial[t]; tr.appendChild(th); } calHead.appendChild(tr); for (x = 0; x <bcInit.length;x++){ var stripYear= bcInit[x].href.split('_')[0].split('/')[3]; var stripMonth = bcInit[x].href.split('_')[1]; bcList.push(stripMonth + ','+ stripYear + ',' + x); bcNav.push(bcInit[x].href); } var sel = document.createElement('select'); sel.id = 'bcSelection'; sel.onchange = function(){var cSend = this.options[this.selectedIndex].value.split(',');openStatus();callArchive(cSend[0],cSend[1],cSend[2]);}; q = 0; for (r = 0; r <bcList.length; r++){ var selText = bcInit[r].innerHTML; var selCount = bcCount[r].innerHTML.split('> (')[1]; var selValue = bcList[r]; sel.options[q] = new Option(selText + ' ('+selCount,selValue); q++ } document.getElementById('bcaption').appendChild(sel); var m = bcList[0].split(',')[0]; var y = bcList[0].split(',')[1]; callArchive(m,y,'0'); } function timezoneSet(root){ var feed = root.feed; var updated = feed.updated.$t; var id = feed.id.$t; bcBlogId = id.split('blog-')[1]; upLength = updated.length; if(updated.charAt(upLength-1) == "Z"){timeOffset = "+00:00";} else {timeOffset = updated.substring(upLength-6,upLength);} timeOffset = encodeURIComponent(timeOffset); } //]]> </script> <script src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=timezoneSet'/> <!-- End Blogger Archive Calendar -->
We are almost there….
Now search the code
<b:section id='sidebarleftsection' preferred='yes'> <b:widget id='Profile1' locked='false' title='Contributors' type='Profile'/>
And paste the code:-
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>So that the code looks like:-
<b:section id='sidebarleftsection' preferred='yes'> <b:widget id='Profile1' locked='false' title='Contributors' type='Profile'/> <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
Too much code :)
Now save everything and enjoy the new look of your blog.
Keep tuned in for more tweaks.
I have been trying to help a lot of people who have been facing problems in Aspire theme.
Now all of you can Post your problems for the blogger version of the theme and I will try to sort it out. Also I will publish first part tomorrow, 13 April 2009 (8:00 PM IST), about code to add a calendar to your blog, like the one I have.
None of the code for the calendar is mine, I have simply copied the code from the net and used it. Thanx to the coder.
I have seen over time that people are facing problem with this theme and as it is a beautiful theme I decided to help those who want to use it. This particular post should be used to put your suggestions and your problems so that I look into those and post the solutions.
I know that I have been not updating my posts for far too long period. This inactivity is due to me being very busy with my family and work. I have been getting a lot of mails regarding the theme, Aspire, I am currently using.
I have tweaked it a little bit and the results have been totally satisfying.
I will put majority of the code in a series in the next few days so that you could tweak this theme and get the desired results.
Tll then...............
Continue Reading >>
