Beautiful New 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 + F 
• Paste below code Before/above ]]></b:skin> tag .

.TWwarn{background:#FFF2F4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlxJ3eIIJVl1XqtegmUxI6imLOrYd9HKrQNIEAz6c-Fwq19gYFYfUXRHs7ktc_sgwMAhKfWxNFV9wMR5ezeRk7L0o8dryOzpyIizTRTQBJXO43DEtDGzfZkLD3-TXjb5kcCCHGaIy3bDY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0zqhXFU7rjvyQTeqUTCSuNQKlVXdDfu4_ToP1mUxlpvxSyZNgirb9fsu-I2b5JB3gwAZyo_GXVYoL9IxK9Oz84AwBwAbsqADUoxv_6PPD5REL58beAOAkXDtadXDsmPK9OsBDsAjsKDeb/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnlJ8rXZVRv2tWVGLkRQuopQdTi4dD14JfcXha59VgqmKP1QHBTXj5q2TXqi1C_SovFg9Hmh6WomK_1F9fqgKsAlq1zaQWRDQsOJ6M0J1dLUMbjFHuljHqfMy-xpRcwLRAm5Kp7W7Wj5nn/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixMOo93PWUcqLZETwDjtW2k_L8qg5gJ_v7H6ia8dsepjDAykm70gXKXfKyrmwiVJ2QWtZ5ou-iEk7dIUE_GGdIzjA1FxbCG-jb74Vf0YO5AtMG0GicQ5ddUwBeSkZbWPmV69sfiBhPdkDT/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_U2yoPSEb_ad3e05W5cMZdOXVkSq52zakj8Yn3Jo2LEulfyepQ3Jlj8ytJjNQ4SoyF_iK_8IbmjrHuCXxOZtwazzTpc_XNKIOBi97LQH2_9r9Opa4OLGfVFZH3YnDDGy29FPWJcHGLFE_/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5LDX85z_Q7V-3PPV-ZkE69vEE4zWmATZltXTQ7FZj1p9kOe5mKij51iFF-nYpM2ey8bZVwOyG8aN63JV54UepOV1qMubaDjerpLP2V-vkU-TRwikDMz62Imuo-PLKLeJdfrKyfFlkG_2y/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhffWPL0cKr7-6tADHN7VVb0t38wLD-FdK0rShGbXSdWce_RSVki40l5i_Bv_mY3R7Woo4a-Juc1GQzZYDTUljYvHX9TaZC5bArahq7_YWoT9RcYcTvoToALeGoNmJJGumAoeTsB3tpt2RT/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 .