How to Customize Blogger's Lightbox

For those of you who have chosen to use the Blogger's Lightbox View for displaying pictures when clicking on them, you have the option to change its style in a whole different way. You will be able to change the black color of the screen, the border or shadow of the images and the color of the thumbnails background. We can customize the Blogger Lightbox entirely on our taste.

Demo

Take a look at the screenshots below:

Before:

After:

After adding our CSS code, the entire look of the modal window will be changed: the background color, the bar showing the thumbnails, the border of images, the text within it, transparency and the close button.

All we have to do is to overwrite the default styles and change them with ours.

How to Change the Blogger's Lightbox Background and Style

Step 1. Go to Template, click on the Edit HTML button (also click on the Proceed button if needed)

Step 2. Click anywhere inside the code area and search using CTRL + F the following tag:

</head>

Step 3. Just above the </head> tag, add the following code:

<style>
/* Background Color */
.CSS_LIGHTBOX_BG_MASK {
background-color: #ffffff !important;
background-image: url(image-url-address) !important;
opacity: 0.8 !important;
filter: alpha(opacity=90) !important;
}
/* Images Border */
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #fff !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
}
/* Close Button */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(image-url) no-repeat !important;
width: 24px !important;
height: 24px !important;
}
/* Thumbnails Bar Color */
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #eaeaea !important;
}
/* Text Color */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {
color: #000 !important;
}
/* Index Info (number of images) */
.CSS_LIGHTBOX_INDEX_INFO {
color: #555555 !important;
}
</style>

Note:
- The text in green explains to which part the code belongs to and it doesn't need to be modified

For example, the portion below / * Background Color * / can change the background color or even the LightBox background color with an image - for this, change this line by replacing the red text with the url address of your image:

background-image: url(image-url) !important;

- Below is the opacity: if you add a lower value ( 0.8 ) the background will become more transparent.

