Animation Contact form Widget Add For Blogger Site !

<div dir="ltr" style="text-align: left;" trbidi="on"> <img alt="new-animation-contact-form-blogger-foxtrickbd.blogspot.com" height="412" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGAhzml228QNdvtyjDnZtYb0kMw3_v20-VWeFuc8GOnz5FwCWE4L19isQS1aeQan3OrosnoJoIhw89C5EFYElQZVWEA9zMu4AJpnutUJwCAon2lhDGvhBgVyUfkdxusUhnTrKiMWFXj3E/s640/animation-contact-form-blogger.jpg" title="Animation Contact form Widget Add For Blogger Blog " width="640" /><br /> <br /> <span class="notranslate" style="background-color: yellow; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">Contact oyedageta</span><span class="notranslate" style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"> add animation to your Blogger blog?</span><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"> </span><span class="notranslate" style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">Yes, you have seen and read the title right.</span><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"> </span><span class="notranslate" style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">In fact, today I will share with you a very interesting oyedageta contact form.</span><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"> </span><span class="notranslate" style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">This contact form is very easy if you use your blog for your visitors to your blog, you can send mail to the massage.</span><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"> </span><span class="notranslate" style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">Hopefully, we all know it, before I posted, and there are several contact to discuss details of the chest oyedageta have so much to say nothing.</span><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"></span><span class="notranslate" style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">Because it is nothing new, just the style and CSS effects, the new, the rest of the work all the same.</span><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"> </span><span class="notranslate" style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;">So let's take a look at how you can use the contact form on your blogspot blog, beautiful animation.</span><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"> </span><br /> <span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;"><br /></span> <div dir="ltr" style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2000007629395px;" trbidi="on"> <div dir="ltr" trbidi="on"> <div dir="ltr" trbidi="on"> <div dir="ltr" trbidi="on"> <h2 style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcuCuyZ7xKAEr3DK50F5bGS3WGRMh_U92H1tIrkVbLu6fyx-P8sqkWkicOK2PX5exFX837K9GaZtWrifp9FHU1GQWtBbQATQ0iEE7ggor6jM0QkDwI0R5Q51RCo3SEBau1fVGplc8tEZs/s32-no/esobondhu.png) 10px 50% no-repeat scroll rgb(52, 52, 52); border: 1px dashed rgb(73, 158, 254); color: white; font-family: Lobster, cursive; font-size: 20px; font-stretch: normal; font-weight: normal; line-height: normal; margin: 10px 0px; outline: rgb(52, 52, 52) solid 4px; padding: 0px 1px 4px 45px; text-shadow: rgb(0, 0, 0) 1px 1px 0px; text-transform: capitalize;"> <span class="notranslate">Contact Form Oyedageta Add Animation To Your Blogger Blog?</span></h2> <br /><br /><span class="notranslate">First login to your Blogger account and click the Layout from the dashboard, click the Add a Gadget.</span> <span class="notranslate">Ekhuna More Gadget From there you can click on the pages to come, see and be seen as an option to the right side, click on the Contact Form.</span><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU7-6BcVcu6FX_FARNrcYLP_CjI08JC1jaLxix6fQFt9-RTJ3EVDyede3qp5OBW-LhXx4XZTRst9z9B18Uur4k__GPro5rQCpuexCTWwStsc7QXqM6T3_NstcN0XoP7M54GJasWzYtTGo/s1600/animation-contact-form-blogger-blog.png" imageanchor="1" style="color: #999999; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="nice-contact-form-with-blogger-site-foxtrickbd" border="0" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU7-6BcVcu6FX_FARNrcYLP_CjI08JC1jaLxix6fQFt9-RTJ3EVDyede3qp5OBW-LhXx4XZTRst9z9B18Uur4k__GPro5rQCpuexCTWwStsc7QXqM6T3_NstcN0XoP7M54GJasWzYtTGo/s400/animation-contact-form-blogger-blog.png" style="-webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(211, 211, 211); height: auto; max-width: 95%; padding: 4px; transition: all 0.4s ease-in-out;" title="Contact form oyedageta add animation to your Blogger blog!" width="400" /></a></div> <br /><br /><span class="notranslate"><b>Tamplate</b> to your dashboard and click on the <b>Edit HTML</b> and click.</span> <span class="notranslate">Now <b>press CTRL + F</b> on your keyboard to<b>this]]> </ b: skin></b> tag search.</span> <span class="notranslate">This tag is associated with the following line karedina.</span><br /><br /><br /><blockquote class="tr_bq" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBl8U_qOGAZegKrsUU715Ugtebe0ndliiAHuuImuQbMlIKPKipQBQDcQBmu5VFCRR0I0a4RiXP4t_K5-E6zIPGBWpMEGLJOK7yEIU7tco3DevJLkspXR0XXfvU91TUF6tmfDBh76r4z11j/s1600/quotation-l.png) 0% 5px no-repeat; font-size: 13.1999998092651px; line-height: 1.6em; margin: 20px; opacity: 0.75; padding-left: 40px;"> <span class="notranslate"><span style="color: #0b5394;"><b># ContactForm1 {display: none}</b></span></span></blockquote> <br /></div> <div class="message_box warning" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikCWpzHu2H55gOC8nTULL7mtPx3e9iPpjkMhVULvQuM7JrcOUo9olp9LOZP3E9YAxaqqLEMUslcZZFnc_g6_XTzZ1FRTRpiZECM0PSfAIbohm4FJ3IiwjpTxS6hml9NHyw1vmsa-ZAd8Z8/s1600/asobondhu+warning.png) 10px 50% no-repeat scroll rgb(255, 231, 231); border: 1px solid rgb(255, 219, 219); color: #666666; font-family: 'Open Sans'; font-size: 16px; margin: 15px 0px; padding: 0.5em 1em 0.5em 3em;"> <span class="notranslate">If you are already using this system to your blog if you do not do this at the top of the Contact Form at the top of the Keep Already added up and the top of it, so do not see anything below the top of the steps to see if.</span></div> <br /><br /><span class="notranslate">Return to the Dashboard and click <b>Pages</b> in the contact form where you want to go there.</span> <span class="notranslate">Click on the <b>New page.</b></span> <span class="notranslate">Pages from a <b>HTML</b> tab and click the box below to enter codes rose empty house.</span><br /><br /></div> <pre class="line-numbers language-css" data-codetype="CSS" style="background-color: #222222; border-radius: 3px; counter-reset: linenumber 0; margin-bottom: 0.5em; margin-top: 0.5em; max-height: 500px; overflow: auto; padding: 35px 10px 10px 3em; position: relative; word-wrap: break-word;" title="CSS"><code class=" language-css" style="background: none; border: none; color: #c2bfd2; direction: ltr; display: block; font-family: Arimo, sans-serif; font-size: 13px; font-weight: bold; line-height: 16px; padding: 10px; position: relative; word-spacing: normal;"><span class="token selector" style="color: #00a1d6;"><style> #wrap-contact </span><span class="token punctuation" style="color: #777777;">{</span><span class="token property" style="color: #d75046;">width</span><span class="token punctuation" style="color: #777777;">:</span>530px<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">margin</span><span class="token punctuation" style="color: #777777;">:</span>20px auto 0<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">height</span><span class="token punctuation" style="color: #777777;">:</span>auto<span class="token punctuation" style="color: #777777;">;</span><span class="token punctuation" style="color: #777777;">}</span> <span class="token selector" style="color: #00a1d6;">#form_wrap-contact </span><span class="token punctuation" style="color: #777777;">{</span> <span class="token property" style="color: #d75046;">overflow</span><span class="token punctuation" style="color: #777777;">:</span>hidden<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">height</span><span class="token punctuation" style="color: #777777;">:</span>446px<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">position</span><span class="token punctuation" style="color: #777777;">:</span>relative<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">top</span><span class="token punctuation" style="color: #777777;">:</span>0px<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">-webkit-transition</span><span class="token punctuation" style="color: #777777;">:</span> all 1s ease-in-out .3s<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">-moz-transition</span><span class="token punctuation" style="color: #777777;">:</span> all 1s ease-in-out .3s<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">-o-transition</span><span class="token punctuation" style="color: #777777;">:</span> all 1s ease-in-out .3s<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">transition</span><span class="token punctuation" style="color: #777777;">:</span> all 1s ease-in-out .3s<span class="token punctuation" style="color: #777777;">;</span><span class="token punctuation" style="color: #777777;">}</span> <span class="token selector" style="color: #00a1d6;">#form_wrap-contact:before </span><span class="token punctuation" style="color: #777777;">{</span><span class="token property" style="color: #d75046;">content</span><span class="token punctuation" style="color: #777777;">:</span><span class="token string" style="color: #5ac954;">""</span><span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">position</span><span class="token punctuation" style="color: #777777;">:</span>absolute<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">bottom</span><span class="token punctuation" style="color: #777777;">:</span>128px<span class="token punctuation" style="color: #777777;">;</span><span class="token property" style="color: #d75046;">left</span><span class="token punctuation" style="color: #777777;">:</span>0px<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">background</span><span class="token punctuation" style="color: #777777;">:</span><span class="token url" style="color: #5ac954;">url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHYLyun9UaNymgrUQlylx2LRcGLBArEwbb9PftRqQJiFPEhZGw2EZ3A9r1CNbG9MAayfO5gbki2tQLdcDiZGEEKjIU59UasWsHC1jMrtKXdAg_RnCknEA93wis9ngBFISSny1N8PN0DWs/s1600/before.png')</span><span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">width</span><span class="token punctuation" style="color: #777777;">:</span>530px<span class="token punctuation" style="color: #777777;">;</span><span class="token property" style="color: #d75046;">height</span><span class="token punctuation" style="color: #777777;">:</span> 316px<span class="token punctuation" style="color: #777777;">;</span><span class="token punctuation" style="color: #777777;">}</span> <span class="token selector" style="color: #00a1d6;">#form_wrap-contact:after </span><span class="token punctuation" style="color: #777777;">{</span><span class="token property" style="color: #d75046;">content</span><span class="token punctuation" style="color: #777777;">:</span><span class="token string" style="color: #5ac954;">""</span><span class="token punctuation" style="color: #777777;">;</span><span class="token property" style="color: #d75046;">position</span><span class="token punctuation" style="color: #777777;">:</span>absolute<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">bottom</span><span class="token punctuation" style="color: #777777;">:</span>0px<span class="token punctuation" style="color: #777777;">;</span><span class="token property" style="color: #d75046;">left</span><span class="token punctuation" style="color: #777777;">:</span>0<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">background</span><span class="token punctuation" style="color: #777777;">:</span><span class="token url" style="color: #5ac954;">url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqFAeIs3CWcIbI1Pkoqm-8QE4CE13zozPOVM6_f1iUbw5FHwH87TIVGwadFbxHJigWqZ1IRJ4QTCujAAOY_HgNY1ABgF1tXXAbss3tcgyZFCcYrij_FN1bHFEw3inlSZsAJhSKbGmd93w/s1600/after.png')</span><span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">width</span><span class="token punctuation" style="color: #777777;">:</span>530px<span class="token punctuation" style="color: #777777;">;</span><span class="token property" style="color: #d75046;">height</span><span class="token punctuation" style="color: #777777;">:</span> 260px<span class="token punctuation" style="color: #777777;">;</span> <span class="token punctuation" style="color: #777777;">}</span> <span class="token selector" style="color: #00a1d6;">#form_wrap-contact.hide:after, #form_wrap-contact.hide:before </span><span class="token punctuation" style="color: #777777;">{</span><span class="token property" style="color: #d75046;">display</span><span class="token punctuation" style="color: #777777;">:</span>none<span class="token punctuation" style="color: #777777;">;</span> <span class="token punctuation" style="color: #777777;">}</span> <span class="token selector" style="color: #00a1d6;">#form_wrap-contact:hover </span><span class="token punctuation" style="color: #777777;">{</span><span class="token property" style="color: #d75046;">height</span><span class="token punctuation" style="color: #777777;">:</span>776px<span class="token punctuation" style="color: #777777;">;</span><span class="token property" style="color: #d75046;">top</span><span class="token punctuation" style="color: #777777;">:</span>-200px<span class="token punctuation" style="color: #777777;">;</span><span class="token punctuation" style="color: #777777;">}</span> <span class="token selector" style="color: #00a1d6;">#contact-form </span><span class="token punctuation" style="color: #777777;">{</span><span class="token property" style="color: #d75046;">background</span><span class="token punctuation" style="color: #777777;">:</span>#0277bd<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">position</span><span class="token punctuation" style="color: #777777;">:</span>relative<span class="token punctuation" style="color: #777777;">;</span><span class="token property" style="color: #d75046;">top</span><span class="token punctuation" style="color: #777777;">:</span>200px<span class="token punctuation" style="color: #777777;">;</span><span class="token property" style="color: #d75046;">overflow</span><span class="token punctuation" style="color: #777777;">:</span>hidden<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">height</span><span class="token punctuation" style="color: #777777;">:</span>200px<span class="token punctuation" style="color: #777777;">;</span><span class="token property" style="color: #d75046;">width</span><span class="token punctuation" style="color: #777777;">:</span>450px<span class="token punctuation" style="color: #777777;">;</span><span class="token property" style="color: #d75046;">margin</span><span class="token punctuation" style="color: #777777;">:</span>0px auto<span class="token punctuation" style="color: #777777;">;</span><span class="token property" style="color: #d75046;">padding</span><span class="token punctuation" style="color: #777777;">:</span>20px<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">border</span><span class="token punctuation" style="color: #777777;">:</span> 1px solid #00b0ff<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">box-shadow</span><span class="token punctuation" style="color: #777777;">:</span> 0px 0px 5px #00b0ff<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">-webkit-transition</span><span class="token punctuation" style="color: #777777;">:</span> all 1s ease-in-out .3s<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">-moz-transition</span><span class="token punctuation" style="color: #777777;">:</span> all 1s ease-in-out .3s<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">-o-transition</span><span class="token punctuation" style="color: #777777;">:</span> all 1s ease-in-out .3s<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">transition</span><span class="token punctuation" style="color: #777777;">:</span> all 1s ease-in-out .3s<span class="token punctuation" style="color: #777777;">;</span><span class="token punctuation" style="color: #777777;">}</span> <span class="token selector" style="color: #00a1d6;">#contact-form:hover </span><span class="token punctuation" style="color: #777777;">{</span><span class="token property" style="color: #d75046;">height</span><span class="token punctuation" style="color: #777777;">:</span>530px<span class="token punctuation" style="color: #777777;">;</span><span class="token punctuation" style="color: #777777;">}</span> <span class="token selector" style="color: #00a1d6;">#ContactForm1_contact-form-name</span><span class="token punctuation" style="color: #777777;">{</span> <span class="token property" style="color: #d75046;">width</span><span class="token punctuation" style="color: #777777;">:</span> 399px<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">height</span><span class="token punctuation" style="color: #777777;">:</span>auto<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">margin</span><span class="token punctuation" style="color: #777777;">:</span> 5px auto<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">padding</span><span class="token punctuation" style="color: #777777;">:</span> 10px 10px 10px 40px<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">background</span><span class="token punctuation" style="color: #777777;">:</span>#000 <span class="token url" style="color: #5ac954;">url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyDfGf1ko_F2RyTCw18gt0IUFiukJDF6t6lGNe8mZ8D7b8uZLuWV6-DxtJwjF0yY83Oc5V5ugSpScRaMFYvYGud0IXClfTvg7SHR89efxx9sNR8ridd8ir0X0JQv4sUi3GWimKmGHTGVA/s1600/user.png)</span>no-repeat 10px center<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">color</span><span class="token punctuation" style="color: #777777;">:</span>#00b0ff<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">border</span><span class="token punctuation" style="color: #777777;">:</span>1px solid #00b0ff<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">box-shadow</span><span class="token punctuation" style="color: #777777;">:</span> 1px 1px 10px #00b0ff inset<span class="token punctuation" style="color: #777777;">;</span> <span class="token punctuation" style="color: #777777;">}</span> <span class="token selector" style="color: #00a1d6;">#ContactForm1_contact-form-email</span><span class="token punctuation" style="color: #777777;">{</span> <span class="token property" style="color: #d75046;">width</span><span class="token punctuation" style="color: #777777;">:</span> 399px<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">height</span><span class="token punctuation" style="color: #777777;">:</span>auto<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">margin</span><span class="token punctuation" style="color: #777777;">:</span> 5px auto<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">padding</span><span class="token punctuation" style="color: #777777;">:</span> 10px 10px 10px 40px<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">background</span><span class="token punctuation" style="color: #777777;">:</span> #000 <span class="token url" style="color: #5ac954;">url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_oADyZotj_3v1muY2K4dvlDgzvzoRkLeDJRNRIVRjV0IvAFP5Q3RO_1Kbje_o5Akb5qPewjC7BIWFBOitM8-FKd1JrJYET7s_75wJ7djrOm-15_rcAFVD5pcXy6M66hTpbBEy3wDoBaY/s1600/pen.png)</span>no-repeat 10px center<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">color</span><span class="token punctuation" style="color: #777777;">:</span>#00b0ff<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">border</span><span class="token punctuation" style="color: #777777;">:</span>1px solid #00b0ff<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">box-shadow</span><span class="token punctuation" style="color: #777777;">:</span> 1px 1px 10px #00b0ff inset<span class="token punctuation" style="color: #777777;">;</span> <span class="token punctuation" style="color: #777777;">}</span> <span class="token selector" style="color: #00a1d6;">#ContactForm1_contact-form-email-message</span><span class="token punctuation" style="color: #777777;">{</span> <span class="token property" style="color: #d75046;">width</span><span class="token punctuation" style="color: #777777;">:</span> 399px<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">height</span><span class="token punctuation" style="color: #777777;">:</span> 150px<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">margin</span><span class="token punctuation" style="color: #777777;">:</span> 5px auto<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">padding</span><span class="token punctuation" style="color: #777777;">:</span> 10px 10px 10px 40px<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">background</span><span class="token punctuation" style="color: #777777;">:</span> #000 <span class="token url" style="color: #5ac954;">url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSWEp5O2CIi2C4sNj-to4JqWnL_RYsHllx2B45ivpkS4x-tZvHdWKEcgRKDcqFpkeRo7Tb8vdqcnlfHkkyzRLd7CssWsxeRqM3mZOzNS9jFrYmEdSAjJHzpNvzyPU9bnhLxXUdreGvVMw/s1600/msg.png)</span>no-repeat 10px 10px<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">color</span><span class="token punctuation" style="color: #777777;">:</span>#FFFFFF<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">border</span><span class="token punctuation" style="color: #777777;">:</span>1px solid #00b0ff<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">box-shadow</span><span class="token punctuation" style="color: #777777;">:</span> 1px 1px 10px #00b0ff inset<span class="token punctuation" style="color: #777777;">;</span> <span class="token punctuation" style="color: #777777;">}</span> <span class="token selector" style="color: #00a1d6;">#ContactForm1_contact-form-submit </span><span class="token punctuation" style="color: #777777;">{</span> <span class="token property" style="color: #d75046;">width</span><span class="token punctuation" style="color: #777777;">:</span> 450px<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">height</span><span class="token punctuation" style="color: #777777;">:</span> 30px<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">color</span><span class="token punctuation" style="color: #777777;">:</span> #000<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">font-weight</span><span class="token punctuation" style="color: #777777;">:</span> bold<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">padding</span><span class="token punctuation" style="color: #777777;">:</span> 0<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">cursor</span><span class="token punctuation" style="color: #777777;">:</span>pointer<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">margin</span><span class="token punctuation" style="color: #777777;">:</span> 25px 0 3px 0 0<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">background-color</span><span class="token punctuation" style="color: #777777;">:</span>#00b0ff<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">text-shadow</span><span class="token punctuation" style="color: #777777;">:</span> 1px 0 0 #ede7f6<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">border</span><span class="token punctuation" style="color: #777777;">:</span>1px solid DodgerBlue <span class="token punctuation" style="color: #777777;">;</span> <span class="token punctuation" style="color: #777777;">}</span> <span class="token selector" style="color: #00a1d6;">#ContactForm1_contact-form-submit:hover </span><span class="token punctuation" style="color: #777777;">{</span> <span class="token property" style="color: #d75046;">background</span><span class="token punctuation" style="color: #777777;">:</span>#000000<span class="token punctuation" style="color: #777777;">;</span> <span class="token punctuation" style="color: #777777;">}</span> <span class="token selector" style="color: #00a1d6;">#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message</span><span class="token punctuation" style="color: #777777;">{</span> <span class="token property" style="color: #d75046;">width</span><span class="token punctuation" style="color: #777777;">:</span> 400px<span class="token punctuation" style="color: #777777;">;</span> <span class="token property" style="color: #d75046;">margin-top</span><span class="token punctuation" style="color: #777777;">:</span>30px<span class="token punctuation" style="color: #777777;">;</span> <span class="token punctuation" style="color: #777777;">}</span> <span class="token ignore"><</span>/style<span class="token ignore">></span><span class="line-numbers-rows" style="-webkit-user-select: none; background: rgb(42, 42, 42); border-right-color: rgb(58, 58, 58); border-right-style: solid; border-right-width: 1px; height: 500px; left: -3.5em; padding: 10px 0px 0px; position: absolute; top: 0px; width: 3.5em;"><span style="counter-increment: linenumber 1; display: block;"></span></span></code> </pre> <br /><pre class="line-numbers language-markup" data-codetype="HTML" style="background-color: #222222; border-radius: 3px; counter-reset: linenumber 0; margin-bottom: 0.5em; margin-top: 0.5em; max-height: 500px; overflow: auto; padding: 35px 10px 10px 3em; position: relative; word-wrap: break-word;" title="HTML"> <code class=" language-markup" style="background: none; border: none; color: #c2bfd2; direction: ltr; display: block; font-family: Arimo, sans-serif; font-size: 13px; font-weight: bold; line-height: 16px; padding: 10px; position: relative; word-spacing: normal;"><span class="token tag" style="color: #d75046;"><span class="token tag"><span class="token punctuation" style="color: #777777;"><</span>div</span> <span class="token attr-name" style="color: #00a1d6;">id</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>"wrap-contact"</span><span class="token punctuation" style="color: #777777;">></span></span> <span class="token tag" style="color: #d75046;"><span class="token tag"><span class="token punctuation" style="color: #777777;"><</span>div</span> <span class="token attr-name" style="color: #00a1d6;">id</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>"form_wrap-contact"</span><span class="token punctuation" style="color: #777777;">></span></span> <span class="token tag" style="color: #d75046;"><span class="token tag"><span class="token punctuation" style="color: #777777;"><</span>form</span> <span class="token attr-name" style="color: #00a1d6;">id</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>"contact-form"</span><span class="token punctuation" style="color: #777777;">></span></span> <span class="token tag" style="color: #d75046;"><span class="token tag"><span class="token punctuation" style="color: #777777;"><</span>input</span> <span class="token attr-name" style="color: #00a1d6;">id</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>"ContactForm1_contact-form-name"</span> <span class="token attr-name" style="color: #00a1d6;">name</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>"name"</span> <span class="token attr-name" style="color: #00a1d6;">placeholder</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>"Name"</span> <span class="token attr-name" style="color: #00a1d6;">size</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>"30"</span> <span class="token attr-name" style="color: #00a1d6;">type</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>"text"</span> <span class="token attr-name" style="color: #00a1d6;">value</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>""</span> <span class="token punctuation" style="color: #777777;">/></span></span> <span class="token tag" style="color: #d75046;"><span class="token tag"><span class="token punctuation" style="color: #777777;"><</span>input</span> <span class="token attr-name" style="color: #00a1d6;">id</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>"ContactForm1_contact-form-email"</span> <span class="token attr-name" style="color: #00a1d6;">name</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>"email"</span> <span class="token attr-name" style="color: #00a1d6;">placeholder</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>"Email Address"</span> <span class="token attr-name" style="color: #00a1d6;">size</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>"30"</span> <span class="token attr-name" style="color: #00a1d6;">type</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>"text"</span> <span class="token attr-name" style="color: #00a1d6;">value</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>""</span> <span class="token punctuation" style="color: #777777;">/></span></span> <span class="token tag" style="color: #d75046;"><span class="token tag"><span class="token punctuation" style="color: #777777;"><</span>textarea</span> <span class="token attr-name" style="color: #00a1d6;">cols</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>"25"</span> <span class="token attr-name" style="color: #00a1d6;">id</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>"ContactForm1_contact-form-email-message"</span> <span class="token attr-name" style="color: #00a1d6;">name</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>"email-message"</span> <span class="token attr-name" style="color: #00a1d6;">placeholder</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>"Content"</span> <span class="token attr-name" style="color: #00a1d6;">rows</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>"5"</span><span class="token punctuation" style="color: #777777;">></span></span><span class="token tag" style="color: #d75046;"><span class="token tag"><span class="token punctuation" style="color: #777777;"></</span>textarea</span><span class="token punctuation" style="color: #777777;">></span></span> <span class="token tag" style="color: #d75046;"><span class="token tag"><span class="token punctuation" style="color: #777777;"><</span>input</span> <span class="token attr-name" style="color: #00a1d6;">id</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>"ContactForm1_contact-form-submit"</span> <span class="token attr-name" style="color: #00a1d6;">type</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>"button"</span> <span class="token attr-name" style="color: #00a1d6;">value</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>"Send"</span> <span class="token punctuation" style="color: #777777;">/></span></span> <span class="token tag" style="color: #d75046;"><span class="token tag"><span class="token punctuation" style="color: #777777;"><</span>div</span> <span class="token attr-name" style="color: #00a1d6;">style</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>"max-width: 222px; text-align: center; width: 100%;"</span><span class="token punctuation" style="color: #777777;">></span></span> <span class="token tag" style="color: #d75046;"><span class="token tag"><span class="token punctuation" style="color: #777777;"><</span>div</span> <span class="token attr-name" style="color: #00a1d6;">id</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>"ContactForm1_contact-form-error-message"</span><span class="token punctuation" style="color: #777777;">></span></span> <span class="token tag" style="color: #d75046;"><span class="token tag"><span class="token punctuation" style="color: #777777;"></</span>div</span><span class="token punctuation" style="color: #777777;">></span></span> <span class="token tag" style="color: #d75046;"><span class="token tag"><span class="token punctuation" style="color: #777777;"><</span>div</span> <span class="token attr-name" style="color: #00a1d6;">id</span><span class="token attr-value" style="color: #1baeb0;"><span class="token punctuation" style="color: #777777;">=</span>"ContactForm1_contact-form-success-message"</span><span class="token punctuation" style="color: #777777;">></span></span> <span class="token tag" style="color: #d75046;"><span class="token tag"><span class="token punctuation" style="color: #777777;"></</span>div</span><span class="token punctuation" style="color: #777777;">></span></span> <span class="token tag" style="color: #d75046;"><span class="token tag"><span class="token punctuation" style="color: #777777;"></</span>div</span><span class="token punctuation" style="color: #777777;">></span></span> <span class="token tag" style="color: #d75046;"><span class="token tag"><span class="token punctuation" style="color: #777777;"></</span>form</span><span class="token punctuation" style="color: #777777;">></span></span> <span class="token tag" style="color: #d75046;"><span class="token tag"><span class="token punctuation" style="color: #777777;"></</span>div</span><span class="token punctuation" style="color: #777777;">></span></span> <span class="token tag" style="color: #d75046;"><span class="token tag"><span class="token punctuation" style="color: #777777;"></</span>div</span><span class="token punctuation" style="color: #777777;">></span></span><span class="line-numbers-rows" style="-webkit-user-select: none; background: rgb(42, 42, 42); border-right-color: rgb(58, 58, 58); border-right-style: solid; border-right-width: 1px; height: 148px; left: -3.5em; padding: 10px 0px 0px; position: absolute; top: 0px; width: 3.5em;"><span style="counter-increment: linenumber 1; display: block;"></span></span></code> </pre> <br /><br /><span class="notranslate">Click Publish Post in diameter.</span> <span class="notranslate">Please visit the page to see the hope that it has been successful.</span><br /><br /><br /><div style="text-align: center;"> <span class="notranslate"><span style="font-size: medium;"><b><a href="http://anytipsbd.blogspot.com/">Live Contact Form Demo</a></b></span></span></div> <br /><br /><div> <span class="notranslate" style="line-height: 19.2000007629395px;">I hope you have been in the form and it was no problem!</span><span style="line-height: 19.2000007629395px;"> </span><span class="notranslate" style="line-height: 19.2000007629395px;">Please comment below if you have any kind of problem.</span><span style="line-height: 19.2000007629395px;"> </span><span class="notranslate" style="line-height: 19.2000007629395px;">When I got to be good friends to share it with the post.</span><span style="line-height: 19.2000007629395px;"> </span><span class="notranslate" style="line-height: 19.2000007629395px;">Of course if you really like it, share this post with your friends and do not forget to yanate comment below.</span><span style="line-height: 19.2000007629395px;"> </span><span class="notranslate" style="line-height: 19.2000007629395px;">Have a good day to be healthy.</span><span style="line-height: 19.2000007629395px;"> </span></div> </div> </div> </div>

