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

Loading...
Seo Master present to you:
Hi, This is a useful widget to modify your blogger  more colorful. You can add this widget effortless to your blogger. It look like a ribbon style menu. If you want to add this to your blogger follow instruction…

ribbon style menubar for your blogger (www.matrixar.com)

Live Demo




  • Select Template option

  • Click on Edit HTML

  • Find (Ctrl+F) code  ]]></b:skin>


  • Copy below code and paste it before  ]]></b:skin>


/* The CSS Code www.matrixar.com */
.ribbon span {
    background:#A81B6A;
    display:inline-block;
    line-height:3em;
    padding:0 1em;
    margin-top:0.5em;
    position:relative;
      -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
    -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
    -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
    -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
    transition: background-color 0.2s, margin-top 0.2s;
}
.ribbon a:hover span {
    background:#FFD204;
    margin-top:0;
}
.ribbon span:before {
    content: "";
    position:absolute;
    top:3em;
    left:0;
    border-right:0.5em solid #9B8651;
    border-bottom:0.5em solid #fff;
}
.ribbon span:after {
    content: "";
    position:absolute;
    top:3em;
    right:0;
    border-left:0.5em solid #9B8651;
    border-bottom:0.5em solid #fff;
}
.ribbon a:link, .ribbon a:visited {
    color:#000;
    text-decoration:none;
    float:left;
    height:3.5em;
    overflow:hidden;
}
.ribbon:after, .ribbon:before {
    margin-top:0.5em;
    content: "";
    float:left;
   border: 1.5em solid #A81B6A;
}
.ribbon:after {
    border-right-color:transparent;
}
.ribbon:before {
    border-left-color:transparent;
}

  • Save Your Blogger Template

  • Then Go to Layout.

  • Click on Add A Gadget  option

  • Select  HTML/JavaScript from given list.

  • Paste the following code inside HTML/JavaScript.


<div class='ribbon'>
    <a href='Your URL Here'><span>Home</span></a>
    <a href='Your URL Here'><span>About Us</span></a>
    <a href='Your URL Here'><span>Tricks</span></a>
    <a href='Your URL Here'><span>Make Money</span></a>
    <a href='Your URL Here'><span>Widgets</span></a>
    <a href='Your URL Here'><span>Advertise</span></a>
    <a href='Your URL Here'><span>Contact</span></a>
</div>

Replace RED Text With Your Links
Replace BLUE Text With Your Titles

  • Save it now.




Are you happy enjoy……………….Leave your Comments below……..

2013, By: Seo Master

seo Ribbon Style Menu Bar For Your Blogger 2013

Seo Master present to you:
Friends, This is a useful widget to bloggers, Its more attractive than ordinary (default) Blogger label widget. You can easy to install this widget to your blogger.Follow below instruction and install it…

label cloud brick style widget (www.matrixar.com)


First go to your Blogger.

  • Select Template and Click on Edit HTML

  • Now find (Ctrl+F) this code ]]</b:skin>

  • Copy below code and paste before ]]</b:skin> 

 
#Label1{padding-bottom:10px;border-bottom:1px solid #a8a8a8;border-top:1px solid #f9f9f9;padding-left:15px;margin-top:0px;padding-right:27px;width:260px;} #Label1 h2 { background:url("http://www.matrixar.com/_4HKUHirY_2U/TGjQoHoOQzI/AAAAAAAABMk/_QWqwyRbjis/tag.png") no-repeat scroll left center transparent; padding-left:55px; margin-top:15px; color:#000000; font-family:arial; font-size:19px; font-weight:bold; height:51px; letter-spacing:-1px; text-transform:none; } #Label1 a{color:#000000;background-color:#fafafa; padding:1px 2px 1px 2px;font-size:11px;border:1px solid #d2d1d0;} #Label1 a:hover{background-color:#eeeeee; text-decoration:none;border:1px solid #bbbbbb;} .label-size{line-height:0}
 
 

  • Save your Templates.



  • Now Go to Layout



  • Edit Your Label Like below .



    • How To Add Bricks Style Labels To Blogger from (www.matrixar.com)



  • Save it.
    •  





    Leave a comment ……. and enjoy…………………




    2013, By: Seo Master

    seo How To Add Bricks Style Labels To Blogger 2013

    Seo Master present to you:  Sony PlayStation has revealed a range of interesting second screen support. The new console will tap into the PS Vita, iPhone, iPad or Android devices to enhance the overall gaming experience.

    It has announced the “PlayStation App”, which will turn smartphones and tablets into dedicated PS4 second screens. Sony also says that the app will allow gamers to buy games for the PS4 while they are on the road.

    2013, By: Seo Master

    seo Sony will turn iOS and Android devices into PS4 second screens with upcoming ‘PlayStation App’ 2013

    Powered by Blogger.
    Design by Dev Nasser