- To change the icon for the close button, you have to replace the text in red from /* Close Button */ with the URL of your image. (you can host image at tinypic or upload it into a blogger draft and then Copy the Link Location

- To change the text color of images, replace the #555555 value from /* Index Info (number of images) */

- We can also change the look of the border around our pictures like we can make them more round, add a shadow, etc... but remember this is CSS3 and older versions of Internet Explorer will not show any changes.

Step 4. Click on Save Template and you're done!

Related Posts Widget with Thumbnails and Summary for Blogger

There are several tutorials quite old which have explained different methods for displaying related posts in Blogger [1] [2] but in this tutorial, I will show you how to implement a very beautiful Related Posts widget that comes along with Thumbnails and Posts Snippets, as well. If you want to add it, follow the next steps below:

How to Add Related Posts Widget with Summary to Blogger

Step 1. From your Blogger Dashboard, go to Template and click on Edit HTML

Step 2. Click anywhere inside the code area and then press CTRL + F to open the Blogger search box

Step 3. Find (CTRL + F) this tag:

</head>

...and paste the following code just above it:

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;

var relatedPostsNum = 4; // number of entries to be shown
var relatedmaxnum = 75; // the number of characters of summary
var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmYHw07tgISPdlhb4DllWNIJULmiUSyZrd47tSw3hyp6eaHfqGGThWNghX4FCvkdDT-3tUo__yFyYUmBgoz2FA6RwbkGMvNwqhY9VuURJiG0XVrmZM7dxPOYtZx27H-4cGXDA_5C-AKFE8/s1600/no_image.jpg"; // default picture for entries with no image

function readpostlabels(json) {
  var entry, postimg, postcontent, cat;
  for (var i = 0; i < json.feed.entry.length; i++) {
    entry = json.feed.entry[i];
    if (i==json.feed.entry.length) { break; }
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    postcontent = "";
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    }
    relatedpSummary[relatedTitlesNum] = removetags(postcontent,relatedmaxnum);
    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = relatednoimage;
    }
    relatedThumb[relatedTitlesNum] = postimg;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        relatedUrls[relatedTitlesNum] = entry.link[k].href;
        break;
      }
    }
    relatedTitlesNum++;
  }
}
function showrelated() {
  var tmp = new Array(0);
  var tmp2 = new Array(0);
  var tmp3 = new Array(0);
  var tmp4 = new Array(0);
  for(var i = 0; i < relatedUrls.length; i++) {
    if(!contains(tmp, relatedUrls[i])) {
      tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i];
      tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];
      tmp3.length += 1; tmp3[tmp3.length - 1] = relatedpSummary[i];
      tmp4.length += 1; tmp4[tmp4.length - 1] = relatedThumb[i];
    }
  }
  relatedTitles = tmp2; relatedUrls = tmp; relatedpSummary = tmp3; relatedThumb = tmp4;
  for(var i = 0; i < relatedTitles.length; i++){
    var index = Math.floor((relatedTitles.length - 1) * Math.random());
    var tempTitle = relatedTitles[i]; var tempUrls = relatedUrls[i];
    var tempResum = relatedpSummary[i]; var tempImage = relatedThumb[i];
    relatedTitles[i] = relatedTitles[index]; relatedUrls[i] = relatedUrls[index];
    relatedpSummary[i] = relatedpSummary[index]; relatedThumb[i] = relatedThumb[index];
    relatedTitles[index] = tempTitle; relatedUrls[index] = tempUrls;
    relatedpSummary[index] = tempResum; relatedThumb[index] = tempImage;
  }
  var somePosts = 0;
  var r = Math.floor((relatedTitles.length - 1) * Math.random());
  var relsump = r;
  var output;
  var dirURL = document.URL;

  while (somePosts < relatedPostsNum) {
    if (relatedUrls[r] != dirURL) {

      output = "<div class='relatedsumposts'>";
      output += "<a href='" + relatedUrls[r] + "' rel='nofollow'  target='_self' title='" + relatedTitles[r] + "'><img src='" + relatedThumb[r] + "' /></a>";
      output += "<h6><a href='" + relatedUrls[r] + "' target='_self'>" + relatedTitles[r] + "</a></h6>";
      output += "<p>" + relatedpSummary[r] + " ... </p>";
      output += "</div>";
      document.write(output);
     
      somePosts++;
      if (somePosts == relatedPostsNum) { break; }
    }
    if (r < relatedTitles.length - 1) {

      r++;
    } else {
     
      r = 0;
    }

    if(r==relsump) { break; }
  }
}
function removetags(text,length){
  var pSummary = text.split("<");
  for(var i=0;i<pSummary.length;i++){
    if(pSummary[i].indexOf(">")!=-1){
      pSummary[i] = pSummary[i].substring(pSummary[i].indexOf(">")+1,pSummary[i].length);
    }
  }
  pSummary = pSummary.join("");
  pSummary = pSummary.substring(0,length-1);
  return pSummary;
}
function contains(a, e) {
  for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
  return false;
}
//]]>
</script>

Note:  

• To change the number of posts that are being displayed, modify the value in red (4)
• To change the number of characters to be shown in posts summary, modify the value in green (75)
• To change the default pic for posts with no images, add your URL instead of the one marked in blue

... also paste the code below just above the </head> tag:

<style>
.relatedsumposts {
  float: left;
  margin: 0px 5px;
  overflow: hidden;
  text-align: center;
  /* width and height of the related posts area */
  width: 120px;
  height: 210px;
}

.relatedsumposts:hover {
background-color: #F3F3F3; -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.relatedsumposts img:hover {
-khtml-opacity:0.4;
-moz-opacity:0.4;
opacity:0.4;
}

