Open top menu
Showing posts with label Level 2. Show all posts
Showing posts with label Level 2. Show all posts
Tutorial # 14 - How to apply for Google AdSense account for Blogger

Step 1: Click on "Earnings"

 You may click on the Earnings tab from the drop-down menu on your dashboard.


Step 2: You’ll then see the AdSense overview page. If you haven’t signed up for AdSense yet, click Sign up for AdSense or log on to https://www.google.com/adsense/signup

However, sometimes your blog doesn't qualify for AdSense, as shown below

In this case you have to click on "Learn more" in order to know whether the following Terms and Conditions of Google AdSense have been fulfilled.

Do you have a website?
You'll need one in order to participate. Click here to promote your site/blog and to read tips for creating great content so you'll attract users and advertisers to your site.

Are you at least 18 years old?
As noted in their Terms and Conditions, we can only accept applications from applicants who are over 18.

Does your site comply with our program policies?
Check that your site complies with our policies before submitting your application. Keep in mind that they may change their policies at any time, and per their Terms and Conditions, it's your responsibility to keep up-to-date with them.

Has your site been active for at least six months?
In some locations, including Pakistan, India and China, they require your site to have been active for at least six months before it will be considered. They've taken this step to ensure the quality of their advertising network and protect the interests of their advertisers and existing publishers.
Click here to get your account approved specifically in Pakistan.

Spend time writing posts, not thinking about ads
Integrating AdSense into your blog is easy. Once your application has been approved, you can decide where the ads appear on your blog.

Your style
Customise the appearance and location of your ads to fit the style of your blog. The content and ads should not overlap to each other.

 Step 4: Select whether you'd like AdSense on the Google Account you're currently signed in to, or you'd like to create a new Google Account


After signing up, you will see this

 Step 5: Complete the application form, review the information you've provided, and then agree to terms and conditions

Ads will not appear on your blog until your application has been approved. Once you receive confirmation that your application was approved, you can control the ways the ads show up on your blog through the settings on the Earnings tab at anytime. It’s up to you whether or not to show ads, and where on your blog to display those ads (sidebar and posts, just sidebar, or just posts) if you’re using Traditional templates. Dynamic Views users can skip this step, as we’ve already optimized ad placement for Dynamic Views templates.
Read more
Tutorial # 13 - Introduction to Google Adsense

Turn your Passion into Profit

Google AdSense is a program developed and run by Google that allows publishers in the Google Network of content sites to serve automatic text, image, video, or interactive media advertisements. As the word "Adsense" implies, the program has the "sense" to show only those advertisements on your website or blog which matches with the content of your site. The ads also depend upon the class of audience and the their geographical location. These advertisements are administered, sorted, and maintained by Google. They can generate revenue on either a per-click or per-impression basis.

AdSense is a free, simple way to earn money by placing ads on your website/blog.

Features of Adsense: A few reasons why more than 2 million people have chosen Adsense
- Ads are reviewed to ensure they’re high quality and relevant to your content or audience, even when viewed on smartphones and tablets. The result? You can earn more from them.

- Block ads you don't like, customize where ads appear, and choose which types fit your site best.

- Tap into the largest network of online advertisers who are bidding for your ad space so you get the most for your ads.

- Block ads you don’t want, choose where ads appear, and change the look and feel of text ads to match your site. You can even control the categories of ads you allow. Your site, your rules.

- Connect with your audience wherever they are with the audience: Mobile is built into AdSense. Responsive ad units automatically adapt to different screen sizes so you can create a great user experience and continue to earn revenue when people view your site on a smartphone or tablet.

- Get the real story with Performance Reports: Performance metrics help you see where the right tweaks can increase profits. You can also get your stats on the go with the AdSense mobile app.

- Compare and learn with AdSense Experiments: Quickly create, run, and analyze A/B experiments without changing your code. AdSense Experiments lets you compare one of your ad settings against a variation to see which performs better.

Google AdSense Account needs to be approved, and once it is approved, you are able to post ads on your website/blog and earn money. You'll also be able to have access to the AdSense report:

AdSense Report
Once you start generating AdSense impressions, you'll begin earning money when people click on ads that appear on your blog. To see earnings information, go to your Earnings tab and click on the View Dashboard link.

All time
If you're an existing AdSense user, you'll notice that Blogger created a new channel (with the URL of your blog) in your account. If you have had AdSense ads on your blog before using Blogger’s AdSense integration to insert ads into your blog, note that all time will retrieve data only from the time you connected Blogger to your AdSense account.

