» Click here to go to the entry/page
This year has been a memorable year for this blog.
The Technical Thought Of You was originally hosted by Wordpress as I was hoping then to explore the said platform. It was late July of this year when I decided to move it back to Blogger for the simple reason that I was, am, will always be.. a Blogger fan.
Here are the top and best posts of The Technical Thought Of You for the Year 2008; sorted according to popularity and most-liked topic/entry based on the number of comments, hits and reviews.
Blogger Hacks
Customize Blogger's Followers WidgetAdd Nice Tooltips Using Nice Titles In Blogger
Create Expandable Read More In Blogger
Add Multiple Feeds With Multiple Entries In Blogger
Tutorials
How To Create Animated Handwritten SignaturesFollow A Blog That Has No "Followers Widget"
Image Mapping And Online Image Map Editors
Blogger Widgets
Add A Customized Related Posts Widget In BloggerTable of Contents Widget: Label Sort Tweak
CommentLuv in Blogger
How To Customize Your Blogger CommentLuv's SkinRecent Comments Widget for Blogger CommentLuv Users
Firefox Add-Ons and Extensions
How To Quickly Check What Slows Down Your WebsiteHow To Open Multiple GMAIL Accounts
How To Check For NoFollow, DoFollow Blogs - The Easy Way
How To Check Your Website's Speed - The Easy Way
How To Open Multiple Links In Just One Click
Blog Statistics
Improve Your Blog's Marketing Effectiveness With Website GraderShowOffRankings: Blog Widget To Show Blog Rankings
Tips And Tricks
How To Detect Invisible Yahoo UsersWebsite Speed Checker
5 Tips To Create An Effective Blog Post
Create Multiple Homepages In Firefox
Humor
20 Ways To Show You're Busy In YMThe Singing Google Page Rank
May I take this opportunity to thank all the people who joined this blog's journey and made this possible:
To my top commentors: fransiska ike, raju, anurag bansal, everybodygeek, andri, technomedic, dave, xjion, pinoycopywriter, tk;
To the diggs, stumbles, bookmarks, reviews of: raju, fransiska ike, anurag bansal, dave;
To the 28 followers, 65 RSS and 9 email subscribers; blogroll partners;
To the following sites where i get most referrals from: Google, StumbleUpon, Digg, Google Images, Zimbio, Knowliz, Destiny, Blogger Forum, Blog Explosion, Technorati, Technically Personal, When Silence Speaks, Crazy Mama, Daddy Professor, Digital Passion Of A Technomedic, My Little World, Realm Of Skicekagan, LinkedIn, Cbox, BblogD, CommentLuv, Music Blogs Guide, Blogger Help By Lauren;
To all first-time and returning visitors who leave comments on the posts, chatbox or simply read the posts;
To RL friends, colleagues, families I inadvertly harrased;
This blog wouldn't have made it this far - in such a very short time - without you.
Thank you, kudos to you all and have a blessed new year ahead! ^_^
Resource:
http://www.checkpagerank.net/index.php?name=http%3A%2F2Ftechnicaldotcom.blogspot.com&links=1
» Click here to go to the entry/page
The Table of Contents Widget is one of the most useful hacks/tweaks for Blogger or Blogspot blogs. This hack was created by Hans of Beautiful Beta and aims to show all posts in a "table-of-contents" format. Readers may see all the blog posts in one glance, have the entries filtered according to Labels; and have them re-arranged according to Post Title and Date. In this post, let's work on making the Category/Label sortable as well, shall we?
2 Ways To Install the Table Of Contents Widget.
For those who do not have this widget yet, there are basically two ways to install this. Below are the procedures, demo and installation instructions.(1) Accessibility in ALL PAGES.
If you would like the ToC or Table of Contents accessible in all pages, check out the following instructions.Installation Guide..
BlogToC Widget Released
by Hans, Beautiful Beta
PROS: Readers may view the ToC widget just above the blog posts. This makes it easier for readers to browse through the articles without leaving the currently loaded page.
CONS: This method is not advisable for a blogspot blog that has a heavy content.
Demo.
The Technical Thought Of You BETA
(2) Accessibility in ONE PAGE.
If you would like to create a shortcut on the sidebar or top navigation/menu and add a new post to hold this widget, read on.Installation Guide.
A Beautiful Blogger Table Of Contents
by SBA, BP News and Tips
Demo1 (Top Navigation/Menu).
BP News and Tips
Demo2 (Sidebar Shortcut).
Destiny
PROS: This method is especially helpful to blogs that have more than 20 posts and contain heavy content as this prevents any performance issues on the readers' browsing experience.
Note from the Blog Author: I used to have it accessible in ALL pages but my site's load time slowed down due to the fetching of posts. I am now working on the latter procedure for this blog. For those who have lots of content on their blogs, I then recommend the second one for its advantages.
How To Sort Labels In The Table Of Contents Widget.
The sorting of LABELS involves editing/adding codes in the 4 sections of the .js (javascript file). Just follow this simple steps.(1) Go to Beautiful Beta's blog post and view the code.
(2) Go to File. Save Page As. Save the blogtoc.js file.
(3) Open the downloaded file in NOTEPAD or TEXTPAD.
(4) Search for this line of code
for (var i=0; i < postTitle.length-1; i++) {
and add the following lines at the latter part as shown in the image far below:
if (sortBy == "labelasc") { if (postLabels[i] > postLabels[j]) { swapPosts(i,j); } }
if (sortBy == "labeldesc") { if (postLabels[i] < postLabels[j]) { swapPosts(i,j); } }
View Full Size
(5) Scroll down. Look for
function displayToc(filter) {
There are a series of conditions there. Right under the "datenewest" one:
if (sortBy == "datenewest") {
tocTool1 += ' (ascending)';
tocTool2 += ' (oldest first)';
}
add the following lines as shown in the image above:
if (sortBy == "labelasc") {
tocTool1 += ' (descending)';
tocTool2 += ' (newest first)';
}
if (sortBy == "labeldesc") {
tocTool1 += ' (ascending)';
tocTool2 += ' (newest first)';
}
(6) Look for this line.
tocTable += '<a href="javascript:allPosts();" title="' + tocTool3 + '">' + tocHead3 + '</a>'
replace this with:
tocTable += '<a href="javascript:toggleLabelSort();" title="' + tocTool3 + '">' + tocHead3 + '</a>';
(7) Scroll down. Search for:
function toggleDateSort() {
The conditions for the toggle of the DateSort is declared here. Right after the line comment - // end toggleDateSort, include the following as shown in the far below image.
function toggleLabelSort() {
if (sortBy == "labelasc") { sortBy = "labeldesc"; }
else { sortBy = "labelasc"; }
sortPosts(sortBy);
displayToc(postFilter);
} // end toggleLabelSort
View Full Size
(7) Save.
(8) Upload the .js to your server (or googlepages if you have one).
REMINDER. Do not forget to update your HTML code from:
<script src="http://home.kpn.nl/oosti468/downloads/blogtoc.js">
to
<script src="http://yourservername.com/blogtoc.js">
or
<script src="http://yourusername.googlepages.com/blogtoc.js">
As a reference, here is the complete code used on my test blog.
As a working example, check out:
The Technical Thought Of You BETA
Credits go to Hans of Beautiful Beta and Ramani of Hackosphere for creating and developing this amazing hack; Marg Choco of Turtle Soup for the Ethereal Substance where I got the CSS tweak; SBA of BP News and Tips for her excellent tutorial on ToC installation and Fransiska Ike of Destiny where I initially found out about the ToC sidebar shortcut.
Enjoy tweaking! ^_^
» Click here to go to the entry/page
There are two ways to install Recent Comments Widget for Blogger Commentluv Users.
First Way: Using JS-Kit.
Blogger Commentluv is integrated with JS-Kit Commenting System. JS-Kit offers a major widget in the form of Navigator. With Navigator, you may add some of the following services:(a) Top Picks/Most Popular Posts which is based on weighted average user ratings
(b) Hot Items which is based on the number of actions/time measured by ratings and comments
(c) Recent Comments
How To Install JS-Kit's Recent Comments Widget.
(1) Go to Layout. Page Elements.(2) Add A Gadget.
(3) Select HTML/Javascript Gadget.
(4) Copy and paste this script:
<div skin="silver" style="width: 375px"
count="25" class="js-kit-top" site="http://yourblog.blogspot.com" title=""></div>
<script src="//js-kit.com/top.js"></script>
(5) Save.
(6) View Blog.
How To Customize JS-Kit's Recent Comments Widget.
The above code generally displays all tabs. If you would like to remove everything and just leave Recent Comments Tab, follow this simple steps.(1) Open your blog. Scroll down until you find the newly installed widget.
(2) Click Admin Console.
(3) Once the JS-Kit Navigator Admin Console opens up, UNCHECK everything except for the Comments Roll check box.
View Full Size
(4) Save.
(5) View Blog.
Here's a blog that uses JS-Kit Recent Comments Widget:
Adventures in Daily Living
To explore this widget, check out:
Customizing the Navigator Service
Second Way: Using Feedburner.
Part One.
(1) Go to your blog. Scroll down to the Blogger Commentluv Form.(2) At the bottom right part, right click the RSS link. Select Copy Link Location.
View Full Size
Below is a sample format of the feed link:
http://js-kit.com/rss/yourblog.blogspot.com
(3) Now that you have the exact address for your Blogger CommentLuv Feed, go to Feedburner.
(4) Login if you already have an account, sign up if otherwise.
(5) Under the "Burn a feed right this instant" box, paste the copied Blogger Commentluv feed URL. Click NEXT button.
(6) You will then be directed to the page where you will be prompted to add/change the feed title. Once the title has been updated, click ACTIVATE FEED button.
(7) Go to Publicize Tab. Click BuzzBoost from the sidebar.
View Full Size
(8) Change the Feed Settings and Displayed Content Options.
(9) Save.
(10) Copy the Buzzboost script that was generated right after pressing the SAVE button. (It is advisable to paste the code in Notepad or similar application).
Part Two.
(1) Go to Blogger and login.(2) From the Dashboard, go to Layout. Page Elements.
(3) Add A Gadget.
(4) Select HTML/Javascript Gadget.
(5) Paste the code from Feedburner's Buzzboost.
(6) Click OK.
(7) View Blog.
How To Customize Your Feedburner Recent Comments Widget.
If you'd like to attain a look that is similar to what is installed in my left sidebar, follow this simple steps.NOTE: BACKUP YOUR TEMPLATE!
(1) Go to Layout. Edit HTML.
(2) Before the closing tag of
]]></b:skin>insert this CSS code:
/* -- Resyndicator -- */
div.feedburnerFeedBlock p {
font-size: 10px;
display: inline;
}
div.feedburnerFeedBlock ul li div {
display: inline;
list-style: none;
}
div.feedburnerFeedBlock span.headline {
font-size: 10px;
font-weight: bold;
}
div.feedburnerFeedBlock span.headline a {
color: #1566a7;
}
div.feedburnerFeedBlock span.headline a:hover {
color: #99cc00;
font-size: 14px;
}
div.feedburnerFeedBlock ul li {
list-style: none;
}
(3) Save Template.
(4) View Blog.
Quick Explanation on the CSS Code.
Since the widget items' default was set to display in list style, let's explore the "list-style" and "display" properties.List-Style.
Format.Some possible values.
{
list-style-type: none;
}
value: none
description: no marker
value: circle
description: the marker is a circle
value: square
description: the marker is a square
More options for LIST-STYLE property may be found here.
Display.
Format.Some possible values for this CSS property.
{
display: inline;
}
value: none
description: the element will not be displayed
value: inline
description: the element will be displayed as an inline element, with no line break before or after the element.
value: block
description: the element will be displayed as a block-level element, with a line break before and after the element
More options for DISPLAY property may be found here.
FeedBurner Trick: How To Hide Feedburner Icon.
Don't you sometimes wish you can hide the feedburner icon which is usually located at the bottom of your widget? This can be done by adding one simple line of code.Just before the closing tag of
]]></b:skin>insert this line:
#creditfooter {display: none;}
To learn more about customizing BuzzBoost appearance, check out: Using and Customizing BuzzBoost appearance
To gather ideas on what kind of customization you may want to apply to the widget, go to: BuzzBoost Sample Applications
To override the default BuzzBoost Settings, visit:
Overriding BuzzBoost Settings
Blogger Commentluv.
If you haven't installed Commentluv for Bloggers yet, try it now:Commentluv's Download Page for Blogger Platform
How To Install CommentLuv On Your Blogspot Blogs
If you're using other platforms, please see:
Andy Bailey's New Platforms Supported for Commentluv
If you'd like to customize its appearance and skin, please read:
How To Customize Your Blogger Commentluv's Skin
Have fun! ^_^
Quick Note: You may also add a Recent Comments Widget designed for Blogger Commentluv through Yahoo Pipes. Tutorial and links will be posted on the next articles.
Resources:
http://www.w3schools.com/CSS/pr_list-style-type.asp
http://www.w3schools.com/css/pr_class_display.asp
http://www.google.com/support/feedburner/bin/answer.py?answer=78991
http://www.feedburner.com/fb/a/buzzboost/examples
http://adventuresindailyliving.blogspot.com/2008/11/commentluv-for-blogger-is-working.html
http://js-kit.com/navigator/custom.html
http://htmlescape.compender.com/2008/01/raymonds-html-escaper.html
