GulPa Tech Template

Add your blog is a beautiful Labels widget !!!

GulPaTech 0 Blog Tips, Widgets Sunday, 27 March 2016

<div dir="ltr" style="text-align: left;" trbidi="on">Today, I got to see beautiful labels Widget. Different Style. I hope you'll like it.  <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg07sE-RTfgoC6a8OEF42DgSgJN3zTiekhS_ickdN6H7P5IH9Vimmsn3eWDUaLXOykjre-PI-8FQLFb3s1UvL83pN4ZraoFR3zsKYSHECqem-iDCaQYi52lCZ0x9le9a5jEAYXN6o6hhSDZ/s1600/Untitled.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="labels widgets" border="0" height="311" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg07sE-RTfgoC6a8OEF42DgSgJN3zTiekhS_ickdN6H7P5IH9Vimmsn3eWDUaLXOykjre-PI-8FQLFb3s1UvL83pN4ZraoFR3zsKYSHECqem-iDCaQYi52lCZ0x9le9a5jEAYXN6o6hhSDZ/s320/Untitled.png" title="" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"> </div><div class="separator" style="clear: both;">Now take a look at how to add:</div><div class="separator" style="clear: both;"> </div><div class="separator" style="clear: both;"> </div><div class="separator" style="clear: both;"></div><ul style="background-color: white; color: #333333; line-height: 19.2px;"><li>Log on to your blog.</li><li>From the Dashboard, click on the Layout option.</li><li>Click on the Add a Gadget will appear, then there is a Html / JavaScript click.</li><li>There will be another page in the empty box Title Content, copy and paste the code below into the box.</li></ul><div><div style="font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;"><ol style="line-height: 22.4px;"><div class="code" style="border-color: rgb(218, 218, 218); border-style: solid; border-width: 1px 1px 1px 20px; letter-spacing: 0.293333px; line-height: 16px; margin: 10px 0px 10px 10px; max-height: 500px; min-height: 16px; outline: none; overflow: auto; padding: 5px; vertical-align: baseline; width: 549px;"><style type="text/css"> /*<![CDATA[*/ .label-size { float: left; margin: 0 0 7px 20px; position: relative; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.75em; font-weight: bold; text-decoration: none; color: #996633; text-shadow: 0px 1px 0px rgba(255,255,255,.4); padding: 0.417em 0.417em 0.417em 0.917em; border-top: 1px solid #d99d38; border-right: 1px solid #d99d38; border-bottom: 1px solid #d99d38; -webkit-border-radius: 0 0.25em 0.25em 0; -moz-border-radius: 0 0.25em 0.25em 0; border-radius: 0 0.25em 0.25em 0; background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47'); -webkit-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1); -moz-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1); box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1); z-index: 1; } .label-size:before { content: ''; width: 1.30em; height: 1.39em; background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47'); position: absolute; left: -0.69em; top: .2em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); border-left: 1px solid #d99d38; border-bottom: 1px solid #d99d38; -webkit-border-radius: 0 0 0 0.25em; -moz-border-radius: 0 0 0 0.25em; border-radius: 0 0 0 0.25em; z-index: 1; } .label-size:after { content: ''; width: 0.5em; height: 0.5em; background: #fff; -webkit-border-radius: 4.167em; -moz-border-radius: 4.167em; border-radius: 4.167em; border: 1px solid #d99d38; -webkit-box-shadow: 0 1px 0 #faeaba; -moz-box-shadow: 0 1px 0 #faeaba; box-shadow: 0 1px 0 #faeaba; position: absolute; top: 0.667em; left: -0.083em; z-index: 9999; } #Label1 { height: 210px; } .label-size:hover { background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c'); border-color: #e1b160; } .label-size:hover:before { background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c'); border-color: #e1b160; } /*]]>*/ </style> <a href="http://www.wehelpalways.blogspot.in/" >Blogger Widgets</a></div></ol></div></div><div><ul style="text-align: left;"><li>Now click on Save it. I hope you do not understand what the problem is. If you tell me to comment on any issue.</li></ul><div> </div></div><div> </div><div> </div><div> </div><div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;"><h4 style="border-bottom-color: rgb(102, 102, 102); border-bottom-style: solid; border-bottom-width: 1px; font-family: 'bold sans-serif', arial; font-size: 18.2px; font-stretch: normal; font-weight: normal; line-height: normal; margin: 0px 0px 10px; padding: 3px;">Author:</h4></div><div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnzyaaIhC1ArGyNqeLh-vhdc7HDFVO1RzRwZP4y3iOHW2MJDfGXNo-x6hcCQDvDY0_fOVhkAt2UFCv2wSAj6bwQYffKZgtTfQ3Lv-hXUhd7D0Qu9W0ErKB9eMIIx9LChVTZUFZXd4SNZ_l/s1600/Parvej+Alam+%252898%2529.jpg" imageanchor="1" style="clear: right; color: #999999; float: right; margin-bottom: 1em; margin-left: 1em; text-decoration: none;"><img alt="Parvej Alam" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnzyaaIhC1ArGyNqeLh-vhdc7HDFVO1RzRwZP4y3iOHW2MJDfGXNo-x6hcCQDvDY0_fOVhkAt2UFCv2wSAj6bwQYffKZgtTfQ3Lv-hXUhd7D0Qu9W0ErKB9eMIIx9LChVTZUFZXd4SNZ_l/s200/Parvej+Alam+%252898%2529.jpg" style="border: 1px solid rgb(192, 192, 192); height: auto; max-width: 95%; padding: 4px; transition: all 0.4s ease-in-out;" title="" width="185" /></a></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-align: justify;">My name is Parvej Alam. Founder of Gulpa Tutorial Ltd. I am a student of JNU Calcutta branch of the BCA is studying in 3rd year.</div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-align: justify;"><div style="line-height: 19.2px;">He loves to share his thoughts with others like helping others </div><div style="line-height: 19.2px;">in the niche of HTML,CSS,JavaScript, C Programming, Microsoft Excel Formula and other Blogger and Computer Tips. </div><div style="line-height: 19.2px;">Currently he is living in Malda (West Bengal). You can find him on various Social Media Networks given Below.</div><div style="line-height: 19.2px;"><a href="https://www.twitter.com/parvej4u2" style="color: #999999; text-decoration: none;" target="_blank"><img src="https://1.bp.blogspot.com/-TD3jCs_IZcg/UiIRjnuFRyI/AAAAAAAACUA/9ZYp0awI3Ss/s1600/twitter.png" style="border: 1px solid rgb(192, 192, 192); height: auto; max-width: 95%; padding: 4px; transition: all 0.4s ease-in-out;" title="Twitter" /></a><a href="https://www.facebook.com/parvej4u2" style="color: #999999; text-decoration: none;" target="_blank"><img src="https://1.bp.blogspot.com/-XtMSvGt9QbM/UiIRj_Z-xkI/AAAAAAAACUE/lxKPo9uepx4/s1600/facebook.png" style="border: 1px solid rgb(192, 192, 192); height: auto; line-height: 19.2px; max-width: 95%; padding: 4px; transition: all 0.4s ease-in-out;" title="Facebook" /></a><a href="https://plus.google.com/u/0/114312941188673148368" style="color: #999999; text-decoration: none;" target="_blank"><img src="https://4.bp.blogspot.com/-l6tB4HfZcfY/UjdItwk9-7I/AAAAAAAACW4/iHklkLWO_Fs/s1600/google.png" style="border: 1px solid rgb(192, 192, 192); height: auto; line-height: 19.2px; max-width: 95%; padding: 4px; transition: all 0.4s ease-in-out;" title="Google plus" /></a></div></div></div><div> </div></div>