.relatedsumposts a {
  /* link properties */
color: #linkcolor;
  display: inline;
  font-size: 10px;
  line-height: 1;
}
.relatedsumposts img {
  /* thumbnail properties */
margin-top: 2px;
  height: 82px;
  padding: 5px;
  width: 82px;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.relatedsumposts h6 {
  /* title properties */
  display: table-cell;
  height: 5em;
  margin: 5px 0 0;
  overflow: hidden;
  padding-bottom: 2px;
  vertical-align: middle;
  width: 130px;
}

.relatedsumposts p {
  /* summary properties */
border-top: 1px dotted #777777;
border-bottom: 1px dotted #777777;
color: #summarycolor;
  font-size: 10px;
  height: 4em;
  line-height: 1;
  margin: 5px 0 0;
  overflow: hidden;
  padding: 5px 0 15px 0;
  text-align: left;
}
</style>

Note:  

• Modify the values in red to adjust the width (120) and height (210) of the widget area
• Replace #linkcolor with the hex value of your color to change the color of post titles
• To change the size of thumbnails, modify the values marked in violet (82)
• To determine the border roundness, modify the values in orange (100)
• To change the color of the post snippet, change #summarycolor with color hex value

Step 4. Search (CTRL + F) for the following fragment:

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

... and add this code just below it:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>
  </b:if>

The entire fragment should look like this:

          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>
  </b:if>
          </b:loop>

Step 5. Find this fragment of code:

</b:includable>
<b:includable id='postQuickEdit' var='post'>

Note: if you can't find it, then search only for the code in red

! Click on the sideways arrow to expand the code, then scroll down until you reach to the highlighted line !

...add just ABOVE it, add the following:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='post-footer-line post-footer-line-4'>
    <div id='relatedpostssum'><div style='text-align: left; font-size: 15px; margin-bottom: 10px; font-weight: bold;'>RELATED POSTS</div>
      <script type='text/javascript'>showrelated();</script>
    </div>
    <div style='clear:both;'/>
  </div>
</b:if>

Screenshot

Step 6. Save your Template... and hopefully we're done...

Enjoy!

How to Make the Blogger Posts Have a Calendar for the Date in

It's quite common to see calendar style dates next to some WordPress posts but for the Blogger platform it isn't always easy adding it. But who said you can't do it? You need to look no further than this blog. In this tutorial, we'll learn how to create a calendar style for your Blogger posts date!

DEMO

How to create calendar style dates in Blogger

Step 1. Go to Settings > Language and Formatting - Date Header Format and change the date format as you can see in this example below (first add day, month and finally year)
 

Step 2. Go to Template > Edit HTML

Step 3. Click anywhere inside the code area and press CTRL + F to open the blogger' search box

Step 4. Type or paste the following line inside the search box and hit Enter to find it:

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

Step 5. In case you find it twice, replace it twice with this code:

<div id='Date'>
<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate(&#39;&#39;);</script>
</div>

Step 6. Now type this tag inside the search box and hit Enter to find it:

</head>

Step 7. Just ABOVE the </head> tag, paste this code:

<script type='text/javascript'>
//<![CDATA[
var DateCalendar;
function changeDate(d){
if (d == "") {
d = DateCalendar;
}
var da = d.split(' ');
day = "<strong class='date_day'>"+da[0]+"</strong>";
month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";
year = "<strong class='date_year'>"+da[2]+"</strong>";
document.write(month+day+year);
DateCalendar = d;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Calendar style date
----------------------------------------------- */
#Date {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLZ_tKyl7us1gP0vW88eBGzoIO2Kdc53JcXWPg6TjITTYeE0Ia0LqNgElz5iLApR8RZJSMqdMin9a8PXpI8pbLxiJbYVu6GmaDk6m2Dxr8axg-sSa1W_NUmMjVbfSXq5xawnQ-sVNmFJl_/s1600/calendar07.png) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 15px 2px -40px -108px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}
.date_month {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#ffffff; /* Month's color */
}
.date_day {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-8px;
text-align:center;
color:#282828; /* Day's color */
}
.date_year {
display: block;
font-size: 10px;
margin-top:-8px;
text-align:center;
color:#282828; /* Year's color */
}
</style>
</b:if>

Before saving your Template, here we can make some changes:

• To change the calendar style, replace the url in blue with yours;
• If the calendar doesn't appear as it should, change -108 with 0;
• With green are marked the areas where you can change the color of the dates

Step 8. Now Preview your Template and if everything looks ok, click on the Save Template button.
That was all... Enjoy!

How to install a Blogger Template

Follow this simple guide to install your Favorite Blogger Template:

1. Click on the Download button and save file to PC (.xml format).

2. Log in Blogger dashboard.

3. Go to Template section → Backup/Restore.

4. Click on Download Full Template to Backup your previous template.

5. Upload a template from a file on your hard drive by click Browse option button.

6. Click Upload button, a confirmation message will appear. Click on Keep Widgets.

Now you're done.

Or watch the clip below if you're still confused:

How to Install a Google Translate Button in Blogger

1. Open your Blogger > Dashboard

2. Click on the dropdown menu > Layout > Add A Gadget > HTML/Javascript

3. Paste the translate code that you generated and copied from Google

How to Add a Gadgets to Blogger

Widgets, also known as gadgets, are small tools or applications that can be added to a website or blog to enhance its content or functions, or to pull content and services from third-party websites. Widgets come in multiple forms, such as countdown tickers, photos, games, or interactive social media applications that allow you to chat. Some widgets in Blogger serve the purpose of enhancing your blog, such as listing your blog followers or allowing readers to subscribe to your blog content. Here are steps on how to add a widget to Blogger.

1

Log in to your Blogger account with your username and password. Once you are logged in, make sure you are at your Blogger's Dashboard, otherwise click on the "Dashboard" link, which will take you to a list of your blogs.

2

Access the Layout page of your blog. After selecting your blog, click on the "Design" link, which will take you to the Layout page. Click on the "Page Elements" link, then click on "Add a Gadget."

3

Choose a widget or gadget. A Blogger pop-up window will appear that lists all the gadgets available to you through Google Blogger. You may search for the name of a specific gadget, or you can browse through several categories, including Basic gadgets, Featured gadgets, Most Popular gadgets or More Gadgets, which are contributed by third-party developers for Blogger.

4

Add the widget to Blogger. Once you find the widget you want to add, click on the blue plus sign symbol to add it to your blog's layout. On the Layout screen, you will be able to click and drag the widget to where you want it to appear on your blog.

• Save your changes. Once you have added the widgets you want to your layout, click on the "Save" button at the bottom of the Layout screen to save your changes to Blogger.

5

Add a custom widget to Blogger using the HTML and JavaScript widget. The HTML and JavaScript widget within Blogger is a blank widget that allows you to add or paste third-party functionality or other code to your blog. The HTML and JavaScript widget can be found by clicking on "Add a Gadget" from the Blogger Layout screen.

How to download your Google Calendar appointments

Need to back up or export your Google Calendar appointments? You can now download them directly from Google.
As of Thursday, Google offers you the ability to save a zip file of your Google Calendar data, either all of your calendars or just select ones if you juggle multiple calendars. The process takes a few steps but is relatively straightforward.
Log into Gmail. Click on your account picture in the upper right corner, and select the link for Account. On the Accounts page, click on the link to Download your data and then click on the button to Create an archive.

Google displays a list of all the services available for export. Assuming you're not opting for the entire batch, deselect the ones you don't want and make sure Calendar is selected. Click on the Edit button next to Calendar to include all calendars or only certain ones. Click on the Done button and then click on the Create Archive button.
Google preps your archive as a zip file. Click on the Download button. Re-enter your Google password if prompted. Now save the file to your hard drive. Extracting the zip file reveals several folders, including one for your appointments and one for your profile photos. Your appointments are formatted as an ICS file, which you can save as a backup or import into Yahoo, Outlook, iCalendar, and similar services.
In a blog posted Thursday, Google software engineer Nick Piepmeier said the same backup feature will roll out for Gmail over the next month. You can also download your Google data from Google Contacts, Google+, YouTube, Google Drive, and other services.

How to add a beautiful clock in your blog

1. Go to you Layout
2. Click Add a Gadget
3. Seclect HTML/JavaScript
4.Copy this code and past to the content




4.Save and Enjoy :)

Elements Blogger Template

Template Name: Elements

Release Date: May 2012

Author: Sora Templates

Designer: WpNow

Basic Instructions : How to install a Blogger Template
Features: Wordpress Look, Right Sidebar, 2 Columns, Elegant, Featured Content Slider, Fixed width, Dark, Tabbed widget, Top Navigation Menu 

Demo

Download

Screenshot

Updated : (03-07-2012)

• Sidebar widgets now can be hid/expanded.
• jQuery Tabs added.

Configure Featured Content Slider:

Login to blogger dashboard --> layout --> Edit HTML. Now scroll down to where you see the codes below:

• <div id='mygallery'>
  <div class='imageElement'>
  <h2>Little Big Planet spawns festive level pack</h2>
  <p>Phasellus ...</p>
  <a class='open' href='#' title='Read More'/>
  <img class='full' src='.../image.jpg'/>
  <img class='thumbnail'/>
  </div>
  ..........

Now replace:

• "#" with your featured post URL.
• "image.jpg" with your slider image

Configure the dropdown menu:

Login to blogger dashboard --> layout --> Edit HTML. Now scroll down to where you see the codes below:

• <ul class='menu'>
  <li><a href='#'><span>Home</span></a></li>
  <li><a href='#'>HTML Elements!</a>
  ..........
  <ul class='submenu'>
  <li><a href='#'>Celebrities</a></li>
  <li><a href='#'>Miscellaneous</a></li>
  ..........

Now replace "#" with your menu item URL.

How To Change Tab Names of Tab Widget:

find this:

• <ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
  <li><a href='#widget-themater_tabs-1432447472-id1'>Popular</a></li>
  <li><a href='#widget-themater_tabs-1432447472-id2'>Latest News</a></li>
  <li><a href='#widget-themater_tabs-1432447472-id3'>Latest Comments</a></li>
  </ul>

Turn off the lights with jQuery

 

For those who enjoy watching videos on the internet, this is a very useful script made with jQuery by Janko.

So what this script does? It will "turn off the lights" so that everything you have on the page will be fading to dark, less the video, so there will not be other elements that will distract us while watching a video and we will feel like watching a movie in a cinema.

You can see an example here by clicking on the link that says "Turn off the lights".

Turn off the lights

How to Add the Turn off the Lights Feature to Blogger/Blogspot

To put this effect of "lights" on the blog, just follow the steps below:

Step 1. Go to Template > Edit HTML

Step 2. Click anywhere on the code area and search for the following tag by pressing the CTRL + F keys:

</head>

Step 3. After you found it, paste the below script just above it:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#darkness").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#darkness").toggle();
if ($("#darkness").is(":hidden"))
$(this).html("Turn off the lights").removeClass("turnedOff");
else
$(this).html("Turn on the lights").addClass("turnedOff");
});
});
//]]>
</script>

