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 .

Read More

New Pro Style Subheading text Highlighter for Blogger

Add a New beautiful Style Sub Heading text Highlight for Blogger in easy way .Last Time i have Posted about  How To Customize Blogger Sub Heading text with different look and here again with different look.
To use this Heading text Highlight with Blogger you Have to add below Code before ..]]></b:skin>

Detail Description

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

.TWtitle{background-attachment: scroll; background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghhvDj2We-CyAeWIubfgjmsGnT_-H7oVqkE0LaOQmrNlMAWJWw5y_G08Eh9vY_mDZCi-1_2Hj0u5wE1xcDY9SuWKwwihpGHtvVjrDWgusCAJgzvAI-Dn7einUkTVUtPjMhB4pVJkoPsug/s1600/h2title+tickkkk.png); background-position: 0% 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; border-top-left-radius: 14px; border-top-right-radius: 14px; border: 3px solid rgb(13, 112, 5); box-shadow: rgb(171, 171, 171) 3px 3px 3px; color: #25991c; font-family: Lobster, cursive; font-size: 26px; font-weight: normal; margin: 0px 0px 1em; padding: 0px 1px 4px 34px; position: relative; text-shadow: rgb(0, 0, 0) 1px 1px 0px; text-transform: capitalize;}

Now Save your Template ...and when you need it Below HTML Code

<div class="TWtitle">YOUR TEXT</div>

Replace YOUR TEXT with your word .

Live Demo

Read More