Fancy Text Widget For Blogger

Fancy text widget for blogger, Add some color to your blogger sidebars!

Fancy text widget is orignal for wordpress plugin but i have coded in this plugin and made for blogger. Using fancy notes is quite popular in modern web design to catch the visitors attention. Fancy text widget is the best widget to highlight some important posts or offers for your readers benefit.You can use this widget to show coming soon deals etc.

Features:

• 6 Fancy widget
• Google fonts
• 6 fancy background textures – wrinkled paper, sand paper, paper with lines …
• Works in any sidebar, Blogger, website
• Unlimited background and font colors

How to Install Fancy Text Widget For Blogger?

1. Sign into Blogger Dashboard
2. Go to Layout » Add a gadget » html/javascript
3. Just copy and paste the following code in the HTML Text Area.

List of Fanct Text Widgets

<style type="text/css">
@font-face {font-family: 'Sue Ellen Francisco';font-style: normal;font-weight: 400;src: local('Sue Ellen Francisco '), local('SueEllenFrancisco'), url(http://themes.googleusercontent.com/static/fonts/sueellenfrancisco/v4/TwHX4vSxMUnJUdEz1JIgrrtXaZAN_aGv07JTA91X2HI.woff) format('woff');}
.bloggerknown-ftw1 {position: relative;width: 100%;height: auto;display: block;clear: both;margin-top: 10px;margin-bottom: 10px;}
.bloggerknown-ftw1-container { position: relative; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkeV-ptTvJF77SUDf7TUtrcSeaEFTOJ99myX4VnmW0g1jRNs9efIr92y_SnqsnYGTAUtqznn7DE-WlJTG4b2t_xLXJqHDSFQTJNOERDXCSdQkGV0ReRbicNPd25_eyANg7NqWwyWn-YYc/s1600/ftw-body-horizontal-vertical-lines-paper.png) repeat; background-color: #30a628 !important;font-size: 23px;line-height: 28px;font-family: 'Sue Ellen Francisco', arial, serif;width: 100%;display: block;height: auto;margin: 0;padding: 0;}
.bloggerknown-ftw1-spacing {padding: 25px;}
strong {font-weight: bold;}
.bloggerknown-ftw1-footer {width: 100%;display: block;margin: 0;}
.ftw1-graphics-paperclip {position: absolute;top: -10px;right: 5px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg25xhMP0c4By447ENwSLK5mLXCCbXw917XYB4vmmf6nuJmhVJEr8HlxXLMxgZkVieJyWKS38x1cBZiW2-j6RBTSNpNNmEvEXdnCwX2zoteF26VuEsWOEXUy4HYJqm2MdPx6Dk7fZ4fJX8/s1600/ftw-paperclip.png) no-repeat top center;height: 65px;width: 45px;}
.bloggekrnown-ftw1-footer-left {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR4jZXNN4H2GKswquXmFX7oZe2zbUPSS1Qho45iIo9YGQuE_pKrdHoq4HES2NBLwJKdHiLFMLbXwHimfwevmzppzgDzmGkDQwgGp4AKHyDTQ5rCnlWhcwH89meah6JoIX3htQQFUfakAc/s1600/ftw-footer-left.png) no-repeat top center;height: 12px;width: 92px;float: left;position: relative;z-index: 5;}
.bloggerknown-ftw1-footer-right {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh22jGogszkD-GueZGzfwEZMV3HkKaBz-k0rsUKmo3tRzg0RQQeS7TD8PKsrWiJ9TvYqouz8n1Su4SlBVf2gg5V0ItcPtDr5E3lMCfJPR25H97FKn4Al4IOaSZFThnkDu8jRjSH0_0WEJ8/s1600/ftw-footer-right.png) no-repeat top center;height: 12px;width: 92px;float: right;position: relative;z-index: 5;}
</style>
<div class="bloggerknown-ftw1">
<div class="bloggerknown-ftw1-container">
<div class="bloggerknown-ftw1-spacing">
<strong>Widget title</strong><br />
You are reading text inside a fancy text widget. There's no real purpose to it. It's just <strong>fancy</strong>
</div>
</div>
<div class="bloggerknown-ftw1-footer"><div class="bloggekrnown-ftw1-footer-left"></div><div class="bloggerknown-ftw1-footer-right"></div></div>
<div class="ftw1-graphics-paperclip ftw1-graphics-right"></div>
</div>