Note: if you already have one version of jquery added in the template, then remove the line in red.

Step 4. Now search for the ]]></b:skin> tag (click on the left arrow if needed (you may need and after the code has been expanded, search it again by using the CTRL + F keys)

Step 5. Just above it, add the following CSS styles:

/* Turn off the lights
----------------------------------------------- */
#lightsVideo {
position:relative;
z-index:102;
}
#switch {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
margin: 25px 0 0 60px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW7_2CsHrIeaaJ8Sot2ESkfYIVGgpZ-BAF_RyHuf6lFL1TFnk1C-1LWJgNcNVDecyi9UhVWQvi7szB0WlcFU0D5F0-eKQgnVVBJEykXsAoR2tl0jszpQmGPAKjwxPIEQcovc9s8lRKy0BG/s1600/lights-on.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR9lB3sE5hEH4_qwFUpanUTR1J0pJ5k3Q8tx2mtJo8KFYTwFucYrdqELEuvHQ59vagqFp7dK-Bn1edct_ZMgdl5tXeBKhov9AmTis_J6Vdo2_XwcOR8KnJYWru9SKZancuIpomn-UM41NQ/s1600/lights-off.png);
}
#darkness {
background:#000;
opacity:0.8;
filter:alpha(opacity=80);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

Click on the arrow to expand the styles

