BpWebNews Tool Box - Resources

Personally, I find these links most useful for maintaining BPWebNews. Putting the links on this page makes it easier to revisit! I updated the menu bar to link to this page. I list only the ones which I've personally used at one time or another.

I hope you use my favorites and sample some on these comprehensive lists:

• Blogging With Success - "101.5 Free Tools and Services for Bloggers"
  covers major areas of Advertising, Comments, Contacts, Content, Design, Feeds, Html, Images, Monetization, Offline Editors, SEO, and Stats.
  
  
• One Cool Site - "Resources"
  covering Polls, Surveys, Tools, Browsers, Color, CSS, Html, Images, and Stat programs,
  
  

What's in my toolbox?

1. Images
   
   
   • Zemanta - I use Zemanta's tool bar on my browser. The tools integrates with the Blogger (or WordPress) Editor for adding photos to posts. Images are Creative Commons license or free to share. Zemanta adds attrition along with the image. I also use it for my Gmail!
     
     
   • Flickr - My favorite source for Creative common images. I add a note at the bottom of posts linking to the owner's album.
     
     
   • Photobucket - Great place to store images you want to appear on other blogs, like the grab my button.
     
     
   • MS Image Composer - A staple in my image creation and manipulation. This free software lets you create image properly sized for the web. You can combine images, add text in various fonts and save as gif, jpg or png.
     
     
   • Resizr - Online software to resize images and save copy on your pc for use. You can also crop and rotate pictures.
     
     
     
2. Design Developer Tools (color, CSS, Html)
   
   
   • ColorZilla A must have color picker to get hex codes for any color on any web page. I wrote about it on Blogging with Success.
     
     
   • Screenshots - use any one of these to capture a page or thumbnail of your blog:
     Thumbalizr
     SuperScreenShot
     BrowserShots
     FireShot
     
     
   • WebDeveloper - lots of tools to analyze any web page. Marks-up the page to show Id and Class details, and lets you edit CSS or html to see the effect of any changes - Great for testing before you change your template.
     
     
   • Firebug --- similar to Web Developer, lets you debug css or html or javascript of any blog or web page. With both tools you can add and execute new code.
     
   
   
3. Stats/SEO
   
   
   • Google Analytics -must have to analyzed traffic volume and source.
     
     
   • Statcounter - similar in visitor monitoring to Analytics but breaks down Search Engine keywords with more detail. More for current look, not trends. I use both.
     
     
   • Website Grader - good overview of your search engine optimization.
     
     
   • SeoSiteCheckup - used alongside Website Grader, this give you more insight and recommendation for improving your blog. [thanks Sayz ]
     
     
   • SearchStatus - puts icons on Firefox to easily display any page's Google PageRank, Alexa rank, and more ...
     
     
4. Misc
   
   
   • Html Escape - for tutorials, converts the html to characters for display version.
     
   • Code Converter - does the html escape and vice-versa!
   • Yet another converter - for escaped code. It filters, converts and colorizes.
     
   • PollDaddy - nifty poll management; embed in post or put in sidebar.
     
   • BlogThis! - Read my post on creating a Blogger draft post from anywhere on the internet. - "Quick Tip: Post While Browsing - Use BlogThis!



5. Blogger Help - how to use Blogger
   
   These are useful help pages (a rarity!)
   
   • Dashboard - How can I use the Blogger Layouts features?
   • (more to be added!)
   
   

Check back often for updates! Leave a question or comment if you use any of these tools.

If you like the posts here, get them for free in your RSS feed or by email delivery. Speaking of buttons, be sure to grab the one in the sidebar to tell your friends about BPWebNews, share the luv.

image by ladyada

Disable Text Copying by Content Thieves

Recently a reader asked me to help him prevent anyone from copying text on his blog. The method involves disabling the text selection function. If you can't select text, you can't copy and paste. While this approach is not the answer to content scraping, it can be a first level deterrent. This tutorial is probably more useful to owners of poetry and original storytelling blogs. Expect to catch only the less sophisticated scoundrels. The more experienced ones will use your RSS feed directly. Read more about how to find and fight content thieves.

I'll show you how to disable text copying. The first way is freezes all text on your blog. The second acts on just the post content --- in case you need to keep the sidebar open for a grab my button scroll box.

A. Freeze All Text Selection

1. Go to your Blogger Dashboard, Layout, Page Elements, Add a Gadget.
   Copy and paste this code, preview and save if no errors.
   

   <script type="text/javascript">
   /***********************************************
   * Disable Text Selection script- &#169; Dynamic Drive DHTML code library (c)
   * This notice MUST stay intact for legal use
   * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
   ***********************************************/
   function disableSelection(target){
   if (typeof target.onselectstart!="undefined") //IE route
   target.onselectstart=function(){return false}
   else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
   target.style.MozUserSelect="none"
   else //All other route (ie: Opera)
   target.onmousedown=function(){return false}
   target.style.cursor = "default"
   }
   disableSelection(document.body) //Disable text selection on entire body
   </script>
   

2. View your blog to test that all copying is disabled. You're done. But do leave a comment on this post!
   

B. Freeze Post Content Only

1. Go to your Blogger Dashboard, Layout, Page Elements, Add a Gadget.
   Copy and paste this code. Preview and save if no errors.
   

   <script type="text/javascript">
   /***********************************************
   * Disable Text Selection script- &#169; Dynamic Drive DHTML code library (c)
   * This notice MUST stay intact for legal use
   * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
   ***********************************************/
   function disableSelection(target){
   if (typeof target.onselectstart!="undefined") //IE route
   target.onselectstart=function(){return false}
   else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
   target.style.MozUserSelect="none"
   else //All other route (ie: Opera)
   target.onmousedown=function(){return false}
   target.style.cursor = "default"
   }
   disableSelection(document.getElementById("mydiv")) //Disable text selection with id="mydiv"
   </script>
   

2. Go to Layout, select Edit HTML and back up your template ('download full template')
   Press Ctrl + F to find this line in the template code:
   <div class='contentwrapper'>
   
   Copy and paste these three lines underneath the line you found.
   

   <!-- 6/28/09 disable copy of posts only id-'mydiv' -->
   <div id='mydiv'>
   <div id='content'>

3. Stay at that spot in the template, find these two lines in the html code: (Ctrl + F on the text of the first line in green)
   </b:section>
   </div>
   
   Copy and paste this code after the second line in green ----to close the id= 'mydiv' tag at the end of post content:
   

   <!-- 6/28/09 disable copy of posts end div -->
   </div>

4. Then preview. If there are errors, press the "Clear Edits" button at the bottom of the html edit screen. Otherwise, save your changes. View your blog to test that copying is disabled only on the posts. You're done. But do leave a comment on this post!

If you have trouble leave a comment with your blog address.

If you like the posts here, get them for free in your RSS feed or by email delivery. Speaking of buttons, be sure to grab the one in the sidebar to tell your friends about BPWebNews, share the luv.