<style type="text/css">
@font-face {font-family: 'The Girl Next Door';font-style: normal;font-weight: 400;src: local('The Girl Next Door'), local('TheGirlNextDoor'), url(http://themes.googleusercontent.com/static/fonts/thegirlnextdoor/v4/cWRA4JVGeEcHGcPl5hmX7rOFxJ5Ig03puUh67ume3us.woff) format('woff');}
.bloggerknown-ftw2 {position: relative;width: 100%;height: auto;display: block;clear: both;margin-top: 10px;margin-bottom: 10px;}
.bloggerknown-ftw2-container { position: relative; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGOj7uGpxYPvorfbpUFLz0mzTik3Th-8nwdqn2nJKbrozPq1h_a7DFeT0GpNUzLbFpk8EcaautzXcXhFiuXnIs0tn-HNDqP6vrtXgM8JichSvj1xKdxUpv30ZNvqyUiXz3M-RngPJEJyc/s1600/ftw-body-crumbled-paper-2.png) repeat; background-color: #57bdcf !important;color: #112b82 !important; font-family: 'The Girl Next Door', arial, serif; font-size: 16px; line-height: 23px; width: 100%;display: block;height: auto;margin: 0;padding: 0;}
.bloggerknown-ftw2-spacing {padding: 25px;}
strong {font-weight: bold;}
.bloggerknown-ftw2-footer {width: 100%;display: block;margin: 0;}
.ftw2-graphics-paperclip {position: absolute;top: -10px;right: 5px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzFQQiuHCuVMGZOFZIJ2qhyphenhyphenzR8s47XDBGx-q_TgdgfdxJXP-QxrKS4uuy909bCYIkkvAIb_dbMQyD9uSGwI-zC1W9xnjiWiBP89qKeAItV3-ChAk1M1mddKvIYfMJKqEZrxf7bisCC00Q/s1600/ftw-tape-2.png) no-repeat top center;height: 65px;width: 45px;}
.bloggekrnown-ftw2-footer-left {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR4jZXNN4H2GKswquXmFX7oZe2zbUPSS1Qho45iIo9YGQuE_pKrdHoq4HES2NBLwJKdHiLFMLbXwHimfwevmzppzgDzmGkDQwgGp4AKHyDTQ5rCnlWhcwH89meah6JoIX3htQQFUfakAc/s1600/ftw-footer-left.png) no-repeat top center;height: 12px;width: 92px;float: left;position: relative;z-index: 5;}
.bloggerknown-ftw2-footer-right {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh22jGogszkD-GueZGzfwEZMV3HkKaBz-k0rsUKmo3tRzg0RQQeS7TD8PKsrWiJ9TvYqouz8n1Su4SlBVf2gg5V0ItcPtDr5E3lMCfJPR25H97FKn4Al4IOaSZFThnkDu8jRjSH0_0WEJ8/s1600/ftw-footer-right.png) no-repeat top center;height: 12px;width: 92px;float: right;position: relative;z-index: 5;}
</style>
<div class="bloggerknown-ftw2">
<div class="bloggerknown-ftw2-container">
<div class="bloggerknown-ftw2-spacing">
<strong>Widget title</strong><br />
You are reading text inside a fancy text widget. There's no real purpose to it. It's just <strong>fancy</strong>
</div>
</div>
<div class="bloggerknown-ftw2-footer"><div class="bloggekrnown-ftw2-footer-left"></div><div class="bloggerknown-ftw2-footer-right"></div></div>
<div class="ftw2-graphics-paperclip ftw2-graphics-right"></div>
</div>

