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

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

Seo Master present to you: It's quite common to see calendar style dates next to some WordPress posts but for the Blogger platform it isn't always an very easy task to add this. 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 date for your Blogger posts.

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 my example below (put day first, then the month and finally the year)

Step 2. Then go to Template > Edit HTML

Step 3. Select the "Expand Widget Templates" checkbox

Step 4. And search (CTRL + F) the following line:

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

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

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

Step 6. Now search for this tag (CTRL + F to find it)

</head>

Step 7. And paste the code from below just ABOVE the </head> tag:

<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 != "static_page"'>
<style type='text/css'>
/* Calendar style date
----------------------------------------------- */
#Date {
background: transparent url(http://www.matrixar.com/-NVj6tUKJgLo/UBShW2dCLSI/AAAAAAAACZk/3TkTa8Hzqt0/s1600/calendar07.png) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 15px 2px 0 -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, we can make some changes:

To change the calendar style, replace the url in blue with yours;
If the calendar doesn't appear correctly, 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 is ok, click on the Save button. Enjoy!

2013, By: Seo Master

seo 10 Easy Steps To Configuring An Internet Answering Machine 2013

Seo Master present to you:

An online answering machine works just like a regular answering device. The only divergence is that you have to connect your phone to the computer instead of a traditional answering device. The online answering works on both dial-up and broadband connections and ensures that you do not miss any call. The answering software allows you to listen to messages as and when they are being recorded, and also download other messages and listen to them much later.

Here are step-by-step instructions that will help you install and setup online answering software:

Before downloading and installing the software, do check if your computer has the necessary space and memory, and the appropriate modem. You will need a voice modem – space and memory should not be a constraint.
Before buying any software, download the trial version and test it. It must be easy to use and you should take a liking to it before buying it. Most answering software companies offer a free trial, and you should try 3-4 different software before zeroing on to one.
After choosing convenient answering software, you should buy and download it. Save the exe file in a folder of your choice.
Remove the line cord from your telephone and connect it to the modem port in your computer. The other end should be plugged into the wall jack. Connect the telephone line to your modem. If you need clarity on this step, talk to customer support of the online answering software vendor.
Now, install the answering software. Install it as recommended in its manual or as per directions printed on the installation screens.
You have to now configure the software based on your preferences – For example: set the number of rings that should be allowed before the software answers the phone, set the silence detector and the toll saver features. You also should configure the recording time limit for messages. Check all the other features in the software and set them up as per your requirements.
Next, set up one or many mailboxes to record a greeting message. You can record multiple messages – one each for every mailbox. Many software tools have a feature that allows you to record a special greeting for a few phone numbers of your choice.
To stop unauthorized people from accessing your messages, you must setup a password. Note down the password in your diary. Remember, you can even access your messages remotely.
If you are the type of guy who gets very important messages all the time, then you should enable email forwarding of messages. That way every message will be forwarded to your email inbox.
If you want to be alerted every time a new message rolls in, then you have to configure the appropriate alert option.

Finally, do not install an Internet answering machine without equipping your computer with a robust firewall and antivirus programs. You don’t want people hacking into your computer and stealing your precious data, including the important messages in your mailboxes.

Author Bio:

Roger A. Delatorre is a blogger from Minneapolis, MN who recommends checking out MaxEmail for a simple solution for an internet answering machine.

2013, By: Seo Master

seo How to Earn Money Online With Jobego? 2013

Seo Master present to you:

What is Jobego?

Jobego is a free service that allows you to earn money online by doing things you do every day — surfing and searching the web, doing social activities, completing special offers and polls. It’s simple and fast.

How do I earn money with Jobego?

Here are only several ways for you to earn money with Jobego. First is by completing tasks, offers, participating in surveys etc. You can also earn by browsing sites that are in our system. You earn commissions for every website you see. Other ways you can earn is through promoting others to our site using our referral system. You earn downline click commissions, upgrade commissions and a commission from your referrals's purchases.

How much can I earn?

The amount of money each user earns depends on the following factors: type and quantity of tasks the user has completed, the user’s rating, number of referrals the user has and amount of money those referrals make (we pay 10% of earnings of your referrals).

Who are referrals and how much can I earn on them?

Referrals are users like you who have registered in Jobego using your personal linking code. You get paid 10% of their earnings. The more referrals you have the more you earn.

Payments

When do I get paid?
Within 7 days after you request a payment.
How do I get paid?
Via Paypal, Payza or Webmoney.
What are the minimum payout and fees?
Minimum payout is $5.00. Fees for Payal payments is 2%, for Webmoney payments 0.8%.

Click Below Banner and Register

2013, By: Seo Master

seo How to Create Drop Caps (Big First Letters) in Blogger/Blogspot 2013

Seo Master present to you: Here's another way you can customize your Blog. In this case, your Posts and Comment's first letter. The effect is a large first letter stretching down three or four lines with the text wrapped around. The drop cap letter can also use a different font and can be a different color to the rest of the text. You often see this style in newspapers, literature, magazines. In this tutorial i will show you how to apply automatically Magazine text style in Blogger Posts and Comments. So let's start adding it!

-> Add Drop Caps For Blogger Posts

-> Add Drop Caps For Blogger Comments

Big First Letter for your Blogger / Blogspot Posts

Step 1.

If you are using the old Blogger interface:

Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)