Add your blog is a beautiful Labels widget !!!

Today, I got to see beautiful labels Widget. Different Style. I hope you'll like it. Now take a look at how to add: Log on to your blo...

Give Your Blog Images Zoom Effect !!!

GulPaTech 0 Blog Tips, CSS, Widgets

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">I hope everyone is healthy is good. At today's CSS3 What style will show a link to the blog Zoom will show the image. Moreover, the blog post we have a lot of time with small images. When you place your mouse over the photo Zoom the image of the show. There are other ways, but I think it's convenient. Let's take a look.</div> <div style="text-align: center;"><img alt="photo zoom effects" src="http://upload.wikimedia.org/wikipedia/commons/a/a2/1328101984_Zoom-in.png" title="" /></div> <div class="message_box announce" style="background-attachment: scroll; background-position: 10px 50%; background-repeat: no-repeat; border: 1px solid rgb(51, 53, 54); color: #222224; line-height: 19.2px; margin: 15px 0px; padding: 0.5em 1em 0.5em 3em;"><div style="text-align: center;">How will this add to your blog widgets....</div></div> <ul style="text-align: left;"><li>First, login to your Blogger Blog.</li><li>From the Dashboard, click on the Template → Edit HTML.</li><li>Now press CTRL + F on your keyboard Look for the tag below.</li></ul><blockquote class="tr_bq" style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmxkB-ndD3T5iAkFqtmmiJ8DoWL7njkPowen1GP6IrOZUIM2rw-B4EIAvL3VGYp34WindwdHuwHE2VSMLxEcpPYRoPOVDi0jxA64YDuw54roV4tT7t1dLY6ZQAOZv_lGE_HBnHB_nexiIt/s1600/quotation-l.png") 0% 5px no-repeat rgb(255, 255, 255); font-family: verdana, geneva, sans-serif; line-height: 1.6em; margin: 20px; opacity: 0.75; padding-left: 40px;">]]></b:skin></blockquote><ul style="color: #333333; font-family: Verdana, Geneva, sans-serif; line-height: 19.2px;"><li>When looking at the top of the tag just before putting it in the bottom of the CSS code.</li></ul><div style="line-height: 19.2px;"><div><ol style="font-size: 12px; line-height: 22.4px;"><div class="code" style="border-color: rgb(218, 218, 218); border-style: solid; border-width: 1px 1px 1px 20px; letter-spacing: 0.293333px; line-height: 16px; margin: 10px 0px 10px 10px; max-height: 500px; min-height: 16px; outline: none; overflow: auto; padding: 5px; vertical-align: baseline; width: 549px;"></style><style type="text/css"> /*URL: http://tomarijonnor.blogspot.com */ .hovergallery img{ -webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/ -moz-transform:scale(0.8); /*Mozilla scale version*/ -o-transform:scale(0.8); /*Opera scale version*/ -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ -moz-transition-duration: 0.5s; /*Mozilla duration version*/ -o-transition-duration: 0.5s; /*Opera duration version*/ } .hovergallery img:hover{ -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform:scale(1.1); /*Mozilla scale version*/ -o-transform:scale(1.1); /*Opera scale version*/ opacity: 1; } </style></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; line-height: 22.4px;"></div></ol></div></div><div><ul style="text-align: left;"><li>Now Save your work.</li></ul></div><div style="text-align: justify;">Now when you go to the zooming effect on any blog post to any image you want, then class = "hover gallery" specific image <div> tag should be.</div><ul style="background-color: white; list-style: none; padding: 0px; text-align: left;"><li style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;"></li></ul> <ul style="color: #333333; font-family: Verdana, Geneva, sans-serif; line-height: 19.2px; text-align: left;"><li>Take a look down the well.</li></ul><div><blockquote class="tr_bq" style="background-attachment: initial; background-clip: initial; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmxkB-ndD3T5iAkFqtmmiJ8DoWL7njkPowen1GP6IrOZUIM2rw-B4EIAvL3VGYp34WindwdHuwHE2VSMLxEcpPYRoPOVDi0jxA64YDuw54roV4tT7t1dLY6ZQAOZv_lGE_HBnHB_nexiIt/s1600/quotation-l.png"); background-origin: initial; background-position: 0% 5px; background-repeat: no-repeat; background-size: initial; margin: 20px; opacity: 0.75; padding-left: 40px;"><a class="hovergallery" href="http://gulpatutorial.blogspot.in/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM6A6Tm7QtlnLqDF7S4OQPNdIaIO-CWRjNNah4ccocGMp0xoStLqn3Z5smauDVLj_0fZMuaTp9gatjZ5DymWDjxEABjkJFJl1Oj6WgrtzTqliYePvd1rO_DIl3ZeD4d1ZBxiK_zRXy1tN9/s1600/Parvej+Alam+%252849%2529+copy.png"/></blockquote></div><div>Note: The Green Color of the enclosed part of the link. The Blue Color of the                enclosed part of the Photo. <div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;"><div> </div><h4 style="border-bottom-color: rgb(102, 102, 102); border-bottom-style: solid; border-bottom-width: 1px; font-family: 'bold sans-serif', arial; font-size: 18.2px; font-stretch: normal; font-weight: normal; line-height: normal; margin: 0px 0px 10px; padding: 3px;">Author:</h4></div><div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnzyaaIhC1ArGyNqeLh-vhdc7HDFVO1RzRwZP4y3iOHW2MJDfGXNo-x6hcCQDvDY0_fOVhkAt2UFCv2wSAj6bwQYffKZgtTfQ3Lv-hXUhd7D0Qu9W0ErKB9eMIIx9LChVTZUFZXd4SNZ_l/s1600/Parvej+Alam+%252898%2529.jpg" imageanchor="1" style="clear: right; color: #999999; float: right; margin-bottom: 1em; margin-left: 1em; text-decoration: none;"><img alt="Parvej Alam" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnzyaaIhC1ArGyNqeLh-vhdc7HDFVO1RzRwZP4y3iOHW2MJDfGXNo-x6hcCQDvDY0_fOVhkAt2UFCv2wSAj6bwQYffKZgtTfQ3Lv-hXUhd7D0Qu9W0ErKB9eMIIx9LChVTZUFZXd4SNZ_l/s200/Parvej+Alam+%252898%2529.jpg" style="border: 1px solid rgb(192, 192, 192); height: auto; max-width: 95%; padding: 4px; transition: all 0.4s ease-in-out;" title="" width="185" /></a></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-align: justify;"> </div> <div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-align: justify;"><div style="line-height: 19.2px;">My name is Parvej Alam. Founder of Gulpa Tutorial Ltd. I am a student of JNU Calcutta branch of the BCA is studying in 3rd year.</div><div style="line-height: 19.2px;">He loves to share his thoughts with others like helping others </div><div style="line-height: 19.2px;">in the niche of HTML,CSS,JavaScript, C Programming, Microsoft Excel Formula and other Blogger and Computer Tips. </div><div style="line-height: 19.2px;">Currently he is living in Malda (West Bengal). You can find him on various Social Media Networks given Below.</div><div style="line-height: 19.2px;"><a href="https://www.twitter.com/parvej4u2" style="color: #999999; text-decoration: none;" target="_blank"><img src="https://1.bp.blogspot.com/-TD3jCs_IZcg/UiIRjnuFRyI/AAAAAAAACUA/9ZYp0awI3Ss/s1600/twitter.png" style="border: 1px solid rgb(192, 192, 192); height: auto; max-width: 95%; padding: 4px; transition: all 0.4s ease-in-out;" title="Twitter" /></a><a href="https://www.facebook.com/parvej4u2" style="color: #999999; text-decoration: none;" target="_blank"><img src="https://1.bp.blogspot.com/-XtMSvGt9QbM/UiIRj_Z-xkI/AAAAAAAACUE/lxKPo9uepx4/s1600/facebook.png" style="border: 1px solid rgb(192, 192, 192); height: auto; line-height: 19.2px; max-width: 95%; padding: 4px; transition: all 0.4s ease-in-out;" title="Facebook" /></a><a href="https://plus.google.com/u/0/114312941188673148368" style="color: #999999; text-decoration: none;" target="_blank"><img src="https://4.bp.blogspot.com/-l6tB4HfZcfY/UjdItwk9-7I/AAAAAAAACW4/iHklkLWO_Fs/s1600/google.png" style="border: 1px solid rgb(192, 192, 192); height: auto; line-height: 19.2px; max-width: 95%; padding: 4px; transition: all 0.4s ease-in-out;" title="Google plus" /></a></div></div></div> </div>

