Welcome Enjoy Tutorials

Liked us?

Sunday, March 31, 2013

How do I exclude my visits statistics blog or website?

Hard Numbers of Success - Flickr Traffic Stati...
Hard Numbers of Success - Flickr Traffic Statistics Chart (Photo credit: epSos.de)
Imagine the case of a small company where all employees have the corporate website homepage, or for example when you manage a blog, you're usually much time online. In the first case, affect the number of visits and bounce rate (sales of the same web page you enter) and the second affects the average time statistics ...

If you will not deceive yourself, and I know that at first seems that nobody is connected and that your own visits motivate you, you should exclude traffic statistics generate yourself to visit the blog or website.

For this there is a concept called Google Analytics Filter. One of its applications is this precisely to exclude you from visiting a particular location or IP ... but it can also be used for individual statistical values ​​such Otherwise, how many times my employees review the corporate website.

In the case before us, we will have a filter to exclude visits from an IP address. Find out first what your public ip from this link (you must be navigating from your computer or place to exclude). Once annotated public IP, perform these simple step:

Steps to exclude my visits statistics:
Step 1. Log in to Google Analytics
Step 2. In the bottom right, where it says filters, click "Filter Manager"
Step 3. Now in the Filter Manager click + Add Filter (on the right)
Step 4. Indicates filter a name such as "Exclude visits my house" "Exclude views of the company"
Step 5. Click on "Custom Filter"
Step 6. Click on "Exclude"
Step 7. In the dropdown "Filter Field" selected visitor's IP address
Step 8. In "filter pattern" should indicate the IP averiguastes before. If the IP is 192.168.1.1 eg the field value should be: ^ 192 \ .168 \ .1 \ .1 $ (ie place a \ before each point of the direction and the two symbols to comiento ^ and $ at the end).
Step 9. At the bottom you have the profiles (statistics) to which you want to filter. Select the profile and click the "Add" finally click "Save Changes"

You can make as many filters as you want. If you work on a blog and collaborates else is also advisable to make a filter from the partner's IP, just to tell you your IP and manage a new filter.

Post. Most of us have dynamic IP that means that every time you turn off the router (which I do not) and turn it on again the public IP changes. Remember, you may be creating as many filters as you want. Another thing is that you can create an IP range, which is somewhat complicated because more users will be excluded.

The solution is that Google offers Filter by Cookies that you value and while it may be applied to a Web not think you can apply to the blog (see the first of the related links).

Remember that if you apply the filter now have to wait until tomorrow to see its effects.

I hope you can apply it without problems.

Leave your suggestions and experiences so you can help with this post. Thanks
Enhanced by Zemanta

Google Analytics to learn Statistics Blog

Google Analytics Hacks
Google Analytics Hacks (Photo credit: Search Engine People Blog)
Google Analytics is a free Google service specializing in web site analytics by automatically collecting data from visitors. It will be able to tell us about the number of visits, average time of the same, page views, unique users, user loyalty, location of users and so on.

What is the purpose of this tutorial?
If you've never used Google Analytics, the goal is to register an account and then ownership of your website / blog. If you wore it before, you just have to add a new property. In both cases, we have to integrate a tracking code in the blog, which will collect all the necessary information to compile statistics.

Is it really necessary if I just start the blog?
It is highly recommended, is a must, but bring your blog published a few days and visits is not the most important concern is you in the future leave this task done from the beginning. Of course if your blog takes more time is urgent and you have available for this configuration.

Tutorial. Steps to register your blog with Google Analytics
Step 1 and 2 of the tutorial is conditional on whether or not you were already user of Google Analytics.
1. Case 1. I'm new, I never used Google Analytics

    Log in to Google Analytics
    Then it will show a wizard. The first step is to register your account picture in step 1. After filling the data, press the Up button and proceed to Step 3 of this tutorial.