Animation Contact form Widget Add For Blogger Site !

Contact oyedageta add animation to your Blogger blog?   Yes, you have seen and read the title right.   In fact, today I will share with ...

Read more »

Free Hosting in Google Drive With New Script & New Way

<div dir="ltr" style="text-align: left;" trbidi="on"> <img alt="Script hosting in google drive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVpSaRo3q5p5uzwW9z6HrZf5X_R_LQztNEvMINQkA6tI5wUNBo0L5E5RS6Pm9BFoD5DmR1NDeS6z79Wc9neHx6y7o3RIxx02PkEViJ5vQBmduliq4MsbdMBPMU6rjFiTcHFkH43HlxcC-X/s1600/script.png" /><br /> <br /> <br /> <span style="background-color: white; color: #13243b; font-family: sans-serif; font-size: 16px; line-height: 22.399999618530273px;">Hosting and choosing hosting of a site is too important. Likewise script hosting for a site is also important. If you want to use any script in the blogs and sites, then you should either write those script into the blogger template and site's template or you also can host your script into other platform. But if you want to host, then you need memory or space for which you should pay. But here I just wanna tell you a simple and free way to host any script.</span><br /> <br style="background-color: white; color: #13243b; font-family: sans-serif; font-size: 16px; line-height: 22.399999618530273px;" /> <span style="background-color: white; color: #13243b; font-family: sans-serif; font-size: 16px; line-height: 22.399999618530273px;">You may not know that you can host script freely in Google drive. And this platform is not only easy and free way but also very flexible and hosting in Google drive makes your site faster than hosting in other platforms.</span><br /> <hr style="background-color: white; color: #13243b; font-family: sans-serif; font-size: 16px; line-height: 22.399999618530273px;" /> <h3 style="background-color: white; font-family: sans-serif; font-size: 18px; margin: 0px; padding-bottom: 5px; position: relative;"> How to Host Script into Google Drive?</h3> <hr style="background-color: white; color: #13243b; font-family: sans-serif; font-size: 16px; line-height: 22.399999618530273px;" /> <div style="background-color: white; color: #13243b; font-family: sans-serif; font-size: 16px; line-height: 22.399999618530273px;"> <i>Learn step by step way to host script into Google Drive:-</i></div> <div style="background-color: white; color: #13243b; font-family: sans-serif; font-size: 16px; line-height: 22.399999618530273px;"> <b>Step 01: </b>Login into <a href="https://drive.google.com/" rel="nofollow" style="color: #444444; text-decoration: none;" target="_blank">Google Drive</a>.</div> <div style="background-color: white; color: #13243b; font-family: sans-serif; font-size: 16px; line-height: 22.399999618530273px;"> <b>Step 02: </b>Click on <b>Create</b>>><b>Script</b>.</div> <div style="background-color: white; color: #13243b; font-family: sans-serif; font-size: 16px; line-height: 22.399999618530273px;"> <b>Step 03: </b>Write your script in there.</div> <div style="background-color: white; color: #13243b; font-family: sans-serif; font-size: 16px; line-height: 22.399999618530273px;"> <b>Step 04: </b>Click on run whether it is ready to use or not.</div> <div style="background-color: white; color: #13243b; font-family: sans-serif; font-size: 16px; line-height: 22.399999618530273px;"> <b>Step 05: </b>Finally click on <b>Publish</b>.</div> <div style="background-color: white; color: #13243b; font-family: sans-serif; font-size: 16px; line-height: 22.399999618530273px;"> <br /></div> <div style="background-color: white; color: #13243b; font-family: sans-serif; font-size: 16px; line-height: 22.399999618530273px;"> After clicking publish, there you can get <b>web app URL</b>. That URL you can use in your blogs and sites. If any error occurs, just contact us. Thank you. </div> </div>

