Showing posts with label blogger. Show all posts
Showing posts with label blogger. Show all posts

10.24.2011

Blogger: How to Add Adsense Below Post Titles

Google Adsense is the most popular ad network on the planet. A lot of Blogger users also use it. It's an endless discussion where to place these ads on your blog for maximum exposure. The best ad places are around the header or above the posts or below the post titles. You can easily add adsense in your sidebar as a gadget. But Blogger doesn't allows us to directly place the ads below post titles. The ads below post titles have proven to be one of the most successful money making possitions. So, what are you waiting for? Follow this tutorial to add your Adsense ads below post titles.
Please Note: I'm assuming that you're using the new Adsense interface.

Steps!

  1. Log in to your Google Adsense account by going to https://www.google.com/adsense/
  2. Go to My ads tab and open Ad units from the left side by expanding Content link.[View Screenshot for Help]
  3. Click new ad unit to create a new ad.[View Screenshot for Help]
  4. Select the size, type and color of your ad. For best results chose either 300x250 medium or 336x250 large rectangle.[View Screenshot for Help]
  5. Give your ad a remember-able name and ad a custom channel to track the ad performance. If you don't know anything about channels then leave that option.
  6. After filling required information, click save and get code button at the bottom of the page.[View Screenshot for Help]
  7. A pop-up window will appear with the ad code. Copy that code.[View Screenshot for Help]
  8. Before pasting the ad code in Blogger, we must make it compatible with Blogger format. So go tohttp://www.hacktrix.com/adsense-code-converter/ paste the ad code and convert it. You'll find the converted ad code in the bottom box there. Copy the converted ad code.
  9. Open your Blogger account and go to Design then Edit HTML tab and check Expand Widget Templates option.
  10. Press Ctrl + f & find <data:post.body/> you'll see some code like this:
  11.     <div class='post-body entry-content'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
  12. Paste the converted ad code just before the above code. The result would look something like this:
  13. <script type="text/javascript"><!--
    google_ad_client = "ca-pub-xxxxxxxxxxxxxxx";
    /* my ads */
    google_ad_slot = "xxxxxxxxxx";
    google_ad_width = 300;
    google_ad_height = 250;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    <div class='post-body entry-content'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
  14. Click the PREVIEW button to see the result. Thought you might not see ads below post titles instantly because sometimes Adsense ads take some time to display.
  15. After that save your template by clicking the SAVE TEMPLATE button.

Tip: Make Ads Appear Only on Post Pages


Usually, users don't like to see too many ads on a single page. So, we can hide the ads under post titles on main page. These ads will appear only when users will click the post title and go to the post page. To do that follow the steps above but after step 8 you have the converted ad code. Ad some more code in that converted code so that it should look like this:

<b:if cond='data:blog.pageType == &quot;item&quot;'><script type="text/javascript"><!--
google_ad_client = "ca-pub-xxxxxxxxxxxxxxx";
/* my ads */
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></b:if>

What I did here is that I've added an if condition to make the ads appear only on post pages. After that, follow the steps above to complete the tutorial.

9.30.2011

How To Add Drop Down Menu To Blogger

A drop down menu is a high light for any blog or website. It makes people access your blog easily and reach the contents quickly. The ease of access keeps your visitors to your blog.






Remember Always Back Up Your Template Before You Make Changes.

Step 1. In Your Blogger Dashboard Click Design > Edit Html 
Design Edit Html Blogger



Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code)


   ]]></b:skin>   


Step 3. Copy and paste the following code Directly Above / before  ]]></b:skin>