2. Case 2. I already had an account set up in Google Analytics

    Log in to Google Analytics
    Upon entering, select your account
    Click add new property. See this step screen. Click the Create button property to subsequently obtain the tracking code.

3. Get the tracking code (common to both cases)

    The display of the tracking code. Copy the code by right-clicking or Ctrl C provided on this page and go to step siquiente.

4. Paste the tracking code on the Blog

    Login to Blogger
    Click Template tab
    Make a backup by clicking the "Create Backup / Restore"
    Click the Edit HTML button
    Click the Continue button
    Press the key combination Ctrl F or Ctrl B (Mac ⌘ ⌘ F or B) and find
    Paste tracking code previously obtained just above the line found
    Save, view your blog should not see anything unusual

Once these steps, wait 24 hours and returns to access Google Analytics in order to verify that the data are already visiting your blog.
Enhanced by Zemanta

Optimize the title entries to promote SEO Blogger

Work positioning (SEO) starts a blog since we published the first post. This is one of the most complex issues, positioning a blog is a set of actions with results in the medium and long term. Remember that a good positioning means more visits to the blog, and therefore greater opportunity to "sell".

The SEO, a matter of small details
The default mode which displays the title of each post, does not favor the SEO. Then follow these easy improve the title of the entries in Blogger.

How to optimize the title of the entries in Blogger?
As long as we play the HTML template I recommend backup before. Follow these simple steps:

    Access the Template tab and click the Create button Backup / Restore
    Once you have created your copy , press the Edit HTML
     (Mac in Mac ⌘ ⌘ F or B)Keyboard and press Ctrl F or Ctrl B and search for:

       <title> <data:blog.pageTitle/> </ title>

    Replaces code found by the following:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>         <title><data:blog.pageName/> | <data:blog.title/></title><b:else/>       
         <title><data:blog.pageTitle/>
</title>
</b:if>


   Now  Save the template and view your blog


Now when you enter one of your post, look at the title that appears in the browser, at the top. It Put the title of the post first and then the name of the blog. It is this kind of details that favor the SEO of your blog.
Enhanced by Zemanta

What to choose for your blog platform Blogger or Wordpress?


English: WordPress Logo
English: WordPress Logo (Photo credit: Wikipedia)
Maybe you've got here just looking at Google. This should make you think about the potential of a blog is that now, more than ever, the contents play a very important note that is what will differentiate you from the competition.

As you probably know, there are basically two important and recommended platforms for your blog,  Wordpress and Google's Blogger.This is a blog created with the Blogger platform. I do not intend to make a comparison with Wordpress but Blogger expose the benefits of that is the tool I use. To complete your study try to put links to recommended reading comparisons between the two platforms.

Then answer the questions you have in your head :-)
This is icon for social networking website. Th...
This is icon for social networking website. This is part of Open Icon Library's webpage icon package. (Photo credit: Wikipedia)


Why do I need a blog?

    To have your own space from which to communicate on the Internet


What topics I can write on the blog?

    Personal issues, experiences, travel ...
    Corporate, product news, offers ...
    Specialized topics, programming, design, cooking ...


What is the attitude I should have?

    Be consistent in the literature
    Transmit a direct and clear
    To think that each publication should be better than all previous
    Being supportive and think that convey your knowledge can help others if anything in return
    Involved with the comments and followers of your blog


Can you make money with a blog?

    If you open a blog with ideas to make money better than not even try
    You can make money with a blog, but very long term (2-3 years)
    Money should not be the trigger that drives you to create a blog


What are the best platforms for hosting a blog?

    Blogger
    Wordpress


What does it cost to create and maintain a blog?

    The blogging Blogger is free both as in the online version of Wordpress ("In some cases we can announce Google text ads on your blog, but only very rarely" features extracted from Wordpress)
    WordPress is an installable version which is what most people use. To run this version you must have a hosting service where host and your blog thereby incur an extra expense.
    Many hosting providers make it easy WordPress installation but better have a friend with knowledge about you. In certain situations this "friend" can mean an additional cost (calls, emails, weather, etc).
    Wordpress Security Updates. If you go for the installable version of Wordpress keep in mind that you must keep your updated version and this maintenance can also add costs.
    Blogger does not have an installed version, the service is hosted on Google's servers and not have to worry about the hosting and maintenance, always use the latest version of the product