If you are using the new Blogger interface:

Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)

Step 2. Search (CTRL + F) for this piece of code:

]]></b:skin>

Step 3. Just above it, add the following:

.capital:first-letter {
float: left;
display: block;
font-family: Times, serif, Georgia;
font-size: 40px;
color: #000000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}

Customize:

Color - change the color highlighted in blue with the value of your desired color
Size - to change the letter size, increase/decrease the value highlighted in pink.

Step 4. Now search for this code:

<data:post.body/>

Step 5. Then immediately before and after add the red fragments you see in the example below:

<div class='capital'><data:post.body/></div>

Step 6. Save your template.

Important! If the above code is not working, add one of following codes from this example:

<p class="capital"><data:post.body/></p>

<span class="capital"><data:post.body/></span>

Big First Letter For Blogger/Blogspot Comments

Step 1. Log in to your Blogger account, then go to Design (Layout) >> Edit HTML >> check the "Expand Widget Templates" box

Step 2. Search (CTRL + F) for this piece of code (if you have already added this code, skip step 2 & 3):

]]></b:skin>

Step 3. Add the following code just above ]]></b:skin>:

.capital:first-letter {
float: left;
display: block;
font-family: Times, serif, Georgia;
font-size: 40px;
color: #000000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}

<data:comment.body/>

Step 5. Add the red codes before and after <data:comment.body/> as you can see in my example below:

<p class="capital"><data:comment.body/></p>

Step 6. Save your Template.

That's it! Now you have a cool drop cap first letter on your blog.
If you have any question, leave a comment below!2013, By: Seo Master

seo Numbered comments on threaded comments for Blogger/Blogspot 2013

Seo Master present to you: In a past tutorial, I've been talking about how you can add numbered comments to your blogger blog and today we'll learn how we can add numbered comments along with comment bubbles on the threaded comments as well.

What the following CSS trick will do for you:

When the general block of comments is initiating (.comments-content) a counter called countcomments activates and starts with an initial value of 1.
Then, each time the code flow goes through a review of any level, either a principal or a reply comment (.comment-thread li), content will bring us in front (:before) of the body of the comment, the number that is the counter at the time.
Then is incremented in one unit the counter (counter-increment).

See the screenshot:

count comments, comment bubble, forum, blogger

Isn't that great? Well, i'm pretty sure many of you have been waiting for this cool trick. So let's begin applying it for our threaded comments system.

Steps to add bubble comments count

Step 1: Go to Dashboard - Template - Edit HTML (click on Proceed if needed)

...Expand Widget Templates:

Step 2: Search (CTRL + F) for this piece of code:

]]></b:skin>

Step 3: Add the following code just above it:

.comment-thread ol {
counter-reset: countcomments;
}
.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: right;
z-index: 2;
position:relative;
font-size: 22px;
color: #555555;
padding-left:10px;
padding-top:3px;
background: url(http://www.matrixar.com/-f6ByQfbwApQ/T4x_8p1FGpI/AAAAAAAAB2A/WJKf-ybmvQk/s1600/comment+bubble2.png) no-repeat;
margin-top:7px;
margin-left:10px;
width: 50px; /*image-width size*/
height: 48px; /*image-height size*/
}
.comment-thread ol ol {
counter-reset: contrebasse;
}
.comment-thread li li:before {
content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
counter-increment: contrebasse;
float: right;
font-size: 18px;
color: #666666;
}