Free Hosting in Google Drive With New Script & New Way

Hosting and choosing hosting of a site is too important. Likewise script hosting for a site is also important. If you want to use any sc...

Read more »

How To Add New Style Floating Social Media Profile Sharing Buttons For Blogspot Site

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Add Floating <b>Social Media Sharing Buttons for Blogger</b> to increase the number of social sharing on social networking sites like Twitter, Facebook, Google +1 and other social networks. It is very good and easy way to share your content to directly on social networks sites for your visitor. It has contain many social networking sites like Facebook Like & Facebook share, Twitter Share, Stumble Upon, Google +1, RSS Feed and Digg this with live counter which is show how many times your content share on social networks sites. You can also add more social networks sites as you want to wish to add.</div> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> <br /></div> <div class="separator" style="background-color: white; clear: both; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px; text-align: center;"> <a href="http://www.haakblog.com/2014/10/floating-social-media-sharing-buttons-blogger.html" style="color: #2c64b4; outline: none; text-decoration: none;" target="_blank"><img alt="Floating Social Media Sharing Buttons for Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIag1YelBlyl6NvdFHIQmQQJDZdFpTuaTtwffPKo_j0ZVW38fbiF5id88pS1SB-8s7Dz0c1aNVLjvTvjLnsWxDKTeEDVAh-1nXpK21TMWst8CW00sufCXIDBPOac0sur2N4RpKNxO11e9n/s1600/floating-social-buttons.jpg" style="background: transparent; border: 0px; margin: 0px 4px 0px 0px; padding: 0px;" title="Add Floating Social Media Sharing Buttons To Blogger" /></a></div> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> <br /></div> <h2 style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; line-height: 26px;"> How to Add Floating Social Media Sharing Buttons</h2> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> You can add easily <b><i>Floating Social Media Sharing Buttons For blogger</i></b> with follow below steps:</div> <h3 style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; line-height: 26px;"> Step 1</h3> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Log in into Blogger Dashboard and Go to Layout.</div> <h3 style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; line-height: 26px;"> Step 2</h3> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> After Go to Layout click on Add A Gadget link as shown in below picture.</div> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> <br /></div> <div class="separator" style="background-color: white; clear: both; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px; text-align: center;"> <a href="http://www.haakblog.com/2014/10/floating-social-media-sharing-buttons-blogger.html" style="color: #2c64b4; outline: none; text-decoration: none;" target="_blank"><img alt="Floating Social Media Sharing Buttons" border="0" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin072V0gMhyphenhyphenUE8N-hlhXMzMyJXzVxMdNvZcUD7H1RR-fnIGmTQU5Edl6GQOk7Ols4scTeZZOV3j3s6mreHF5bHSieyadlwCzuAIf-OJMhW8-8pYgSZMl7iS8iMrspga6OeWBssZ2CafUCg/s640/add-a-gadget-screen-.PNG" style="background: transparent; border: 0px; margin: 0px 4px 0px 0px; padding: 0px;" title="Floating Social Media Sharing Buttons" width="640" /></a></div> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> <br /></div> <h3 style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; line-height: 26px;"> Step 3</h3> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> When you click on Add A Gadget link a pop-up window will open scroll down and select HTML/Javascript</div> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> <br /></div> <div class="separator" style="background-color: white; clear: both; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px; text-align: center;"> <a href="http://www.haakblog.com/2014/10/floating-social-media-sharing-buttons-blogger.html" style="color: #2c64b4; outline: none; text-decoration: none;" target="_blank"><img alt="Add Floating Social Media Sharing Buttons for Blogger" border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOact-DlHnrVgZX6xfLhLbLv7pXfftuMmfG7_BglCdrSDXSqNEt3wmWxUc2h8kfcVY0VM6Pplt6OD8zlwoFZWHOgNKSNfbFONQ-Q0aEYmt5iGFdFsgV-db51Uk3elh8zOamQUs1gOgAQes/s400/Add+Feedback+button+2.png" style="background: transparent; border: 0px; margin: 0px 4px 0px 0px; padding: 0px;" title="Add Floating Social Media Sharing Buttons for Blogger" width="400" /></a></div> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> <br /></div> <h3 style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; line-height: 26px;"> Step 4</h3> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Copy below code and paste it to HTML/JavaScript box.</div> <blockquote class="tr_bq" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> <!-- floating share bar Start haakblog--> <style type="text/css"> #pageshare {position:fixed; bottom:5%; margin-left:-721px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Get this from haakblog.com"><br /><div style="margin-left:8px;"><div class='sbutton' id='like' style='margin: 5px 0 0 5px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script><fb:like layout='box_count' show_faces='false'></fb:like> </div></div><br /><br /><div class='sbutton'><a class='twitter-share-button' data-count='vertical' data-via='<span style="color: red;">HaakBlog</span>' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script><br /><br /><div class='sbutton' id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script> <a class="DiggThisButton DiggMedium"></a> </div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone></div><br/><a href='<span style="color: red;">http://feeds.feedburner.com/haakblog</span>' rel='nofollow' target='_blank' title='Subscribe To Our Rss Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ8UeVgr6LI4pM1m-3qJRBeH0cPgeAb1pTFTBSIw4eu_qqEpRWycCxAW0PyHS9sYnf0Q1AHZJeOybemHge-Gur8q1WaAIO5labCMDSgUoGLIhk5QLqMo3HiQt5NdPNebYUgiZzyZ8FaTuB/s1600/icon_rss_reader.png'/></a><div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://www.haakblog.com">Blogger widget</a></div><br /><!-- Do not remove this link --> </div> <!-- floating share bar End --></div></blockquote> <b style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;">Tips: </b><span style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;">Please change </span><span style="background-color: white; color: red; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;">Haakblog </span><span style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;">to your twitter username for twitter setting and also replace your feedburner url to </span><span style="background-color: white; color: red; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;">http://feeds.feedburner.com/haakblog</span><br style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;" /><h3 style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; line-height: 26px;"> Step 5</h3> <br style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;" /><div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Click on Save Link.</div> </div>

How To Add New Style Floating Social Media Profile Sharing Buttons For Blogspot Site

Add Floating  Social Media Sharing Buttons for Blogger  to increase the number of social sharing on social networking sites like Twitter, ...

Read more »