What do you expect from this blog platform?


    Make it easier to post
    Make it easy to manage
    That service constantly improve and evolve
    Which is stable


The ten reasons why I recommend Blogger

    Because it requires having to install or download anything. Everything from the browser
    Because it requires no technical knowledge of html, css, javascript. This causes you to focus exclusively on publications
    Because behind Google's Blogger
    Because the hosting is free to both the domain. Blogspot.com as the custom domain.
    Because after the blog integrated other Google services like Google Analytics (Statistics), Google Adesense (advertising), Google Site (site creator and file storage space for the blog), Google Webmaster Tools (which allows the search index Also of Google), Google Picasa to store photos blog, Youtube for videos ...
    Because you can also post on the blog from a smartphone
    It incorporates a powerful template designer in addition to the thousands you can get for free
    Because you can get started without spending a single euro thanks to the free domain. Blogspot.com
    Because you can buy a domain at any time directly (12 dollars / year) and free domain redirect you to the new.
    Because there is a large community of users who use it


Have you looked at Blogger lately?
 
What do you need to create a blog?

     For an account of GMail Blogger
     Wordpress For Online any email account

At this point you should have clarified certain doubts, now you decide which platform is Blogger or WordPress (online version or downloadable version), it is clear that my experience is very positive and Blogger is my recommendation.

Now what?

     Start by making a tour through Blogger and decides at the last step if you are creating the blog
     Lee Wordpress features and decide at the end if you are creating the blog


Enhanced by Zemanta

How long it takes Google to index a new post in Blogger

Matt Cutts - SMX Advanced 2012 Photos
Matt Cutts - SMX Advanced 2012 Photos (Photo credit: planetc1)
All we have ever asked this question, especially during the first few weeks as bloggers. Anyway, it's frustrating publish, find your blog through for example the title of one of your latest posts and check that there is no trace of your work. This is possibly one of the first reasons why many blogs are abandoned.

The first thing that comes to mind is to think that Blogger does not work even knowing that this is a Google service. The second is to think that our content may not interest anyone and so no trace and well, tried a second and even a third post and nothing at all, we delete the blog and start again as doubt and tend certainly think that we have done wrong, until finally we take it for our blog impossible and goes to swell the list of thousands and thousands of blogs that have become failed attempts.

To solve this puzzle we "invited" Matts Cutts (Google principal engineer) to really explain to us how the search, so we understand the advice you give in the end. When you give the Play, turns on closed down the CC.

Analyzing How Index Works With Matts Cutts


As we have seen, the indexing of content is done through programs called spiders or spider. This allows tracking mechanism be adding to the Google index billions web pages, so that the search is performed on the index, so we hear the phrase ... "is that your site is not indexed by Google" , which is said as an expert and us we curramos the blog we have a face frame and thought ... that she think this.What Matts Cutts not clear in this video and try to make us, the time elapsed since we published our blog content, until we visit the famous spider to index the contents, so that then we ourselves search our blog by the content of an entry.
Steps for proper indexing

    
Go to the Settings tab in Basic and then check in the Privacy section you answered yes to both questions Want to add your blog to our listings? Allow search engines to find your blog?


    
Instead wait for the spider to come after us, take the initiative and informed directly of our blog Google sitemap sending.
    
As we saw in the video sites with more "reputation" that is, those with more inbound links and generate more dynamic content are a good place to index. An example of these sites are blog directories. These are indexed by Google much faster is a good choice as ultimately are links that lead to your blog.
    
Keep posting, at least 1 or 2 week post thus how often Google crawls your blog will be much higher and therefore the time elapsed since the public until your post goes to the index will be much lower.
    
