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

Seo Master present to you:

Hi, Do you want to see a stylish social sharing widget. Friend, Now i share a simple and beautiful social sharing widget for your blogger. It  make a good feel and it make with simple gradients. If you want to add this on your blogger. Follow this post and  make it..

beautiful square social sharing widget for blogger(www.matrixar.com)

 

Log in to your blogger account.

  • Select Layout option.

 

  • Click on Add gadgets

 

  • Select HTML/Javascript from list.

 

  • Copy below code and paste in HTML/Javascript box.

 

 

<style>
/* Social Icons
----------------------------------------------- */
a.social-icons {
margin-right: 5px; /*Adjust This Value As Needed*/
height:45px;
width:45px;
}
a.social-icons:hover {
opacity: .7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}   height:45px;
width:45px;
</style>
<a class="social-icons" href="https://facebook.com"><img src="http://i1356.photobucket.com/albums/q728/marklin44/Social%20Media%20Gray%20Icons/facebook_zps17e8a317.png" /></a>
<a class="social-icons" href="https://twitter.com/"><img src="http://i1356.photobucket.com/albums/q728/marklin44/Social%20Media%20Gray%20Icons/twitter_zpsad21acd1.png" /></a>
<a class="social-icons" href="https://stumbleupon.com"><img src="http://i1356.photobucket.com/albums/q728/marklin44/Social%20Media%20Gray%20Icons/stumbleupon_zpsb5c9fe2f.png" /></a>
<a class="social-icons" href="http://www.feedburner.com"><img src="http://i1356.photobucket.com/albums/q728/marklin44/Social%20Media%20Gray%20Icons/rss_zps237db27e.png" /></a>
<a class="social-icons" href="http://flicker.com"><img src="http://i1356.photobucket.com/albums/q728/marklin44/Social%20Media%20Gray%20Icons/flickr_zps538aca1b.png" /></a>

 

  • Save it.

 

 

Leave a comment ….. if this widget is not working…………………………..

2013, By: Seo Master
Seo Master present to you:

Friends ,This is a useful post about how to apply different mouse hover effect to your picture in blogger. Now i show four effect to your blogger. This effect works with CSS3 script you can add this four effect on your Blogger. Follow this instructions carefully and add it in to your blog…

Log in to your Blogger account

  • Select on Template Option.

 

  • Click on Edit HTML .

 

  • Find (CTRL+F)  ]]></b:skin> tag.

 

  • Copy and paste CSS code above ]]></b:skin> tag.

 

  • Copy and paste HTML code, where you want to see your image. ( Replace highlighted RED color with your image link )

 

EFFECT -1

 

 

CSS code

 

.efecto-rotate-uno {
background:#FFF;
border: 1px solid #CCC;
    display: block;
    line-height: 0;
    margin: 4px;
    padding: 4px;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    cursor:pointer;
}
.efecto-rotate-uno:hover {
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
-o-transform:rotate(-10deg);
-ms-transform:rotate(-10deg);
transform:rotate(-10deg);
}

 

HTML - code

<img class="efecto-rotate-uno" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAeN6SkTdnl0tEuqWfG53rR_3txEcCulUgzxBGEsgYeHnTx1HPUQUdWbEpKB4mL3cCrINMb4XprCMgmYuW8CLK5dZRZb4txOEZnlE8SZPZlWjPhuOlhStiPNMyeyVecKu1yJvYyRanVvuN/h120/tump-03.png" />
 

 Replace highlighted RED color with your image link

 

EFFECT –2

 

 

CSS code

 

.efecto-rotate-dos {
background:#FFF;
border: 1px solid #CCC;
    display: block;
    line-height: 0;
    margin: 4px;
    padding: 4px;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    cursor:pointer;
}
.efecto-rotate-dos:hover {
-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
-o-transform:rotate(10deg);
-ms-transform:rotate(10deg);
transform:rotate(10deg);
}

 

HTML - code

<img class="efecto-rotate-dos" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAeN6SkTdnl0tEuqWfG53rR_3txEcCulUgzxBGEsgYeHnTx1HPUQUdWbEpKB4mL3cCrINMb4XprCMgmYuW8CLK5dZRZb4txOEZnlE8SZPZlWjPhuOlhStiPNMyeyVecKu1yJvYyRanVvuN/h120/tump-03.png" />
 