How to Add New Styling Facebook Comments Box For Blogspot Site?

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Are you looking for adding <b>Facebook Comments box</b> in your blogger blog than we will provide you tutorial about how to Add<b><i>Facebook Comments Box for Blogger</i></b>. Facebook has released comments plugin for blogs and websites. You can easily add Facebook comments box to your blog because this plugin can be added in any blog or websites. This comments box help to post comments on your post with Facebook profile and share them on Facebook.<br /></div> <div class="separator" style="background-color: white; clear: both; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px; text-align: center;"> <a href="http://www.haakblog.com/2014/10/facebook-comments-box-for-blogger.html" style="color: #2c64b4; outline: none; text-decoration: none;" target="_blank"><img alt="Facebook Comments Box" border="0" height="361" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8jwV9ehQmP5rlYLxBiJhuWFt62yBqRUSEK_z2kOuXrm3E9SMjbwsxUUrSOHCHWwhhclKWA6nYqwJyB_SNRpWY6sPV0IE4ilMW0UJlmB5_BEGhpUOUL46oZ1-JTsaXJyqSLDP1DfuXRgbg/s640/Facebook+Comments+for+Blogger+Blogs.jpg" style="background: transparent; border: 0px; margin: 0px 4px 0px 0px; padding: 0px;" title="Facebook Comments Box" width="640" /></a></div> <h2 style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; line-height: 26px;"> How to Add Facebook Comments for Blogger</h2> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> You can easily add <i>Facebook comments box</i> to your blogger blog with follow some simple steps as give below:</div> <h3 style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; line-height: 26px;"> 1. Create Facebook Application</h3> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> First you need to want Facebook application ID so please follows below steps to get your App ID:</div> <h4 style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Step 1</h4> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Go to Facebook Developers Page.</div> <h4 style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Step 2</h4> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Click on create a new App and enter your application name and name space as shown in below picture.</div> <div class="separator" style="background-color: white; clear: both; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px; text-align: center;"> <a href="http://www.haakblog.com/2014/10/facebook-comments-box-for-blogger.html" style="color: #2c64b4; outline: none; text-decoration: none;" target="_blank"><img alt="Facebook Comments Box For Blogger" border="0" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvMDRJCqi2I6gnG-VDX_jjg9OHNnXGJH2TNN6Q69tff4TwsrM5K3V_9Lxyk2WoKpC52iDek8VarAjq9ArBqy_FUj3AsoPD-wd6DA8EHX62AZbtbTbNVpUHp8EucDgAYq0jaJK5VAuH0vS3/s400/create-facebook-application.png" style="background: transparent; border: 0px; margin: 0px 4px 0px 0px; padding: 0px;" title="Facebook Comments Box For Blogger" width="400" /></a></div> <h4 style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Step 3</h4> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Fill all required fields and add your domain name.</div> <div class="separator" style="background-color: white; clear: both; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px; text-align: center;"> <a href="http://www.haakblog.com/2014/10/facebook-comments-box-for-blogger.html" style="color: #2c64b4; outline: none; text-decoration: none;" target="_blank"><img alt="Add Facebook Comments Box For Blogger" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA5pK0WENR4BV9SI7tRecjrT3shLuVq4SK6O7gPIlBQodEZVwh9vIT6njbomKmwSQTEGiGqQ6ERynIrYi_ARxZlaH0M7rvso2jOiI-fjiX4T8jzAXp7-Ohfjdbx632jHuh9kRVY-JGdF4d/s400/851560_569553723066960_538760720_n.jpg" style="background: transparent; border: 0px; margin: 0px 4px 0px 0px; padding: 0px;" title="Add Facebook Comments Box For Blogger" width="371" /></a></div> <h4 style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Step 4</h4> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Click on save changes and copy your App ID.</div> <h3 style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; line-height: 26px;"> 2. Add Comments Box to Blogger</h3> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Now follow below steps to add facebook comments box to your blogger blog:</div> <h4 style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Step 1</h4> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Log in into Blogger Dashboard and click on Edit HTML as shown in below picture. </div> <div class="separator" style="background-color: white; clear: both; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px; text-align: center;"> <a href="http://www.haakblog.com/2014/10/facebook-comments-box-for-blogger.html" style="color: #2c64b4; outline: none; text-decoration: none;" target="_blank"><img alt="How to Add Facebook Comments Box For Blogger" border="0" height="301" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPgAxah0ypf4iKkHB5zdOcYWahae370mlXe_YYdQt4FTU7Hs44GQ8JfkxnojVkqEFs-HE4P9gTEWG1iIjN1M1QNwUomKgtfc_Nsi1cGbRu9kA0lYXQs5R8pO-EEB8v57CxVT8iKqU7d14Z/s400/Blogger-Edit-Template-html.png" style="background: transparent; border: 0px; margin: 0px 4px 0px 0px; padding: 0px;" title="How to Add Facebook Comments Box For Blogger" width="400" /></a></div> <h4 style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Step 2</h4> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Click on Expand Widget Template as shown in below picture.</div> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> <br /></div> <div class="separator" style="background-color: white; clear: both; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px; text-align: center;"> <a href="http://www.haakblog.com/2014/10/facebook-comments-box-for-blogger.html" style="color: #2c64b4; outline: none; text-decoration: none;" target="_blank"><img alt="How to Add Facebook Comments Box For Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0GS7HHcOULopQj_UOVltAfO48g_NKfIlme4YfrfvCmheBViR56SS4wkdQ_GqiPVX4WDr9ZGiBr8dceUX0qYsQ7ZAQM3ihElsTudom6VZQmWzSL4DSN79r5l-jTvSzstfnFhgOJFRCMGA/s1600/ExpandWidgetTemplates.jpg" style="background: transparent; border: 0px; margin: 0px 4px 0px 0px; padding: 0px;" title="How to Add Facebook Comments Box For Blogger" /></a></div> <h4 style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Step 3</h4> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Search <html with the help of CTRL + F. Replace <html to following code.</div> <blockquote class="tr_bq" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> <html xmlns:fb='http://www.facebook.com/2008/fbml'</blockquote> <h4 style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Step 4</h4> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Add below code before </head></div> <blockquote class="tr_bq" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> <meta expr:content='data:blog.pageTitle' property='og:title'/><meta expr:content='data:blog.url' property='og:url'/><meta content='<span style="color: red;">HaakBlog</span>' property='og:site_name'/><meta content='<span style="color: red;">BLOG_LOGO_IMAGE_LINK</span>' property='og:image'/><meta content='<span style="color: red;">YOUR_APP_ID</span> ' property='fb:app_id'/><meta content='<span style="color: red;">http://www.facebook.com/Haakblog</span>' property='fb:admins'/><meta content='article' property='og:type'/></blockquote> <b style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;">Tips:</b><span style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;">  1.Replace </span><b style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;">Haakblog</b><span style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> to your blog name.</span><br style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;" /><span style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;">2. </span><b style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;">Blog_logo_Image_link</b><span style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> with your logo link.</span><br style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;" /><span style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;">3. Change </span><b style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;">Your_app_ID</b><span style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> to your Facebook app ID.</span><br style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;" /><span style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;">4. Change your Facebook fan page with </span><b style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;">http://www.facebook.com/Haakblog</b><br style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;" /><h4 style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Step 5</h4> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Add below code before</body></div> <blockquote class="tr_bq" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> <div id='fb-root'/><script>    window.fbAsyncInit = function() {    FB.init({      appId  : &#39;<span style="color: red;">YOUR_APP_ID</span>&#39;,      status : true, // check login status        cookie : true, // enable cookies to allow the server to access the session      xfbml  : true  // parse XFBML    });  };    (function() {    var e = document.createElement(&#39;script&#39;);      e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/all.js&#39;;    e.async = true;      document.getElementById(&#39;fb-root&#39;).appendChild(e);    }());</script></blockquote> <b style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;">Tips:</b><span style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Replace  </span><span style="background-color: white; color: red; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;">YOUR_APP_ID </span><span style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;">to your Facebook application ID</span><br style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;" /><h4 style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Step 6</h4> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Now search below code.</div> <blockquote class="tr_bq" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> <data:post.body/></blockquote> <h4 style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Step 7</h4> <div class="MsoNormal" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> Now add below code before it.</div> <blockquote class="tr_bq" style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; font-size: 16px; line-height: 26px;"> <b:if cond='data:blog.pageType == &quot;item&quot;'><div style='padding:20px 0px 5px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><div><br /><a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="My Blogger Tricks"><img alt="My Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%; top: 0px;"/></a> <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='550'/></div></div><div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://www.haakblog.com/2013/07/add-facebook-comments-box-for-blogger.html" target="_blank" title="Facebook Comment Widget">Facebook Comment Widget</a> <a href="http://www.haakblog.com/" target="_blank">Blogger Tips</a></div></b:if></blockquote> <h3 style="background-color: white; color: #1e1e1e; font-family: 'Open Sans', sans-serif, Helvetica, Arial; line-height: 26px;"> Demo: How to Add Facebook Comments Box For Blogger</h3> </div>

How to Add New Styling Facebook Comments Box For Blogspot Site?

Are you looking for adding  Facebook Comments box  in your blogger blog than we will provide you tutorial about how to Add Facebook Commen...

Read more »

Who To Do Add Custom Robots.txt file in Blogspot web Site? Full Tips !!

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Georgia, serif; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> In one of my previous posts I have discussed about <a href="http://www.bloggertipstricks.com/custom-robots-header-tags.html" style="-webkit-transition: all 0.1s ease-in-out; box-sizing: border-box; color: #0faee9; text-decoration: none; transition: all 0.1s ease-in-out;" title="Custom Robots Header Tags for blogger">Custom Robots Header Tags for blogger</a>. If you have read that post then I hope you guys are aware with its importance in search rankings. Today, I come with a very useful and must aware blogging term that is <b style="box-sizing: border-box;">Robots.txt</b>. In blogger it is known as Custom Robots.txt that means now you can customize this file according to your choice. In today’s tutorial we will discuss about this term in deep and come to know about its use and benefits. I will also tell you how to add custom robots.txt file in blogger. So let start the tutorial.</div> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Georgia, serif; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> <img alt="blogger custom robots txt" class="aligncenter size-full wp-image-26838" height="354" src="http://img.bloggertipstricks.com/2015/04/blogger-custom-robots-txt.png" style="border: 0px; box-sizing: border-box; display: block; height: auto; margin: 2.5rem auto 0px; max-width: 100%;" width="630" /></div> <h3 style="background-color: white; box-sizing: border-box; color: #333333; font-family: lora, sans-serif; font-size: 2.8rem; font-weight: 400; line-height: 1.2; margin: 38px 0px 1.6rem; padding: 0px;"> What is Robots.txt?</h3> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Georgia, serif; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> Robots.txt is a text file which contains few lines of simple code. It is saved on the website or blog’s server which instruct the web crawlers to how to index and crawl your blog in the search results. That means you can restrict any web page on your blog from web crawlers so that it can’t get indexed in search engines like your blog labels page, your demo page or any other pages that are not as important to get indexed. Always remember that search crawlers scan the robots.txt file before crawling any web page.<br style="box-sizing: border-box;" /><span id="more-26836" style="box-sizing: border-box;"></span><br style="box-sizing: border-box;" />Each blog hosted on blogger have its default robots.txt file which is something look like this:</div> <blockquote style="background-color: white; box-sizing: border-box; color: #999999; font-family: Georgia, serif; font-size: 16px; line-height: 26px; margin: 4rem 4rem 2.4rem;"> <div style="box-sizing: border-box; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> User-agent: Mediapartners-Google<br style="box-sizing: border-box;" />Disallow:<br style="box-sizing: border-box;" />User-agent: *<br style="box-sizing: border-box;" />Disallow: /search<br style="box-sizing: border-box;" />Allow: /<br style="box-sizing: border-box;" />Sitemap: http://example.blogspot.com/feeds/posts/default?orderby=UPDATED</div> </blockquote> <h3 style="background-color: white; box-sizing: border-box; color: #333333; font-family: lora, sans-serif; font-size: 2.8rem; font-weight: 400; line-height: 1.2; margin: 38px 0px 1.6rem; padding: 0px;"> Explanation</h3> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Georgia, serif; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> This code is divided into three sections. Let’s first study each of them after that we will learn how to add custom robots.txt file in blogspot blogs.</div> <ol style="background-color: white; box-sizing: border-box; color: #333333; font-family: Georgia, serif; font-size: 19px; line-height: 30px; margin: 0px 0px 2rem 4rem; padding: 0px; text-align: justify;"> <li style="box-sizing: border-box; list-style-type: decimal;"><span style="box-sizing: border-box; font-weight: 700;">User-agent: Mediapartners-Google</span></li> </ol> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Georgia, serif; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> This code is for Google Adsense robots which help them to serve better ads on your blog. Either you are using Google Adsense on your blog or not simply leave it as it is.</div> <ul style="background-color: white; box-sizing: border-box; color: #333333; font-family: Georgia, serif; font-size: 19px; line-height: 30px; margin: 0px 0px 2rem 4rem; padding: 0px; text-align: justify;"> <li style="box-sizing: border-box; list-style-type: disc;"><span style="box-sizing: border-box; font-weight: 700;">User-agent: *</span></li> </ul> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Georgia, serif; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> This is for all robots marked with asterisk (<span style="box-sizing: border-box; font-weight: 700;">*</span>). In default settings our blog’s labels links are <a href="http://www.bloggertipstricks.com/prevent-blog-indexing.html" style="-webkit-transition: all 0.1s ease-in-out; box-sizing: border-box; color: #0faee9; text-decoration: none; transition: all 0.1s ease-in-out;" title="restricted to indexed by search crawlers">restricted to indexed by search crawlers</a> that means the web crawlers will not index our labels page links because of below code.</div> <blockquote style="background-color: white; box-sizing: border-box; color: #999999; font-family: Georgia, serif; font-size: 16px; line-height: 26px; margin: 4rem 4rem 2.4rem;"> <div style="box-sizing: border-box; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> Disallow: /search</div> </blockquote> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Georgia, serif; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> That means the links having keyword <span style="box-sizing: border-box; font-weight: 700;">search</span> just after the domain name will be ignored. See below example which is a link of label page named SEO.</div> <blockquote style="background-color: white; box-sizing: border-box; color: #999999; font-family: Georgia, serif; font-size: 16px; line-height: 26px; margin: 4rem 4rem 2.4rem;"> <div style="box-sizing: border-box; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> http://www.bloggertipstricks.com/search/label/SEO</div> </blockquote> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Georgia, serif; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> And if we remove <span style="box-sizing: border-box; font-weight: 700;">Disallow: /search</span> from the above code then crawlers will access our entire blog to index and crawl all of its content and web pages.</div> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Georgia, serif; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> Here <span style="box-sizing: border-box; font-weight: 700;">Allow: /</span> refers to the Homepage that means web crawlers can crawl and index our blog’s homepage.</div> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Georgia, serif; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> <span style="box-sizing: border-box; font-weight: 700;">Disallow Particular Post</span><br style="box-sizing: border-box;" />Now suppose if we want to exclude a particular post from indexing then we can add below lines in the code.</div> <blockquote style="background-color: white; box-sizing: border-box; color: #999999; font-family: Georgia, serif; font-size: 16px; line-height: 26px; margin: 4rem 4rem 2.4rem;"> <div style="box-sizing: border-box; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> Disallow: /yyyy/mm/post-url.html</div> </blockquote> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Georgia, serif; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> Here <span style="box-sizing: border-box; font-weight: 700;">yyyy</span> and <span style="box-sizing: border-box; font-weight: 700;">mm</span> refers to the publishing year and month of the post respectively. For example if we have published a post in year 2013 in month of March then we have to use below format.</div> <blockquote style="background-color: white; box-sizing: border-box; color: #999999; font-family: Georgia, serif; font-size: 16px; line-height: 26px; margin: 4rem 4rem 2.4rem;"> <div style="box-sizing: border-box; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> Disallow: /2013/03/post-url.html</div> </blockquote> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Georgia, serif; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> To make this task easy, you can simply copy the post URL and remove the blog name from the beginning.</div> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Georgia, serif; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> <span style="box-sizing: border-box; font-weight: 700;">Disallow Particular Page</span><br style="box-sizing: border-box;" />If we need to disallow a particular page then we can use the same method as above. Simply copy the page URL and remove blog address from it which will something look like this:</div> <blockquote style="background-color: white; box-sizing: border-box; color: #999999; font-family: Georgia, serif; font-size: 16px; line-height: 26px; margin: 4rem 4rem 2.4rem;"> <div style="box-sizing: border-box; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> Disallow: /p/page-url.html</div> </blockquote> <ul style="background-color: white; box-sizing: border-box; color: #333333; font-family: Georgia, serif; font-size: 19px; line-height: 30px; margin: 0px 0px 2rem 4rem; padding: 0px; text-align: justify;"> <li style="box-sizing: border-box; list-style-type: disc;"><span style="box-sizing: border-box; font-weight: 700;">Sitemap: http://example.blogspot.com/feeds/posts/default?orderby=UPDATED</span></li> </ul> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Georgia, serif; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> This code refers to the sitemap of our blog. By adding sitemap link here we are simply optimizing our blog’s crawling rate. Means whenever the web crawlers scan our robots.txt file they will find a path to our <a href="http://www.bloggertipstricks.com/blogger/submit-sitemap-google-webmaster.html" style="-webkit-transition: all 0.1s ease-in-out; box-sizing: border-box; color: #0faee9; text-decoration: none; transition: all 0.1s ease-in-out;" title="sitemap">sitemap</a> where all the links of our published posts present. Web crawlers will find it easy to crawl all of our posts. Hence, there are better chances that web crawlers crawl all of our blog posts without ignoring a single one.<br style="box-sizing: border-box;" /><span style="box-sizing: border-box; font-weight: 700;">Note:</span> This sitemap will only tell the web crawlers about the recent 25 posts. If you want to increase the number of link in your sitemap then replace default sitemap with below one. It will work for first 500 recent posts</div> <blockquote style="background-color: white; box-sizing: border-box; color: #999999; font-family: Georgia, serif; font-size: 16px; line-height: 26px; margin: 4rem 4rem 2.4rem;"> <div style="box-sizing: border-box; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> Sitemap: http://example.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500</div> </blockquote> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Georgia, serif; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> If you have more than 500 published posts in your blog then you can use two sitemaps like below:</div> <blockquote style="background-color: white; box-sizing: border-box; color: #999999; font-family: Georgia, serif; font-size: 16px; line-height: 26px; margin: 4rem 4rem 2.4rem;"> <div style="box-sizing: border-box; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> Sitemap: http://example.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500<br style="box-sizing: border-box;" />Sitemap: http://example.blogspot.com/atom.xml?redirect=false&start-index=500&max-results=1000</div> </blockquote> <h2 style="background-color: white; box-sizing: border-box; color: #20627a; font-family: lora, sans-serif; font-size: 3.5rem; font-weight: 400; line-height: 1.2; margin: 0px 0px 1.6rem; padding: 0px;"> Adding Custom Robots.Txt to Blogger</h2> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Georgia, serif; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> Now the main part of this tutorial is how to add custom robots.txt in blogger. So below are steps to add it.</div> <ol style="background-color: white; box-sizing: border-box; color: #333333; font-family: Georgia, serif; font-size: 19px; line-height: 30px; margin: 0px 0px 2rem 4rem; padding: 0px; text-align: justify;"> <li style="box-sizing: border-box; list-style-type: decimal;">Go to your blogger blog.</li> <li style="box-sizing: border-box; list-style-type: decimal;">Navigate to <span style="box-sizing: border-box; font-weight: 700;">Settings</span> >> <span style="box-sizing: border-box; font-weight: 700;">Search Preferences</span> ›› <span style="box-sizing: border-box; font-weight: 700;">Crawlers and indexing</span> ›› <span style="box-sizing: border-box; font-weight: 700;">Custom robots.txt</span> ›› Edit ›› Yes</li> <li style="box-sizing: border-box; list-style-type: decimal;">Now paste your robots.txt file code in the box.</li> <li style="box-sizing: border-box; list-style-type: decimal;">Click on Save Changes button.</li> <li style="box-sizing: border-box; list-style-type: decimal;">You are done!</li> </ol> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Georgia, serif; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> <img alt="Blogger Custom Robots.txt" height="240" src="http://img.bloggertipstricks.com/uploads/2013/03/blogger-custom-robots-txt.jpg" style="border: 0px; box-sizing: border-box; height: auto; max-width: 100%;" title="Blogger Custom Robots.txt" width="660" /></div> <h3 style="background-color: white; box-sizing: border-box; color: #333333; font-family: lora, sans-serif; font-size: 2.8rem; font-weight: 400; line-height: 1.2; margin: 38px 0px 1.6rem; padding: 0px;"> How to Check Your Robots.txt File?</h3> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Georgia, serif; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> You can check this file on your blog by adding <span style="box-sizing: border-box; font-weight: 700;">/robots.txt</span> at last to your blog URL in the browser. Take a look at the below example for demo.</div> <blockquote style="background-color: white; box-sizing: border-box; color: #999999; font-family: Georgia, serif; font-size: 16px; line-height: 26px; margin: 4rem 4rem 2.4rem;"> <div style="box-sizing: border-box; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> http://www.bloggertipstricks.com/robots.txt</div> </blockquote> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Georgia, serif; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> Once you visit the robots.txt file URL you will see the entire code which you are using in your custom robots.txt file. See below image.</div> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Georgia, serif; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> <img alt="robots.txt" height="176" src="http://img.bloggertipstricks.com/uploads/2013/03/robots-txt.jpg" style="border: 0px; box-sizing: border-box; height: auto; max-width: 100%;" width="626" /></div> <h3 style="background-color: white; box-sizing: border-box; color: #333333; font-family: lora, sans-serif; font-size: 2.8rem; font-weight: 400; line-height: 1.2; margin: 38px 0px 1.6rem; padding: 0px;"> Final Words!</h3> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Georgia, serif; font-size: 19px; line-height: 30px; margin-bottom: 2rem; padding: 0px; text-align: justify;"> This was the today’s complete tutorial on how to add custom robots.txt file in blogger. I really try with my heart to make this tutorial as simple and informative as possible. But still if you have any doubt or query then feel free to ask me. Don’t put any code in your custom robots.txt settings without knowing about it. Simply ask to me to resolve your queries. I’ll tell you everything in detail. Thanks guys to read this tutorial. If you like it then please support me to spread my words by sharing this post on your social media profiles. Happy Blogging!</div> </div>

Who To Do Add Custom Robots.txt file in Blogspot web Site? Full Tips !!

In one of my previous posts I have discussed about  Custom Robots Header Tags for blogger . If you have read that post then I hope you guy...

Read more »

How To Do Add Nice Related Posts Widget For Blogger / Blogspot with jQuery