/*Start Css Menu*/
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNMOpfr3RFzabyr7rvSqeymNg-4PQpviBr2VqkBFLQ2KNj0FlGoAgvgnrFatP9TrLeij39Zht8eq9lIn4ZCEhPUkfqoQ4GiNZg7ijJCy8cNSZl1sc7qZArPNMsiHjZZgu2zfBj5Q-scRdF/s1600/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #a80329;
border-right:2px solid #a80329;
border-bottom:2px solid #a80329;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
} 
.menu #current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6LgFetK5cItMpvhl3zfQjbUYLYzFn-h3DVL8pySS-Y9sB0YUK3c7aUUT75wlhmLw86lgUdIYd1_iadKBawue_wNs1frKWfpixqbFk4Qhe2jefRAvPJUZ66Ra70DMA2rhBhWaOHhkBQcjD/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}

/*End Css Menu from http://www.spiceupyourblog.com*/



Step 4. Save your template.

That's the Css added next is to add the html for your menu.

Now go to your blogs Design Page, we will be adding the menu across your blog below the header.This area is called Cross Column and can be seen in the image below.If your blog does not have this section available you can see how to enable it here - Add Full Width Cross Column Gadgets To Blogger.


Add The Menu Html


In your blogs Design Page click Add A Gadget > Choose Html/Javascript > Copy and paste the following code into the Html/Javascript gadget :

<div class="menu">

<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#" >Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>