Step 6. Search the </body> tag and add this html code just above it:

<div id='darkness'/>

Step 7. Click the Save Template button to save the changes.

Now, wherever you put your video, either a post or a HTML/Javascript gadget, use this code:

<center>
<div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a></div>
<div id="lightsVideo">
...Here goes the code of the video...
</div>
</center>

Add the code of your video to where is indicated and that's it. Now you can enjoy your videos with the lights off!
Remember that this trick uses jQuery, so if you use Scriptaculous or Mootools you should apply a patch, and if you use another version of jQuery, you must use only one.

10 Tips and Tricks For Google Calendar You Should Know

Of all the various time management tools out there, the Calendar seems the most proper and useful. Whether it be a business meeting, your friend’s birthday, or just a simple daily reminder, a good Calendar can make life easier. Talking of which, the Google Calendar is one of the most efficient and handy tool for event and time management of all types. With its integration with several other Google services, it is the most useful of its kind. Now let’s take a look at 10 really useful tips and tricks for using Google Calendar.

1. Add famous interesting Calendars

In order to get the holidays and various sports events notifications, you can add up a whole new calendar of these kinds. Click on the arrow beside Other Calendars and click on Browse Interesting Calendars.

You can here subscribe to any famous calendar of your choice so as to keep track of worldwide events