This does not affect your overall AdSense reporting, available directly from AdSense.

Terminology
The AdSense report visible from the Earnings tab contains basic information about how many ads have run on your blog, how many clicks were generated, and how much revenue you've earned. Each term in the report is defined below:-

- Page views: A page view is generated every time a user views a page displaying Google ads. We'll count one page view regardless of the number of ads displayed on that page. For example, if you have a page displaying three ad units and it's viewed twice, you'll generate two page views and six ad unit impressions.

- Clicks: The number of times the ads were clicked on in the given reporting period.
- Page CTR (Click-through rate): The number of ad clicks divided by the number of page views.
- CPC (Cost per click): The average amount paid by the advertisers for each ad click.
- Page RPM (Revenue per mille): This is revenue per 1,000 page views. RPM = (Page views x CTR x CPC)  1,000
Read more
Tutorial # 10 - How to Prevent or Disable Copying of Text on your Blog Posts

Step 1: Go to your blog’s dashboard, then its layout and add an HTML/JavaScript gadget at any place (e.g. any of the two encircled)

Step 2


Step 3: Paste the below code in the HTML/JavaScript gadget


<script type="text/javascript">
var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}
function reEnable(){
return true
}
if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}
</script>


After adding the gadget, save the layout settings. Now your blog posts’ text is protected from being copied and the gadget shall not be visible in the blog.
Read more
Tutorial # 9 - How to add a Contact Form on a specific page or in a specific post

Adding a blog contact form to your website will give a professional look and also make it easier people to contact you direct on your website.

There are two methods which can be used to create a Contact Form in a specific page or post. Method # 1 is lengthy and difficult as compared to Method # 2. As compared to Method # 2, there is another drawback in Method # 1 that you can’t add custom fields such as phone number, mailing address and file upload methods to the contact form in blogger. BlogSpot uses special codes known as data tags to transfer data. So you can’t handle those tags as you want.

 Method # 1
Step 1
Step 2

Step 3

Step 4
Now go to Template and click on the Edit HTML button.


Step 5
Then paste below code just above of ]]></b:skin> code in the blogger template.

#ContactForm1
{
display: none ! important;
}

Step 6

Step 7: Create a new page

 Step 8
Switch it to HTML mode. Make sure that whether the "Use<br> tag" option in the option in post settings has been selected.

 Now paste below contact us form html code for Blogger on the empty Edit HTML field.

 <form name=”contact-form”>
<p></p>
Your Name:<br />
<input class=”contact-form-name” id=”ContactForm1_contact-form-name” name=”name” size=”30? value=”” type=”text” />
<p></p>
Your Email:
<span style=”font-weight: bolder;color:red;”>*</span><br />
<input class=”contact-form-email” id=”ContactForm1_contact-form-email” name=”email” size=”30? value=”” type=”text” />
<p></p>
Your Message: <span style=”font-weight: bolder;color:red;”>*</span><br />
<textarea class=”contact-form-email-message”  id=”ContactForm1_contact-form-email-message” name=”email-message” cols=”25? rows=”5?></textarea>
<p></p>
<input class=”contact-form-button contact-form-button-submit” id=”ContactForm1_contact-form-submit” value=”Send” type=”button” />
<p></p>
<div style=”text-align: center; max-width: 222px; width: 100%”>
<p class=”contact-form-error-message” id=”ContactForm1_contact-form-error-message”></p>
<p class=”contact-form-success-message” id=”ContactForm1_contact-form-success-message”></p>
</div>
</form>
Customization
Change highlighted words with relevant your own words.(i.e: for Your Email,Type your Email address)
Replace Required message instead of red color star symbols(*)( i.e: (required) )
Change Send with wished text to be shown on Submit button.
Some bloggers complain that blogger contact form does not work on their blogs. In some occasions ‘Send’ button does not work correctly and so message would not be sent. I have resolved the problem with embedded-Contact form on blogger post pages and stand alone pages.

Now let’s look at how to troubleshoot this problem easily without confusing your mind.

Go to Template page and back up your template.
After doing that, click on ‘Edit HTML’ button and find contact form widget code.You can do this easily by clicking on ‘Jump to Widget’ drop down button and choosing on ContactForm1 id. Now you will see a block of HTML code similar to below.

<form name=’contact-form’>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class=’contact-form-name’ expr:id=’data:widget.instanceId + &quot;_contact-form-name&quot;’ name=’name’ size=’30’ type=’text’ value=”/>
<p/>
<data:contactFormEmailMsg/> <span style=’font-weight: bolder;’>*</span>
<br/>
<input class=’contact-form-email’ expr:id=’data:widget.instanceId + &quot;_contact-form-email&quot;’ name=’email’ size=’30’ type=’text’ value=”/>
<p/>
<data:contactFormMessageMsg/> <span style=’font-weight: bolder;’>*</span>
<br/>
<textarea class=’contact-form-email-message’ cols=’25’ expr:id=’data:widget.instanceId + &quot;_contact-form-email-message&quot;’ name=’email-message’ rows=’5’/>
<p/>
<input class=’contact-form-button contact-form-button-submit’ expr:id=’data:widget.instanceId + &quot;_contact-form-submit&quot;’ expr:value=’data:contactFormSendMsg’ type=’button’/>
<p/>
<div style=’text-align: center; max-width: 222px; width: 100%’>
<p class=’contact-form-error-message’ expr:id=’data:widget.instanceId + &quot;_contact-form-error-message&quot;’/>
<p class=’contact-form-success-message’ expr:id=’data:widget.instanceId + &quot;_contact-form-success-message&quot;’/>
</div>
</form>

Remove above code and Save your template.
You’re done!

Step 9
The "Contact Us" page can be added in the menu bar as explained in Tutorial # 8 - How to create a menu bar below the header just like a proper website.

Method # 2
Step 1
Step 2
How to make customized HTML Code for Contact Form from third-party website (e.g. foxyform.com)

 Step 3
Log onto www.foxyform.com. Select the required field that you want to include inside your form. For example I want to add Name, Email, Subject, and Phone therefore I have selected those fields.
Step 4
Select the color of your form according to your website color scheme or leave it as default.
Step 5
 This is the preview of your form below.
Step 6
Insert the email address where you want to receive your message via blog/website and tick the check box and then click on "Create Formular".
Step 7

Step 8
The "Contact Us" page can be added in the menu bar as explained in Tutorial # 8 - How to create a menu bar below the header just like a proper website.
Read more
Tutorial # 6 - How to make a gadget/widget appear only on the front, home, or landing page

Step 1: Add and place the gadget where you want it

Step 2
Step 3


Write the title (e.g. About Us) and the content (e.g. This is a Sample Blog).


 Step 4: Drag the text widget down and click on edit, but don't make any changes to it.

Step 5: This window will appear again.
Step 6
Maximize the window, so you can see the very end of the address bar in the window - at the top of the screen.

Notice the word at the very end of the address, ending in a number. This is the Gadget-id.

In this example, it's Text1. Other possible values are HTML1, Attribution1, Followers1, etc.


Step 7: Edit your template.
Step 8
Click in the search box inside the template editor, and search for the widget name i.e. Text1 in this example.

Once you've found it, use the expansion triangle at the left side of the template editor to expand this section of the code.

After you do, it will look like:


<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>


The code to use is this - except put the gadget-id instead of the XXXX - after before the text "<!-- only display title if it's non-empty -->":

<b:if cond='data:blog.url == data:blog.homepageUrl'> 


The following code needs to be included just after the line "<b:include name='quickedit'/>"

<b:else/>
<style type='text/css'>
#XXXX {display:none;}/*remove blank space that the gadget leaves*/
</style>
</b:if>



The example above looks like this, when the code has been added:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'>
<b:includable id='main'>

  <b:if cond='data:blog.url == data:blog.homepageUrl'>  <!-- only display title if it's non-empty -->

  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>

<b:else/>
<style type='text/css'>
#Text1 {display:none;}/*remove blank space that the gadget leaves*/
</style>
</b:if>


</b:includable>
</b:widget>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

Step 9: Check whether the change has been made or not
Read more
Tutorial # 5 - How to Remove "Home" link and "Subscribe to: Posts (Atom)" link

Step 1
Step 2: Go to template editor.
Step 3
Click anywhere in the code area and press Ctrl-F to open blogger's search box.
Step 4

To remove Home link

Search for datahomeMsg from the template:
You will find the line: a class='home-link' exprhref='datablog.homepageUrl'datahomeMsga

Remove that entire a link tag. You will see two occurrences one is for mobile version another one is for desktop version. Also remove the second one or comment it(means to enclose that line between /*......*/ in order to make it ineffective).

To remove Subscribe to: Posts (Atom) link

Search for <b:include data='feedLinks'name='feedLinksBody'> and just remove this line

Then save your template.

Step 5: Now you're done

Read more
Subscribe to: Posts (Atom)