<style type="text/css">
@font-face {font-family: 'Waiting for the Sunrise';font-style: normal;font-weight: 400; src: local('Waiting for the Sunrise'), local('WaitingfortheSunrise'), url(http://themes.googleusercontent.com/static/fonts/waitingforthesunrise/v4/eNfH7kLpF1PZWpsetF-hazFoTnl3mJKNVVnPtbVHJow.woff) format('woff');}
.bloggerknown-ftw3 {position: relative;width: 100%;height: auto;display: block;clear: both;margin-top: 20px;margin-bottom: 10px;}
.bloggerknown-ftw3-container { position: relative; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik6GGgE1WEbp4G_D1-mltpy-RSPzjbeLDFbza38PIdz86PAgTaLi_DaAy7rWUbjL0CV_lHVjsG5OKoyPhnvEJFysDCbb6q40zQQfcKnLP_60wHa9-Z58D568EXUxIn574uRcK0CwHg8jI/s1600/ftw-body-crumbled-paper-1.png) repeat; background-color: #c9c9c9 !important;color: #000 !important; font-family: 'Waiting for the Sunrise', arial, serif;font-size: 23px; line-height: 28px; width: 100%;display: block;height: auto;margin: 0;padding: 0;}
.bloggerknown-ftw3-spacing {padding: 25px;}
strong {font-weight: bold;}
.bloggerknown-ftw3-footer {width: 100%;display: block;margin: 0;}
.ftw3-graphics-paperclip {position: absolute;top: -20px;right: 5px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgavYJEqrWs0W-JdpE9hZpxC0YKTqVPip7xtxUHczDc9778mrRqkM4lQEtz5QLD91XHqeXfhyphenhyphen8v8ra6ZyEfGcwXRNA8axsKTtDiA4__7Mm1T8dt6ias1MigYDEPE04hyphenhyphenKN4bwdXhPpAqhI/s1600/ftw-paperclip-oldschool.png) no-repeat top center;height: 65px;width: 45px;}
.bloggekrnown-ftw3-footer-left {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR4jZXNN4H2GKswquXmFX7oZe2zbUPSS1Qho45iIo9YGQuE_pKrdHoq4HES2NBLwJKdHiLFMLbXwHimfwevmzppzgDzmGkDQwgGp4AKHyDTQ5rCnlWhcwH89meah6JoIX3htQQFUfakAc/s1600/ftw-footer-left.png) no-repeat top center;height: 12px;width: 92px;float: left;position: relative;z-index: 5;}
.bloggerknown-ftw3-footer-right {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh22jGogszkD-GueZGzfwEZMV3HkKaBz-k0rsUKmo3tRzg0RQQeS7TD8PKsrWiJ9TvYqouz8n1Su4SlBVf2gg5V0ItcPtDr5E3lMCfJPR25H97FKn4Al4IOaSZFThnkDu8jRjSH0_0WEJ8/s1600/ftw-footer-right.png) no-repeat top center;height: 12px;width: 92px;float: right;position: relative;z-index: 5;}
</style>
<div class="bloggerknown-ftw3">
<div class="bloggerknown-ftw3-container">
<div class="bloggerknown-ftw3-spacing">
<strong>Widget title</strong><br />
You are reading text inside a fancy text widget. There's no real purpose to it. It's just <strong>fancy</strong>
</div>
</div>
<div class="bloggerknown-ftw3-footer"><div class="bloggekrnown-ftw3-footer-left"></div><div class="bloggerknown-ftw3-footer-right"></div></div>
<div class="ftw3-graphics-paperclip ftw3-graphics-right"></div>
</div>

<style type="text/css">
@font-face {font-family: 'Just Another Hand';font-style: normal;font-weight: 400;src: local('Just Another Hand'), local('JustAnotherHand-Regular'), url(http://themes.googleusercontent.com/static/fonts/justanotherhand/v4/fKV8XYuRNNagXr38eqbRf8DbBFScDQWNirGEA9Q9Yto.woff) format('woff');}
.bloggerknown-ftw4 {position: relative;width: 100%;height: auto;display: block;clear: both;margin-top: 15px;margin-bottom: 10px;}
.bloggerknown-ftw4-container { position: relative; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnOv4GZgSrdyPWH3dpeIWxYXuYJfqI9unCFhUDD4l8UPOKXHhM8qQV_o2Lc_3zWPiqCmhCst_cjaQQ_jeT6y3eJlozWgXvTGpi9_xE5Z-pP4IFiWIzMB2ymhBqpGx1Zq6JWb0mUWRcdx4/s1600/ftw-body-sand-paper-1.png) repeat; background-color: #e88523 !important;color: #fff !important; font-family: 'Just Another Hand', arial, serif;font-size: 27px;line-height: 32px; width: 100%;display: block;height: auto;margin: 0;padding: 0;}
.bloggerknown-ftw4-spacing {padding: 25px;}
strong {font-weight: bold;}
.bloggerknown-ftw4-footer {width: 100%;display: block;margin: 0;}
.ftw4-graphics-paperclip {position: absolute;top: 5px;right: 5px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1nMyNhuGj-arUyIFrjx6Ws_lY2KigpgiePg3HkLsLMZ3g_0ceTuvzQhX_rDg1F71xhk2OqoeXV35mk9CE_AoVBGwtbSbJV-LVafxDKKUOQ2PlmRgMuDp5kGfMplcSGol1Ua9ZWztq-Us/s1600/ftw-pin-white.png) no-repeat top center;height: 65px;width: 45px;}
.bloggekrnown-ftw4-footer-left {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR4jZXNN4H2GKswquXmFX7oZe2zbUPSS1Qho45iIo9YGQuE_pKrdHoq4HES2NBLwJKdHiLFMLbXwHimfwevmzppzgDzmGkDQwgGp4AKHyDTQ5rCnlWhcwH89meah6JoIX3htQQFUfakAc/s1600/ftw-footer-left.png) no-repeat top center;height: 12px;width: 92px;float: left;position: relative;z-index: 5;}
.bloggerknown-ftw4-footer-right {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh22jGogszkD-GueZGzfwEZMV3HkKaBz-k0rsUKmo3tRzg0RQQeS7TD8PKsrWiJ9TvYqouz8n1Su4SlBVf2gg5V0ItcPtDr5E3lMCfJPR25H97FKn4Al4IOaSZFThnkDu8jRjSH0_0WEJ8/s1600/ftw-footer-right.png) no-repeat top center;height: 12px;width: 92px;float: right;position: relative;z-index: 5;}
</style>
<div class="bloggerknown-ftw4">
<div class="bloggerknown-ftw4-container">
<div class="bloggerknown-ftw4-spacing">
<strong>Widget title</strong><br />
You are reading text inside a fancy text widget. There's no real purpose to it. It's just <strong>fancy</strong>
</div>
</div>
<div class="bloggerknown-ftw4-footer"><div class="bloggekrnown-ftw4-footer-left"></div><div class="bloggerknown-ftw4-footer-right"></div></div>
<div class="ftw4-graphics-paperclip ftw4-graphics-right"></div>
</div>