Replace highlighted RED color with your image link

 

EFFECT - 3

 

 

CSS code

 

.efecto-rotate-tres {
background:#FFF;
border: 1px solid #CCC;
    display: block;
    line-height: 0;
    margin: 4px;
    padding: 4px;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    cursor:pointer;
}
.efecto-rotate-tres {
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
-o-transform:rotate(-10deg);
-ms-transform:rotate(-10deg);
transform:rotate(-10deg);
}
.efecto-rotate-tres:hover {
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
-ms-transform:rotate(0deg);
transform:rotate(0deg);
}

 

HTML - code

<img class="efecto-rotate-tres" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAeN6SkTdnl0tEuqWfG53rR_3txEcCulUgzxBGEsgYeHnTx1HPUQUdWbEpKB4mL3cCrINMb4XprCMgmYuW8CLK5dZRZb4txOEZnlE8SZPZlWjPhuOlhStiPNMyeyVecKu1yJvYyRanVvuN/h120/tump-03.png" />
 

Replace highlighted RED color with your image link

 

EFFECT – 4

 

 

CSS code

 

.efecto-rotate-cuatro {
background:#FFF;
border: 1px solid #CCC;
    display: block;
    line-height: 0;
    margin: 4px;
    padding: 4px;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    cursor:pointer;
}
.efecto-rotate-cuatro:hover {
-moz-transform:rotate(-360deg);
-webkit-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
-ms-transform:rotate(-360deg);
transform:rotate(-360deg);
}

 

HTML - code

<img class="efecto-rotate-cuatro" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAeN6SkTdnl0tEuqWfG53rR_3txEcCulUgzxBGEsgYeHnTx1HPUQUdWbEpKB4mL3cCrINMb4XprCMgmYuW8CLK5dZRZb4txOEZnlE8SZPZlWjPhuOlhStiPNMyeyVecKu1yJvYyRanVvuN/h120/tump-03.png" />

 

 Replace highlighted RED color with your image link

 

 

 

 

Are you happy.???/…… Leave a commnet if it is not working on your blogger…

 

2013, By: Seo Master
Seo Master present to you:
มาต่อกันเลยครับกับ Meta Revisit-After Tag ที่ใช้สำหรับบอกกับ Robot ของ Search Engine ว่าให้มาเก็บข้อมูลอีกทีในอีกกี่วัน เหมาะสำหรับเว็บที่มีการอัพเดทข้อมูลไม่บ่อย ตัวเลขเราสามารถที่จะระบุได้ตามที่เราต้องการครับ
<meta name=”revisit-after” content=”7 days” />
Meta Tag ที่ใช้สำหรับบอกเครื่องมือที่ใช้ในการสร้างเว็บเพจนี้ ใส่ชื่อโปรแกรมที่ใช้ในการสร้างลงไป
<meta name="generator" content="Dreamweaver">
Meta Tag ที่ใช้สำหรับสั่งให้ Refresh หน้าเว็บเพจที่แสดงผลอยู่อัตโนมัติ เลข 3 คือ จำนวนวินาทีที่ต้องการให้ Refresh index.html คือใส่ข้อมูลหน้าีที่ต้องการให้ Refresh
<meta http-equiv="refresh" content="3; url=index.html">
Meta Tag สำหรับสั่งให้ Re-direct หน้าเว็บเพจอัตโนมัติ Redirect คือการให้เปลี่ยนหน้าเว็บเพจที่แสดงผลอยู่ ไปแสดงผลอีกหน้าที่เราตั้งไว้โดยอัตโนมัติ เลข 5 คือจำนวนวินาทีที่จะให้แสดงหน้าแรกก่อน 5 วินาทีจึงจะเปลี่ยนไปแสดงอีกหน้าที่เราตั้งไว้ Url คือเว็บไซต์ที่เราต้องการให้ Re-direct ไป
<meta http-equiv="refresh" content="5;url=http://www.pookpligg.com">
Meta Tag สำหรับสั่งไม่ให้ Robot ของ Search Engine มาเก็บหน้าที่แสดงผล
<meta name="robots" content="noindex,nofollow">2013, By: Seo Master
Powered by Blogger.