Posts

Showing posts from April, 2015

Blogger: Adding Adsense Ads To Blogger

Image
Let's face it, most of us starts blogging so that we can can hopefully retire in the Caribbean using money that we make from our blog.  Well to do that we need ads on our blog.  In this blog post we will go over the steps to associate, and setup Adsense ads on your Blogger blog. Step-By-Step Instructions: 1. Log into your Blogger Blog account, then click on Earnings → AdSense 2.  Click "Sign up for AdSense" 3.  A warning message will appear, saying you are signed as your Blogger Google account.  If your AdSense account is different than your Blogger account then click on "Use a different or new Google Account", else click on the "Yes, use ......." button if your Blogger account and AdSense account are the same. 4.  Click on "Yes, proceed to Google Account sign in" to sign into your Adsense account. 5.  Sign into your AdSense account 6. After signing in you will be taken to "Step 2: Tell us about your content" screen.  Click the &quo

Blogger : Import Blog Posts From Another Blogger Blog

Image
In the previous blog we've exported a blog from Blogger.  In this blog we will import the .xml file that we've exported from that blog . Step By Step Instructions: 1.  Sign into the blog the you want to import your blog posts to 2. Under the "Settings" section click on the "Other" 3.  Click on the "Import blog" link 4. Click on the "Choose File" button 5.  Select the .xml export file 6.  Check the "I'm not a robot" checkbox, then click "Import Blog" button. 7.  The blogs from another blog will show up on the designated blog You can view the imported blog posts at http://techjunkiesandbox.blogspot.com

Blogger : Export Blog Posts From Blogger Blog

Image
In this blog we will go over how to export your blogs in Google's Blogger blogging application. Step-By-Step Instructions Exporting Your Blog : 1. Sign into the blog you want to export your blog posts from. 2.  Select "Other" in the "Settings" section 3.  In the "Blog Tools" section select "Export blog" 4.  In the pop up dialog box click on the "Download Blog" button 5. Save the .xml file that Blogger generates, by clicking on the "Save" button. 6.  Your blog has now been exported to an xml file 7.  Click "Close" on the "Export Blog" pop up window

Blogger: Create A New Blog In Blogger

Image
Creating a new blog in Blogger is really easy in fact it takes less than five minutes to do.  Well maybe ten minutes if you have to take screen shots.  Below is a step by step process of how to create your new Blogger blog. Step-By-Step: 1.  Log into blogger.com with your Google account, you will be logged into the Blogger dashboard 2.  In the dashboard there will be button that says "New Blog", click on the button 3.  The "Create  a new blog" window will appear, type in the "Title" and the "Address" for your blog as you type the address blogger will show you what the final URL will look like. 4.  Choose a template for your blog, and then click on the "Create blog!" button. 5.  Your new blog will be created in your dashboard. 6.  Type in the browser URL bar your new blog's URL in this case it's techjunkiesandbox.blogspot.com You can visit the finish new blog at techjunkiesandbox.blogspot.com

JQuery: Search Context Parameter (Select Within A Container)

Image
There's actually two selector parameters in JQuery.  The second parameter is the context parameter.  The context parameter specify the context that the selector should operate within that context.  Let's use the bootstrap form field markup below as an example: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> <title></title> <style> .form-label-s

Using Bootstrap To Make Your Form Fields Look More Professional

Image
In this blog we will turn ordinary form fields to a more modernized and professional looking form fields by using the bootstrap library.  Let's say we have the following form fields with no formatting, or layouts applied to it with the following markup. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> <title></title> </head> <body>

JQuery Basics : Selecting Attributes

Image
In the previous blog about selectors we've gone over what a selector is.  In this blog we will something that is a little more advance and use JQuery to select the attributes within a HTML element.  Most HTML elements have attributes associated with them for example the <input> element has the id, name, and type in them. So let's create a typical registration form input fields for this example and use JQuery to select the form fields according to what attributes the form fields have: <html lang="en"> <head> <meta charset="utf-8" /> <title>JQuery Attributes Selector Demo</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> </script> </head> <body> <form> User ID: <input name="UserId" type="text"><br/> First Name: <input name="First Name"

JQuery: Using Conditional Comments To Support Older Version Of Internet Explorer

Image
A lot of you may have wonder why JQuery releases versions 1.x and 2.x, the reason is because the 1.x versions are released to support older versions of Internet Explorer.   What a lot of people don't realize is that the 2.x version performs better, so if you have the choice between 1.x and 2.x you should choose the 2.x versions. Use the 1.x versions only if you have to.  In this blog we will show how to use conditional comments which Microsoft created in Internet Explorer 5.  Since it's specifically created for Internet Explorer other browsers will ignore it.   Since Internet Explorer 9 seems to be the divider for support we will use it as the base case for our conditional comments.  Here is the code to use the conditional comments to support older versions of Internet Explorer. <html <head> <meta charset="utf-8" /> <title>JQuery Conditional Comments Demo</title> <!-- [if lt IE 9]> <script src="http://a

JQuery Basics: Selectors

Image
Selectors are at the heart of JQuery in almost every task you want to perform in JQuery, your initial setup is to use a selector to select an element in the DOM to perform some action on it.  So in this blog we will show you some the common selectors that you will have to use in JQuery to get the job done. First let's make sure JQuery is working by creating an HTML file with a little JQuery test script in it: <html lang="en"> <head> <meta charset="utf-8" /> <title>JQuery Selector Demo</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(alert("jquery is working")); </script> </head> <body> </body> </html> When you run the page with the code in your browser you should see the following: Now that we know that JQuery is working change the html markup to the

Node.js : Setting Up Node.js "Hello World" Node.js

Image
So according to Node.js's official website http://www.nodejs.org , NodeJs is “a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.” So what does that mean in English?  Well it basically means that Node.js enables developers to use JavaScript like it's a server.  Allowing you to do JavaScript server-side like development without the backend servers.  Under the hood of Node.js is the virtual machine call V8.  If you need something lightweight Node.js should be able to fit the bill especially on the client side. Here are the steps to step up Node: 1.  Go to the website https://nodejs.org/ 2.  Click on the "Downloads" tab 3.  Download the install file for the your system 4.  Double click on the .msi file you've just dow