Be patient, especially at the beginning as it can take up to one week to 10 days until they finally find our blog looking for content.
    
The key now is to continue publishing and applying different SEO Blogger tips that will help you position yourself better in search results (so far we have only spoken of content indexing)


Enhanced by Zemanta

How to display your picture next to your blog in the Google results

photo with blog
 In this tutorial you will learn to set up your blog and your Google+ profile so that your photo is displayed on the results page of Google.

Innovations that Google applies to its search results page should be exploited and more when it comes to increasing the visibility of your results and which will result in increased traffic to your blog.
 What we want is to show pictures of your Google+ profile next to the title and description of your blog in the Google search results page. If you achieve this, your picture might be the trigger for the surfer clicks on your results if you're not at the top of the result.


Some recommendations must meet

    You have created a profile on Google+
    Your profile should contain your photo, logo or not worth a caricature
    Your photo should be a close-up to show your face clearly
    Try to get that picture does not have background elements
    Your photo should be sharp and focused
    A neutral background help you stand out more
    Not many people can appear in the photo
    The picture may not appear trademarks

Note: The truth is I've seen pictures on the results page do not understand why let in unless they conform to the specifications says Google, for example this.
How to display your picture next to your blog in the Google results

Step 1. Set up your blog
Link to your Google+ profile from your blog using parameter Author
If you have a presence in Google+, you probably already have a icon follow me on Google+. If you have no presence, you would have to sign on Google+, create your profile and add your photo.

In either case, the link you put on your blog to your profile should look like this:


    author" target="_blank"> ...


Note the attribute? Rel = author "after Google+ ID, that is where the key is. Should respect these parameters on your link to your Google+ profile

How to know my ID on Google Plus
Very easy, go to Google+, go to the profile icon (on the vertical bar on the left) and look at the URL in the browser you have. In My case is: https://plus.google.com/111757776337593221461, this number is that you have to put in your link.


How to put an icon in my blog follow me on Google+

If you are someone who does not have an icon, you can get one by following this tutorial. The code you already updated there facilitated by parameter Author. If you do not want icon, just copy the code snippet above, fill in your ID, where the ellipsis by name or follow me on Google+ and add it to the side of your blog using the type with Gadget HTML / Java Script. If you have it you just have to update your link with the parameters you Author explained above.


Step 2. Configure your Google+ profile

Now we will complete your profile Google + where we will place a link to your blog for this, follow these steps.

    Google+ Profile Setup with links to the blog
    Access your Google+ profile
    Click on the tab About me
    Click the Edit Profile (located on top)
    Add a link to your blog in sections and links Collaborator
    Enjoy and updated if necessary a photo to your profile

Ready, now have to wait 1-2 weeks. Try to find you through Google and you should see your photo.

How to verify that everything is correct
If you want to check that everything is correct, use this tool where you simply need to enter the URL of your blog and click the Preview button. Must show a simulation of the result where your picture should appear. For more information on this issue, here is the link for the Official Service Centre for the Google Webmaster.
Note: Your photo will appear only once in the results page but it contains more entries on your blog, otherwise it would fill the results page with your picture and look like you work at Google, lol. Another thing, if you have applied these steps in more of your blogs and you're looking through your name, your picture will show the first results. That does not mean you did wrong in your other blog, get it apart and see your photo too.


Enhanced by Zemanta

Saturday, March 30, 2013

The Trick to Add Blogger With Thumbnails

This time an alternative Trick that show a

Blogger with Thumbnails

  quite reliable tool for the template.



How to add Blogger?


First, let'' Design | Edit HTML'', where'' mark'' Expand Widget Templates. Look for the following area:
</ Head>

Above this, will Paste the following code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://2.bp.blogspot.com/-R285B_Pf0q4/TbXKNLTdA8I/AAAAAAAAAzk/9cKeL67QAzc/s1600/sinimagen.jpg";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Entradas relacionadas:";
</script>
<script src='https://sites.google.com/a/blogsydescargas.co.cc/ayudabloggers/scripts2/posts-relacionados-blogger.js' type='text/javascript'/>
</b:if>

