Add HTML/ CSS TextBox With Image Background In Blogger Post?

Hey friends have a nice day. In this tips you know how to create Textbox With Image Background Using CSS in your blogger post or page. You can put this textbox right side or left side with stylish border with Image, logo, picture Background. Just you follow the bellow lesson and add your CSS text border.

Step 1:

Textbox With Image Background Using CSS:

[A] Go to blogger blog

[B] Go to ‘Template’ " ‘Edit HTML’

(Before you editing template firstly create a backup of your blogger template because if you have any wrong this template after edited, you can restore this. So click on Backup/Restore and download Full Template.)

[C] Click anywhere in code area then the press CTRL+F on keyboard to find ]]></b:skin> tag and past the bellow code before ]]></b:skin> tag.

.post blockquote {background: #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuB0tAzZ5m8BJQuvyuU9z5jVsjP79Vzoh_8zVhG2cAcgxuBF1pE8LyFwDZOEnWHbNoiGgSIDuarCzo2tDrlb9-ck20AgwQV2XCZjIlbgCgqSsSr6MqmouSKdGFILj3hyphenhyphenTwVF9lDMrAMSpd/s1600/h2b.png);background-position:top left;background-repeat:repeat-y;margin: 0 20px;padding: 10px 20px 10px 45px;border-top: 2px solid #DDD;border-right: 5px solid #666;border-left: 2px solid #DDD;border-bottom: 5px solid #666;font-size: 0.9em;}.post blockquote p {margin: 0;padding: 0 0 15px;}.blockquote {font: 18px normal sans-serif,Tahoma;padding-top: 10px;margin: 5px;text-indent: 65px;}.blockquote div {display: block;padding-bottom:10px;}.blockquote p {margin: 0;padding-top:10px;}

Customizing Textborder Background Image:

Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuB0tAzZ5m8BJQuvyuU9z5jVsjP79Vzoh_8zVhG2cAcgxuBF1pE8LyFwDZOEnWHbNoiGgSIDuarCzo2tDrlb9-ck20AgwQV2XCZjIlbgCgqSsSr6MqmouSKdGFILj3hyphenhyphenTwVF9lDMrAMSpd/s1600/h2b.png with your own image or logo.

If you want to this logo put on right side please change left to right

[D] Finally save your template.

Step 2: