AllBlogTools.com | Blogger Templates and Tricks

Link to Blogger Templates, Tutorials, Tools | WordPress Themes | Allblogtools.com

Posted: 30 Sep 2013 08:19 PM PDT

This image has no alt text

If you ever wanted to add a unique style on your blog's date header then today's tutorial's just for you. Courtesy of Ataul (from Free Blogging Tricks), this tutorial will teach you how to change your posts' date header's color and font style. It's actually pretty simple as it only involves adding a few lines of CSS code and a bit of editing as well to make any desired adjustments or changes to the attributes.

By the time you're finished, your new customized date header will be displayed floating on the left side of your post and partially out of the structure like a banner.

So how do you do it? Follow the instructions below.

NOTE: Before you continue, it'd be best to backup your template first. You can do so by clicking on the 'Backup / Restore' button on the upper right corner of your screen while you're on the 'Template' page.

Click on 'Edit HTML'

Using 'Ctrl+F', search for .date-header (or date.header)

Copy/paste the code below right after it:

background:white;   border-bottom: 1px solid #000000;   font-size:12px;   margin-left:<strong>-</strong>105px;   padding:3px 3px 3px 3px;   width:90px;   word-wrap:break-word;   float:left;   }

It should then look something like this:

   .date-header span {   background:<strong>#FFD465</strong>;   border-bottom: <strong>2px solid #cc0000</strong>;   color:<strong>#000000</strong>;   font-size:<strong>12px</strong>;   margin-left:<strong>-105px</strong>;   padding:3px 3px 3px 3px;   width:90px;   word-wrap:break-word;   float:<strong>left</strong>;}

To customize the style according to your preference, replace the highlighted portions of the code.

To change the background, change #FFD465

To change the border style:

Delete –bottom if you want border all around.

Change 2px to a higher value for thicker border.

Change solid to dotted, if want a dotted line.

Change #cc0000 with hex code of your preferred border color.

To increase/decrease the distance between the date and blog post, change -105px to a higher/lower value.

To adjust float, change left to right.

And that's it! You're done.

Adsense for Regular and Hosted Accounts

Posted: 30 Sep 2013 07:55 PM PDT

This image has no alt text

To help your website generate revenue, you will need Adsense ads and to get one, you need to apply first at Adsense then if you get approved, that's the only time you can earn by using the generated codes that it will provide and add it to your site by copy and pasting the code a HTML/Javascript gadget inside your Blogger. Well, that's the old way, which is referred to as a regular Adsense account.

Since then, Google ads have made its availability more accessible by having hosted Adsense account via their other services that include Blogger and Youtube.

For Blogger, simply go your to Blogger Dashboard > Layout> Add a gadget > Add an Adsense gadget so you can display the ads.

However, recently there have been some issues when trying to add an Adsense link unit that way. Here are some tips provided by Peter of the original Blogger Tips and Tricks on how you can display your ads in your non-hosted partner site.

Go to Account settings page, found on the Home tab.

Click edit in the "Access and authorization" section. It is next to "Only host sites are allowed to show ads for your account".

Enter the URL of the site where you prefer to show the ads on the "Show ads on other websites"

After you're done with step #4, hit submit.

Then you have to implement the Adsense ad code on the URL you put on steps #4 and 5 on the page that gets traffic.

Once the application has been approved, you can now generate AdSense code and add it in your site.

786 Jumbo Articles

Watch All Pakistani and Indian Dramas

Tuesday, October 1, 2013

AllBlogTools.com | Blogger Templates and Tricks

AllBlogTools.com | Blogger Templates and Tricks

No comments:

Post a Comment