MatrixAdapt | Logiciel de gestion d'Entreprise, Création et référencement des sites web

Seo Master present to you: By Dion Almaer, Google Developer Programs

We have enjoyed a fantastic day so far. Watching the worldwide map throb new locations to life throughout an entire worldwide day has been a real treat.

Each of the developer day events had their own feel, but the buzz seemed to be the same.

With the announcement of Google Gears, Mapplets, and the like, there has been a lot to talk about.

There is a lot of information out there, but a brief roundup:

Google Gears

• Aaron Boodman kicks it off with his Google Gears talk, using an offline presentation tool. The finishing touch is the need to search for the last page!
• Google Gears Fireside Chat
• Google Gears for WebKit
• Google Reader goes offline
• The Google Gears blog is born

Google Web Toolkit

• GWT and Gears
• GWT reaches a million downloads

Google Geo

• Driving directions added to the Google Maps API
• Mapplets

Other

• Google Mashup Editor was shown off by Paul McDonald
• Jeff Huber Keynote writeup
• YouTube API session writeup
• Adam Sah on Google Gadgets APIs session writeup

And this is the tip of the iceberg.

For more, check out the growing list of YouTube videos of the sessions, view the pictures from the event, and see what people are saying about it.

Now it is time to watch the last marker go red at the party back at the Googleplex.

Then tomorrow comes, and we get back to work to take in the suggestions and ideas from the community, and to press on from here!2013, By: Seo Master

Seo Master present to you: The Floating Social Media Sharing is a very popular widget on all the top blogs, being a very good way to increase the number of times your posts get shared on Twitter, Facebook and other social networks. It has some of the following functions: Facebook Like, StumbleUpon, Twitter Share, Digg This, Google+ and RSS Feed Icon and each of them comes with a live counter. You can add more sharing buttons or social bookmarking icons later if you wish.

How to add the scrolling social bookmarking bar

1. Go to Layout
2. Click on Add A Gadget link
3. From the pop-up window, scroll down and select HTML/Javascript
4. Copy the code below and paste it inside the empty box.
5. Save the gadget.

• Vertical alignment - Change the value of bottom in code line 3. The code positions the button 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 value in red of 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>
• RSS Feed - Change the text in blue with the url address of your RSS feed.

2013, By: Seo Master

Seo Master present to you: Today I'm going to show you how to add an amazing mouseover effect for Blogger images using only CSS, in which moving your mouse over an image from different directions (from above, from below, etc) will cause an overlay transitioned in from the same vector. This trick will change not only the images appearance when moving mouse over them, but will also allow you to add inside a text with a description.


You can see the effect on this image below: try moving your mouse from the left, right, and above.

Adding Hover Effect From Different Directions on Blogger Images

First thing to do is to add the CSS style to our Template:

Step 1. From Blogger Dashboard, go to Template and press the Edit HTML button



Step 2. Search for the </head> tag - to find it, click anywhere inside the code area, press CTRL + F keys and type it in the search box.


Step 3. After you found it, add the following style just above it: 

<style>
  /* The container and the image */
  div.multi-hover {
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    width: 100%;
    height: 358px;
    line-height: 358px;
  }
  div.multi-hover img {width: 100%;}

/* The texts that, by default, are hidden */
  div.multi-hover span {
    color: #FFF;
    font-size: 32px;
    font-weight: bold;
    height: 100%;
    opacity: 0;
    position: absolute;
    text-align: center;
    transition: all 0.3s linear 0s;
    width: 100%;
  }

/* And this is what will generate the effect */
  div.multi-hover span:nth-child(1) { /* right */
    background: none repeat scroll 0 0 rgba(255, 189, 36, 0.6);
    left: 90%;
    top: 0;
  }
  div.multi-hover span:nth-child(2) { /* top */
    background: none repeat scroll 0 0 rgba(106, 170, 255, 0.6);
    left: 0;
    top: -80%;
  }
  div.multi-hover span:nth-child(3) { /* left */
    background: none repeat scroll 0 0 rgba(204, 87, 166, 0.6);
    left: -90%;
    top: 0;
  }
  div.multi-hover span:nth-child(4) { /* bottom */
    background: none repeat scroll 0 0  rgba(97, 181, 115, 0.6);
    left: 0;
    top: 80%;
  }

  div.multi-hover span:hover {opacity: 1;}
  div.multi-hover span:nth-child(2n+1):hover {left: 0;}
  div.multi-hover span:nth-child(2n):hover {top: 0;}

</style>

Step 4. Save the Template

Now we are going to add the HTML that is nothing but a DIV where we included four SPAN tags with texts and an image:

Step 5. Choose Posts, create a New Post, click on the HTML tab (1) and paste this code inside the empty box:

<div class=multi-hover>
  <span>hover right</span>
  <span>hover top</span>
  <span>hover left</span>
  <span>hover bottom</span>
  <img src="http://www.matrixar.com/-iNaV2hPrI7Y/UaNY2q0ETiI/AAAAAAAADio/TjGwDktvlPQ/s1600/flowers">
</div>

Add your own text/description to "hover right", "hover top", "hover left" and "hover bottom" (2) and replace the url in blue with the image URL (3) where you want to apply the effect.

Important! Do not click on the Compose tab, otherwise the changes will be lost.


Step 6. After you finished editing your post, click Publish (4)

And that's it... enjoy! :)
2013, By: Seo Master