<style type="text/css">
@font-face {font-family: 'Annie Use Your Telescope';font-style: normal;font-weight: 400;src: local('Annie Use Your Telescope'), local('AnnieUseYourTelescope'), url(http://themes.googleusercontent.com/static/fonts/annieuseyourtelescope/v3/2cuiO5VmaR09C8SLGEQjGgtSTT_xyPSRqbb82lxMsRH3rGVtsTkPsbDajuO5ueQw.woff) format('woff');}
.bloggerknown-ftw5 {position: relative;width: 100%;height: auto;display: block;clear: both;margin-top: 15px;margin-bottom: 10px;}
.bloggerknown-ftw5-container { position: relative; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKmtjUVpneNnu6xbExI5nXVItcC605gK69uv4f2sNaJdZkl_gDlAyP0aoEOlzsyiL3HBn0xuOdbQBXPTk79ylX8CNdyJ4Zp9B68Mx39CNX24GZ9JAjmKsRQiiNY0bZup7aNg9kwiSNqc0/s1600/ftw-body-horizontal-lines-paper.png) repeat; background-color: #b01515 !important;color: #fff !important; font-family: 'Annie Use Your Telescope', arial, serif;font-size: 23px;line-height: 28px; width: 100%;display: block;height: auto;margin: 0;padding: 0;}
.bloggerknown-ftw5-spacing {padding: 25px;}
strong {font-weight: bold;}
.bloggerknown-ftw5-footer {width: 100%;display: block;margin: 0;}
.ftw5-graphics-paperclip {position: absolute;top: 5px;right: 5px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK5sTIjFvXxCx8jvVSK6ukiM2QAq6AlvVFpD8QZEF0gdiKlPp-zkdDTQbUXHViFa8EUlKKA0XQrkUXuQ3oKkpEfK3_auLpUauyArBmnbZ5XMUHY9rsPQX2WfUPL8Y4kUGxGm6Vc95D80g/s1600/ftw-pin-green.png) no-repeat top center;height: 65px;width: 45px;}
.bloggekrnown-ftw5-footer-left {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR4jZXNN4H2GKswquXmFX7oZe2zbUPSS1Qho45iIo9YGQuE_pKrdHoq4HES2NBLwJKdHiLFMLbXwHimfwevmzppzgDzmGkDQwgGp4AKHyDTQ5rCnlWhcwH89meah6JoIX3htQQFUfakAc/s1600/ftw-footer-left.png) no-repeat top center;height: 12px;width: 92px;float: left;position: relative;z-index: 5;}
.bloggerknown-ftw5-footer-right {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh22jGogszkD-GueZGzfwEZMV3HkKaBz-k0rsUKmo3tRzg0RQQeS7TD8PKsrWiJ9TvYqouz8n1Su4SlBVf2gg5V0ItcPtDr5E3lMCfJPR25H97FKn4Al4IOaSZFThnkDu8jRjSH0_0WEJ8/s1600/ftw-footer-right.png) no-repeat top center;height: 12px;width: 92px;float: right;position: relative;z-index: 5;}
</style>
<div class="bloggerknown-ftw5">
<div class="bloggerknown-ftw5-container">
<div class="bloggerknown-ftw5-spacing">
<strong>Widget title</strong><br />
You are reading text inside a fancy text widget. There's no real purpose to it. It's just <strong>fancy</strong>
</div>
</div>
<div class="bloggerknown-ftw5-footer"><div class="bloggekrnown-ftw5-footer-left"></div><div class="bloggerknown-ftw5-footer-right"></div></div>
<div class="ftw5-graphics-paperclip ftw5-graphics-right"></div>
</div>

