Dec 23, 2012

Beautiful New Text-Box or highlighter for Blogger

Text-Box or highlighter for Blogger
Hi all User Today i am with some new Text-Box or highlighter for Blogger which i have created some days ago.Today many us use this to make some important word highlighted in front of blog visitor to get noticed.
Now i am going to share some 100% Unique Text-Box or highlighter Code for Blogger.

To Use This You have follow my simple steps.
  • Login to Blogger  >> Click on drop down menu >> then select "Template"
  • Now you will see  "EDIT HTML" Button ,Click on it >>  then click on Proceed button 
  • Now find this tag ]]></b:skin> by using CTRL +
  • Paste below code Before/above ]]></b:skin> tag .

.TWwarn{background:#FFF2F4 url(http://1.bp.blogspot.com/-ACJrm3yzMYo/TdNP_pOqpyI/AAAAAAAABCY/WTZKxXLuBhU/s1600/nraw2.png) center no-repeat; margin:0 auto; width:90%; display:block; border:1px solid #BE0000; background-position:7px 50%; padding:10px 10px 10px 45px;
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
}

.TWynotic{background:#fafbca url(http://4.bp.blogspot.com/-hw-b6iRI2G0/UMifsW9kbdI/AAAAAAAAGqI/9rMtIUXg4k4/s1600/yellowalert.png) center no-repeat; margin:0 auto; width:90%; display:block; border:1px solid #e7ea03; background-position:7px 50%; padding:10px 10px 10px 45px;
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
}

.TWgift{background:#ddeffb url(http://4.bp.blogspot.com/-1lLEyoaLXpw/UMiepq7eMuI/AAAAAAAAGpk/TmxSdQD_TbA/s1600/gift.png) center no-repeat; margin:0 auto; width:90%; display:block; border:1px solid #32a9fc; background-position:7px 50%; padding:10px 10px 10px 45px;
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
}

.TWnoticgreen{background:#dcf9bc url(http://4.bp.blogspot.com/-wkNzOOfpNOw/UK0aWLb5DgI/AAAAAAAAGBY/9fyLUIYQSQM/s1600/announcement-icon.png) center no-repeat; margin:0 auto; width:90%; display:block; border:1px solid #7dc945; background-position:7px 50%; padding:10px 10px 10px 45px;
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
}
.TWHEART{background:#fbd3d9 url(http://3.bp.blogspot.com/-TQdxssNWAI4/UMieZf1kfEI/AAAAAAAAGpc/NLS-ejCPkgM/s1600/heart.png) center no-repeat; margin:0 auto; width:90%; display:block; border:1px solid #fe3a5a; background-position:7px 50%; padding:10px 10px 10px 45px;
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
}

.TWpin{background:#f4dbf3 url(http://3.bp.blogspot.com/-6-BkTSnRRIA/UMYUAEMV_yI/AAAAAAAAGkk/esyWC_Vee6Y/s1600/twpin.png) center no-repeat; margin:0 auto; width:90%; display:block; border:1px solid #fb37e2; background-position:7px 50%; padding:10px 10px 10px 45px;
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
}

.TWywarn{background:#e3f0f2 url(http://3.bp.blogspot.com/-AEMgMrni7yU/UMifrZiSvDI/AAAAAAAAGqE/9bR2JBgAB4U/s1600/write.png) center no-repeat; margin:0 auto; width:90%; display:block; border:1px solid #66cccc; background-position:7px 50%; padding:10px 10px 10px 45px;
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
}


  • Now Save the Template,and when ever you need to use this template then use below code in Html.
    1
 <div class="TWwarn">    
   <b>Page Layout Preview</b></div>
  
    2
    <div class="TWpin">
      <b>Page Layout Preview</b></div>
    
    3
    <div class="TWynotic">
      <b>Page Layout Preview</b></div>
    
    4
    <div class="TWHEART">
      <b>Page Layout Preview</b></div>
    
    5
    <div class="TWnoticgreen">
      <b>Page Layout Preview</b></div>


 6
    <div class="TWywarn">
      <b>Page Layout Preview</b></div>  
  7
    <div class="TWgift">
      <b>Page Layout Preview</b></div>

LIVE DEMO

1
Page Layout Preview

2
Page Layout Preview

3
Page Layout Preview

4
Page Layout Preview

5
Page Layout Preview

6
Page Layout Preview

7
Page Layout Preview


NOTE:-DON'T COPY THIS CONTENT WITHOUT LINK-BACK THIS POST.

comment below if any Problem .

Subscribe Updates, Its FREE!

0 comments:

Post a Comment

 

Copyright @ 2013 EgyTricks.

Designed by Vikash | EgyTricks