2. Hide inactive hours

Hiding inactive comes in handy as you get to focus only on the important ones. Also, meetings and events are usually on office timings and the vacant spaces only create problems. Click on the Settings gear and then on Labs to select the hours to hide.

Enabling the option will allow you to manually hide any hours you don’t need on your Calendar.

3. Receive Email Notifications

Not always you can be hooked up on the Calendar website for event updates. Email notifications come in handy therefore. Calendar will automatically mail you on schedule the notifications and will keep you updated about any upcoming events. To do that, click on the downward arrow beside a calendar and click on Reminders and notifications to set the scheduling.

4. Quickly Add an Event

In order to quickly add an event details, just click on a time slot and a dialog box will open up asking for the details. Add up the agenda in the What field and click on Create event.

You can edit the detailed info about the event any time by just clicking on it.

5. View the Calendar Offline

Not 24/7, you can have access to the internet. Especially when you’re on road and need to check your meeting details, without an internet connection you are (or rather were) helpless. Google Calendar App for Chrome browser helps in you in such a situation. From the settings gear, click on Offline to get the app which will automatically sync your Calendar for offline viewing.

6. Add Weather Forecaster

Having an out-of-city meeting are we? And unaware of the weather situations there? Well, Google offers you to add live weather forecasting on your calendar which will keep you updated about the weather of various places and you can plan your approach carefully. Open up Settings from the gear and enter your location in the Location box and the Calendar will also include weather notifications.

7. Associate IFTTT (If This then That) Services

Google Calendar allows you to combine two different sources together to make the Calendar more effective. In simple words, you can sync your Google Calendar with your Facebook and it will add up your Facebook events notifications and details on the Calendar too. One most popular such scheme would be the adding up of events on Calendar via an SMS.

You can browse the various IFTTT recipes on the IFTTT website and easily add them up to your Calendar.

8. Add Tasks to Calendar

Adding up a checklist of your To-Do items in the Calendar is a nice way of keeping organized and be on time. You can add up Google Tasks to your Google Calendar and stay organized and informed. To do so, open up the Month view and click on any date. In the dialogue box that opens up, open the Task tab and add the details of the task.

9. Add a World Clock