<div dir="ltr" style="text-align: left;" trbidi="on"> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">Related posts widget is very important for a blog, because it increases the number of page views and also help the visitor to view other posts related to blog. Now here is wonderful trick to display links to related posts beneath each posts. At their blogs today there are many types of related post widget, and related items thumbnail images using HTML, Java script, etc. .. Here I will show a method that is easy to show install.It only title jQuery.It related post widget will look like a picture below.</span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><a href="https://www.blogger.com/null" name="more" style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;"></a><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <h4 style="background-color: white; color: #333333; font-family: 'Open Sans', serif, sans-serif; font-size: 16px; font-weight: normal; margin: 0px;"> <b>Beautiful related posts text widget with hover effect for blogger</b></h4> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><b style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">How to add HTML-CSS-Javascript Codes to your Blog ? </b><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">This is very simple and easy you only follow below steps and add this widget in your blog.</span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><b style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;"><span style="color: magenta;">Step 1</span></b><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;"> Log-in to your </span><b style="background-color: orange; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">Blogger account</b><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">.</span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><b style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;"><span style="color: magenta;">Step 2</span></b><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;"> Backup your Template.</span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px; text-align: center;"> <a href="http://bit.ly/work24" imageanchor="1" style="color: #999999; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="Edit Template HTML" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZVlEnf90qv_3Ua0Au4j8wHApxjwMrHnN8Cb-g_qdNDAkkADoQpRKg00I29gj1RYbr3e-Nu2glVaZ3wtnmXGw9_axFAeNKJhUko7HjTko1rkmyfT4S1Ch5WZ0fjiFoQeyqpQ1f-F4eIkhT/s1600/Edit+Template+HTML.png" style="-webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(192, 192, 192); height: auto; max-width: 95%; padding: 4px; transition: all 0.4s ease-in-out;" title="Edit Template HTML" /></a></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><b style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;"><span style="color: magenta;">Step 3</span></b><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;"> Click on The </span><b style="background-color: cyan; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">Template</b><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">>> </span><b style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;"><span style="background-color: #f4cccc; color: purple;">Edit HTML</span></b><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">>> </span><b style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;"><span style="color: orange;">Proceed</span></b><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">.</span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><b style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;"><span style="color: magenta;">Step 4</span></b><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;"> Now find [by pressing </span><kbd style="background-color: white; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; color: #333333; font-size: 1.2em; line-height: 19.200000762939453px; margin: 2px 3px; padding: 1px 5px;">Ctrl</kbd><span style="background-color: white; color: #333333; font-family: Georgia, serif; font-size: 13.63636302947998px; line-height: 19.200000762939453px;"> + </span><kbd style="background-color: white; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; color: #333333; font-size: 1.2em; line-height: 19.200000762939453px; margin: 2px 3px; padding: 1px 5px;">F</kbd><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;"> ] this code in the template:</span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div class="code" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVGSfDMSCnAiccpvP_7QHdb7iT1TrpbDn16dre9Dojj5uJDgJKMl9DR5CWW7eoknVVQ2sMpW4taIwjQgdD6z1vDFtFeFTq5v23Nll0UurM9MeTgtN7VDdCzCVrwn6V45y4Vp-b2OezTzOZ/) 0% 0% repeat-y rgb(255, 255, 255); font-family: 'Courier New'; font-size: 12px; line-height: 19.200000762939453px; margin: 5px 10px; max-height: 200px; overflow: auto; padding: 4px 10px 0px 40px;"> <div class='post-footer-line post-footer-line-1'/></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">If you cant find it then try finding this one</span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div class="code" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVGSfDMSCnAiccpvP_7QHdb7iT1TrpbDn16dre9Dojj5uJDgJKMl9DR5CWW7eoknVVQ2sMpW4taIwjQgdD6z1vDFtFeFTq5v23Nll0UurM9MeTgtN7VDdCzCVrwn6V45y4Vp-b2OezTzOZ/) 0% 0% repeat-y rgb(255, 255, 255); font-family: 'Courier New'; font-size: 12px; line-height: 19.200000762939453px; margin: 5px 10px; max-height: 200px; overflow: auto; padding: 4px 10px 0px 40px;"> <p class='post-footer-line post-footer-line-1'/></div> <span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">OR</span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div class="code" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVGSfDMSCnAiccpvP_7QHdb7iT1TrpbDn16dre9Dojj5uJDgJKMl9DR5CWW7eoknVVQ2sMpW4taIwjQgdD6z1vDFtFeFTq5v23Nll0UurM9MeTgtN7VDdCzCVrwn6V45y4Vp-b2OezTzOZ/) 0% 0% repeat-y rgb(255, 255, 255); font-family: 'Courier New'; font-size: 12px; line-height: 19.200000762939453px; margin: 5px 10px; max-height: 200px; overflow: auto; padding: 4px 10px 0px 40px;"> <div class='post-footer-line post-footer-line-2'/><br /><div class='post-footer-line post-footer-line-3'/><br /></div><br /></div></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">And immediately </span><b style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;"><span style="color: red;">Below/After</span></b><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;"> it, paste this code:</span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">Style 1:-</span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px; text-align: center;"> <img alt="Related Posts Widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjugU93b6vlR-oDxCX_gAv1roxYqTiDFbQXcZUUecfX3jbmQMlK1bgyZlTdQ0kA8N_2PEUUpCNSa6lVaeywXhpG_LImkaiYwWXD79nHUwLyP2UI_7XgBPLUgEdXLZbS7nWtovElQKN72oxo/s1600/Related+Posts+Widget+01.png" style="border: 1px solid rgb(192, 192, 192); height: auto; max-width: 95%; padding: 4px;" title="Related Posts Widget 01" /></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px; text-align: center;"> <a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/live-demo/related-posts-live-demo-1.html" rel="nofollow" style="-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; -webkit-transition: background-position 1s; background-clip: border-box; background-color: #79be1e; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvYsT1KqHT2VbcvgAjOyP6pzAP3LziTYEd0hCDyDSLhIApTNSXfIgNJA2aszFBwhH_POMDBVtleUABTc_5AALZzkuI5_BADMLipVYuC6vTQ23oNIFc5jm0JW-epBBqrome-Y0nO5tQd-S/s144/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvYsT1KqHT2VbcvgAjOyP6pzAP3LziTYEd0hCDyDSLhIApTNSXfIgNJA2aszFBwhH_POMDBVtleUABTc_5AALZzkuI5_BADMLipVYuC6vTQ23oNIFc5jm0JW-epBBqrome-Y0nO5tQd-S/s144/button_bg.png), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgb(162, 211, 30)), to(rgba(162, 211, 30, 0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(130, 204, 39)), to(rgb(116, 179, 23))); background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; border: 1px solid rgb(150, 163, 123) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: rgb(52, 89, 3) !important; cursor: pointer; display: inline-block; font-family: Calibri, Arial, sans-serif; font-size: 30px; line-height: normal; padding: 10px 20px; position: relative; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; transition: background-position 1s; vertical-align: baseline; white-space: nowrap;" target="_blank">Live Demo</a></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div class="code" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVGSfDMSCnAiccpvP_7QHdb7iT1TrpbDn16dre9Dojj5uJDgJKMl9DR5CWW7eoknVVQ2sMpW4taIwjQgdD6z1vDFtFeFTq5v23Nll0UurM9MeTgtN7VDdCzCVrwn6V45y4Vp-b2OezTzOZ/) 0% 0% repeat-y rgb(255, 255, 255); font-family: 'Courier New'; font-size: 12px; line-height: 19.200000762939453px; margin: 5px 10px; max-height: 200px; overflow: auto; padding: 4px 10px 0px 40px;"> <script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/related-posts-min-1-ycode.js' type='text/javascript'/><link href='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/related-posts-min-1.css' rel='stylesheet' type='text/css'/><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='My Blogger Tricks'><img alt='My Blogger Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%; top: 0px;'/></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='All Blogger Tricks'><img alt='All Blogger Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%;'/></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='Latest Tips and Tricks'><img alt='Latest Tips and Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; left: 0%;'/></a><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;<span style="color: magenta; font-size: medium;"><b>max-results=5</b></span>&quot;' type='text/javascript'/></b:if></b:loop><br /><b><h2 class='title' style='color:#fff;background-color:#000;width:150px;'><span style="color: purple;">Related Topics</span></h2></b><br /><script type='text/javascript'><br />var currentposturl=&quot;<data:post.url/>&quot;;<br /><b><span style="color: magenta;">var maxresults=5;</span></b> <!-- Increase To Show More Then 5 Related Post --><br />removeRelatedDuplicates(); printRelatedLabels();<br /></script><br /></div><br /></b:if></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">.............................</span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">.............................</span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <h4 style="background-color: white; color: #333333; font-family: 'Open Sans', serif, sans-serif; font-size: 16px; font-weight: normal; margin: 0px;"> <b>Simple And Stylish "Related Posts" Text Widget For Blogspot</b></h4> <span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">Change Code with The One You Like Bellow</span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">Style 2:-</span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px; text-align: center;"> <img alt="Related Posts Widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioaqPLO1_DHbTrSuQwZK6tHUaUVjGcgAA3tRYlHVuhEINQP4Qgs9SrGO9i1DFHPIBspbxQilM1RsWQkPn1XZPpv73ogpCsvYLbHPpbS5H0RByzRdiwCYxVuYyWKBPxt-dRGUZorf9bBjQt/s1600/Related+Posts+Widget+02.png" style="border: 1px solid rgb(192, 192, 192); height: auto; max-width: 95%; padding: 4px;" title="Related Posts Widget 02" /></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /> <div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px; text-align: center;"> <a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/live-demo/related-posts-live-demo-2.html" rel="nofollow" style="-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; -webkit-transition: background-position 1s; background-clip: border-box; background-color: #79be1e; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvYsT1KqHT2VbcvgAjOyP6pzAP3LziTYEd0hCDyDSLhIApTNSXfIgNJA2aszFBwhH_POMDBVtleUABTc_5AALZzkuI5_BADMLipVYuC6vTQ23oNIFc5jm0JW-epBBqrome-Y0nO5tQd-S/s144/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvYsT1KqHT2VbcvgAjOyP6pzAP3LziTYEd0hCDyDSLhIApTNSXfIgNJA2aszFBwhH_POMDBVtleUABTc_5AALZzkuI5_BADMLipVYuC6vTQ23oNIFc5jm0JW-epBBqrome-Y0nO5tQd-S/s144/button_bg.png), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgb(162, 211, 30)), to(rgba(162, 211, 30, 0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(130, 204, 39)), to(rgb(116, 179, 23))); background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; border: 1px solid rgb(150, 163, 123) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: rgb(52, 89, 3) !important; cursor: pointer; display: inline-block; font-family: Calibri, Arial, sans-serif; font-size: 30px; line-height: normal; padding: 10px 20px; position: relative; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; transition: background-position 1s; vertical-align: baseline; white-space: nowrap;" target="_blank">Live Demo</a></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div class="code" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVGSfDMSCnAiccpvP_7QHdb7iT1TrpbDn16dre9Dojj5uJDgJKMl9DR5CWW7eoknVVQ2sMpW4taIwjQgdD6z1vDFtFeFTq5v23Nll0UurM9MeTgtN7VDdCzCVrwn6V45y4Vp-b2OezTzOZ/) 0% 0% repeat-y rgb(255, 255, 255); font-family: 'Courier New'; font-size: 12px; line-height: 19.200000762939453px; margin: 5px 10px; max-height: 200px; overflow: auto; padding: 4px 10px 0px 40px;"> <script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/related-posts-min-1-ycode.js' type='text/javascript'/><link href='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/related-posts-min-2.css' rel='stylesheet' type='text/css'/><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='My Blogger Tricks'><img alt='My Blogger Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%; top: 0px;'/></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='All Blogger Tricks'><img alt='All Blogger Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%;'/></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='Latest Tips and Tricks'><img alt='Latest Tips and Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; left: 0%;'/></a><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;<span style="color: magenta; font-size: medium;"><b>max-results=5</b></span>&quot;' type='text/javascript'/></b:if></b:loop><br /><b><h2 class='title' style='color:#fff;background-color:#000;width:150px;'><span style="color: purple;">Related Topics</span></h2></b><br /><script type='text/javascript'><br />var currentposturl=&quot;<data:post.url/>&quot;;<br /><b><span style="color: magenta;">var maxresults=5;</span></b> <!-- Increase To Show More Then 5 Related Post --><br />removeRelatedDuplicates(); printRelatedLabels();<br /></script><br /></div><br /></b:if></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">Style 3:-</span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px; text-align: center;"> <img alt="Related Posts Widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbyElFDCnb_6zj1FJSLCRopG_fTx7qT51ZxnjcwIRBT0ZBnMtE9W1MVuCArloJkHh0rcZjIgicCArAWJ93nP8SAV1v64mSuVqPtETX-t16ChlD1bV2NiOp-grJzejoKJ2OtSIVleixdX5I/s1600/Related+Posts+Widget+03.png" style="border: 1px solid rgb(192, 192, 192); height: auto; max-width: 95%; padding: 4px;" title="Related Posts Widget 03" /></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /> <div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px; text-align: center;"> <a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/live-demo/related-posts-live-demo-3.html" rel="nofollow" style="-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; -webkit-transition: background-position 1s; background-clip: border-box; background-color: #79be1e; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvYsT1KqHT2VbcvgAjOyP6pzAP3LziTYEd0hCDyDSLhIApTNSXfIgNJA2aszFBwhH_POMDBVtleUABTc_5AALZzkuI5_BADMLipVYuC6vTQ23oNIFc5jm0JW-epBBqrome-Y0nO5tQd-S/s144/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvYsT1KqHT2VbcvgAjOyP6pzAP3LziTYEd0hCDyDSLhIApTNSXfIgNJA2aszFBwhH_POMDBVtleUABTc_5AALZzkuI5_BADMLipVYuC6vTQ23oNIFc5jm0JW-epBBqrome-Y0nO5tQd-S/s144/button_bg.png), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgb(162, 211, 30)), to(rgba(162, 211, 30, 0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(130, 204, 39)), to(rgb(116, 179, 23))); background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; border: 1px solid rgb(150, 163, 123) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: rgb(52, 89, 3) !important; cursor: pointer; display: inline-block; font-family: Calibri, Arial, sans-serif; font-size: 30px; line-height: normal; padding: 10px 20px; position: relative; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; transition: background-position 1s; vertical-align: baseline; white-space: nowrap;" target="_blank">Live Demo</a></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div class="code" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVGSfDMSCnAiccpvP_7QHdb7iT1TrpbDn16dre9Dojj5uJDgJKMl9DR5CWW7eoknVVQ2sMpW4taIwjQgdD6z1vDFtFeFTq5v23Nll0UurM9MeTgtN7VDdCzCVrwn6V45y4Vp-b2OezTzOZ/) 0% 0% repeat-y rgb(255, 255, 255); font-family: 'Courier New'; font-size: 12px; line-height: 19.200000762939453px; margin: 5px 10px; max-height: 200px; overflow: auto; padding: 4px 10px 0px 40px;"> <script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/related-posts-min-1-ycode.js' type='text/javascript'/><link href='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/related-posts-min-3.css' rel='stylesheet' type='text/css'/><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='My Blogger Tricks'><img alt='My Blogger Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%; top: 0px;'/></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='All Blogger Tricks'><img alt='All Blogger Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%;'/></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='Latest Tips and Tricks'><img alt='Latest Tips and Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; left: 0%;'/></a><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;<span style="color: magenta; font-size: medium;"><b>max-results=5</b></span>&quot;' type='text/javascript'/></b:if></b:loop><br /><b><h2 class='title' style='color:#fff;background-color:#000;width:150px;'><span style="color: purple;">Related Topics</span></h2></b><br /><script type='text/javascript'><br />var currentposturl=&quot;<data:post.url/>&quot;;<br /><b><span style="color: magenta;">var maxresults=5;</span></b> <!-- Increase To Show More Then 5 Related Post --><br />removeRelatedDuplicates(); printRelatedLabels();<br /></script><br /></div><br /></b:if></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">Style 4:-</span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px; text-align: center;"> <img alt="Related Posts Widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3IkPYjtwCRvTL2aK6p_lu4X_-ox9EL_jYLKTwD1jz-Z3mCHdaevmjJbCo6BAmGjM7afbij6IgTa4eBLCLQLQ2Z6O2PgGQ3p2vpqyHfHK9SpxeBDPIYT7E4PFkWT3PHWGB7KodLCRCOytZ/s1600/Related+Posts+Widget+04.png" style="border: 1px solid rgb(192, 192, 192); height: auto; max-width: 95%; padding: 4px;" title="Related Posts Widget 04" /></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /> <div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px; text-align: center;"> <a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/live-demo/related-posts-live-demo-4.html" rel="nofollow" style="-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; -webkit-transition: background-position 1s; background-clip: border-box; background-color: #79be1e; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvYsT1KqHT2VbcvgAjOyP6pzAP3LziTYEd0hCDyDSLhIApTNSXfIgNJA2aszFBwhH_POMDBVtleUABTc_5AALZzkuI5_BADMLipVYuC6vTQ23oNIFc5jm0JW-epBBqrome-Y0nO5tQd-S/s144/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvYsT1KqHT2VbcvgAjOyP6pzAP3LziTYEd0hCDyDSLhIApTNSXfIgNJA2aszFBwhH_POMDBVtleUABTc_5AALZzkuI5_BADMLipVYuC6vTQ23oNIFc5jm0JW-epBBqrome-Y0nO5tQd-S/s144/button_bg.png), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgb(162, 211, 30)), to(rgba(162, 211, 30, 0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(130, 204, 39)), to(rgb(116, 179, 23))); background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; border: 1px solid rgb(150, 163, 123) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: rgb(52, 89, 3) !important; cursor: pointer; display: inline-block; font-family: Calibri, Arial, sans-serif; font-size: 30px; line-height: normal; padding: 10px 20px; position: relative; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; transition: background-position 1s; vertical-align: baseline; white-space: nowrap;" target="_blank">Live Demo</a></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div class="code" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVGSfDMSCnAiccpvP_7QHdb7iT1TrpbDn16dre9Dojj5uJDgJKMl9DR5CWW7eoknVVQ2sMpW4taIwjQgdD6z1vDFtFeFTq5v23Nll0UurM9MeTgtN7VDdCzCVrwn6V45y4Vp-b2OezTzOZ/) 0% 0% repeat-y rgb(255, 255, 255); font-family: 'Courier New'; font-size: 12px; line-height: 19.200000762939453px; margin: 5px 10px; max-height: 200px; overflow: auto; padding: 4px 10px 0px 40px;"> <script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/related-posts-min-1-ycode.js' type='text/javascript'/><link href='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/related-posts-min-4.css' rel='stylesheet' type='text/css'/><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='My Blogger Tricks'><img alt='My Blogger Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%; top: 0px;'/></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='All Blogger Tricks'><img alt='All Blogger Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%;'/></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='Latest Tips and Tricks'><img alt='Latest Tips and Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; left: 0%;'/></a><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;<span style="color: magenta; font-size: medium;"><b>max-results=5</b></span>&quot;' type='text/javascript'/></b:if></b:loop><br /><b><h2 class='title' style='color:#fff;background-color:#000;width:150px;'><span style="color: purple;">Related Topics</span></h2></b><br /><script type='text/javascript'><br />var currentposturl=&quot;<data:post.url/>&quot;;<br /><b><span style="color: magenta;">var maxresults=5;</span></b> <!-- Increase To Show More Then 5 Related Post --><br />removeRelatedDuplicates(); printRelatedLabels();<br /></script><br /></div><br /></b:if></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">Style 5:-</span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px; text-align: center;"> <img alt="Related Posts Widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVjx5yGn26uD3A4fOl1i-C1C2iW2qX9GqaEjUAk7WkesGcw4CzRzVK9lH1YWPt0Vm1UI1NMHF5NxkpM12dLKX1w2jYb-T6neoBLU1oOfIVA72jRgBzi4w_J_K1R_MxqogHFxTcFePLGiUg/s1600/Related+Posts+Widget+05.png" style="border: 1px solid rgb(192, 192, 192); height: auto; max-width: 95%; padding: 4px;" title="Related Posts Widget 05" /></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /> <div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px; text-align: center;"> <a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/live-demo/related-posts-live-demo-5.html" rel="nofollow" style="-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; -webkit-transition: background-position 1s; background-clip: border-box; background-color: #79be1e; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvYsT1KqHT2VbcvgAjOyP6pzAP3LziTYEd0hCDyDSLhIApTNSXfIgNJA2aszFBwhH_POMDBVtleUABTc_5AALZzkuI5_BADMLipVYuC6vTQ23oNIFc5jm0JW-epBBqrome-Y0nO5tQd-S/s144/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvYsT1KqHT2VbcvgAjOyP6pzAP3LziTYEd0hCDyDSLhIApTNSXfIgNJA2aszFBwhH_POMDBVtleUABTc_5AALZzkuI5_BADMLipVYuC6vTQ23oNIFc5jm0JW-epBBqrome-Y0nO5tQd-S/s144/button_bg.png), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgb(162, 211, 30)), to(rgba(162, 211, 30, 0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(130, 204, 39)), to(rgb(116, 179, 23))); background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; border: 1px solid rgb(150, 163, 123) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: rgb(52, 89, 3) !important; cursor: pointer; display: inline-block; font-family: Calibri, Arial, sans-serif; font-size: 30px; line-height: normal; padding: 10px 20px; position: relative; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; transition: background-position 1s; vertical-align: baseline; white-space: nowrap;" target="_blank">Live Demo</a></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div class="code" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVGSfDMSCnAiccpvP_7QHdb7iT1TrpbDn16dre9Dojj5uJDgJKMl9DR5CWW7eoknVVQ2sMpW4taIwjQgdD6z1vDFtFeFTq5v23Nll0UurM9MeTgtN7VDdCzCVrwn6V45y4Vp-b2OezTzOZ/) 0% 0% repeat-y rgb(255, 255, 255); font-family: 'Courier New'; font-size: 12px; line-height: 19.200000762939453px; margin: 5px 10px; max-height: 200px; overflow: auto; padding: 4px 10px 0px 40px;"> <script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/related-posts-min-1-ycode.js' type='text/javascript'/><link href='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/related-posts-min-5.css' rel='stylesheet' type='text/css'/><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='My Blogger Tricks'><img alt='My Blogger Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%; top: 0px;'/></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='All Blogger Tricks'><img alt='All Blogger Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%;'/></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='Latest Tips and Tricks'><img alt='Latest Tips and Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; left: 0%;'/></a><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;<span style="color: magenta; font-size: medium;"><b>max-results=5</b></span>&quot;' type='text/javascript'/></b:if></b:loop><br /><b><h2 class='title' style='color:#fff;background-color:#000;width:150px;'><span style="color: purple;">Related Topics</span></h2></b><br /><script type='text/javascript'><br />var currentposturl=&quot;<data:post.url/>&quot;;<br /><b><span style="color: magenta;">var maxresults=5;</span></b> <!-- Increase To Show More Then 5 Related Post --><br />removeRelatedDuplicates(); printRelatedLabels();<br /></script><br /></div><br /></b:if></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">Style 6:-</span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px; text-align: center;"> <img alt="Related Posts Widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0aVYYllhV3KB9z7uZw1Czw5Qb1IvNRO8K1Xk4dycvTENWADW-6XRzsgXMA23GGe9mn8abMI7kQ_689PkSUGLYIfHrpO6WAcFeE6JKGib__EORiQz_RM7rnrUcOzXLQ3A012JCFVDVji8A/s1600/Related+Posts+Widget+06.png" style="border: 1px solid rgb(192, 192, 192); height: auto; max-width: 95%; padding: 4px;" title="Related Posts Widget 06" /></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /> <div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px; text-align: center;"> <a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/live-demo/related-posts-live-demo-6.html" rel="nofollow" style="-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; -webkit-transition: background-position 1s; background-clip: border-box; background-color: #79be1e; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvYsT1KqHT2VbcvgAjOyP6pzAP3LziTYEd0hCDyDSLhIApTNSXfIgNJA2aszFBwhH_POMDBVtleUABTc_5AALZzkuI5_BADMLipVYuC6vTQ23oNIFc5jm0JW-epBBqrome-Y0nO5tQd-S/s144/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvYsT1KqHT2VbcvgAjOyP6pzAP3LziTYEd0hCDyDSLhIApTNSXfIgNJA2aszFBwhH_POMDBVtleUABTc_5AALZzkuI5_BADMLipVYuC6vTQ23oNIFc5jm0JW-epBBqrome-Y0nO5tQd-S/s144/button_bg.png), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgb(162, 211, 30)), to(rgba(162, 211, 30, 0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(130, 204, 39)), to(rgb(116, 179, 23))); background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; border: 1px solid rgb(150, 163, 123) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: rgb(52, 89, 3) !important; cursor: pointer; display: inline-block; font-family: Calibri, Arial, sans-serif; font-size: 30px; line-height: normal; padding: 10px 20px; position: relative; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; transition: background-position 1s; vertical-align: baseline; white-space: nowrap;" target="_blank">Live Demo</a></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div class="code" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVGSfDMSCnAiccpvP_7QHdb7iT1TrpbDn16dre9Dojj5uJDgJKMl9DR5CWW7eoknVVQ2sMpW4taIwjQgdD6z1vDFtFeFTq5v23Nll0UurM9MeTgtN7VDdCzCVrwn6V45y4Vp-b2OezTzOZ/) 0% 0% repeat-y rgb(255, 255, 255); font-family: 'Courier New'; font-size: 12px; line-height: 19.200000762939453px; margin: 5px 10px; max-height: 200px; overflow: auto; padding: 4px 10px 0px 40px;"> <script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/related-posts-min-1-ycode.js' type='text/javascript'/><link href='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/related-posts-min-6.css' rel='stylesheet' type='text/css'/><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='My Blogger Tricks'><img alt='My Blogger Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%; top: 0px;'/></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='All Blogger Tricks'><img alt='All Blogger Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%;'/></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='Latest Tips and Tricks'><img alt='Latest Tips and Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; left: 0%;'/></a><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;<span style="color: magenta; font-size: medium;"><b>max-results=5</b></span>&quot;' type='text/javascript'/></b:if></b:loop><br /><b><h2 class='title' style='color:#fff;background-color:#000;width:150px;'><span style="color: purple;">Related Topics</span></h2></b><br /><script type='text/javascript'><br />var currentposturl=&quot;<data:post.url/>&quot;;<br /><b><span style="color: magenta;">var maxresults=5;</span></b> <!-- Increase To Show More Then 5 Related Post --><br />removeRelatedDuplicates(); printRelatedLabels();<br /></script><br /></div><br /></b:if></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">Style 7:-</span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px; text-align: center;"> <img alt="Related Posts Widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL4agJscG4Nu2h_ezsby3Lnlnth54nlu5a6weZpiaYRKQaa7QCcBCXrAJ9nF11HuORKV-CmEkURcaFcPFPModelJAUF8m6MURe4xyMSeKz5EhdpfwxN-XcYhQ230jI-3qLl2UdtlneAU2N/s1600/Related+Posts+Widget+07.png" style="border: 1px solid rgb(192, 192, 192); height: auto; max-width: 95%; padding: 4px;" title="Related Posts Widget 07" /></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /> <div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px; text-align: center;"> <a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/live-demo/related-posts-live-demo-7.html" rel="nofollow" style="-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; -webkit-transition: background-position 1s; background-clip: border-box; background-color: #79be1e; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvYsT1KqHT2VbcvgAjOyP6pzAP3LziTYEd0hCDyDSLhIApTNSXfIgNJA2aszFBwhH_POMDBVtleUABTc_5AALZzkuI5_BADMLipVYuC6vTQ23oNIFc5jm0JW-epBBqrome-Y0nO5tQd-S/s144/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvYsT1KqHT2VbcvgAjOyP6pzAP3LziTYEd0hCDyDSLhIApTNSXfIgNJA2aszFBwhH_POMDBVtleUABTc_5AALZzkuI5_BADMLipVYuC6vTQ23oNIFc5jm0JW-epBBqrome-Y0nO5tQd-S/s144/button_bg.png), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgb(162, 211, 30)), to(rgba(162, 211, 30, 0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(130, 204, 39)), to(rgb(116, 179, 23))); background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; border: 1px solid rgb(150, 163, 123) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: rgb(52, 89, 3) !important; cursor: pointer; display: inline-block; font-family: Calibri, Arial, sans-serif; font-size: 30px; line-height: normal; padding: 10px 20px; position: relative; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; transition: background-position 1s; vertical-align: baseline; white-space: nowrap;" target="_blank">Live Demo</a></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div class="code" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVGSfDMSCnAiccpvP_7QHdb7iT1TrpbDn16dre9Dojj5uJDgJKMl9DR5CWW7eoknVVQ2sMpW4taIwjQgdD6z1vDFtFeFTq5v23Nll0UurM9MeTgtN7VDdCzCVrwn6V45y4Vp-b2OezTzOZ/) 0% 0% repeat-y rgb(255, 255, 255); font-family: 'Courier New'; font-size: 12px; line-height: 19.200000762939453px; margin: 5px 10px; max-height: 200px; overflow: auto; padding: 4px 10px 0px 40px;"> <script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/related-posts-min-1-ycode.js' type='text/javascript'/><link href='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/related-posts-min-7.css' rel='stylesheet' type='text/css'/><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='My Blogger Tricks'><img alt='My Blogger Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%; top: 0px;'/></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='All Blogger Tricks'><img alt='All Blogger Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%;'/></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='Latest Tips and Tricks'><img alt='Latest Tips and Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; left: 0%;'/></a><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;<span style="color: magenta; font-size: medium;"><b>max-results=5</b></span>&quot;' type='text/javascript'/></b:if></b:loop><br /><b><h2 class='title' style='color:#fff;background-color:#000;width:150px;'><span style="color: purple;">Related Topics</span></h2></b><br /><script type='text/javascript'><br />var currentposturl=&quot;<data:post.url/>&quot;;<br /><b><span style="color: magenta;">var maxresults=5;</span></b> <!-- Increase To Show More Then 5 Related Post --><br />removeRelatedDuplicates(); printRelatedLabels();<br /></script><br /></div><br /></b:if></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">Style 8:-</span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px; text-align: center;"> <img alt="Related Posts Widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuU7JUSHuG3cxvDTckvc3_0G-w8rz5nP4qvttUbmMQ5uw6dmyvEMNT0djLggSgujJIe03cV8GGm6ShX0uQkx9PgKWAosd-49ML8erQOU7m_lgv3IHZhWc98olD-YD5G2R6ix-gJibCXsVg/s1600/Related+Posts+Widget+08.png" style="border: 1px solid rgb(192, 192, 192); height: auto; max-width: 95%; padding: 4px;" title="Related Posts Widget 08" /></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /> <div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px; text-align: center;"> <a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/live-demo/related-posts-live-demo-8.html" rel="nofollow" style="-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; -webkit-transition: background-position 1s; background-clip: border-box; background-color: #79be1e; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvYsT1KqHT2VbcvgAjOyP6pzAP3LziTYEd0hCDyDSLhIApTNSXfIgNJA2aszFBwhH_POMDBVtleUABTc_5AALZzkuI5_BADMLipVYuC6vTQ23oNIFc5jm0JW-epBBqrome-Y0nO5tQd-S/s144/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvYsT1KqHT2VbcvgAjOyP6pzAP3LziTYEd0hCDyDSLhIApTNSXfIgNJA2aszFBwhH_POMDBVtleUABTc_5AALZzkuI5_BADMLipVYuC6vTQ23oNIFc5jm0JW-epBBqrome-Y0nO5tQd-S/s144/button_bg.png), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgb(162, 211, 30)), to(rgba(162, 211, 30, 0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(130, 204, 39)), to(rgb(116, 179, 23))); background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; border: 1px solid rgb(150, 163, 123) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: rgb(52, 89, 3) !important; cursor: pointer; display: inline-block; font-family: Calibri, Arial, sans-serif; font-size: 30px; line-height: normal; padding: 10px 20px; position: relative; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; transition: background-position 1s; vertical-align: baseline; white-space: nowrap;" target="_blank">Live Demo</a></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div class="code" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVGSfDMSCnAiccpvP_7QHdb7iT1TrpbDn16dre9Dojj5uJDgJKMl9DR5CWW7eoknVVQ2sMpW4taIwjQgdD6z1vDFtFeFTq5v23Nll0UurM9MeTgtN7VDdCzCVrwn6V45y4Vp-b2OezTzOZ/) 0% 0% repeat-y rgb(255, 255, 255); font-family: 'Courier New'; font-size: 12px; line-height: 19.200000762939453px; margin: 5px 10px; max-height: 200px; overflow: auto; padding: 4px 10px 0px 40px;"> <script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/related-posts-min-1-ycode.js' type='text/javascript'/><link href='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/related-posts-min-8.css' rel='stylesheet' type='text/css'/><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='My Blogger Tricks'><img alt='My Blogger Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%; top: 0px;'/></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='All Blogger Tricks'><img alt='All Blogger Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%;'/></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='Latest Tips and Tricks'><img alt='Latest Tips and Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; left: 0%;'/></a><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;<span style="color: magenta; font-size: medium;"><b>max-results=5</b></span>&quot;' type='text/javascript'/></b:if></b:loop><br /><b><h2 class='title' style='color:#fff;background-color:#000;width:150px;'><span style="color: purple;">Related Topics</span></h2></b><br /><script type='text/javascript'><br />var currentposturl=&quot;<data:post.url/>&quot;;<br /><b><span style="color: magenta;">var maxresults=5;</span></b> <!-- Increase To Show More Then 5 Related Post --><br />removeRelatedDuplicates(); printRelatedLabels();<br /></script><br /></div><br /></b:if></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">Style 9:-</span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px; text-align: center;"> <img alt="Related Posts Widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzOmLpnZwpgKOCuPKx7FuhbW8WMbdjBSPUrFkEit_orojczsC-i-X6SrH0uoxvCfpmKp32wE5xm_RvYqSGreDucOrVVs742vWvlKYHsYzEEJkfRhi815VlKMZnf1NYDYh_AHJwiqgTABz-/s1600/Related+Posts+Widget+09.png" style="border: 1px solid rgb(192, 192, 192); height: auto; max-width: 95%; padding: 4px;" title="Related Posts Widget 09" /></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /> <div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px; text-align: center;"> <a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/live-demo/related-posts-live-demo-9.html" rel="nofollow" style="-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; -webkit-transition: background-position 1s; background-clip: border-box; background-color: #79be1e; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvYsT1KqHT2VbcvgAjOyP6pzAP3LziTYEd0hCDyDSLhIApTNSXfIgNJA2aszFBwhH_POMDBVtleUABTc_5AALZzkuI5_BADMLipVYuC6vTQ23oNIFc5jm0JW-epBBqrome-Y0nO5tQd-S/s144/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvYsT1KqHT2VbcvgAjOyP6pzAP3LziTYEd0hCDyDSLhIApTNSXfIgNJA2aszFBwhH_POMDBVtleUABTc_5AALZzkuI5_BADMLipVYuC6vTQ23oNIFc5jm0JW-epBBqrome-Y0nO5tQd-S/s144/button_bg.png), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgb(162, 211, 30)), to(rgba(162, 211, 30, 0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(130, 204, 39)), to(rgb(116, 179, 23))); background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; border: 1px solid rgb(150, 163, 123) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: rgb(52, 89, 3) !important; cursor: pointer; display: inline-block; font-family: Calibri, Arial, sans-serif; font-size: 30px; line-height: normal; padding: 10px 20px; position: relative; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; transition: background-position 1s; vertical-align: baseline; white-space: nowrap;" target="_blank">Live Demo</a></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div class="code" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVGSfDMSCnAiccpvP_7QHdb7iT1TrpbDn16dre9Dojj5uJDgJKMl9DR5CWW7eoknVVQ2sMpW4taIwjQgdD6z1vDFtFeFTq5v23Nll0UurM9MeTgtN7VDdCzCVrwn6V45y4Vp-b2OezTzOZ/) 0% 0% repeat-y rgb(255, 255, 255); font-family: 'Courier New'; font-size: 12px; line-height: 19.200000762939453px; margin: 5px 10px; max-height: 200px; overflow: auto; padding: 4px 10px 0px 40px;"> <script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/related-posts-min-1-ycode.js' type='text/javascript'/><link href='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/related-posts-min-9.css' rel='stylesheet' type='text/css'/><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='My Blogger Tricks'><img alt='My Blogger Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%; top: 0px;'/></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='All Blogger Tricks'><img alt='All Blogger Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%;'/></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='Latest Tips and Tricks'><img alt='Latest Tips and Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; left: 0%;'/></a><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;<span style="color: magenta; font-size: medium;"><b>max-results=5</b></span>&quot;' type='text/javascript'/></b:if></b:loop><br /><b><h2 class='title' style='color:#fff;background-color:#000;width:150px;'><span style="color: purple;">Related Topics</span></h2></b><br /><script type='text/javascript'><br />var currentposturl=&quot;<data:post.url/>&quot;;<br /><b><span style="color: magenta;">var maxresults=5;</span></b> <!-- Increase To Show More Then 5 Related Post --><br />removeRelatedDuplicates(); printRelatedLabels();<br /></script><br /></div><br /></b:if></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">Style 10:-</span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px; text-align: center;"> <img alt="Related Posts Widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh-pgjOyt1VuBoT4oIJqnNBdg355Tp8IYxCooiKXHbfF4DbCfRmUVfnAooO7SanStEBcs6e5lFnFd7FWqctGRr4f7JhcyGCs4gFDkKnJUn0hsUuA7HppwXrbyNPK5_71BUGbD2yZWF00ED/s1600/Related+Posts+Widget+010.png" style="border: 1px solid rgb(192, 192, 192); height: auto; max-width: 95%; padding: 4px;" title="Related Posts Widget 010" /></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /> <div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px; text-align: center;"> <a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/live-demo/related-posts-live-demo-10.html" rel="nofollow" style="-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; -webkit-transition: background-position 1s; background-clip: border-box; background-color: #79be1e; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvYsT1KqHT2VbcvgAjOyP6pzAP3LziTYEd0hCDyDSLhIApTNSXfIgNJA2aszFBwhH_POMDBVtleUABTc_5AALZzkuI5_BADMLipVYuC6vTQ23oNIFc5jm0JW-epBBqrome-Y0nO5tQd-S/s144/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvYsT1KqHT2VbcvgAjOyP6pzAP3LziTYEd0hCDyDSLhIApTNSXfIgNJA2aszFBwhH_POMDBVtleUABTc_5AALZzkuI5_BADMLipVYuC6vTQ23oNIFc5jm0JW-epBBqrome-Y0nO5tQd-S/s144/button_bg.png), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgb(162, 211, 30)), to(rgba(162, 211, 30, 0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(130, 204, 39)), to(rgb(116, 179, 23))); background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; border: 1px solid rgb(150, 163, 123) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: rgb(52, 89, 3) !important; cursor: pointer; display: inline-block; font-family: Calibri, Arial, sans-serif; font-size: 30px; line-height: normal; padding: 10px 20px; position: relative; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; transition: background-position 1s; vertical-align: baseline; white-space: nowrap;" target="_blank">Live Demo</a></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div class="code" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVGSfDMSCnAiccpvP_7QHdb7iT1TrpbDn16dre9Dojj5uJDgJKMl9DR5CWW7eoknVVQ2sMpW4taIwjQgdD6z1vDFtFeFTq5v23Nll0UurM9MeTgtN7VDdCzCVrwn6V45y4Vp-b2OezTzOZ/) 0% 0% repeat-y rgb(255, 255, 255); font-family: 'Courier New'; font-size: 12px; line-height: 19.200000762939453px; margin: 5px 10px; max-height: 200px; overflow: auto; padding: 4px 10px 0px 40px;"> <script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/related-posts-min-1-ycode.js' type='text/javascript'/><link href='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/related-posts-min-10.css' rel='stylesheet' type='text/css'/><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='My Blogger Tricks'><img alt='My Blogger Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%; top: 0px;'/></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='All Blogger Tricks'><img alt='All Blogger Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%;'/></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='Latest Tips and Tricks'><img alt='Latest Tips and Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; left: 0%;'/></a><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;<span style="color: magenta; font-size: medium;"><b>max-results=5</b></span>&quot;' type='text/javascript'/></b:if></b:loop><br /><b><h2 class='title' style='color:#fff;background-color:#000;width:150px;'><span style="color: purple;">Related Topics</span></h2></b><br /><script type='text/javascript'><br />var currentposturl=&quot;<data:post.url/>&quot;;<br /><b><span style="color: magenta;">var maxresults=5;</span></b> <!-- Increase To Show More Then 5 Related Post --><br />removeRelatedDuplicates(); printRelatedLabels();<br /></script><br /></div><br /></b:if></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;">Style 11:-</span><br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /><br /> <div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px; text-align: center;"> <img alt="Related Posts Widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWUR4NPopBVzzF_vTiu2vAmVJv5luYxIlEvHF9LtimDIZDBIDhKytqGifD2HLigK5dD8G0G97qyxc89hT7P0ONJCzodb0ZY65KtVFtAtcSfW7eVkWwABnPuIY3cRW2Hrgzlja5KsIZMMDT/s1600/Related+Posts+Widget+011.png" style="border: 1px solid rgb(192, 192, 192); height: auto; max-width: 95%; padding: 4px;" title="Related Posts Widget 011" /></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /> <div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px; text-align: center;"> <a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/related-posts/live-demo/related-posts-live-demo-11.html" rel="nofollow" style="-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; -webkit-transition: background-position 1s; background-clip: border-box; background-color: #79be1e; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvYsT1KqHT2VbcvgAjOyP6pzAP3LziTYEd0hCDyDSLhIApTNSXfIgNJA2aszFBwhH_POMDBVtleUABTc_5AALZzkuI5_BADMLipVYuC6vTQ23oNIFc5jm0JW-epBBqrome-Y0nO5tQd-S/s144/button_bg.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvYsT1KqHT2VbcvgAjOyP6pzAP3LziTYEd0hCDyDSLhIApTNSXfIgNJA2aszFBwhH_POMDBVtleUABTc_5AALZzkuI5_BADMLipVYuC6vTQ23oNIFc5jm0JW-epBBqrome-Y0nO5tQd-S/s144/button_bg.png), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgb(162, 211, 30)), to(rgba(162, 211, 30, 0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(130, 204, 39)), to(rgb(116, 179, 23))); background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; border: 1px solid rgb(150, 163, 123) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: rgb(52, 89, 3) !important; cursor: pointer; display: inline-block; font-family: Calibri, Arial, sans-serif; font-size: 30px; line-height: normal; padding: 10px 20px; position: relative; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; transition: background-position 1s; vertical-align: baseline; white-space: nowrap;" target="_blank">Live Demo</a></div> <br style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.200000762939453px;" /></div>

How To Do Add Nice Related Posts Widget For Blogger / Blogspot with jQuery

Related posts widget is very important for a blog, because it increases the number of page views and also help the visitor to view other po...

Read more »