<style type="text/css">
@font-face {font-family: 'Annie Use Your Telescope';font-style: normal;font-weight: 400;src: local('Annie Use Your Telescope'), local('AnnieUseYourTelescope'), url(http://themes.googleusercontent.com/static/fonts/annieuseyourtelescope/v3/2cuiO5VmaR09C8SLGEQjGgtSTT_xyPSRqbb82lxMsRH3rGVtsTkPsbDajuO5ueQw.woff) format('woff');}
.bloggerknown-ftw6 {position: relative;width: 100%;height: auto;display: block;clear: both;margin-top: 15px;margin-bottom: 10px;}
.bloggerknown-ftw6-container { position: relative; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKEskq5Y13GvDzK8E4pJAd5zUpNAUHukunW63TYH-ItpTaCPVtvcDObGNXMEyBu4AopWcRica23Ba08wLW1N_oOm7hsy7iUHQmkbLEp6URzJy3UKqgByf5UifDEVN5jRkDXUY9pf9QcyU/s1600/ftw-body-sand-paper-2.png) repeat; background-color: #f6ea01 !important;color: #000 !important;  width: 100%;display: block;height: auto;margin: 0;padding: 0;}
.bloggerknown-ftw6-spacing {padding: 25px;}
strong {font-weight: bold;}
.bloggerknown-ftw6-footer {width: 100%;display: block;margin: 0;}
.ftw6-graphics-paperclip {position: absolute;top: -10px;right: 5px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPZIEnDD32aNpmxS7LlVSjDezjR_3AKqfTk17rhS5VWOGhHHpZbwCYYDfxaZfGy1YkayGUWP5kAr1U77NeglkgBcg_RR7yMWwJjhNe6dzrMmoWyc_qiV-rcM4w8o3DOXv7s1w_ZRu18q8/s1600/ftw-tape-1.png) no-repeat top center;height: 65px;width: 23px;}
.bloggekrnown-ftw6-footer-left {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR4jZXNN4H2GKswquXmFX7oZe2zbUPSS1Qho45iIo9YGQuE_pKrdHoq4HES2NBLwJKdHiLFMLbXwHimfwevmzppzgDzmGkDQwgGp4AKHyDTQ5rCnlWhcwH89meah6JoIX3htQQFUfakAc/s1600/ftw-footer-left.png) no-repeat top center;height: 12px;width: 92px;float: left;position: relative;z-index: 5;}
.bloggerknown-ftw6-footer-right {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh22jGogszkD-GueZGzfwEZMV3HkKaBz-k0rsUKmo3tRzg0RQQeS7TD8PKsrWiJ9TvYqouz8n1Su4SlBVf2gg5V0ItcPtDr5E3lMCfJPR25H97FKn4Al4IOaSZFThnkDu8jRjSH0_0WEJ8/s1600/ftw-footer-right.png) no-repeat top center;height: 12px;width: 92px;float: right;position: relative;z-index: 5;}
</style>
<div class="bloggerknown-ftw6">
<div class="bloggerknown-ftw6-container">
<div class="bloggerknown-ftw6-spacing">
<strong>Widget title</strong><br />
You are reading text inside a fancy text widget. There's no real purpose to it. It's just <strong>fancy</strong>
</div>
</div>
<div class="bloggerknown-ftw6-footer"><div class="bloggekrnown-ftw6-footer-left"></div><div class="bloggerknown-ftw6-footer-right"></div></div>
<div class="ftw6-graphics-paperclip ftw6-graphics-right"></div>
</div>

background-color: #xxxxxx !important; change background color with Hex colore picker
color: #xxxxxx !important; change font color with Hex colore picker
You can also use the one background for others and also change fonts if you know some coding , Thanks

Credit: http://fancy-text-widget.webfactoryltd.com