This is the code that makes up the menu in the demo above.Replace the hash tags (#) with your links and the text with your text.If you take a few minutes to reference the demo and the code you should see how it works.If you want to add more links you can do so in the same way, once again take a few minutes to look at the layout of the code and you will see how its done.

Template Designer Tabs Fix


If you use a template from the Blogger Template Designer there is a section of Css that will effect this or any menu you place in the cross column section.This is called tabs and you will need to remove or over ride the tabs css.

Google Buzz Share Button - Widget for Blogger


Google Buzz is a great social tool which is very similiar to Twitter and Facebook. It's a wonderful way to engage and interact with your readers! Make sure to implement these Google Buzz buttons into your blogger posts, so that users can easily share your content on Google Buzz.


Google Buzz It Button to Blogger


  1. Go to Layout >Edit HTML in your Blogger Dashboard.
  2. Back up your existing Template before making any changes!
  3. Make sure to check the "Expand Widget Templates" box.
  4. Here is the Google Buzz it Code:
    <div style="float:right;padding:4px;">
    <a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcTitle=&quot; + data:blog.title+ &quot;&amp;srcURL=&quot; + data:blog.homepageUrl ' rel='nofolloW' style='text-decoration:none;' target='_blank'>
    <img alt='Buzz It' src='http://i48.tinypic.com/idyc04.png' style='border:0px;'/></a>
    </div>
  5. Search for this line of code in your template:
    <div class='post-header-line-1'/>
    and place the Google Buzz it Code right after the code you searched for above.
    If this doesn't work, then search for this code below and place the Google Buzz it Code directlybefore it.
    <data:post.body/>
  6. Now save your template.


Google Buzz Button with Share Count to Blogger


  1. Here is the Google Buzz it with Share Count Code 
    <div style="float:right;padding:4px;"> <script type='text/javascript'> njuice_buzz_url = '<data:post.title/>'; njuice_buzz_title = '<data:post.url/>'; njuice_buzz_share = 'reader'; </script> <script type='text/javascript' src='http://button.njuice.com/buzz.js'/> </div>
  2. Place the Google Buzz it with Share Count Code either
    directly after this:
    <div class='post-header-line-1'/>
    OR 
    directly before this:
    <data:post.body/>
  3. To change the style of the widget add either 
    njuice_buzz_size = 'small';
    or 
    njuice_buzz_size = 'simple';
    just after 
    njuice_buzz_share = 'reader';
  4. Save your blogger template.

9.29.2011

How To Add Revolver Maps In Blog

The use of Revolving Globe gadget to display the visitors of a website helps the author to analyse his page and the visitors to to identify how much the website is spread around the globe. They can decide whether to trust the content or not.






How to add a widget to a blogger.com (blogspot.com) layout?
  1. Login to your Blogger-account
  2. Under 'Manage Blogs' click on 'Design'. You get an overview of the page elements on your blog. If not click on 'Page Elements'
  3. Click on one of the 'Add a Gadget' links, a pop-up opens
  4. Under 'Basics' click on 'HTML/JavaScript'
  5. Paste the code you get at revolvermaps.com into 'Content', optionally add a title
  6. Click on 'SAVE'
  7. Drag the new page element representing the widget to a position of your choice
  8. Click on 'PREVIEW', check if the widget fits into your layout. You may have to experiment a little in order to find appropriate size-settings for the widget.
  9. Click on 'SAVE', you're done
How to add a widget to Wordpress.com 
  1. The HTML-Map as well as the HTML-Button are compatible with Wordpress.com. Create the Map here, if you want to use the Button create it here, make sure you've choosen 'HTML-Map' respectively 'HTML-Button' as the code version. Add the code to your Wordpress-Blog as follows:
    1. Login to your Wordpress account
    2. Go to 'My Blog' - 'Dashboard' - 'Appearance' - 'Widgets'
    3. Drag the Element 'Text - Arbitrary text or HTML' to the sidebar
    4. Copy the code from the RevolverMaps setup page to the big textbox, optionally add a title
    5. Click on save, you're done.

Code for the Revolver maps widget


For Larger Version Go to : http://www.revolvermaps.com/?target=setup
(180px*180px  To 350px*350px)


For Mini version Go to : http://www.revolvermaps.com/?target=setupmini
(70px*70px  To 178px*178px)


9.26.2011

8 Deadly Sins of Site Design

Am sharing with you people an image that explains the 8 deadly sins of site design..They are bad navigation, too many ads,bad content structure,obtrusive use of audio & video,registration requirement,boring content and design,poor legibility, and finally lack of frequency.. Click on the image and open it. The image is too big to show on this page.That's why uploaded as small..sorry guys..

9.25.2011

What is a feed?



A Feed is a mechanism for publishing your site content so that new posts can automatically be picked up by software programs. Many people use "feed reader" software to collect the latest posts from multiple sites that they enjoy reading so that they can read them all in one place and never miss an update, without needing to check each site every day or every hour. There are feed readers that can be installed on your local computer (many email programs include feed reading features), as well on online services like Google Reader. 
The standard icon for feeds looks like this: RSS Feed Icon
Most blogging services & platforms create feeds for you automatically. You may even have a feed and not know it, but your browser can tell you. Go to your site's main page as a user would see it (not as the administrator) and check the following:
  • if using Internet Explorer, look for the orange RSS icon in your toolbar, below the URL bar. Click on it to see the list off feeds available from your page
  • If using Firefox, Safari, or another browser, the RSS icon will likely appear in the URL bar; it may be a different color. You can click on it for a list of available feeds.
Select one of the feeds to open it in your browser. You can then copy the URL to use when claiming your blog. (Note: many services offer a comments feed; we don't want that one.)
There are two main types of feeds: Atom and RSS. We prefer Atom, but can use either one. Wikipedia, among other places, has a more in-depth explanation of feeds.
Most blog hosting services make feeds auto-discoverable and even offer you a way to specify the feed URL(s). If you are managing your own site setup, you can enable auto-discovery of your feed(s) for your site by adding a line like this to the section of your HTML code:
<link rel="alternate" type="application/rss+xml" 
  title="{enter the title of your feed or page here}" 
  href="{enter the URL for your feed here}" />
It's also a good idea to have your feed refer back to your main page. Your feed should tell what page it belongs to -- the main where someone can go in a browser to see the content listed in the feed. Each feed item has a permalink to a page for that specific item, but the feed itself should also link to your main page. That way we know it's your feed, and not somebody else's.
This can be done in various ways, depending on your feed format. In RSS, there is a <link> element inside the <channel> element but not inside any <item> elements, like:
<link>{enter the URL for your main page here}</link>
For ATOM feeds, use a link similar to the auto-discovery link on the main page. This goes at the top level of the ATOM page:
<link rel="alternate" type="text/html" 
  href="{enter the URL for your main page here}" />

9.21.2011

How to Add Cute Feedburner box to Blogger /blogspot



Follow simple and easy step to adding this feed box to blogger ---->>>>

* First go to your blogger Dashboard.

* Now click in design tab and edit HTML.

* Click in small box to expand your blogger Template.

* Now find this code </head> by CTRL+F key.

* Copy below code and paste before </head>

<style type="text/css">
.newsletter-outer  {
border : 1px solid #cecece;
padding : 3px;
margin-bottom : 10px;
}
.newsletter {
background : url(http://santabanta.mywapblog.com/files/newsletter-bg.gif) no-repeat center top;
height : 68px;
padding-top : 17px;
padding-left : 75px;
color : #fff;
}
#sidebar .newsletter a, #sidebar .newsletter a:visited {
color : #fff;
}
.newsletter form {
font-size : 14px;
}
.newsletter #subscribe_email {
vertical-align : top;
margin-right : 5px;
padding : 3px;
background : none;
width : 190px;
} 
</style>

* Now click to save your blogger template.

* Again go to your blogger Dashboard and click in design tab.

* Now you are here --->>> Page Element.

* Click in Add Gadget which is in blog sidebar.

* When open new window click in HTML/javascript from list.

* When open new blank box copy below code and paste in blank box. 

<div class="newsletter-outer">
 <div class="newsletter">
  <form action="ENTER HERE YOUR FEEDBURNER EMAIL URL" method="post" name="newsletter" id="newsletter">Enter your email address:
   <div><input type="text" name="subscribe_email" id="subscribe_email" /><input type="image" src="http://santabanta.mywapblog.com/files/go.gif" name="submit" id="sumbit" /></div>

  </form>
  <a href="ENTER HERE YOUR FEED URL/">Subscribe to RSS Feeds</a>
 </div>





NOTE:- Remove Highlighted text from above code with your own.


* Now click to save your HTML/javascript and now you are done,

9.14.2011

The 3 Best Google Analytics Android Apps

google analytics apps for android
If you’re running a blog, Google Analytics may be the best single tool to analyse your web traffic. Available for free, and capable of providing excellent data, Analytics is a must-have.



The basic site isn’t well optimized for mobile devices however, which can be frustrating for webmasters who want to keep tabs on sites without dragging around a laptop. Thankfully, some Android developers have come to the rescue with apps specifically designed to make Analytics easy to use on a smartphone.

gAnalytics [2.2+]

google analytics apps for android
Free is always great, but sometimes it comes at the price of functionality. This is particularly true of apps that are compatible with Google Analytics. Several options (including Droid Analytics, below) are paid, and that isn’t going to be attractive to everyone.
Fortunately, the free price tag on gAnalytics doesn’t require much in the way of sacrifice from users. This app packs most of the information that you’ll need including visitors, popular keywords, referring sites, and more. Better yet, it does so with an interface which is actually more practical and professional than that of Droid Analytics.
The downside? Despite many interface advantages, switching between different timeframes when looking at site data is a pain in the butt, and Droid Analytics can provide more data at once. These are not massive flaws, however, and I suspect most users will be happy with what gAnalytics offers.

Droid Analytics [1.1+]

mobile app analytics
This rather clunky app receives isn’t hard to use, but receives no praise for its appearance. It looks and feels like a java program for a computer that’s been crammed on to a small screen, and while it’s as quick as any other app, it seems outdated.
If you can get over the appearance, however, you’ll find a wonderful app that provides a lot of Google Analytics data. What I most about this app is how easy it is to view data from different time periods. You can view the last seven days, the last 30 days, or any other time period by touching the clock icon. It’s also possible to break down data by different increments. For example, you can see the number of visitors you’ve received by day, by week, or by year.
Despite what I like about this app, and the fact I’ll probably use it instead of gAnalytics in the future, I think the current price of $3.47 is steep considering the lack of attention to detail. The developer really should slap a new coat of paint on it.
There is one advantage to be old and crusty, however – this app will work on Android versions as old as 1.1.

Simple Analytics Widget [2.1+]

google analytics apps for android
Both of the above apps are suitable for most users, but they are missing one important feature. A widget. I mean, come on. Every Android app needs a widget!
Thankfully there are some available, and among them, I prefer Simple Analytics Widget. The reasons are quite simple. First, the widget is the best looking of the bunch, presenting information in simple but attractive bold font. Second, the widget can present several different types of data (such as visits a day, page views per day, or bounce rate).
To add icing to this tasty widget cake, you’ll find the widget is easy to use, as it connects straight to your selected Google account rather than asking for a specific username/password combination.

9.09.2011

Latest Tweet Twitter Bird With Speech Bubble Gadget For Blogger



With the latest Twitter API it's become easy to create a neat latest tweets gadget.In this post i will show you how to add a Twitter bird with a speech bubble containing your latest tweet to your blog.The idea comes from Paulund.co.uk and all that's needed is some Css and a few lines of script.



View Demo 

Add The Latest Tweet Twitter Bird To Your Blog


Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template 

Step 1. In Your Blogger Dashboard Click Design > Template Designer, Then Advanced > Add Css





Step 2. Copy and Paste the following code into the Css section (See Paste Code Here Above)




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#twitter_update_list li{
     background: #f4f8f9; /* Old browsers */
     background: -moz-linear-gradient(top, #f4f8f9 1%, #e8f0f2 100%); /* FF3.6+ */
     background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f4f8f9), color-stop(100%,#e8f0f2)); /* Chrome,Safari4+ */
     background: -webkit-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* Chrome10+,Safari5.1+ */
     background: -o-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* Opera11.10+ */
     background: -ms-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* IE10+ */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f8f9', endColorstr='#e8f0f2',GradientType=0 ); /* IE6-9 */
     background: linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* W3C */
     box-shadow: 1px -1px 2px #bbc6c8;
     -webkit-box-shadow: 1px -1px 2px #bbc6c8;
     -moz-box-shadow: 1px -1px 2px #bbc6c8;
     border-radius:7px;
     -moz-border-radius:7px;
     -webkit-border-radius:7px;
     padding:15px;
     width:300px;
}
Now we have our bubble we need to represent the speaking of this update which is done by adding an arrow to the bubble. This will done by using the :after CSS feature which adding content after the selected item. We need to add a triangle, to make a triangle in CSS you define the borders and give one side colour and make the other transparent and it will create a triangle. Copy and paste the follow to create the triangle in CSS.
1
2
3
4
5
6
7
8
9
10
#twitter_update_list::after {
    content: "";
    position: relative;
    left: 30px;
    border-width: 15px 15px 0;
    border-style: solid;
    border-color: #e8f0f2 transparent;
    display: block;
    width: 0;
}
That's it!
With just 2 lines of javascript, quick CSS changes and a picture of a big blue bird you can display your twitter updates on any web page in a speech bubble.
Step 3. Thats the Css added now return to the design page and click Add A Gadget > Choose Html / Javascript





Step 4. Copy and Paste the following code into the Html/Javascript gadget




<ul id="twitter_update_list">
<li>Loading Tweets..</li>
</ul>
<a title="Follow Me" href="http://www.twitter.com/paulcrowepro" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin6YNOeVO94lH5QN1R1OCLxex4rBAQKKNLuRjhod_WYgO-Zbuw7DbV8uemDFs6Vd85goljgWQRd3si2rtPgI4DEENViVdbS55T7ROPBDZkAe0Vdqus080Nog9AbYlau9NlOoJYW-uG1JsD/s1600/twitter-bird-gadget.png" /></a>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/paulcrowepro.json?callback=twitterCallback2&count=1"></script>


Important - Change my Twitter username paulcrowepro x2 with yours.

Step 5. Click Save and check out your new Twitter gadget.

Thanks again to Paulund.co.uk

Related Posts Plugin for WordPress, Blogger...