Now find the following line:

<div class='post-footer-line post-footer-line-1'>

If you can not find it, look this one:

<p class='post-footer-line post-footer-line-1'>




Below this, paste the following code:


 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
</b:if>


Note:
If you want to change the number of entries that replaces the number displayed in the following area:

max-results=6

  if you want to replace the image that appears when an entry does not contain any, replaces the following URL for the desired:

 http://tricksblogspot.com/-R285B_Pf0q4/TbXKNLTdA8I/AAAAAAAAAzk/9cKeL67QAzc/s1600/sinimagen.jpg




Enhanced by Zemanta

The Trick Of Adding Twitter Bird Flying Through The Blog

English: Tweeting bird, derived from the initi...
English: Tweeting bird, derived from the initial 't' of Twitter Deutsch: Twitschervogel, entwickelt aus dem Anfangs-'t' von Twitter (Photo credit: Wikipedia)
We have seen different ways to customize the varieties of plugins Blogger, gadgets and hundreds of other things. This time I will show you how to get the Twitter bird flying through the blog.

This bird allows to tap the icon to open the User on Twitter and users can follow.


Preview gadget:




You will see that the bird is moved to different parts of the blog, and not just up and down, but also in a diagonal direction.

How to get this plugin?

First, lets go to '' Design / Page Elements'' where'' press on Add a Gadget'':


 Look for the gadget HTML / Javascript


Then paste the following code:

     src="https://sites.google.com/site/ayudabloggers/scripts/tripleflap.js" <script type="text/javascript"> </ script>
     <script type="text/javascript">
     var
     var targetElems = new
     twitterAccount var = 'http://twitter.com/USUARIO';
     twitterThisText var ='';
     tripleflapInit ();
     </ script>


Press '' Save'' and Done:


Note:

     Remember to change the "user'' username of your Twitter account.

Enhanced by Zemanta

Making a 404 Error Custom Page Not Found Trick

Design 404 Error Page For
English: 404 Error Symbol Deutsch: 404 Fehler ...
English: 404 Error Symbol Deutsch: 404 Fehler Symbol (Photo credit: Wikipedia)
Blogger

The 404 page will prompt visitors that he has landed a page not found and will provide him three important options which are:
  • Go Back to the page from where he came from. We will use JavaScript here.
  • Contact the Admin and inform him about the broken link. This will help you track broken links
  • And finally to provide a link to homepage.
Lets get to work to achieve all the above. Simply follow the easy steps below to display 404 error message uniquely.
  1. Go To draft.blogger.com > Settings > Search Preferences
  2. Click on Edit link next to : Custom Page Not Found
  3. Inside the box paste the following code: 
---------------------------------------------------------------------------------------------------------------
<!-- MBT Default Template -->
<div class='MBT-404-box'>
  <p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>
Oops!
</font> <font color='#666666'>
Looks like you either clicked a broken link or a Page that no more exits. Kindly do one of the followings:
</font></strong></p>
  <ol style='line-height: 25px'>
    <li><a href='javascript:history.go(-1)'>&#171; Go Back</a> </li>
    <li>Report the Problem to us by <a href='http://contact.tricksblogspot.blogspot.com'>Clicking Here</a>&#160;&#160;&#160; (<em>This will help us serve you even better</em>) </li>
    <li>Go To Homepage by <a href='http://www.tricksblogspot.blogspot.com'>Clicking Here</a>
      <br/></li>
  </ol>
  <p>
    <br/>
    <br/>
    <br/></p>
  <p align='center'><font color='#0080ff' style='font-size: 150px'><strong>404</strong></font></p>
  <p>&#160;</p>
  <p align='center'/>
  <p align='center'><font size='5'>Page Not Found!</font></p>
