Tag Archives: Tutorial

Learn How To Rotate Text With CSS | CSS Trick

I’d like to share something interesting that I learned some days back. I was going through an article on Learning jQuery and my eyes struck on the date of the post. I was quite impressed the way it was designed and presented. At first, I thought it was an image, but when I viewed the source, I realized that it was done with CSS. I was very eager to learn how it was done and I Googled for this particular trick and found Snook’s article, Text Rotation With CSS. It wasn’t that hard to learn and implement as I had thought of it. I experimented on this trick and learned quite a bit of it. I altered the coding to insert Techie-Buzz logo and here’s the end result:

Demo | Download Source

The Magical Code:

HTML Code:

<div class="logo_box">
     <span class="techie_sample">Techie</span>
     <span class="tblogo_sample"><img src="tb.png" /></span>
     <span class="buzz_sample">Buzz</span>
</div>

CSS Code:

/* Techie-Buzz.com - Text rotation exmaple */
.logo_box
{
float: left;
background-color: #fff;
border: 1px solid #000000;
color: #ffffff;
position: relative;
margin: 0 0 0 20px;
}
.logo_box .techie_sample
{
display: block;
text-align: center;
font-size: 30px;
line-height: 30px;
padding: 2px 0;
background-color: #000;
}
.logo_box .tblogo_sample
{
display: block;
padding: 2px 24px 2px 0;
}
.logo_box .buzz_sample
{
display: block;
color:#000;
writing-mode: tb-rl;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
position: absolute;
right: 0;
bottom: 9px;
font-size: 24px;
}
*:first-child+html .logo_box .buzz_sample { right: -28px; } /* IE7 positions element differently to IE6 & 8 */
.logo_box span:nth-child(3)
{
right: -16px;
bottom: 24px;
}

Pretty simple, isn’t it? Download the source code.

P.S. Though this trick is a little old, I thought it would be great sharing it with you. Hope you liked it.

How to Copy DVDs the Right Way with DVDShrink

dvd-ico Have you ever heard of DVDShrink? It’s a freeware program that allows you to make backup copies of your movie DVDs. The shrinkpart of the name of this software is the real power behind it. Movies are usually distributed on dual layer DVDs, while most blank DVDs are only single layer. The DVDShrink program can allow you to shrink a dual layer movie onto a single layer blank disk. However, there are a few tricks you need to know if you want to do it the right way and get the best possible copy.

I’ve used DVDShrink for years, but I never did know the finer points to using it. I always used it to create backup ISO files that I stored on my hard drives. Fortunately, I know someone who does know a good many tricks for using this freeware. Jim Hillier has posted a complete how toon one of my favorite newsletters Dave’s Computer Tips.

Here’s that post: How to use DVDShrink… The Right Way!

Wait! Before you head over there, here are a few things you might want to know.

• Where is the download for DVDShrink? The home site of DVDShrink is at dvdshrink.org, however, you won’t find a link to download it there. I always go to the DVDShrink page at Afterdawn to get the latest version.

• If you have any questions about DVDShrink, just post a comment below and I’ll ask Jim to lend a hand.

• If you’d like to read a good monthly newsletter, be sure to sign up for Dave’s Computer Tips.


Zip Up Files to Hide Your Secrets [How to]

zip-icon Zip files are a great way to pack up a collection of files to send them to other people, usually in an email. At least three or four times a year, I run into someone who doesn’t know how to zip up a collection of files in Windows. I ran into three people in the last two weeks at work.

Years ago, you had to have a third party tool such as WinZip to create and open zip files. In 2001, Windows XP was released with built-in zip capabilities. Microsoft decided to call these compressed folders.

Not only is it easy to use the built in zip features in Windows, it’s also possible to password protect zip files so that others can’t open the files inside them. However, even though a zip file is password protected, you can still see a list of files inside it. I have always hated that, but I found a way around it.

Here is how to hide all of your top secret files in a zip file (or compressed folder).

First, let’s create two zip folders. You’ll see why we need two of them shortly.

To create a zip folder, right click into any folder or in an empty place on your desktop, and choose NewCompressed Folder.

image

Let’s choose Stuffand Top Secretas the names of the new zip files.

Now we can add some top secret files to our Stufffolder. I’m going to add a JPG picture to it here. I’ll open up Stuff.zipby double clicking it, then drag the JPG file into it.

add-files-to-zip

Now let’s add the Stuffzip file to the Top Secretzip file.

add-zip-to-zip

Now we need to add a password to the Top Secretcompressed folder.