Note:

for no bubble icon, remove the code in red (including the blue code)
to change the comment bubble, replace the code in blue with the URL address of your own icon. If you're not sure what icon you should use, you can find some cool icons in my previous posts (see these tutorials here and here)
to change the position of comments count, increase/decrease the values (3 & 10) from padding-top and padding-left
to change the position of comments bubble/icon, change the values (10 & 7) from margin-left and margin-top

Step 4: Now Save the Template and you're done!

If you enjoy reading this blog, please share and subscribe. For any questions, leave a comment below.

2013, By: Seo Master

seo Fade In/Out Page Loading Effect On Blogger Posts 2013

Seo Master present to you: A very common effect in jQuery is the fade effect that hides or shows an element by fading it, and we can use it in many ways as for example in the blog's navigation. The following script does just that, by loading the page with a fading effect when we browse on internal links that are in the blog, such as post titles, labels links, archive, navigation links, etc..

jQuery effect, fade in effect, blogger jQuery

You can see an example in this demo blog, click on the title of any post and see the fading effect when the page is loading.

How To Implement the Fade In Loading Effect

1) To put this fading effect on your blog, go to your Template > Edit HTML :

fading effect, blogger blogspot, blogger tricks

2) Click anywhere inside the code area and search for the </head> tag using CTRL + F keys:

3) Then, just above </head> add the following code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("body").css("z-index", "-10");
$("body").fadeIn(0);

$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(500, redirectPage); });
function redirectPage() {
window.location = linkLocation;
}
});
//]]>
</script>
<style>
html {
background-color: #F2F2F2; /* Color fading */
}
</style>

4) Save the changes and that's it. In green you can see where to change the color that fades on a loading page.

The original script hides the body of the page while loading, I prefer to change that property with a negative z-index to avoid problems with the search engine robots that may effect the positioning.

Problems?

Consider that such effects could increase the blog loading time, so I recommend using it only when your blog loads fast and does not have too many scripts.

If you already use another version of jQuery remove the other, leaving only this which will be readed first.

If you are using Mootools or Scriptaculous, then you have to make some modifications to the code in order to be compatible.

If you have another script with a fade effect, then it could interfere with this and you might not see anything on the page except the color fading, in such cases it is better without this script.

You can also use this effect only on some links, for example, if you want to appear only when you click on the post titles in the navigation links (older posts and newer posts), and on the top tabs, then replace this line:

$("a").click(function(event){

With this:

$(".post-title a, .blog-pager-older-link, .blog-pager-newer-link, .tabs").click(function(event){

In some cases, the page can load for a second and then load with the fade effect, this may be "normal" because the browser is slow to read the script on page load.

Apart from these drawbacks, I think it's a very elegant way to load blog pages while browsing them, don't you think?2013, By: Seo Master

seo Exactly How To Construct Your Own Computer On A Budget? 2013

Seo Master present to you:

If you know how to built a laptop computer yourself, you'll be able to save cash compared to buying a prebuilt PC.If you are new to computer putting your unit together and you are not sure if you possibly can do it then do not worry as you will find numbers of tutees online to educate you precisely how.

Building your computer is absolutely not as hard as much people imagine, and once you have successfully built your first computer you will realize just how easy it can be. One way in lowering the cost of your new computer is to choose a motherboard that has integrated sound, networking together with video as this can reduce three of the most common components within a PC.

Keep in mind that you are building a pc on some sort of budget, while this integrated video will more than likely not be ready to play the hottest and very best games that are out, it would usually work just fine for web site surfing and additionally office programs. You should expect your cost to remain more if you're trying to develop a playing games computer as investing in good online video card with regard to gaming is usually expensive. Just check out for your Control board for LaserJet.

Another tip on creating a computer for a budget and saving money is to help you exclude choosing a new oven floppy drive since several all programs including os's are now on a DVD/CD and additionally floppy drives are becoming obsolete. Although floppy drives are fairly cheap at this point, every little bit helps when you are trying to avoid wasting money. By focusing on how these few tips about building your personal computer on a budget, you are able to save a bundle and reduce the quantity of hardware that you have got to order. Just check out for your fuser cooling fan.

With all of this being said, one more aspect to consider is with certainty if you receive an existing pc used parts from which include, you keep an eye on keyboard and mouse, which methods you could probably have an exciting new custom built computer which you could easily create yourself, for a tiny amount of money.

The only real downside to using discuss compression with regard to internal PC hardware cleaning is, pc humidity and temperature, varying examples of water can be found in the compressed air. The simple solution to the present problem is always to attach a particular in line dryer/filter with a desiccant that removes water, dirt and petroleum vapor. Ensuring thoroughly clean and dry permit suitable meant for internal appliance cleaning.

Author Bio:

Kamal Ahmad Is young entrepreneur who love to write on tech gadget. And believe on green technology, he has the view that its every person’s responsibility to take part in saving earth by promoting green tech. He blogs on http://yourpcuniverse.com and tweets @YourPcUniverse

2013, By: Seo Master

seo How to add “Email Subscription Form” to Blogger Blogspot 2013

Seo Master present to you:

email subscription form, blogger blogspot, gadgets

When you are providing useful information in your blog, then many times some readers will need to get the latest updates from your blog. For that purpose, you need an Email Subscription Form in your blog, so that the interested visitors can easily get the latest updates.

To add email or Feed Subscription Form to your blogger blog (blogspot) is very easy.
Just follow the next steps:

1. Log in to Blogger, then go to Layout > click on "Add a Gadget" link:

2. From the pop-up window, scroll down and click on the "HTML/JavaScript" gadget:

3. Paste the following code inside the empty box:

<style>
.hl-email{
background:url(http://www.matrixar.com/-u3UaeUufpmI/T8lFuelsg8I/AAAAAAAACQY/tOWbHsgTYKc/s1600/mail.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.hl-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.hl-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:130px;
color:#666;}
</style>
<div class="hl-email">
Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=helplogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address here" type="text" />
<input type="hidden" value="helplogger" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="hl-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Settings

Replace the url address in green to change the email icon
Increase/Decrease the 130 width value for a wider text area
Replace http://feedburner.google.com/fb/a/mailverify?uri=helplogger with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
Replace helplogger with your feed title. It appears at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=helplogger

4. Now Save your widget and check your blog. Enjoy!

2013, By: Seo Master

seo Using the :before and :after Pseudo Elements on Sidebar Titles 2013

Seo Master present to you: This is another method of using the :after and :before properties and it will work without too many problems in any browser, including IE8. What this trick will do is to divide the header bar into left and right sections, where the left will contain an explanatory title and the right, a related link.

The idea of generating Adobe-like Arrow Headers was actually discussed by css-tricks and adapted to Blogger.

How to Add Adobe-like Headers to Blogger

blogger gadgets, blogger tricks, blogger blogspot

Step 1. Log in to your Blogger dashboard > go to Template > Edit HTML, then click anywhere inside the code area to search - using the CTRL + F keys - for the following tag:

</head>

Step 2. Just above it, copy and paste this code:

<style>
.module h2 {
background-color: #D5D5D5;
border-radius: 20px 0 0 20px;
color: #FFFFFF;
font-family: Verdana;
font-size: 14px;
line-height: 32px;
margin: 0;
padding: 0 0 0 20px;
text-shadow: 2px 1px 1px #222;
}

.module h2 a {
    border-left: 5px solid #ffffff;
    color: #101921;
    float: right;
    font-size: 14px;
    text-decoration: none;
    text-shadow: none;
    padding: 0 10px;
    position: relative;
   -moz-transition: padding 0.1s linear;
   -webkit-transition: padding 0.1s linear;
   -ms-transition: padding 0.1s linear;
   -o-transition: padding 0.1s linear;
}
.module h2 a:hover {
padding: 0 32px;
}

.module h2 a:before, .module h2 a:after {
    content: "";
    height: 0;
    position: absolute;
    top: 50%;
    width: 0;
}
.module h2 a:before {
    border-bottom: 8px solid transparent;
    border-right: 8px solid #ffffff;
    border-top: 8px solid transparent;
    left: -12px;
    margin-top: -8px;
}
.module h2 a:after {
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    left: -6px;
    margin-top: -6px;
}

.module.blue h2 a {background-color: #A2D5EC;}
.module.blue h2 a:hover {background-color: #C5F0FF;}
.module.blue h2 a:after {border-right: 6px solid #A2D5EC;}
.module.blue h2 a:hover:after {border-right-color: #C5F0FF;}

.module.yellow h2 a {background-color: #FCE98D;}
.module.yellow h2 a:hover {background-color: #FFD700;}
.module.yellow h2 a:after {border-right: 6px solid #FCE98D;}
.module.yellow h2 a:hover:after {border-right-color: #FFD700;}

.module.green h2 a {background-color: #bada55;}
.module.green h2 a:hover {background: #C7E176;}
.module.green h2 a:after {border-right: 6px solid #bada55;}
.module.green h2 a:hover:after {border-right-color: #C7E176;}

.module.red h2 a {background-color: #F0A5B5;}
.module.red h2 a:hover {background-color: #FFC7D2;}
.module.red h2 a:after {border-right: 6px solid #F0A5B5;}
.module.red h2 a:hover:after {border-right-color: #FFC7D2;}
</style>

Step 3. Save the Template.

Screenshot:

Step 4. Now go to Layout and Add a new HTML/JavaScript Gadget with one of the codes below for each of the widget title:

Background in blue:

<div class="module blue">
<h2>Title in <a href="Link URL">Blue</a></h2>
</div>

Background in yellow:

<div class="module yellow">
<h2>Title in <a href="Link URL">Yellow</a></h2>
</div>

Background in green:

<div class="module green">
<h2>Title in <a href="Link URL">Green</a></h2>
</div>

Background in red:

<div class="module red">
<h2>Title in <a href="Link URL">Red</a></h2>
</div>

Note: Change "Title in" text with your widget's title and Blue, Yellow, Green and Red with the text on the right, then add a Link URL to it.

Step 5. After you saved the HTML/Javascript gadgets containing the codes above, drag and drop them just above the widgets you want to show... and Save the Arrangement.

DEMO

You can see how the sidebar titles has been replaced with some cool header bars on this demo blog.2013, By: Seo Master

seo How to Boost/Increase Your Twitter Followers for Free ? 2013

Seo Master present to you:

How to get lots of twitter followers in www.afollowers.com?
AFollowers is a powerful system to gain new followers for free.
www.afollowers.com is one site that can add followers on " Twitter "easily enough 1x click and you will get a lot of followers. :)

Simply follow the below STEP:

First login to http://twitter.com
After login to twitter go to this link: http://afollowers.com/
It will appear like this, and click " Login With Twitter ".

Afollowers Login - Increase Twitter Followers

4. Click Authorize app

Twitter - Authorize an application - Increase Twitter Followers

5. And click " Get Follower Now ", you will be a follower appropriate" credit "you have, First time using this application you will get" 50 Credit "

1 Follower Need 5 " Credit "

How to get Credit?
1. Click on "Gain Credit "on the tabs above.

2. Share your referral link, and everyone who signs up with your link, you will get a " Credit ".

For those who want to follow each other with me, please follow @bloggerknown .

2013, By: Seo Master

seo Multi Hover Effect On Blogger Images Using Pure CSS 2013

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.

hover effect, mouseover, blogger hover effects

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

hover right hover top hover left hover bottom

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

seo Create A Rollover Image Effect (change image on mouseover) 2013

Seo Master present to you: The Rollover effect is one in which an image web object changes (swaps itself) on mouse over to another web object (called rollovers) and reverts back to the original image on mouse out. Rollover images are preloaded into the page when it is loading, this ensures that the rollovers are displayed quickly. The onMouseOver and onMouseOut attributes of the link tag are used to make this functional.

Demo: Place your mouse over the image below to see its rollover effect

Making Rollover Effect Image

You have the following code:

<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" /></a>

Change the colored texts as it follows:

1. URL ADDRESS

This is the address where somebody will be sent when clicks on the image.
Example, my blog address: http://www.www.matrixar.com

2. URL OF THE FIRST IMAGE GOES HERE

Replace the orange text (two times) with the URL address of the image which will appear before you hover over it.

3. URL OF THE SECOND IMAGE GOES HERE
Replace the text in blue with the url of the image that will appear when the cursor hovers over it.

Now you can paste your image inside a blog gadget, going to Layout > click on Add a Gadget link (right side) > Select HTML/JavaScript from the pop-up window, then add it to your sidebar.

You can also add it inside your post by going to New Post > Switch to HTML tab and then paste the code in the empty box.

That's it. Enjoy ;)

2013, By: Seo Master

seo Here's Exactly How To Use Your Phone To Book Your Next Vacation 2013

Seo Master present to you:

Booking your next vacation may take a lot of time to complete, especially if you’re the busy kind of person. Chances are you will be seeking the help of a travel agent to furnish your trip based on your preferences instead, as you don’t have the time to work on it on your own.

But what if you’re not into coordinating with an agent to furnish your travel needs? Well, you can still do things on your own, but this time you will need an assistant-your phone.

There are many ways in which you can use your phone to book your next vacation. And yes, it is capable of doing the job right, so you don’t have to worry a bit. Here’s a step-by-step guide that you can follow:

Step 1: Download a travel app.

Mobile travel apps are rampant nowadays, and if you’re working on your vacation plans then you should get a travel app on your phone right away. There are many travel apps that you can check out depending on your preparation needs. There’s the TripAdvisor app which allows you to browse on different hotels in the destinations you intend to visit, as well as user reviews that can help you choose the best hotel to book at.

There are also other travel apps that provide you with full packaged tour deals which include hotels, itineraries and mode of transport. You may want to take advantage of these too as they cut the time you have to spend working on your vacation needs.

Step 2: Start booking.

When you use the apps you’ve downloaded, you may want to proceed with booking right on your phone after making your choices. You can book reservations right on these apps, as most of them are already integrated with booking sites that can process your orders.

Booking also depends on the app you’re using. For apps that cater to hotels only, then you can proceed with making a reservation through them on your phone. You will then be guided to a customer service representative who will take charge of confirming your order and create a reservation that would be ready for use once paid.

You don’t have to pay upfront when making a reservation. Some reservations are open for a week or so, until you decide to confirm, change the dates or cancel it. The important thing is you already have a template to follow or use for your travel plans.

Step 3: Check for the nearby amenities.

Before you actually pay your reservation, you may want to look at the available attractions, amenities and highlights in your chosen destination. These include the parks, museums, nearby beaches and other tourist landmarks that you will enjoy checking out. You can do this right on your smartphone using other apps, or via Wikipedia.

Doing this is very important because you are given a better picture of what to expect from your vacation; you cannot just rely on your friend's pictures and feedback in case they’ve been to the places you want to visit otherwise you might end up regretting your holiday in the long run.

For example, if you are planning to visit New England and would want to exercise your gambling skills, you may want to look for a nearby casino Connecticut is famous for or Vermont. You may not book a reservation in these establishments, but you can visit them to play your favorite games during the course of your vacation.

Step 4: Confirm and pay.

Once you have finalized your reservations, your chosen hotels and itineraries, airfares and even the choice of amenities you’d like to check out, then you can go ahead and confirm your bookings. There are many travel apps these days that allow you to make orders and pay for your purchases right on your own phone.

Some apps would redirect you to their affiliate companies that will take charge of securing your payment. Most online payments are completed using credit cards such as Visa or MasterCard, so you should prepare your cards when securing your reservations. Some on the other hand prefer online payment systems, such as PayPal, as these are more convenient in terms of processing.

Step 5: Tally your itinerary.

Finally, when everything’s secured and paid for, it’s time for you to tally your itinerary right on your phone. There are apps that allow you to do this, such as TripIt. These apps prepare your travel plan based on your purchased packages, and once you’re on your trip you kept from being lost from your intended travel activities.

Travel organizer apps help a lot in keeping you on track during your vacation. Sure, they can be a bit OC, but they give you the advantage of maxing out the limited time you have on your holiday. You can only do as much during your vacation, thus you’d have to make the most of it.

A few more vacation planning tips

When planning out your next vacation, think about this: what do you want to do during your time away from home? This will give you the foundations of the kind of vacation to get, no matter how silly it would seem to be for some. But the bottom line is, if it’s how you want to spend your vacation, then by all means-go for it.

Also, when planning your vacation, you should do it at the right timing. You may want to settle at a time when tourists are not flocking vacation hotspots, as the rates of hotels, tours and transport are relatively much cheaper. You can also score discounted deals that would allow you to save more money in the long run.

Lastly, plan your trip early. Early birds always get the best deals. If you do your travel planning ahead of time, you are able to look at more choices, even if you intend to go during the peak season. Early planning also gives more time to gather your resources and save more money for travel expenses until your departure date comes.

Author Bio:

Bill Powers is a freelance writer who loves to write about vacations, traveling and exotic locations. He also writes for Foxwoods Resort; follow them on Twitter and Facebook.

2013, By: Seo Master

seo How To Add Social Media Icons to Blogger Header 2013

Seo Master present to you:

This tutorial will help you to add social media icons in the top right corner of the page which could increases the likelihood that readers can follow through the various social networks. There are several ways to do this, like adding a new widget section to the blog header but now, we'll do it using an unordered list that uses icons of Facebook, Twitter, Google+ and blog feed, and as a bonus, the icons will rotate when you hover over them.

You can see a demo in this test blog.

Adding Social Media Icons to Blogger Header

Step 1. From your Blogger dashboard, go to Template and click on the Edit HTML button:

blogger blogspot, blogger template, blogger gadgets

Step 2. To expand the style, click on the small arrow on the left of <b:skin>...</b:skin> (screenshot 1), then click anywhere inside the code area to search (using CTRL + F) for the ]]></b:skin> tag (screenshot 2) and add this code just above it:

/* Social icons for Blogger
----------------------------------------------- */

#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
display:block;
clear:both;
z-index: 2;
position: relative;
}
.social-media-icons {
display:table
}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

Screenshot 1:

Screenshot 2:

Step 3. Now search for this line

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Step 4. And just above it, add this code:

<div class='social-media-icons' id='social-icons'>
<ul>

<li class='media_icon'><a href='http://facebook.com/username'><img border='0' src='http://www.matrixar.com/-hJlnVDP-uXk/UaKErpYECEI/AAAAAAAADhA/DA59rR8trrA/s1600/Facebook.png'/></a></li>

<li class='media_icon'><a href='http://twitter.com/#!/username'><img border='0' src='http://www.matrixar.com/-x7YZ7aKIxM8/UaKErq0FZlI/AAAAAAAADhE/3zNd_IFPT8g/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='http://www.matrixar.com/-DNSrkD8pl14/UaKEsW_JdfI/AAAAAAAADhU/S0jGIdQuO4M/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://name-of-your-blog.com/feeds/posts/default'><img border='0' src='http://www.matrixar.com/-H3nOjhn9wk8/UaKErtM0_mI/AAAAAAAADg8/vJ8tEgRcl5M/s1600/RSS.png'/></a></li>

</ul></div>

Customization

- Change what's in red with your usernames and id: the first is your Facebook username, the second is that of Twitter, in the third you should change the X by the ID of your Google+ profile and in the fourth you will put the name of your blog.
- To change the icons, just replace the urls in blue with the ones of your images.
- You can add more icons if you want, you just have to add before </ul></div> a line like this for each extra icon you want:

<li class='media_icon'><a href='Link URL'><img border='0' src='Image URL'/></a></li>

Step 5. Finally, Save the Template to apply the changes.

The effect is done with CSS3, so this effect will not work in older browsers.2013, By: Seo Master

Design by Dev Nasser

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

Les nouveautés et Tutoriels de Votre Codeur | SEO | Création de site web | Création de logiciel

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

seo 10 Easy Steps To Configuring An Internet Answering Machine 2013

Here are step-by-step instructions that will help you install and setup online answering software:

seo How to Earn Money Online With Jobego? 2013

What is Jobego?

How do I earn money with Jobego?

How much can I earn?

Who are referrals and how much can I earn on them?

Payments

seo How to Create Drop Caps (Big First Letters) in Blogger/Blogspot 2013

seo Numbered comments on threaded comments for Blogger/Blogspot 2013

seo Fade In/Out Page Loading Effect On Blogger Posts 2013

How To Implement the Fade In Loading Effect

seo Exactly How To Construct Your Own Computer On A Budget? 2013

seo How to add “Email Subscription Form” to Blogger Blogspot 2013

seo Using the :before and :after Pseudo Elements on Sidebar Titles 2013

How to Add Adobe-like Headers to Blogger

seo How to Boost/Increase Your Twitter Followers for Free ? 2013

seo Multi Hover Effect On Blogger Images Using Pure CSS 2013

Adding Hover Effect From Different Directions on Blogger Images

seo Create A Rollover Image Effect (change image on mouseover) 2013

seo Here's Exactly How To Use Your Phone To Book Your Next Vacation 2013

Step 1: Download a travel app.

Step 2: Start booking.

Step 3: Check for the nearby amenities.

Step 4: Confirm and pay.

Step 5: Tally your itinerary.

A few more vacation planning tips

seo How To Add Social Media Icons to Blogger Header 2013

Adding Social Media Icons to Blogger Header

Labels

Blog Arşivi