Give Your Blog Images Zoom Effect !!!

I hope everyone is healthy is good. At today's CSS3 What style will show a link to the blog Zoom will show the image. Moreover, the blog...

Stylish CSS Author Box Widget for Blogger

GulPaTech 0 Blog Tips, Widgets Sunday, 20 March 2016

<div dir="ltr" style="text-align: left;" trbidi="on">Author Box is a Box below posts which shows the Author Picture,Contact Address of Social Sites, and Few Lines About the Author. <div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-align: center;"> </div><div dir="ltr" style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;" trbidi="on"><div class="message_box announce" style="background-attachment: scroll; background-clip: initial; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL0D4qL8hFILRv7AKYvKqQ7O8alEokwmWgDWt5KuBxrj_2xhiVXFEhV3TWiOaKzXjYC0XoMvc1cOWsFL5ACCC3mBnRmYFDXDJIIPH5gFKRF7W7vUxfY0p6-XfeZqzhKiAqVn9Ju5ER_4tI/s1600/speaker.png"); background-origin: initial; background-position: 10px 50%; background-repeat: no-repeat; background-size: initial; border: 1px solid rgb(51, 53, 54); margin: 15px 0px; padding: 0.5em 1em 0.5em 3em;"> How it Actually Looks Below Posts?</div></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8TBhwTjn6DcJ_I_-szDYxknP9g9dgZixmPIBp0HhYmfKaSB_EW_r5GhBFgFCXDsWeS4cLb2iVH7K8wpG6fXap8h7cVaD66gQTmV4uTpPbVeUbE5Hnm9tflBPiDGqiNne9LZb9Jq6zAbvv/s1600/Untitled.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Author Box widgets for blogger" border="0" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8TBhwTjn6DcJ_I_-szDYxknP9g9dgZixmPIBp0HhYmfKaSB_EW_r5GhBFgFCXDsWeS4cLb2iVH7K8wpG6fXap8h7cVaD66gQTmV4uTpPbVeUbE5Hnm9tflBPiDGqiNne9LZb9Jq6zAbvv/s400/Untitled.png" title="" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"> </div><ol style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; line-height: 22.4px;"><li>Go To Blogger > Template</li><li>Click Edit HTML</li><li>Search for </li><div class="code" style="border-color: rgb(218, 218, 218); border-style: solid; border-width: 1px 1px 1px 20px; font-size: 12px; letter-spacing: 0.293333px; line-height: 16px; margin: 10px 0px 10px 10px; max-height: 500px; min-height: 16px; outline: none; overflow: auto; padding: 5px; vertical-align: baseline; width: 549px;"><div class='post-footer-line post-footer-line-1'></div><div style="font-size: 12px; line-height: 19.2px; text-align: center;"> </div><li>And Paste the Below Code Just Below the Above Code and Save the Template.</li></ol><div><div class="code" style="border-color: rgb(218, 218, 218); border-style: solid; border-width: 1px 1px 1px 20px; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; letter-spacing: 0.293333px; line-height: 16px; margin: 10px 0px 10px 10px; max-height: 500px; min-height: 16px; outline: none; overflow: auto; padding: 5px; vertical-align: baseline; width: 549px;"><pre id="line1" style="background-color: white;">”."><style> .wc-aboutauthor{ float:left; width:500px; padding:15px; border:1px solid #ccc; margin-bottom:15px; margin-top:15px; background:url('http://3.bp.blogspot.com/-t5gDiTb7yUc/UjiYfNUgBBI/AAAAAAAACXI/J1tb_tlU5-k/s1600/backgrounds.png'); color:#444444; -webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .3); -moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .3); box-shadow:0px 0px 10px rgba(0, 0, 0, .3); } .wc-aboutauthor h2 { color:#b6e026;font-family:Helvetica,Arial;font-weight:bold;text-shadow:#64665b 0px 1px 1px;font-size:28px;margin-bottom:-6px; } .wc-aboutpic{ float:right; margin:0 0 0 10px; } .wc-aboutpic img{ border:1px solid #999999; -webkit-transition:-webkit-transform .15s linear; -moz-transition:-moz-transform .15s linear; -o-transition:-o-transform .15s linear;transition:transform .15s linear; -webkit-box-shadow:0 3px 6px rgba(0,0,0,.25); -moz-box-shadow:0 3px 6px rgba(0,0,0,.25); box-shadow:0 3px 6px rgba(0,0,0,.25); padding:5px 5px 5px 5px;-webkit-transform:rotate(+5deg); -moz-transform:rotate(+5deg);-ms-transform:rotate(+5deg); -o-transform:rotate(+5deg);transform:rotate(+5deg);float:left; } .wc-aboutpic img:hover{ background:#FFFFFF; -webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .3); -moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .3); box-shadow:0px 0px 10px rgba(0, 0, 0, .3); -webkit-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -ms-transform:rotate(-1deg); -o-transform:rotate(-1deg); transform:rotate(-1deg); } .wc-aboutsoc img { height:35px; margin-bottom:-13px; } .wc-aboutsoc p { font:16px georgia; color:#ffffff; background:#b6e026; display:inline; border-radius:5px; padding:5px; margin-right:30px; } </style> <b:if cond='<a class="attribute-value" href="https://www.blogger.com/null">data:blog.pageType == "item"</a>'> <div class='<a class="attribute-value" href="https://www.blogger.com/null">wc-aboutauthor</a>'> <div class='<a class="attribute-value" href="https://www.blogger.com/null">wc-aboutpic</a>'> <img alt='<a class="attribute-value" href="https://www.blogger.com/null">Author image</a>' height='<a class="attribute-value" href="https://www.blogger.com/null">150</a>'</pre><pre id="line1"> src='<a class="attribute-value" href="view-source:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM6A6Tm7QtlnLqDF7S4OQPNdIaIO-CWRjNNah4ccocGMp0xoStLqn3Z5smauDVLj_0fZMuaTp9gatjZ5DymWDjxEABjkJFJl1Oj6WgrtzTqliYePvd1rO_DIl3ZeD4d1ZBxiK_zRXy1tN9/s1600/Parvej+Alam+%252849%2529+copy.png" style="background-color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM6A6Tm7QtlnLqDF7S4OQPNdIaIO-CWRjNNah4ccocGMp0xoStLqn3Z5smauDVLj_0fZMuaTp9gatjZ5DymWDjxEABjkJFJl1Oj6WgrtzTqliYePvd1rO_DIl3ZeD4d1ZBxiK_zRXy1tN9/s1600/Parvej+Alam+%252849%2529+copy.png</a>' width='<a class="attribute-value" href="https://www.blogger.com/null" style="background-color: white;">150</a>'/> </div> <h2 >About the Author :</h2> <p>My name is Parvej Alam. Founder of Gulpa Tutorial Ltd. I am a student of JNU Calcutta branch of the BCA is studying in 3rd year. He loves to share his thoughts with others like helping others in the niche of HTML,CSS,JavaScript, C Programming, Microsoft Excel Formula and other Blogger and Computer Tips. Currently he is living in Malda (West Bengal). You can find him on various Social Media Networks given Below.</p> <div class='<a class="attribute-value" href="https://www.blogger.com/null" style="background-color: white;">wc-aboutsoc</a>'> <p> Connect with Me on : </p><a href='<a class="attribute-value" href="view-source:https://www.facebook.com/parvej4u2" style="background-color: lime;">https://www.facebook.com/parvej4u2</a>'><img src='<a class="attribute-value" href="view-source:http://1.bp.blogspot.com/-XtMSvGt9QbM/UiIRj_Z-xkI/AAAAAAAACUE/lxKPo9uepx4/s1600/facebook.png" style="background-color: white;">http://1.bp.blogspot.com/-XtMSvGt9QbM/UiIRj_Z-xkI/AAAAAAAACUE/lxKPo9uepx4/s1600/facebook.png</a>' title='<a class="attribute-value" href="https://www.blogger.com/null" style="background-color: white;">Facebook</a>'/></a> <a href=<a class="attribute-value error" href="view-source:https://www.twitter.com/parvej4u2%27" style="background-color: lime;" title="Quote in an unquoted attribute value. Probable causes: Attributes running together or a URL query string in an unquoted attribute value.">https://www.twitter.com/parvej4u2</a><a class="attribute-value error" href="view-source:https://www.twitter.com/parvej4u2%27" style="background-color: white;" title="Quote in an unquoted attribute value. Probable causes: Attributes running together or a URL query string in an unquoted attribute value.">'</a>> <img src='<a class="attribute-value" href="view-source:http://1.bp.blogspot.com/-TD3jCs_IZcg/UiIRjnuFRyI/AAAAAAAACUA/9ZYp0awI3Ss/s1600/twitter.png" style="background-color: white;">http://1.bp.blogspot.com/-TD3jCs_IZcg/UiIRjnuFRyI/AAAAAAAACUA/9ZYp0awI3Ss/s1600/twitter.png</a>' title='<a class="attribute-value" href="https://www.blogger.com/null" style="background-color: white;">Twitter</a>'/></a> <a href='<a class="attribute-value" href="view-source:https://plus.google.com/u/0/114312941188673148368" style="background-color: lime;">https://plus.google.com/u/0/114312941188673148368</a>' > <img src='<a class="attribute-value" href="view-source:http://4.bp.blogspot.com/-l6tB4HfZcfY/UjdItwk9-7I/AAAAAAAACW4/iHklkLWO_Fs/s1600/google.png" style="background-color: white;">http://4.bp.blogspot.com/-l6tB4HfZcfY/UjdItwk9-7I/AAAAAAAACW4/iHklkLWO_Fs/s1600/google.png</a>' title='<a class="attribute-value" href="https://www.blogger.com/null" style="background-color: white;">Google plus</a>'/></a></div> </div> </b:if></pre></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-align: center;"> </div><div dir="ltr" style="font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px;" trbidi="on"><div class="message_box announce" style="background-attachment: scroll; background-clip: initial; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL0D4qL8hFILRv7AKYvKqQ7O8alEokwmWgDWt5KuBxrj_2xhiVXFEhV3TWiOaKzXjYC0XoMvc1cOWsFL5ACCC3mBnRmYFDXDJIIPH5gFKRF7W7vUxfY0p6-XfeZqzhKiAqVn9Ju5ER_4tI/s1600/speaker.png"); background-origin: initial; background-position: 10px 50%; background-repeat: no-repeat; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 1px solid rgb(51, 53, 54); margin: 15px 0px; padding: 0.5em 1em 0.5em 3em;"><ol style="text-align: left;"><li>Replace the Red Color Text with your Picture Link</li><li>Replace the Yellow Color Text About You</li><li style="color: #333333;">Replace the Green Color Text with the Facebook URL, Twitter URL, Google + URL Respectively</li></ol></div></div></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;"><h4 style="border-bottom-color: rgb(102, 102, 102); border-bottom-style: solid; border-bottom-width: 1px; font-family: 'bold sans-serif', arial; font-size: 18.2px; font-stretch: normal; font-weight: normal; line-height: normal; margin: 0px 0px 10px; padding: 3px;"> </h4><div> </div><h4 style="border-bottom-color: rgb(102, 102, 102); border-bottom-style: solid; border-bottom-width: 1px; font-family: 'bold sans-serif', arial; font-size: 18.2px; font-stretch: normal; font-weight: normal; line-height: normal; margin: 0px 0px 10px; padding: 3px;">Author:</h4></div><div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnzyaaIhC1ArGyNqeLh-vhdc7HDFVO1RzRwZP4y3iOHW2MJDfGXNo-x6hcCQDvDY0_fOVhkAt2UFCv2wSAj6bwQYffKZgtTfQ3Lv-hXUhd7D0Qu9W0ErKB9eMIIx9LChVTZUFZXd4SNZ_l/s1600/Parvej+Alam+%252898%2529.jpg" imageanchor="1" style="clear: right; color: #999999; float: right; margin-bottom: 1em; margin-left: 1em; text-decoration: none;"><img alt="Parvej Alam" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnzyaaIhC1ArGyNqeLh-vhdc7HDFVO1RzRwZP4y3iOHW2MJDfGXNo-x6hcCQDvDY0_fOVhkAt2UFCv2wSAj6bwQYffKZgtTfQ3Lv-hXUhd7D0Qu9W0ErKB9eMIIx9LChVTZUFZXd4SNZ_l/s200/Parvej+Alam+%252898%2529.jpg" style="border: 1px solid rgb(192, 192, 192); height: auto; max-width: 95%; padding: 4px; transition: all 0.4s ease-in-out;" title="" width="185" /></a></div><div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.2px; text-align: justify;"> </div><div style="color: #333333; font-size: 12px; line-height: 19.2px; text-align: justify;"><div style="line-height: 19.2px;">My name is Parvej Alam. Founder of Gulpa Tutorial Ltd. I am a student of JNU Calcutta branch of the BCA is studying in 3rd year.</div><div style="line-height: 19.2px;">He loves to share his thoughts with others like helping others </div><div style="line-height: 19.2px;">in the niche of HTML,CSS,JavaScript, C Programming, Microsoft Excel Formula and other Blogger and Computer Tips. </div><div style="line-height: 19.2px;">Currently he is living in Malda (West Bengal). You can find him on various Social Media Networks given Below.</div><div style="line-height: 19.2px;"><a href="https://www.twitter.com/parvej4u2" target="_blank"><img src="https://1.bp.blogspot.com/-TD3jCs_IZcg/UiIRjnuFRyI/AAAAAAAACUA/9ZYp0awI3Ss/s1600/twitter.png" title="Twitter" /></a><a href="https://www.facebook.com/parvej4u2" target="_blank"><img src="https://1.bp.blogspot.com/-XtMSvGt9QbM/UiIRj_Z-xkI/AAAAAAAACUE/lxKPo9uepx4/s1600/facebook.png" style="line-height: 19.2px;" title="Facebook" /></a><a href="https://plus.google.com/u/0/114312941188673148368" target="_blank"><img src="https://4.bp.blogspot.com/-l6tB4HfZcfY/UjdItwk9-7I/AAAAAAAACW4/iHklkLWO_Fs/s1600/google.png" style="line-height: 19.2px;" title="Google plus" /></a></div></div><div style="text-align: center;"> </div></div>

Stylish CSS Author Box Widget for Blogger

Author Box is a Box below posts which shows the Author Picture,Contact Address of Social Sites, and Few Lines About the Author. How it Actu...

New Style Subscribe E-mail Box for the Blogger Blog !!

GulPaTech 0 Blog Tips, Widgets Monday, 14 March 2016

<div dir="ltr" style="text-align: left;" trbidi="on">Do you know what a Email subscribe box or Subscription Form is? A box which brings high traffic to your blog. People just put their email address in an ordinary box and then click on the "Subscribe" button and then, they would get all your blog's new material right on their email's Inbox and if you have FeedBurner's summary feature enabled, they will come to your blog by reading an interesting heading on the reached email. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguvsfJAoHEh4SX6WvvzhyuxpJ_pYXWIXAnN69Fs15f5SIEs4GqJ9o3I3a-IO8Khx1lZqDqOJyxgVCeRKpY4HprIN8kHImDoRkesgecauaM1xGA6SiliWgqp3lfUA3kAxTYLfuAaCxQWVNg/s1600/Untitled.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguvsfJAoHEh4SX6WvvzhyuxpJ_pYXWIXAnN69Fs15f5SIEs4GqJ9o3I3a-IO8Khx1lZqDqOJyxgVCeRKpY4HprIN8kHImDoRkesgecauaM1xGA6SiliWgqp3lfUA3kAxTYLfuAaCxQWVNg/s1600/Untitled.png" /></a></div><div style="text-align: center;"> </div> <div style="background-color: white; letter-spacing: 0.293333px; line-height: 26.4px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;"><ul style="line-height: 2; list-style: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;"><li style="margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">Adding Jquery Plugin</li></ul></div><div style="background-color: white; letter-spacing: 0.293333px; line-height: 26.4px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">1. Go To Dashboard > Template > Edit HTML</div><div style="background-color: white; letter-spacing: 0.293333px; line-height: 26.4px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">2. Open a Search box by clicking inside the code box and pressing Ctrl+F on Windows or Cmd+F on Mac.</div><div style="background-color: white; letter-spacing: 0.293333px; line-height: 26.4px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">3. Search for </body> and above it, paste following code:</div><div style="letter-spacing: 0.293333px; line-height: 26.4px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;"><div class="code" style="border-color: rgb(218, 218, 218); border-style: solid; border-width: 1px 1px 1px 20px; font-family: Consolas, 'Courier New', Courier, mono, serif; font-size: 12px; letter-spacing: 0.293333px; line-height: 16px; margin: 10px 0px 10px 10px; max-height: 500px; min-height: 16px; outline: none; overflow: auto; padding: 5px; vertical-align: baseline; width: 549px;"><link href='http://fonts.googleapis.com/css?family=Oswald%3A400&subset%3Dlatin%2Clatin-ext&ver%3D4.1' rel='stylesheet' type='text/css'/></div></div> 4. Find this code ]]:</b:skin> and just before that paste the css code given below. <div style="letter-spacing: 0.293333px; line-height: 26.4px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;"><div class="code" style="border-color: rgb(218, 218, 218); border-style: solid; border-width: 1px 1px 1px 20px; font-family: Consolas, 'Courier New', Courier, mono, serif; font-size: 12px; letter-spacing: 0.293333px; line-height: 16px; margin: 10px 0px 10px 10px; max-height: 500px; min-height: 16px; outline: none; overflow: auto; padding: 5px; vertical-align: baseline; width: 549px;">/*------- Stylish Sidebar Subscription Box Widget------*/ #GulpaTutorial-sbox { padding: 0; margin: 0; width: 100%; height: 375px; border-radius: 1px; border: 0; background: blue; } #GulpaTutorial-sbox .tagline { padding: 5px 0px 0px 0px; line-height: 35px; height: 45px; font-size: 25px; font-weight: normal; font-family: "Oswald",sans-serif; text-shadow: 0px -1px 0px #fff; color: #000; text-align: center; background: #7fffd4; border: 5px solid #7fffd4; border-bottom: 10px solid transparent; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; } #GulpaTutorial-sbox .sub-tagline { font-family: "Oswald", sans-serif; font-size: 19px; color: #FFF; text-shadow: 0px -1px 0px #000; line-height: 30px; padding: 0px 10px 0px 10px; text-align: center; margin: 0; } #GulpaTutorial-sbox .item-list { margin: 10px 0px 0px 0px !important; } #GulpaTutorial-sbox .item-list > ul { padding: 0px 0px 0px 50px !Important; margin: 0 !important; } #GulpaTutorial-sbox .item-list > ul > li { font-family: "Oswald", sans-serif; font-size: 15px; margin-left: 10px; color: #E8E8E8; line-height: 24px; text-align: left; text-shadow: 0px -1px 0px #000; list-style: none !important; list-style-type: none !important; margin: 0px !important; padding: 0px !important; border: 0 !important; } #GulpaTutorial-sbox .rssform { padding: 0px 20px; margin: 16px 0px 16px 0px; } #GulpaTutorial-sbox .rssform input { padding: 8px; font-size: 13px; font-family: "Oswald", sans-serif; font-weight: normal; width: 100%; text-transform: lowercase; outline: none !important; border: none; border-radius: 1px; box-sizing: border-box !important; -moz-box-sizing:border-box; } #GulpaTutorial-sbox .rssform .button:hover { background: red; } #GulpaTutorial-sbox .rssform .button { background: #7fffd4; color: #000!important; border: 0; margin-top: 15px; outline: none !important; transition: all .3s ease-in-out; width: 100%; padding: 6px !important; float: none; text-transform: uppercase; font-family: "Monotype Corsiva", sans-serif; font-size: 18px; font-weight: bold; cursor: pointer; } #GulpaTutorial-sbox .lock-policy a { color:#fff; text-decoration:none !Important; } #GulpaTutorial-sbox .lock-policy { font-family: "Oswald",sans-serif; background: url no-repeat 10px -2px; color: #fff; text-align: center; font-size: 12px; margin-left: 10px; padding: 0px; line-height: 30px; margin-top: -5px; }</div></div> <ul style="background-color: white; letter-spacing: 0.293333px; line-height: 2; list-style: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;"><li style="margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">Adding Widget Code</li></ul><div style="background-color: white; letter-spacing: 0.293333px; line-height: 26.4px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">1. Go to Layout > Add A Gadget</div><div style="background-color: white; letter-spacing: 0.293333px; line-height: 26.4px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">2. Select HTML/Javascript</div><div style="background-color: white; letter-spacing: 0.293333px; line-height: 26.4px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">3. Paste the following code inside it,</div><div style="margin: 0px; outline: none; padding: 0px; vertical-align: baseline;"><div style="letter-spacing: 0.293333px; line-height: 26.4px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;"><div class="code" style="border-color: rgb(218, 218, 218); border-style: solid; border-width: 1px 1px 1px 20px; font-family: Consolas, 'Courier New', Courier, mono, serif; font-size: 12px; letter-spacing: 0.293333px; line-height: 16px; margin: 10px 0px 10px 10px; max-height: 500px; min-height: 16px; outline: none; overflow: auto; padding: 5px; vertical-align: baseline; width: 549px;"><pre id="line1">”."><div id='GulpaTutorial-sbox'> <div class='tagline'> Wait! Did You Know? </div> <div class='sub-tagline'>Why should you subscribe?</div> <div class="item-list"> <ul> <li><div style='color: #90ee90; display: inline-block; font-size:17px; </pre><pre id="line1">letter-spacing: 4px;'>&#10004;</div> Adobe Photoshop Tutorial</li> <li><div style='color: #ff00ff; display: inline-block; font-size:18px; </pre><pre id="line1">letter-spacing: 4px;'>&#10004;</div> Blogger Widgets & Tips</li> <li><div style='color: #90ee90; display: inline-block; font-size:19px; </pre><pre id="line1">letter-spacing: 4px;'>&#10004;</div> HTML, CSS, JaveScript Code</li> <li><div style='color: #ff00ff; display: inline-block; font-size:18px; </pre><pre id="line1">letter-spacing: 4px;'>&#10004;</div>Any Others Important Information</li> </ul> </div> <div class='rssform'> <form action='http://feedburner.google.com/fb/a/mailverify' method='post' target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=GulpaTutorial', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input type='text' name='email' placeholder='Enter your email address...' /> <input type="hidden" value="GulpaTutorial" name="uri"/> <input type="hidden" name="loc" value="en_US"/> <input value="Subscribe Now" class="button" type="submit" /> </form> </div> <div class="lock-policy"> Safe With Us | <a href="http://gulpatutorial.blogspot.in/p/privacy-policy-for-gulpa-tutorial.html">Privacy Policy</a> </div> </div> </pre></div></div><div><ul style="letter-spacing: 0.293333px; line-height: 26.4px; text-align: left;"><li>Replace GulpaTutorial with your feedburner username.</li><li>Replace http://gulpatutorial.blogspot.in/p/privacy-policy-for-gulpa-tutorial.html with your Privacy Policy Link.</li><li>You can replace text by editing the yellow highlighted code.</li><li>Now, save your template.</li></ul>So today no such issue as the first to comment below. Of course if you like to read everyone the opportunity to share the day with friends.<ul style="letter-spacing: 0.293333px; line-height: 26.4px; text-align: left;"></ul></div></div></div>

New Style Subscribe E-mail Box for the Blogger Blog !!

Do you know what a Email subscribe box or Subscription Form is? A box which brings high traffic to your blog. People just put their email ad...

Use your blogspot blog page loading bounce effect

GulPaTech 0 Sunday, 13 March 2016

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">It's a very funny thing, it's a bounce effect loading pages using the blog can give a new shape. When a visitor visits the blog to blog a little bit of time it takes to load at the time of this great bounce effect will appear in front of the visitor. That's how you Blogger Blogspot how to use it.</div><div style="text-align: justify;"> </div><div style="text-align: center;"><img alt="loading-effect-blogspot" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJnzWTig2LfpdKqWmegU2R8WZZY40AdfdFSFopQaBfQ_y8GdcPimBtFcRdZc_lcegdAnSaxIIaEBTy19S_ow2oYPQyXe8MDXzOaAvOpzA__7PwdfC30Vtv0V7SMFbhXjQZdIvs-OkRTA4/s1600/loading-effect-blogspot.gif" /></div><div style="text-align: center;"> </div><div style="text-align: center;"> </div><div dir="ltr" style="background-color: white;" trbidi="on"><div class="message_box announce" style="background-attachment: scroll; background-clip: initial; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL0D4qL8hFILRv7AKYvKqQ7O8alEokwmWgDWt5KuBxrj_2xhiVXFEhV3TWiOaKzXjYC0XoMvc1cOWsFL5ACCC3mBnRmYFDXDJIIPH5gFKRF7W7vUxfY0p6-XfeZqzhKiAqVn9Ju5ER_4tI/s1600/speaker.png"); background-origin: initial; background-position: 10px 50%; background-repeat: no-repeat; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 1px solid rgb(51, 53, 54); margin: 15px 0px; padding: 0.5em 1em 0.5em 3em;">Blogspot blog page loading bounce effect should be used?</div></div><ol style="background-color: white; color: #333333; line-height: 22.4px;"><li>Go To Blogger > Template</li><li>Click Edit HTML</li><li>Search for </head></li><li>Just above it paste the following CSS code:</li></ol><div style="text-align: center;"> </div><div class="code" style="border-color: rgb(218, 218, 218); border-style: solid; border-width: 1px 1px 1px 20px; font-size: 12px; letter-spacing: 0.293333px; line-height: 16px; margin: 10px 0px 10px 10px; max-height: 500px; min-height: 16px; outline: none; overflow: auto; padding: 5px; vertical-align: baseline; width: 549px;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> <script src="https://cdn.rawgit.com/Brando07/share/newbe/new-seocips-LP.js" type="text/javascript"></script> <style> #load-page-seocips { background-color:#00CCFF; width:100%; height:100%; position:fixed; left:0; top:0; z-index:+100000; } .dots-container { padding:0; position:absolute; text-align:center; top:50%; width:100%; } .dots { -webkit-animation:bounce 1.5s infinite linear; animation:bounce 1.5s infinite linear; background:#FFF; border-radius:50%; display:inline-block; height:20px; text-align:center; width:20px; } .dots:nth-child(1) { -webkit-animation-delay:.2s; animation-delay:.2s; } .dots:nth-child(2) { -webkit-animation-delay:.4s; animation-delay:.4s; } .dots:nth-child(3) { -webkit-animation-delay:.6s; animation-delay:.6s; } .dots:nth-child(4) { -webkit-animation-delay:.8s; animation-delay:.8s; } .dots:nth-child(5) { -webkit-animation-delay:1s; animation-delay:1s; } @-webkit-keyframes bounce {     0% { -webkit-transform:translateY(0); } 15% { -webkit-transform:translateY(-15px); } 30% { -webkit-transform:translateY(0); } } @keyframes bounce {     0% { transform:translateY(0); } 15% { transform:translateY(-15px); } 30% { transform:translateY(0); } } </style></div><div style="text-align: center;"> </div><div dir="ltr" style="background-color: white;" trbidi="on"><div class="message_box announce" style="background-attachment: scroll; background-clip: initial; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL0D4qL8hFILRv7AKYvKqQ7O8alEokwmWgDWt5KuBxrj_2xhiVXFEhV3TWiOaKzXjYC0XoMvc1cOWsFL5ACCC3mBnRmYFDXDJIIPH5gFKRF7W7vUxfY0p6-XfeZqzhKiAqVn9Ju5ER_4tI/s1600/speaker.png"); background-origin: initial; background-position: 10px 50%; background-repeat: no-repeat; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 1px solid rgb(51, 53, 54); margin: 15px 0px; padding: 0.5em 1em 0.5em 3em;">The same way </ body> search above or before the code below and paste Rose.</div></div><div style="text-align: left;">Check all the way to the top when you finish, click Save Template and check to see if your blog is working correctly. Hopefully, they will not work if the above rules do not work correctly.</div><div style="text-align: left;"> </div><div style="text-align: left;">If you like this post, please share it with friends on social media, to comment. According to the comments if any problem.</div><div style="text-align: center;"> </div><div style="text-align: center;"> </div></div>

Use your blogspot blog page loading bounce effect

It's a very funny thing, it's a bounce effect loading pages using the blog can give a new shape. When a visitor visits the blog to b...

About & Social

Subscribe Us

GulPa Tech

Subscribe Our RSS Feed

Add your blog is a beautiful Labels widget !!!

Give Your Blog Images Zoom Effect !!!

Stylish CSS Author Box Widget for Blogger

New Style Subscribe E-mail Box for the Blogger Blog !!

Use your blogspot blog page loading bounce effect