</div>
         Make these customizations:
  • You can edit the bolded texts with anything you like
  • Replace http://contact.tricksblogspot.blogspot.com with link of your contact page
  • Replace http://www.tricksblogspot.blogspot.com with your homepage link
   4.   Click the Save changes  button and you are half way done.
    5.  Go to Template > Edit HTML
   6.   Search for this ]]></b:skin>
    7.  Just below it paste the following code stylsheet code:
---------------------------------------------------------------------------------------------------
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
.status-msg-wrap {
    font-size: 100%;
    margin: none;
    position: static;
    width: 100%;
}
.status-msg-border {
    display:none
}
.status-msg-body {
    padding: none;
    position: static;
    text-align: inherit;
    width: 100%;
    z-index: auto;
}
.status-msg-wrap a {
    padding: none;
    text-decoration: inherit;
}
.MBT-404-box {
  background:#FFFFFF;
  width:98%;
  margin:10px 0px;
  padding:20px 10px;
  border:1px solid #ddd;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  box-shadow: 5px 5px 5px #CCCCCC;
}
</style>
</b:if>
-----------------------------------------------------------------------------------------------------------------
     To change the background color of the box edit #FFFFFF
    8.   Save your template
    9.   Done!

Enhanced by Zemanta

The Trick to Change Image On Blogger

How to make an image clickable?

The complete clickable image code looks like this,
<a href="LANDING URL" target="_blank">Image LINK" width="" height=""  alt=""  title="" border="0" /></a>


  • Where refers to where will the image take the user when it is clicked.
  • Where IMAGE LINK refers to the URL of your picture
  • width="" and height="" has to be given proper values in pixels
  • alt="" is alternative text tag that you right to tell search engine robots what the image is about
  • title="" is the name of the image that appears on mouse hover. It is always kept the same as the alt=""
  • border="0" ensures that no border or outline appears across the image
For example for the image below I have used the following code,
<a href="http://tricksblogspot.blogspot.com/" target="_blank"><img src="IMAGE LINK" width="240px" height="180px"  alt="Clickable Horse image" title="Clickable Horse image" border="0" /></a>




When you click the image, it will take you to our homepage. Else if you want to link to the original size of image then use this code,







<a href="IMAGE LINK" target="_blank"><img src="IMAGE LINK" width="240px" height="180px"  alt="Clickable Horse image" title="Clickable Horse image" border="0" /></a>
Clicking the image below will show you its original size.
world globe


How to make the same image un-clickable?

To make any image un-clickable simply remove the href linking tag. After removing the landing address tag we get,
<img src="IMAGE LINK" width="" height=""  alt=""  title="" border="0" />
You will see that the image is no more clickable. and the code I used this time is the same one but without the href tag,
<img src="IMAGE LINK" width="240px" height="180px"  alt="unclickable Horse image" title="unclickable Horse image" border="0" />


unclickable Koala image


How to make an image fade in and fade out?

For this you will need to add a tiny CSS3 code to your template. So kindly follow these steps,
  1. Go To Blogger> Design > Edit HTML
  2. Backup your template
  3. Search for ]]></b:skin>
  4. Add the code below just above it


/*---MBT FADE OUT CODE ----*/
.Fadeout img {
filter:alpha(opacity=100);
opacity: 0.3;
border:0;
}
.Fadeout:hover img {
filter:alpha(opacity=30);
opacity:1.0;
border:0;
}
/*---MBT FADE IN CODE ----*/
.Fadein img {
filter:alpha(opacity=30);
opacity: 1.0;
border:0;
}
.Fadein:hover img {
filter:alpha(opacity=100);
opacity:0.3;
border:0;
}





    5.  Save your template.


Now whenever you wish to add the fading effect to your image then simply insert an additional code to the same Clickable image code that we discussed above.
To make the image Fade out simply insert class="Fadeout" to your image code like this,
<a class="Fadeout" href="LANDING URL" target="_blank"><img src="IMAGE LINK" width="" height=""  alt=""  title="" border="0" /></a>

