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

Teach Forum (News) Premium Blogger Template Free Download



Features:
Instructions: Template Settings / How to install a Blogger template
Costomize:   Muhammad Azeem
Designer:   Dadang Herdiana

Description:

Teach Forum (News) is a free premium style blogger template with 2 columns, right sidebar, fresh look, Excellent layout for blogs about News & Tips.

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…

Live Demo

• Go to your  Blogger

• 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……..

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…




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 .

Save it.

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