When dealing with people or situations that reside outside of your country, a world clock is essential. Adding a world clock with the calendar helps you to stay informed about the various timings. The tool comes in handy when you have meetings abroad or your employer resides in a different Geographical location. Open up Labs from the settings gear and Enable the World Clock.

10. Enable Keyboard Shortcuts

No matter which app or tool we talk about, Keyboard shortcuts help in speeding up the task which can be really useful at times. There are several Keyboard shortcuts for the Calendar tool and you can enable them all from the General options in the Settings gear.

Got more great tips and tricks you want to share with us? Write to us in the comments section below. Peace :)

Can You Really Make Money with Google AdSense?

Yes, but if you want to make really good money with Google AdSense, you either have to have a ton of traffic or you have to be in a unique niche in which advertisers will pay a lot for clicks on their ads.

Google AdSense with niche sites

Finding those unique niches takes a bit of keyword research and usually doesn't happen by accident. There are many people in the business of hunting for these high-paying niches, creating websites strictly for the purpose of capitalizing on valuable keywords and making a lot of money in the process. If you want to see a real life example of building a site like this, check out Pat Flynn's very interesting series, Niche Site Duel.
There are tools to help you find great keywords. A free and popular tool for keyword research is the Google Adwords Keyword Tool. Court gave an overview of how to use it at the end of the video in this post.
A more robust tool for keyword research is Market Samurai. If you want to see how it works, check out their very informative tutorial videos.

 

Google AdSense with high traffic

For those of us blogging in niches without valuable keywords, high traffic is the key to making good money with AdSense. I know plenty of bloggers making hundreds (and in many cases thousands) of dollars every month with AdSense.
In my case, as of this writing I don't have my main AdSense ads up (I'm always experimenting you know). However, before I took them down, I was making several hundred dollars a month. My highest AdSense payout was $640.89 (April 2012). Otherwise my monthly payments in 2012 have hovered in the $400 range.
But that's just peanuts compared to many.
I recently bought Laurie Turk's online course called Mom Blog to Money Blog. Laurie gets 7 million pageviews a month on her craft blog (TipJunkie.com) and makes over $12,000 a month from Google AdSense alone.*
Another excellent (and free) resource to learn the ins and outs of Google AdSense is TentBlogger's A Blogger’s Guide to Earning More with Google Adsense series. If you're interested in getting more details about AdSense, this is a great place to start. Free is always nice.

 

Takeaways

There are no magic bullets. What works for one person won't necessarily work for another and vice versa. There are no guaranteed, across-the-board results either.
Google AdSense works well for some and not so well for others. It really depends.
If you're just starting to monetize your blog, I still think the best way to figure out what might work for you is to look at well-established bloggers in your niche and take note of the monetization methods they use. Start there.
But don't limit yourself either. Always experiment. Don't be afraid to try new things. And aim for a diverse number of income streams.
*If you're interested in Mom Blog to Money Blog, I definitely recommend you start a website first (I will shamelessly plug my How to Start a Blog series here) and only consider taking her course once you gain some good traction. Her course is definitely more suited to someone who has been blogging for a while and has a solid understanding of blogging basics. I believe the coupon code MONEY will still give you a 10% discount. Remember, she's been blogging since 2007 so she's been at it a while. Also, 7 million pageviews a month would be really, really hard to duplicate for the vast majority of us so our results are likely to vary drastically.

Watch these video

Protect your Adsense Account : Bad Clicks and Invalid Activity

Have you ever wondered how Google actually generates an income? It has a very large network of ads, with which it earns and also shares some revenue with publishers (people who put up AdSense ads on their websites). It's a very elaborate system, with Advertisers trusting Google, and investing their money with it in order to grow their own exposure. Google then shares some of that revenue with the publishers. Now it naturally follows, that Google has to make provisions to maintain the trust of its advertisers, and for that, it has to ensure that publishers don't cheat, or use fraudulant methods of clicking on ads to glean more money out of advertisers. Such bad clicks might result in the ban of your AdSense account. So what can you do to prevent such a thing from happening, even if you're not creating any mischief on your side?

 Unfortunately, this happens to the best of us. You can't always control invalid click activity on your blog. Indeed, there are some bad fish out there who feel jealous or threatened from other blogs, so they perform invalid click activity in spite. In this way, even good publishers might come under the spotlight, let alone bad publishers who get banned outright.