menu-add-a-password

You’ll have to type your password in twice to confirm it.

enter-password-twice

That’s it. The next time anyone opens that zip folder, all they’ll be able to see is a file named Stuff.zip. If they try to open it or extract it, they’ll have to know the password you’ve set.

trying-to-open-protected-file

As you can see, all of the files inside the Stuff.zip are hidden. That’s why we needed two zip files.

As a final cleanup step, you can delete the older copies of Stuffand the JPG. These are safely and securely inside the Top Secretzip folder now.

delete-older-copies

These techniques will work in all versions of Windows released after XP, as well as XP itself.

Here are some other ways to use zip files:

1. Compress and Zip Files Online Without Any Software
2. How to Fix Default Zip File Behavior
3. Open Zip Files Online
4. Repair Corrupted Zip Files
5. Unzip or Extract Files Online

Here are some other ways to hide files:

1. Lock And Hide Files & Folders
2. Windows Scripts: Show/Hide Hidden Files and Folders In Windows
3. Password Protect and Hide Personal Folders
4. Hide Drives From My Computer

If you have your own special way to hide secret data, let us know in the comments below.

How to Create Your Own Site Searches in Internet Explorer

internet-explorer-iconDo you have favorite websites that you need to search? You might already know that you can search specific websites by using the pull down menu on the built-in search box in Internet Explorer. You can see a list of sites, such as Bing, Google or Yahoo; these are called Search Providers.

what-are-search-providers

You can add Search Providers in Internet Explorer very easily, but what if the site you want isn’t included in Microsoft’s list of providers? Here are a few of the providers listed by Microsoft:

Bing SearchNew York Times Instant SearchWikipedia Visual SearchAmazon Search SuggestionseBay.com Visual SearchGoogle Search SuggestionsYahoo! Search SuggestionsESPN SearchRealtime Web Search (by OneRiot)Sports Buzz from Buzztap

Creating your own Search Providers is an easy trick to learn. It might save you several minutes every day if you have to perform lots of web searches. I’m only going to show instructions for Internet Explorer 7 and 8. If you have Internet Explorer 6, you should upgrade to a newer version. IE6 is getting too old, slow and insecure (like me). Unlike me, however, IE6 is not getting any wiser.

Let’s start with a good example. let’s say that you are in love with the Techie Buzz site and you need to search it every day. Follow the steps below to add your own “Techie Buzz Search” to Internet Explorer.

1. Open Internet Explorer and navigate to Techie-Buzz.

Learn to Program with Microsoft Small Basic

This is what my first computer looked like. It was a Xerox Sigma, if I recall correctly, and it took up an entire room at the college I was attending.

xerox_sigma

I learned how to program this machine in 1977. The college course I took was for a language called Fortran. The next year, I fell in love with Basic, and I’ve used it on and off ever since then. Basic is one of the easiest languages to learn, and I actually learned it from an instructional program on that huge computer. The name is an acronym for   Beginner’s All-purpose Symbolic Instruction Code.

Microsoft wants you to learn Basic, and they’ve made it as easy as possible with the recent release of Small Basic. They have a PDF beginner’s guide that walks you through Basic programming step by step. Here’s what Small Basic looks like:

small-basic-program-listing

The first thing that struck me was that this program gives all kinds of help while you are typing in the editor window. If you aren’t sure how to finish a command, you can scroll through the pop-up to see what your options and arguments should be. When you click on a command or object word, the sidebar tells you all about it.

Here’s a video showing your first steps:

Small Basic isn’t the only free programming suite that Microsoft offers. A few years ago, they made three of them available. Here’s the quick list:

The Visual Basic suite is the big brother to Small Basic. If you have it installed, you can even convert your Small Basic programs into Visual Basic so that you can create executable files.

Small Basic is definitely the best way to start if you’ve never tried programming. Once you have it under control, you’ll be ready to move to the other three I’ve listed.

Download Small Basic

Techie Buzz Verdict:

Microsoft Small Basic is one of the easiest programming tools I’ve tried. If you’ve ever considered learning to program a computer, you won’t find an easier way to learn. The instructional PDF file that’s provided, teaches you step by step. Even a cave man could do it.

techiebuzzrecommendedsoftware1_thumb

Techie Buzz Rating: 4/5 (Excellent)

Tutorial to Create Accelerators for IE8

We have told you about IE8 Web Accelerators, which allows you to quickly share content or perform different tasks from the IE8 browser and also create a huge list of the most Useful IE8 accelerators. However, what if you want to create your own web accelerator for IE8?