See an example below. (Hover your mouse cursor on it)


To make the image Fade in simply insert class="Fadein" to your image code like this,
<a class="Fadein" href="LANDING URL" target="_blank"><img src="IMAGE LINK" width="" height=""  alt=""  title="" border="0" /></a>

See an example,




I hope you find it useful. If you wanted to know where to save your images or to get IMAGE Links then read this post,
Enhanced by Zemanta

Simple Trick to Add +1Botton to blogger

Simple shot of how the new Facebook

How to add the +1 Button to Blogger with simple trick?

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Search for </head>
  4. Paste the code below just above </head> 
----------------------------------------------------------------------------------------------
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"> {lang: 'en-US'} </script>
-------------------------------------------------------------------------------------------------
     5.   Check the "Expand Widgets Templates" Box at the top right corner. In order to place the button just below Post titles then search for this code <data:post.body>  and place the +1 button code given below just above it,
<div style='float:left'>
<g:plusone size="standard" expr:href="data:post.url"/>

</div>
  • You can display it to "left" and "right" by adjusting left
  • You can change standard to medium, small or tall. Choose the size that may blend your template.
Tall, small, Medium Respectively Samples:
image
image
image
   

---------------------------------------------------------------------------------------------
6.  If you want the button to appear below blog posts then add the button code just below <data:post.body>
    7. Save your template to see it working. Have fun! :>


Other Method

To add the +1 button to your blog directly without any code then you’ll need to enable Share buttons on Blogger. To do this, go to Design > Page Elements on your Blogger dashboard, find the Blog posts area, click on Edit, and select the “Show Share Buttons” option. If you are already using Share buttons, then you don't need to worry as the +1 button will automatically show up as a new share button.
Enhanced by Zemanta

How To Add Facebook Comments Box To a Blog

"Facebook Comments Box". This plugin can be embedded in any website or blog and visitors can use their IDs of Facebook, Yahoo, AOL or Hotmail to leave a comment at your site. This plugin did show a lot of problems when it was embedded in Blogger Blogs in initial days of its development but now thanks to our fellow friend Max from Allblogtools this plugin has been finally bloggerized to work just perfect with any Blogger hosted blogs.



                                             The Facebook Comments box looks like,
LIGHT SCHEME
facebook-commentS-box LIGHT
DARK SCHEME
Facebook-comments-dark-scheme

How to embed this extremely useful comment form in Blogspot blogs.
Follow these steps:

1- Get a Facebook Application ID

  1. Go To Facebook Developers Page
  2. Submit your blog URL and give it a name. Keep Site name as your "Blog Title" and Site URL as your "blog address"
site-url
     3.   Hit "create app" button and proceed
     4.   After submitting the security check code you will see this page,
app-id
       5.   Save that App ID in a notepad because you will need that latter. Now Click the link near the top-right corner of the same page that says "Developer Dashboard"
image
      6.  One the new window that appears click the Edit Settings link ,
edit-settings
        7.  Then go to Website option and write your Site Domain as blogspot
website
       8.  Save Changes and jump to the next step of this tutorial

2- Adding the Facebook comments Box to Blogger

Now mbed the comments box in your blog templates. So follow these easy steps,
PS: Please make sure your blogger comment form is embedded below posts. For doing this first go to Blogger > Settings > comments > and then choose embed comments below posts. After doing this follow the tutorial below.
  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Check the "Expand Widget Templates" box
  4. Search for <html and just after it give a space and add this code,
xmlns:fb='http://www.facebook.com/2008/fbml'
  5.  Next search for 