If you were in Google's position, you would see how bad clicks are against the best interests of Advertisers, and ultimately those of Google. Advertisers wouldn't like it if they had to pay extra for clicks that didn't really help them. So Google has some tools that keep bad traffic and bad sites out of their network. Unfortunately, these tools can't tell when you're a good publisher who is just subjected to unknown bad-click activity. So to solve this problem, here are some changes Google is making that you might find helpful.

 Trusted publishers

Google will now be considering tenure more actively in response to detected invalid activity. If you are a good publisher, and don't have a notorious history, Google will just suspend your account, instead of terminating it. So you should always try to keep it on the safe side of Google. Also, Google is working on a new system wherein it will work more closely with publishers to ensure that they don't even face the inconvenience of getting their accounts disabled, provided that they are trusted publishers.

Activity reports

Google also will send you emails and notifications in case invalid activity is detected. It will let you know about the type of activity, so that you can get to root of the problem. It will also provide you further instructions on getting rid of the invalid activity. So keep checking your email at a regular basis.

Support

Google is now providing publishers with tools to help them submit appeals. The new forms let them tell Google about their plight in more detail, and provide more information. This would hopefully improve the process of submitting appeals and reconsideration requests to Google.

Google has also launched an expanded AdSense Academy, which will detail beginners and pros alike on the do's and don'ts of AdSense. In addition, Google is starting a video series that will explain AdSense policies, and discuss best practises.

We're really looking forward to seeing these changes being implemented, and we'll keep you updated on the latest happenings in this regard. Stay tuned, and keep reading :)

Add Floating Social Media Sharing Buttons To Blogger

The Floating Social Media Sharing is a very popular widget on all the top blogs and this is one of the ways to increase the number of times your posts get shared on Twitter, Facebook and other social networks.

This floating social bar has the following options: Facebook Like, StumbleUpon, Twitter Share, Digg This, Google+ and each of them comes with a live counter. You can add more sharing buttons or social bookmarking icons later if you want.

How to add the scrolling social bookmarking bar

Step 1. Log in to your Blogger Dashboard, select your blog and go to Layout 

Step 2. Click on Add A Gadget link

Step 3. From the pop-up window, scroll down and select HTML/Javascript 

Step 4. Copy the code below and paste it inside the empty box.

Step 5. Save the gadget.

The code to copy-paste (updated!):

<style type="text/css">
#social-buttons {
position:fixed;
bottom:15%; 
margin-left:-721px;
float:left;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#fff;
padding:0 0 2px 0;
z-index:10;
}
#social-buttons .button-share {
float:left;
clear:both;
margin:5px 5px 0 2px;
}
</style>
<div id='social-buttons' title="Get this from helplogger.blogspot.com">
<div class='button-share' id='like' style='margin-left:7px;'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
</div>
<br /><div class='sbutton' style="margin-left: 2px;" ><a class='twitter-share-button' data-count='vertical' data-via='Helplogger' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script>
<br />
<div class='button-share' style="margin-left: 3px;" id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='button-share' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='button-share' style='margin-left:3px;' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://helplogger.blogspot.com/">widget</a></div></div></div>

Customization:

• Vertical alignment - Change the 15% value of bottom. The code positions the social bar relative to the bottom of your browser window. To fix the distance even when window is resized, specify the value in px (pixels) instead of %.

• Horizontal alignment - Change the -721px value from margin-left. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right. Increase or decrease the value based on your needs.

• Twitter setting - Replace Helplogger with your Twitter username

• Replacing and removing buttons - You can replace existing buttons with your own. Each button is represented by this code:

<div class='sbutton'> BUTTON CODE HERE </div>

Enjoy!!! :)