No worries, the IE Blog has created a Accelerator creation guide, which details the steps required to create an Accelerator for IE8. The tutorial includes accelerator building basics, discusses about dynamic variables, adding previews and testing your accelerator.

So if you have been waiting to create your own accelerator, head over to the IE blog and read the Accelerator Creation Guide.

How To Copy Selected Text Automatically In Firefox

Earlier this month, we had discussed about an extension for Google Chrome that will help you to automatically copy selected text- Auto Copy. Today, I am going to discuss about the same trick in Firefox.

This is an about:config tweak. To open the preference editor of your browser, direct your cursor to the address bar and type “about:config”. A warning message will appear like this – “This might vide your warranty!”. Ignore the message and enter the editor.

firefox_copy_text
firefox_copy_text

In the filter box, type the following text- “copy”. You will get a preference named clipboard.autocopy. Change the value of that preference from “False” to “True” by double-clicking or right clicking on it. You are done!

I also found a good addon which does the same job. If you think it is risky to edit the preferences you can try this too! – AutoCopy

How To Use Goo.gl URLs to Tweet Your Blog Posts in Feedburner?

Earlier today Google announced the introduction of Goo.gl a URL shortening service for Feedburner and Google Toolbar. In addition to that, we also told you about a new feature in Feedburner which was similar to Twitterfeed, and allowed you to tweet your Blog posts to .

In this post, we will look at the steps involved in setting up your Feedburner account to automatically tweet your posts and shorten the URLs using Goo.gl URL shortening service.

Setup Feedburner to Automatically Tweet Blog Posts using Goo.gl

Step 1: Login to your Google Feedburner account and click on the Feed you want to setup automatic tweets for.

Step 2: Click on the Publicizelink in the top menu and then the Socializelink in the sidebar.

add_twitter_facebook_socialize

Step 3: On the Socialize page, click on the Add a Twitter accountbutton and follow the steps to authorize Google Feedburner for and provide it read/write access to your twitter account. You can follow the same step to authorize more than one Twitter account.

customize_feedburner_tweet_option

Step 4: Once you are redirected back to the Feedburner page, make sure to customize the options available for your tweets.

Step 5: Once you have added your Twitter accounts and customized the tweet, click on the Activate button at the bottom of the page.

That’s it, if you have more than one feeds you can easily set them up to tweet your blog posts automatically by following the above steps.

Disabling Feedburner Socialize From Auto Tweeting your Blog Posts

You can easily disable the service by visiting the socialize page and clicking on the Deactivatebutton at the bottom of the page to disable the service. In addition to that, you can also revoke access to the Feedburner app in your twitter account. If you don’t know how to revoke access to Twitter apps, read our tutorial on How to Revoke Application Access in Twitter.

Add WPtouch Support For Nokia, Symbian & Windows Mobile

WPtouch is a excellent which allows users to provide a mobile friendly interface for their websites, when a user visits using a mobile web browser. At Techie Buzz, we use the plugin to display the website for mobile phones.

Displaying mobile friendly pages on mobile web browsers makes sense, since usually their screens are much smaller. Along with that, mobiles also do not have fast internet connections. Using WPtouch definitely helps speed up page rendering on mobile devices.

techie_buzz_mobile_edition

However, recently one of our authors pinged me and said that the mobile site was not displaying while he was viewing it on a Nokia 5800 touchphone. Turns out that WPtouch is built to only run on iPhone, iPod Touch, Android, Storm and Pre devices. It does support Mini too.

However, this means that it will not work on Nokia based phones running on Symbian OS or Maemo, and devices that run on Windows mobile out of the box. To overcome this issue, you can add support for additional devices by changing a small setting in WPtouch.

wptouch_nokia_symbian_windows_mobile_support

To do that, go to WPtouch options and scroll down to Advanced Options. In the field for custom user-agents, add the following text nokia, iemobile, symbian, and save your settings. The provided strings are generic in nature, you can always find the browser user-agents for mobile devices on this page.

Testing WPtouch on Nokia or WinMo Devices

Once you have added the changes, test it out by visiting the site using a Nokia or Windows Mobile device, or for that matter whichever device you added support for.

If you do not have the different devices to test with, you can visit our earlier tutorial of Emulating Mobile Web Browsers on your Desktop with Firefox.

That’s it, hopefully this will help users who use WPtouch add support for Nokia Symbian, Windows Mobile or other unsupported devices with ease. Feel free to leave a comment if you have any doubts or queries. For more such useful tips, visit the section.