<body>
Note: In New Blogger Designed templates the same code looks like this,
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Find any one of these codes and just after it paste the code given below,
<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : &#39;YOUR_APP_ID&#39;,
      status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the   session
      xfbml  : true  // parse XFBML
    });
  };
    (function() {
    var e = document.createElement(&#39;script&#39;);
      e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/all.js&#39;;
    e.async = true;
      document.getElementById(&#39;fb-root&#39;).appendChild(e);
    }());
</script>


  • Replace YOUR_APP_ID with your Facebook application ID that you saved in a notepad.
    6.    Next search for  </head> and just above it paste the following code,
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='
MYTricksBlogger' property='og:site_name'/>
<meta content='
BLOG-LOGO-IMAGE-LINK' property='og:image'/>
<meta content='
YOUR_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/mybloggertricks' property='fb:admins'/>
<meta content='article' property='og:type'/>

Now Make these changes:
  • Replace MYTricksBlogger with your blog title/Name.
  • Replace BLOG-LOGO-IMAGE-LINK with the image link of your logo. Your logo will look good if it is in gif format and having this size ->  40px by 40px . This logo will appear next to your post title on Facebook profiles of your visitors like this,
logo
  • Replace YOUR_APP_ID  with the your Facebook Application ID that you saved in notepad
  • Replace http://www.facebook.com/mytricksblogger with your Facebook user profile link
    7.    Now Search for this,
<b:includable id='comment-form' var='post'>
    8.    Just after it paste the code given below,
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div> <fb:comments  colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='520'/></div>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: Bloggerized by <b><a alt='blogger templates' href='http://www.allblogtools.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>AllBlogTools.com</a></b> Enhanced by <b><a alt='blogger widgets' href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>MyBloggerTricks.com</a></b></div></div>
</b:if>
  • If you want to use the dark scheme then simply replace light with dark
  • To change the Comments box size, change this value width='520'
  • To change the footer credits size, change this value width:510px
  • Keep a difference of 10 pixels between the box size and footer size. For example if you set box-size to width='600' then set footer-size to width:590px

      9. Save your template and you are Done!
Enhanced by Zemanta

Fixing The Feedburner Subscriptions by Email Error

 Feedburner issue when you go to subscribe via email to your feeds the following error appears,
feedburner error
First of all you need to signup to Feedburner and burn your feed.
Once you have done that click on the Publicize tab,
publicize
                                                      Then click on Email Subscriptions,
email subscriptions
                                   Copy the generated code and paste it into a text editor,
copy code
 My WordPress theme has an RSS email subscription component in the footer (yours may be different),
email rss
                                         Go to Appearance > Editor in WordPress,
editor
As my RSS email subscription component is in the footer, I need to edit footer.php (yours may be different),
footer.php
Next, I found the following piece of code in my footer.php file,

-------------------------------------------------------------------------------------------------------------------------
onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=<?php echo get_option(‘feedmail’); ?>’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true”>
--------------------------------------------------------------------------------------------------------------------------.


              Then went to my Feedburner code and copied the following,
----------------------------------------------------------------------------------------------------------------------------
onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=thesocialmediaguide’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true”>
----------------------------------------------------------------------------------------------------------------------------.

Then copied this Feedburner code and pasted it over the code in the footer.php file.

.
So that it the first bit of copying and pasting out of the way.. one more to go..
.
                 Then found the following piece of code in my footer.php file,

<input type=”hidden” value=”<?php echo get_option(‘feedmail’); ?>” name=”uri”/><input type=”hidden” name=”loc” value=”en_US”/>
.
                   Then went to my Feedburner code and copied the following,
<input type=”hidden” value=”thesocialmediaguide” name=”uri”/><input type=”hidden” name=”loc” value=”en_US”/>
.

I then copied this Feedburner code and pasted it over the code in the footer.php file.

.
Click on <Update file> to save the changes.
Go back to your site to test everything works.
Enter your email address to subscribe,
emailAddress
Enter your email address,
request
                                                      The following should display,
check email
                After click on the confirmation link in your email address, then following will appear,
confirmed
Ready!

Enhanced by Zemanta

Botones Isometricos de Social Media




Barra Lateral Fija