chsaqlain: Widget

Showing posts with label Widget. Show all posts

Add Flying Letters below Mouse Pointer in blogger

Add Flying Letters below Mouse Pointer in blogger

How to setup flying letters below mouse pointer.This a simple article that Spice your Blog.After inserting this Code,When you move mous...

6:51 AM

Facebook Static Pop Out Like Box 2013 for blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/--v5cueEjnZU/UfEskx-UjcI/AAAAAAAAAbk/E3NM_KrwD-0/s1600/facebook+popup+box.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/--v5cueEjnZU/UfEskx-UjcI/AAAAAAAAAbk/E3NM_KrwD-0/s1600/facebook+popup+box.jpg" /></a></div>
<div>
<span style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;"><br /></span></div>
<div class="separator" style="background-color: white; clear: left; color: #222222; float: left; font-family: Cuprum; font-size: 15px; line-height: 21px; margin-bottom: 1em; margin-right: 1em; text-align: center;">
</div>
<div class="separator" style="background-color: white; clear: left; color: #222222; float: left; font-family: Cuprum; font-size: 15px; line-height: 21px; margin-bottom: 1em; margin-right: 1em; text-align: center;">
</div>
<span style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;"> Here is a Tutorial about how to add a static Pop out Like Box with Cool jQuery hover effect.This a Awesome </span><span style="color: #057cf6; font-family: Cuprum;"><span style="-webkit-transition: color 0.5s, font-size 0.5s ease-in-out 0s; background-color: white; font-size: 15px; line-height: 21px; transition: color 0.5s, font-size 0.5s ease-in-out 0s;">Blogger Blog Widget</span></span><span style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;"> that adds a little beauty to your blog.</span><br style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;" /><br style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;" /><span style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;">After installing this Widget a Facebook Logo will appear on the right side of your Blog.When you Mouse over that Logo it Pop out with Smooth jQuery Effect.</span><br style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;" /><br style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;" /><span style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;">Follow the instructions for installing this </span><span style="color: #057cf6; font-family: Cuprum;"><span style="-webkit-transition: color 0.5s, font-size 0.5s ease-in-out 0s; background-color: white; font-size: 15px; line-height: 21px; transition: color 0.5s, font-size 0.5s ease-in-out 0s;">Widget</span></span><span style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;">.</span><br style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;" /><span style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;">  </span><br /><b style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;"><span style="font-size: medium;">If you don't interested in Editing HTML,you can use our <blink style="-webkit-transition: color 0.5s, font-size 0.5s ease-in-out 0s; color: #057cf6; text-decoration: none; transition: color 0.5s, font-size 0.5s ease-in-out 0s;">WIDGET GENERATOR</blink><span style="color: #057cf6;"><span style="-webkit-transition: color 0.5s, font-size 0.5s ease-in-out 0s; transition: color 0.5s, font-size 0.5s ease-in-out 0s;">.</span></span></span></b><span style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;"> </span><br style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;" /><h2 class="h2title" style="background-attachment: scroll; background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdVR6nqiZQFRff0hYFqc1mA77HKQW8HZgf2qpg2EUj7NE-xa0RY8IC1RLgrPvRTuo79e4dJSFkSQPe0iYG480WeOXRugb4LoLAnmj0qvvOTzS5dqz4sZFv9MTQFkoHx8EGKN_Rhm6R18U/s1600/h2title+tickkkk.png); background-position: 0% 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; border-top-left-radius: 14px; border-top-right-radius: 14px; border: 3px solid rgb(13, 112, 5); box-shadow: rgb(171, 171, 171) 3px 3px 3px; color: #25991c; font-family: Lobster, cursive; font-size: 26px; font-weight: normal; margin: 0px 0px 1em; padding: 0px 1px 4px 34px; position: relative; text-shadow: rgb(0, 0, 0) 1px 1px 0px; text-transform: capitalize;">
Install Facebook Pop Out Like Box Widget</h2>
<ul style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Go to Design-> Page Elements</li>
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Click on <b>Add Gadget</b></li>
</ul>
<div class="separator" style="background-color: white; clear: both; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; text-align: center;">
<img alt="page elements blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3ut3_1nXS0Fn4x7GTkzfbCHK2ThJaW276_BB3LIlmAUrDWzTuhQ-ObkbScCaooh6gyo4AGvIZl1U7tBU3HHNN2h70RZSB8PDx4REiFO9ZoIzzbqdzbKEIdkHT-pcilqI6eV7ZKK-V57M/s1600/Design+-Page+Elements.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: none; box-shadow: 0px 0px 0px; padding: 5px;" /></div>
<ul style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Select HTML/Javascript from it</li>
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Leave title as blank ,Copy and Paste the below code into the content section.</li>
</ul>
<div class="separator" style="background-color: white; clear: both; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; text-align: center;">
<img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ81r1hw_tFJi3_GXVvFdSwEZ-6twSTsYMn9NGmX_8rOYC7PAR5XH21vjqWqDQ1AToQTZO9Bw3D6gTjtXuFNbh4b3Q9LgmepgNpS3Zrip1fYcMH6-who_8U1wpOTKbtWP-O5YDIZot0eg/s320/html+javascript.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: none; box-shadow: 0px 0px 0px; padding: 5px;" width="276" /></div>
<br style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;" /><div class="codes" style="background-attachment: scroll; background-color: #ffedde; background-image: none; background-position: 0px 0px; background-repeat: repeat repeat; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; border: 2px solid; box-shadow: rgb(133, 133, 133) 0px 0px 4px; color: #222222; font-family: Cuprum; font-size: 15px; height: 300px; line-height: 21px; overflow: auto; padding: 7px;">
<script type="text/javascript"><br />/*<![CDATA[*/<br />jQuery(document).ready(function() {jQuery(".noopslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});<br />/*]]>*/<br /></script><br /><style type="text/css"><br />.noopslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1CTKLELcpjsf5M5sv60gsZJ8KZOwvjBf1tCy5xZtYEyIXnwL89Xh_L_zvMnm_rVBX_eWPkuU5ufulyEUA_yJEibFoJjWUbeXHCPFgaf883rfZ1twgbAyhNGyCE1qhVPkx7G-gb4kJ06I/s1600/fb_static+button.jpg") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 999;position:fixed;right:-250px;top:20%;}<br />.noopslikebox div{border:none;position:relative;display:block;}<br />.noopslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 999;}<br />.noopslikebox span a{color: gray;text-decoration:none;}<br />.noopslikebox span a:hover{text-decoration:underline;}<br /></style><br /><div class="noopslikebox"><br />    <div><br />    <iframe src="http://www.facebook.com/plugins/likebox.php?href=<b style="color: red;">http://www.facebook.com/pages/NetOops-Blog/159796530791611</b>&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><br />    </div><br /></div></div>
<ul style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Replace the <b style="color: red;">RED</b> highlighted text with your Facebook page URL.</li>
</ul>
<span style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;">I hope you'd liked this Article,if so please share, like this. </span></div>

Facebook Static Pop Out Like Box 2013 for blogger

Here is a Tutorial about how to add a static Pop out Like Box with Cool jQuery hover effect.This a Awesome Blogger Blog Widget t...

6:49 AM

Google +1 Wanted widget for blogger

Google +1 Wanted widget for blogger

Google's new GPlus +1 button for blogger,that lets to share your blog with like minded people across the world. Blogger introduces tw...

3:39 AM

Protect your images in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; clear: left; color: #222222; float: left; font-family: Cuprum; font-size: 15px; line-height: 21px; margin-bottom: 1em; margin-right: 1em;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-wIOURdqQo8g/UfD9Vs52lHI/AAAAAAAAAbU/9QsA7joOiX0/s1600/protect+all+images.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="http://2.bp.blogspot.com/-wIOURdqQo8g/UfD9Vs52lHI/AAAAAAAAAbU/9QsA7joOiX0/s200/protect+all+images.jpg" width="200" /></a></div>
<span style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;"><br /></span>
<span style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;">This is an awesome trick to protect your images.You can protect your images from copying with this Simple CSS Blogger Tricks.After applying this trick the person who save the image will get a transparent image instead of the original image.</span><br style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;" /><br /><br />
<h2 class="h2title" id="trick1" style="background-attachment: scroll; background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdVR6nqiZQFRff0hYFqc1mA77HKQW8HZgf2qpg2EUj7NE-xa0RY8IC1RLgrPvRTuo79e4dJSFkSQPe0iYG480WeOXRugb4LoLAnmj0qvvOTzS5dqz4sZFv9MTQFkoHx8EGKN_Rhm6R18U/s1600/h2title+tickkkk.png); background-position: 0% 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; border-top-left-radius: 14px; border-top-right-radius: 14px; border: 3px solid rgb(13, 112, 5); box-shadow: rgb(171, 171, 171) 3px 3px 3px; color: #25991c; font-family: Lobster, cursive; font-size: 26px; font-weight: normal; margin: 0px 0px 1em; padding: 0px 1px 4px 34px; position: relative; text-shadow: rgb(0, 0, 0) 1px 1px 0px; text-transform: capitalize;">
Protect Your Image With CSS Overlapping</h2>
<ul style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Go to <span style="color: #057cf6;"><span style="-webkit-transition: color 0.5s, font-size 0.5s ease-in-out 0s; transition: color 0.5s, font-size 0.5s ease-in-out 0s;">Blogger</span></span> Account</li>
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Use the Following trick</li>
</ul>
<div class="code" style="background-attachment: scroll; background-color: #fffdf1; background-image: none; background-position: 0px 0px; background-repeat: repeat repeat; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 2px solid rgb(218, 169, 38); color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; padding: 3px 7px;">
<img src="<b>Place image URL Here</b>" /><br /><img border="0" src="http://i.imgur.com/eYKPf7b.png" alt="NetOops protected image" width="200" height="200" style="left: 0px; opacity: 0; position: relative; top: -216px;" /></div>
<ul style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">That's it.</li>
</ul>
<h2 class="h2title" id="trick2" style="background-attachment: scroll; background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdVR6nqiZQFRff0hYFqc1mA77HKQW8HZgf2qpg2EUj7NE-xa0RY8IC1RLgrPvRTuo79e4dJSFkSQPe0iYG480WeOXRugb4LoLAnmj0qvvOTzS5dqz4sZFv9MTQFkoHx8EGKN_Rhm6R18U/s1600/h2title+tickkkk.png); background-position: 0% 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; border-top-left-radius: 14px; border-top-right-radius: 14px; border: 3px solid rgb(13, 112, 5); box-shadow: rgb(171, 171, 171) 3px 3px 3px; color: #25991c; font-family: Lobster, cursive; font-size: 26px; font-weight: normal; margin: 0px 0px 1em; padding: 0px 1px 4px 34px; position: relative; text-shadow: rgb(0, 0, 0) 1px 1px 0px; text-transform: capitalize;">
Protect Your Image With SPAN Background</h2>
<ul style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Use the following code</li>
</ul>
<div class="code" style="background-attachment: scroll; background-color: #fffdf1; background-image: none; background-position: 0px 0px; background-repeat: repeat repeat; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 2px solid rgb(218, 169, 38); color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; padding: 3px 7px;">
<span style="background-image: url(<b>Place image URL here</b>)"><img src="http://i.imgur.com/eYKPf7b.png" width="200" height="200" border="0" alt="NetOops protected Image."></span> </div>
<br style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;" />
<ul style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">You are done..</li>
</ul>
<span style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;">If you liked this article please share and like....</span></div>

Protect your images in Blogger

This is an awesome trick to protect your images.You can protect your images from copying with this Simple CSS Blogger Tricks.After app...

3:27 AM

Add Yahoo Smileys on Blogger Threaded Comments

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="background-color: white; clear: left; color: #222222; float: left; font-family: Cuprum; font-size: 15px; line-height: 21px; margin-bottom: 1em; margin-right: 1em; text-align: center;">
<img alt="Yahoo smileys for Blogger Threaded Comments" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6AKNhqPVK-beKNgpUBH5kyXhnl6tpNapQLQnpWDeVMZHjoaHJaoJ0JL1UzkQ6AdOA3U0TqX6tIXHWXQx4iHM1tYh4O1hWUEaEfhmhafj7C8OnmmVDxu8WbU5O9EFljCEh8WKsbQ_yMeo/s1600/yahoo+smileys.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: none; box-shadow: 0px 0px 0px; padding: 5px;" title="Yahoo smileys for Blogger Threaded Comments" /></div>
<span style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;">I 'm going to say about how to add yahoo smileys to Blogger Threaded comments. This is an awesome trick was scripted by an Indonesian Blogger </span><span style="color: #057cf6; font-family: Cuprum;"><span style="-webkit-transition: color 0.5s, font-size 0.5s ease-in-out 0s; background-color: white; font-size: 15px; line-height: 21px; transition: color 0.5s, font-size 0.5s ease-in-out 0s;">Kang Ismet</span></span><span style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;"> and I think he did a very good job for us. This Blogger hack works with New Blogger Threaded commenting system.</span><br style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;" /><span style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;">Follow the instructions Below..</span><br style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;" /><br style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;" /><br style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;" /><br style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;" /><br /><br style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;" /><br />
<ul style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Go to <span style="color: #057cf6;"><span style="-webkit-transition: color 0.5s, font-size 0.5s ease-in-out 0s; transition: color 0.5s, font-size 0.5s ease-in-out 0s;">Blogger</span></span> Account</li>
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Go to <b>Template</b> -> <b>Edit HTML</b> [click <b style="color: #e06666;">Proceed</b>]</li>
</ul>
<br style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;" />
<h2 class="h2title" id="addcss" style="background-attachment: scroll; background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdVR6nqiZQFRff0hYFqc1mA77HKQW8HZgf2qpg2EUj7NE-xa0RY8IC1RLgrPvRTuo79e4dJSFkSQPe0iYG480WeOXRugb4LoLAnmj0qvvOTzS5dqz4sZFv9MTQFkoHx8EGKN_Rhm6R18U/s1600/h2title+tickkkk.png); background-position: 0% 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; border-top-left-radius: 14px; border-top-right-radius: 14px; border: 3px solid rgb(13, 112, 5); box-shadow: rgb(171, 171, 171) 3px 3px 3px; color: #25991c; font-family: Lobster, cursive; font-size: 26px; font-weight: normal; margin: 0px 0px 1em; padding: 0px 1px 4px 34px; position: relative; text-shadow: rgb(0, 0, 0) 1px 1px 0px; text-transform: capitalize;">
Add CSS Code</h2>
<ul style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Find <b>]]></b:skin></b>   [<span style="color: #057cf6;"><span style="-webkit-transition: color 0.5s, font-size 0.5s ease-in-out 0s; transition: color 0.5s, font-size 0.5s ease-in-out 0s;">easily find Ctrl + F</span></span>]</li>
</ul>
<div class="code" style="background-attachment: scroll; background-color: #fffdf1; background-image: none; background-position: 0px 0px; background-repeat: repeat repeat; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 2px solid rgb(218, 169, 38); color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; padding: 3px 7px;">
img.bhacksmly {<br />    height: auto !important;<br />    vertical-align: middle !important;<br />    width: auto !important;<br />    border:0px !important;<br />}</div>
<br style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;" />
<h2 class="h2title" id="javascriptcode" style="background-attachment: scroll; background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdVR6nqiZQFRff0hYFqc1mA77HKQW8HZgf2qpg2EUj7NE-xa0RY8IC1RLgrPvRTuo79e4dJSFkSQPe0iYG480WeOXRugb4LoLAnmj0qvvOTzS5dqz4sZFv9MTQFkoHx8EGKN_Rhm6R18U/s1600/h2title+tickkkk.png); background-position: 0% 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; border-top-left-radius: 14px; border-top-right-radius: 14px; border: 3px solid rgb(13, 112, 5); box-shadow: rgb(171, 171, 171) 3px 3px 3px; color: #25991c; font-family: Lobster, cursive; font-size: 26px; font-weight: normal; margin: 0px 0px 1em; padding: 0px 1px 4px 34px; position: relative; text-shadow: rgb(0, 0, 0) 1px 1px 0px; text-transform: capitalize;">
Add Javascript Code</h2>
<ul style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Find <b></body></b> and copy the below code just above it.</li>
</ul>
<div class="code" style="background-attachment: scroll; background-color: #fffdf1; background-image: none; background-position: 0px 0px; background-repeat: repeat repeat; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 2px solid rgb(218, 169, 38); color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; padding: 3px 7px;">
<script src='https://netoopscodes.googlecode.com/svn/branches/Js files/ysmiley threaded comments-min.js' type='text/javascript'/></div>
<ul style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">  Save the template<div style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: white; float: left; padding: 2px 5px;">
Save Template</div>
</li>
</ul>
<h2 class="h2title" id="htmlcode" style="background-attachment: scroll; background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdVR6nqiZQFRff0hYFqc1mA77HKQW8HZgf2qpg2EUj7NE-xa0RY8IC1RLgrPvRTuo79e4dJSFkSQPe0iYG480WeOXRugb4LoLAnmj0qvvOTzS5dqz4sZFv9MTQFkoHx8EGKN_Rhm6R18U/s1600/h2title+tickkkk.png); background-position: 0% 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; border-top-left-radius: 14px; border-top-right-radius: 14px; border: 3px solid rgb(13, 112, 5); box-shadow: rgb(171, 171, 171) 3px 3px 3px; color: #25991c; font-family: Lobster, cursive; font-size: 26px; font-weight: normal; margin: 0px 0px 1em; padding: 0px 1px 4px 34px; position: relative; text-shadow: rgb(0, 0, 0) 1px 1px 0px; text-transform: capitalize;">
Add HTML Code</h2>
<ul style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Check <b>Expand Widget Templates</b></li>
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Find<b> <div class='post-footer-line post-footer-line-3'></b></li>
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Find the next <b></b:includable> </b>and<b> </b>copy the code above it</li>
</ul>
<div class="code" style="background-attachment: scroll; background-color: #fffdf1; background-image: none; background-position: 0px 0px; background-repeat: repeat repeat; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 2px solid rgb(218, 169, 38); color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; padding: 3px 7px;">
Example<br /> </div><br />.<br /><b>Place code here </b><br /><br /><br /></b:includable></div>
<br style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;" />
<ul style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Copy the below code above <b></b:includable></b></li>
</ul>
<div class="code1" style="background-attachment: scroll; background-color: #fff4e0; background-image: none; background-position: 0px 0px; background-repeat: repeat repeat; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(255, 174, 0); box-shadow: 2px 2px 0px; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; margin: 9px 2px 15px 0px; padding: 3px 0px 3px 64px; position: relative;">
<b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div class='netoopsblogysmile' id='ysmile' style='<br /><div>
background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(50%,#bfe8f9), color-stop(51%,#9fd8ef), color-stop(100%,#2ab0ed));background: -webkit-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: -o-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: -ms-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);border-radius: 3px;width:100%; padding:10px; height:65px;'></div>
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-)<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)]<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):)<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd<br /><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^<br /></div><a href="http://netoopsblog.blogspot.com"></a></b:if></div>
<br style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;" />
<ul style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Save the Template</li>
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">That's all</li>
</ul>
<br />
<span style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;">If you liked this article please Join via </span><b style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;">Google Friend Connect</b><span style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;">,Share,Like us to get Stronger...</span></div>

Add Yahoo Smileys on Blogger Threaded Comments

I 'm going to say about how to add yahoo smileys to Blogger Threaded comments. This is an awesome trick was scripted by an Indonesian...

3:23 AM

Protect all images in your Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; margin-left: 1em; margin-right: 1em; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6WpTB-heEsDXRe4sD9UP1a7drZHVPon6BjkWR8ZwGWBkkRJO-8jdrz0j_fjD46GB9SB0U_E8P2GPhWsjyJP1ffQ1ZL6PI2kXwQg2PyGYJLAg9Ur2kFOyKEztWiH3MUbTD6zhXVcGuN_A/s1600/protect+all+images.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: none; box-shadow: 0px 0px 0px; padding: 5px;" /></div>
<br />
<br />
<span style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;">Here is a most important trick every blogger need. This trick is about how to protect all your images in your blog with a transparent image covered on it. I recently posted an article about </span><span style="color: #057cf6; font-family: Cuprum;"><span style="-webkit-transition: color 0.5s, font-size 0.5s ease-in-out 0s; background-color: white; font-size: 15px; line-height: 21px; transition: color 0.5s, font-size 0.5s ease-in-out 0s;">How to protect images?</span></span><span style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;">.This article about to protect all images.</span><br style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;" /><br />
<span style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;"> </span><span style="background-color: white; color: #222222; font-family: Cuprum;"><b>Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)</b></span><br style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;" /><br />
<ul style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Go to Template->Edit HTML [A dialog box appears click <b>Proceed</b>]</li>
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Copy and paste the below code <head> and save it</li>
</ul>
<blockquote style="background-color: white; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-left-style: solid; border-left-width: 6px; border-top-left-radius: 3px; border-top-right-radius: 3px; box-shadow: rgb(171, 171, 171) 0pt 0pt 14px; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; padding: 8px 9px;">
<div class="code" style="background-attachment: scroll; background-color: #fffdf1; background-image: none; background-position: 0px 0px; background-repeat: repeat repeat; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 2px solid rgb(218, 169, 38); padding: 3px 7px;">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/></div>
</blockquote>
<ul style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Go to Blogger Account</li>
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;"><b>Template</b>-><b>Edit HTML</b> [Click Proceed]</li>
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Copy the code above <b></head></b></li>
</ul>
<h2 class="h2title" id="trick1" style="background-attachment: scroll; background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdVR6nqiZQFRff0hYFqc1mA77HKQW8HZgf2qpg2EUj7NE-xa0RY8IC1RLgrPvRTuo79e4dJSFkSQPe0iYG480WeOXRugb4LoLAnmj0qvvOTzS5dqz4sZFv9MTQFkoHx8EGKN_Rhm6R18U/s1600/h2title+tickkkk.png); background-position: 0% 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; border-top-left-radius: 14px; border-top-right-radius: 14px; border: 3px solid rgb(13, 112, 5); box-shadow: rgb(171, 171, 171) 3px 3px 3px; color: #25991c; font-family: Lobster, cursive; font-size: 26px; font-weight: normal; margin: 0px 0px 1em; padding: 0px 1px 4px 34px; position: relative; text-shadow: rgb(0, 0, 0) 1px 1px 0px; text-transform: capitalize;">
Protect Only First Image In Every Post</h2>
<div class="code" style="background-attachment: scroll; background-color: #fffdf1; background-image: none; background-position: 0px 0px; background-repeat: repeat repeat; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 2px solid rgb(218, 169, 38); color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; padding: 3px 7px;">
<script type='text/javascript'><br />//<![CDATA[<br />$(function(){<br />$(".post-body img:nth-child(1)").after("<img src=\"http:\/\/i.imgur.com\/eYKPf7b.png\" alt=\"NetOopsblog protected image\" style=\"margin-left: -212px; opacity: 0; position: relative; top: 0;\" \/>");<br />});<br />//]]><br /></script></div>
<br style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;" />
<h2 class="h2title" id="trick2" style="background-attachment: scroll; background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdVR6nqiZQFRff0hYFqc1mA77HKQW8HZgf2qpg2EUj7NE-xa0RY8IC1RLgrPvRTuo79e4dJSFkSQPe0iYG480WeOXRugb4LoLAnmj0qvvOTzS5dqz4sZFv9MTQFkoHx8EGKN_Rhm6R18U/s1600/h2title+tickkkk.png); background-position: 0% 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; border-top-left-radius: 14px; border-top-right-radius: 14px; border: 3px solid rgb(13, 112, 5); box-shadow: rgb(171, 171, 171) 3px 3px 3px; color: #25991c; font-family: Lobster, cursive; font-size: 26px; font-weight: normal; margin: 0px 0px 1em; padding: 0px 1px 4px 34px; position: relative; text-shadow: rgb(0, 0, 0) 1px 1px 0px; text-transform: capitalize;">
Protect All Images In Every Post</h2>
<div class="code1" style="background-attachment: scroll; background-color: #fff4e0; background-image: none; background-position: 0px 0px; background-repeat: repeat repeat; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(255, 174, 0); box-shadow: 2px 2px 0px; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px; margin: 9px 2px 15px 0px; padding: 3px 0px 3px 64px; position: relative;">
<script type='text/javascript'><br />//<![CDATA[<br />$(function(){<br />$(".post-body img").after("<img src=\"http:\/\/i.imgur.com\/eYKPf7b.png\" alt=\"NetOopsblog protected image\" style=\"margin-left: -212px; opacity: 0; position: relative; top: 0;\" \/>");<br />});<br />//]]><br /></script></div>
<span style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 21px;">I think you liked this article...please like and share..</span></div>

Protect all images in your Blogger

Here is a most important trick every blogger need. This trick is about how to protect all your images in your blog with a transparent...

3:21 AM

new Beautiful Comment style in blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="post-body entry-content" id="post-body-7124382115833374557" style="background-color: white; color: #222222; font-family: Cuprum; font-size: 15px; line-height: 1.4; padding: 0px 6px; position: relative; width: 642px;">
<div dir="ltr" trbidi="on">
<div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;">
<img alt="Style your Comments Block Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgalZbB0I3yOYDiLeMn7WkGWx6cpzqb5zUnufvdVLbKZDgGma-I6FPXXBF22g2HL0uNEnQt75b9aWf1lWRtWT_Wkp65UK9aOANCZBzVNygkjefUYQ12bIM9hA96EVkhpCOSCpFN_wFMnXo/s1600/style+your+comments.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: none; box-shadow: 0px 0px 0px; padding: 5px;" title="Style your Comments Block Blogger" /></div>
First of all i'm saying sorry to all for the delay of posting.<br />This is a tutorial about how to style your comments block with effective designs.<br />This is done using Simple css Scripts.<br />The demo of a styled comments block is as follows.<br /><br /><br /><br /><br /><br /><br /><a href="" name="more"></a><br /><br /><div class="demo" style="border: 2px dashed; font-size: 18px; font-weight: bold; margin-bottom: 15px; padding: 11px; text-align: center;">
Click the link below to see demo<br /><a href="http://netoops-demo-blog.blogspot.in/2012/03/link-nudge-using-css3-and-jquery.html" style="-webkit-transition: color 0.5s, font-size 0.5s ease-in-out 0s; color: #057cf6; text-decoration: none; transition: color 0.5s, font-size 0.5s ease-in-out 0s;">Demo page</a><br />What's inside this article?<br /><ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em; text-align: left;">
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;"><a href="http://netoopsblog.blogspot.in/2012/11/how-to-change-comments-style-on-blogger.html#" style="-webkit-transition: color 0.5s, font-size 0.5s ease-in-out 0s; color: #057cf6; text-decoration: none; transition: color 0.5s, font-size 0.5s ease-in-out 0s;">Comments Style version 1.0</a></li>
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;"><a href="http://netoopsblog.blogspot.in/2012/11/how-to-change-comments-style-on-blogger.html#" style="-webkit-transition: color 0.5s, font-size 0.5s ease-in-out 0s; color: #057cf6; text-decoration: none; transition: color 0.5s, font-size 0.5s ease-in-out 0s;">Comments Style version 2.0</a></li>
</ul>
</div>
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Sign in to the Blogger Account</li>
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Select <b>Template</b> and click <b>Edit HTML (Click on Proceed)</b></li>
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Find <b>]]></b:skin></b> (<a href="http://netoopsblog.blogspot.in/2012/01/use-search-bar-find-code-blogger-blog.html" style="-webkit-transition: color 0.5s, font-size 0.5s ease-in-out 0s; color: #057cf6; text-decoration: none; transition: color 0.5s, font-size 0.5s ease-in-out 0s;" target="_blank">Find using ctrl + F</a>) [<a href="http://netoopsblog.blogspot.in/2012/02/add-css-code-blogger-easyway-blogger.html" style="-webkit-transition: color 0.5s, font-size 0.5s ease-in-out 0s; color: #057cf6; text-decoration: none; transition: color 0.5s, font-size 0.5s ease-in-out 0s;" target="_blank">Alternate Wayt to copy css code</a>]</li>
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Copy any of  the type of below css code  just above it.</li>
<li style="list-style: disc outside url(http://i.imgur.com/IUCfz.jpg); margin: 0px 0px 0.25em; padding: 0px;">Click on Save</li>
</ul>
<h2 class="h2title" id="style1" style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdVR6nqiZQFRff0hYFqc1mA77HKQW8HZgf2qpg2EUj7NE-xa0RY8IC1RLgrPvRTuo79e4dJSFkSQPe0iYG480WeOXRugb4LoLAnmj0qvvOTzS5dqz4sZFv9MTQFkoHx8EGKN_Rhm6R18U/s1600/h2title+tickkkk.png); background-position: 0% 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; border-top-left-radius: 14px; border-top-right-radius: 14px; border: 3px solid rgb(13, 112, 5); box-shadow: rgb(171, 171, 171) 3px 3px 3px; color: #25991c; font-family: Lobster, cursive; font-size: 26px; font-weight: normal; line-height: normal; margin: 0px 0px 1em; padding: 0px 1px 4px 34px; position: relative; text-shadow: rgb(0, 0, 0) 1px 1px 0px; text-transform: capitalize;">
Comments Style Version 1.0</h2>
<br /><div class="codes" style="background-attachment: scroll; background-color: #ffedde; background-image: none; background-position: 0px 0px; background-repeat: repeat repeat; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; border: 2px solid; box-shadow: rgb(133, 133, 133) 0px 0px 4px; height: 300px; overflow: auto; padding: 7px;">
.comments .comment .comment-actions a {<br />background: none repeat scroll 0 0 #FFD99E;<br />border: 2px solid #FFB43D;<br />border-radius: 3px 3px 3px 3px;<br />color: #000000;<br />font: bold 12px arial;<br />margin-right: 14px;<br />padding: 3px 9px;<br />text-decoration: none !important;<br />text-shadow: 1px 1px 0 #FFFFFF;<br /><br />}<br /><br />.comments .comment-block {<br /><br />background: none repeat scroll 0 0 #E2E2E2;<br />border: 4px solid #ABABAB;<br />border-radius: 3px 3px 3px 3px;<br />padding: 3px 10px;<br /><br />}<br /><br />.continue a {<br />background: none repeat scroll 0 0 #FFD99E;<br />border: 2px solid #FFB43D;<br />border-radius: 3px 3px 3px 3px;<br />color: #000000 !important;<br />display: inline-block !important;<br />margin-top: 7px;<br />padding: 3px 8px !important;<br />text-decoration: none !important;<br />text-shadow: 1px 1px 0 #FFFFFF;<br />}<br />.comment-block:hover > .comment-header {<br />border-bottom: 2px solid #000;<br />-moz-transition: border-color .5s ease;<br /><br />}<br /><br />.comment-header a {<br /><br />color: #000000 !important;<br /><br />}<br /><br />#comments .avatar-image-container img {<br />border: 2px solid #FFFFFF !important;<br />border-radius: 50px 50px 50px 50px;<br />height: 57px;<br />max-width: 57px;<br /><br />}<br /><br />.comments .avatar-image-container {<br />border: 2px solid #FFFFFF;<br />border-radius: 34px 34px 34px 34px;<br />box-shadow: 1px 1px 3px #ABABAB;<br />float: left;<br />margin-left: -40px;<br />max-height: 60px !important;<br />overflow: hidden;<br />width: 60px !important;<br />}</div>
<br /><h2 class="h2title" id="style2" style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdVR6nqiZQFRff0hYFqc1mA77HKQW8HZgf2qpg2EUj7NE-xa0RY8IC1RLgrPvRTuo79e4dJSFkSQPe0iYG480WeOXRugb4LoLAnmj0qvvOTzS5dqz4sZFv9MTQFkoHx8EGKN_Rhm6R18U/s1600/h2title+tickkkk.png); background-position: 0% 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; border-top-left-radius: 14px; border-top-right-radius: 14px; border: 3px solid rgb(13, 112, 5); box-shadow: rgb(171, 171, 171) 3px 3px 3px; color: #25991c; font-family: Lobster, cursive; font-size: 26px; font-weight: normal; line-height: normal; margin: 0px 0px 1em; padding: 0px 1px 4px 34px; position: relative; text-shadow: rgb(0, 0, 0) 1px 1px 0px; text-transform: capitalize;">
Comments Style Version 2.0</h2>
<br /><div class="code1" style="background-attachment: scroll; background-color: #fff4e0; background-image: none; background-position: 0px 0px; background-repeat: repeat repeat; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(255, 174, 0); box-shadow: 2px 2px 0px; margin: 9px 2px 15px 0px; padding: 3px 0px 3px 64px; position: relative;">
.comments .comment-block {<br />background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipD3nkZtsqOQ1E41cmileS5NlBXttWKwm5zVpCVTkPDY6HIjugCbFn9_LeaPUOGhpqpjxRoFr20zs09A2kvA_iKHU4erRXS19ht-ZnzBBdZDEzikCduhyphenhyphenb-UbzSAl7kattmcDylzKgKIw/s1600/bg.png") repeat scroll 0 0 transparent;<br />border: 4px solid #EAEAEA;<br />border-radius: 3px 3px 3px 3px;<br />box-shadow: 3px 3px 0 #D6D6D6;<br />margin-left: 48px;<br />padding: 3px 10px;<br />position: relative;<br />}<br />#comments .avatar-image-container img {<br />border: 2px solid #FFFFFF !important;<br />border-radius: 50px 50px 50px 50px;<br />height: 57px;<br />max-width: 57px;<br />}<br />.comments .avatar-image-container {<br />border: 2px solid #FFFFFF;<br />border-radius: 34px 34px 34px 34px;<br />box-shadow: 1px 1px 3px #ABABAB;<br />float: left;<br />margin-left: -40px;<br />max-height: 60px !important;<br />overflow: hidden;<br />width: 60px !important;<br />}<br />.comment-header {<br />border-bottom: 2px solid #F1F1F1;<br />}<br />.comment-block:hover > .comment-header {<br />-moz-transition: border-color 0.5s ease 0s;<br />border-bottom: 2px solid #000000;<br />}<br />.comments .comment .comment-actions a {<br />background: -moz-linear-gradient(center top , #EEEEEE 0%, #CCCCCC 100%) repeat scroll 0 0 transparent;<br />border: 2px solid #E0E0E0;<br />border-radius: 3px 3px 3px 3px;<br />color: #000000;<br />font: bold 12px arial;<br />margin-right: 14px;<br />padding: 4px 11px !important;<br />text-decoration: none !important;<br />text-shadow: 1px 1px 0 #FFFFFF;<br />}</div>
</div>
</div>
</div>

new Beautiful Comment style in blogger

First of all i'm saying sorry to all for the delay of posting. This is a tutorial about how to style your comments block with effec...

1:06 AM

beautiful popular post widget for blogger

beautiful popular post widget for blogger

Popular Posts Widget is a Widget providing by Blogger and we can add it to our Blog. This Widget displays the Most viewed posts of your b...

12:53 AM

How to Add CSS3 Readmore Button without image? blogger

<div class="separator" style="background-color: white; clear: both; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px; text-align: center;">
<span style="color: blue;"><span style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></span></span></div>
<img height="271" src="http://www.instantshift.com/media/uploads/2012/07/css3-animated-buttons.jpg" width="400" /><br />
<span style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;">Professional blogger always tries to formulate or develop which is useful to other webmasters. Today in this tutorial we educate you about How to Add a Hover based Readmore button on mouse over in different style. Animated CSS3 button code helps webmasters blog/website more attractive and new look.</span><br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><span style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;">We’re not sure that this will definitely attracts your subscribers with its animated style effect. In this code no image is added its pure CSS3 code animated button style widget for Readmore option. Let’s start the tutorial to spiceup your blog.</span><br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><br />
<h4 style="-webkit-box-shadow: rgb(51, 51, 51) 1px 1px 2px; background-color: #e3bc50; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-left-color: rgb(185, 148, 45); border-left-style: solid; border-left-width: 20px; border-top-left-radius: 6px; border-top-right-radius: 6px; box-shadow: rgb(51, 51, 51) 1px 1px 2px; font-family: Verdana; font-size: 24px; line-height: 1; margin: 10px 0px; padding: 5px; text-shadow: rgb(51, 51, 51) 1px 1px 1px; text-transform: capitalize; width: 554.59375px;">
<span style="color: blue;">How To Add CSS3 Animated Readmore Button On Mouse Over Without Image?</span></h4>
<br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><span style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;">Sign into your blogger account</span><br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><span style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;">From Blogger Dashboard Select ‘Template’ link tab</span><br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><span style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;">Note: Before you implement this code on your blog just backup template, if any thing goes wrong you can reuse it again.</span><br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><span style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;">Search for tag </span><br />
<blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_V8_MW8ZK3CsfMNHaJnlt0qsh0jR-yo18swHH6KCGzC1PwvvqavKFMRoY1Cz6IAzy9GFymlB4Vpu6Hu_56rAn9qzIlLjZu5n08VQhwZGmg2cTu0dV735rgrZaq17jSrUREHxxFYGfqHU/s150/QUOTE2.gif); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; color: #222222; font-family: Verdana; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; padding: 10px 20px 10px 45px;">
]]></b:skin></blockquote>
<br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><span style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;">After finding tag copy below code and paste above to it as shown in the image</span><br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><br />
<div class="separator" style="background-color: white; clear: both; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px; text-align: center;">
</div>
<br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" />
<blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_V8_MW8ZK3CsfMNHaJnlt0qsh0jR-yo18swHH6KCGzC1PwvvqavKFMRoY1Cz6IAzy9GFymlB4Vpu6Hu_56rAn9qzIlLjZu5n08VQhwZGmg2cTu0dV735rgrZaq17jSrUREHxxFYGfqHU/s150/QUOTE2.gif); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; color: #222222; font-family: Verdana; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; padding: 10px 20px 10px 45px;">
.button {<br />    font-family: sans-serif;<br />    font-weight:bold;<br />    color: #fff;<br />    padding:5px 10px 6px 10px;<br />    -moz-border-radius: 5px;<br />    -webkit-border-radius: 5px;<br />    border-radius:5px;<br />    cursor: pointer;<br />    }<br />.black {<br />    background:#0874ee;<br />    background-image: -moz-linear-gradient(top,#0874ee,#0874ee);<br />    background-image: -webkit-gradient(linear,left top,<br />left bottom,from(#0874ee),to(#0874ee)   );<br />    }<br />.black:hover{background:#2B2A2A; }<br />.size {font-size:12px;}</blockquote>
<br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><span style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;">Now Search for code</span><br />
<blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_V8_MW8ZK3CsfMNHaJnlt0qsh0jR-yo18swHH6KCGzC1PwvvqavKFMRoY1Cz6IAzy9GFymlB4Vpu6Hu_56rAn9qzIlLjZu5n08VQhwZGmg2cTu0dV735rgrZaq17jSrUREHxxFYGfqHU/s150/QUOTE2.gif); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; color: #222222; font-family: Verdana; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<a expr:href='data:post.url + "#more"'>Read More </a></blockquote>
<br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><span style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;">Now replace ‘Readmore’ word with </span><br />
<blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_V8_MW8ZK3CsfMNHaJnlt0qsh0jR-yo18swHH6KCGzC1PwvvqavKFMRoY1Cz6IAzy9GFymlB4Vpu6Hu_56rAn9qzIlLjZu5n08VQhwZGmg2cTu0dV735rgrZaq17jSrUREHxxFYGfqHU/s150/QUOTE2.gif); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; color: #222222; font-family: Verdana; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<a class='button size black' expr:href='data:post.url'>Read More</a></blockquote>
<br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><span style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;">For Classic Template search for code</span><br />
<blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_V8_MW8ZK3CsfMNHaJnlt0qsh0jR-yo18swHH6KCGzC1PwvvqavKFMRoY1Cz6IAzy9GFymlB4Vpu6Hu_56rAn9qzIlLjZu5n08VQhwZGmg2cTu0dV735rgrZaq17jSrUREHxxFYGfqHU/s150/QUOTE2.gif); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; color: #222222; font-family: Verdana; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<b:if cond='data:blog.pageType != &quot;item&quot;'> <a expr:href='data:post.url'><div style='text-align: right;'>Read More -&gt;&gt;</div></a> </b:if></blockquote>
<br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><span style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;">Replace it with below code</span><br />
<blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_V8_MW8ZK3CsfMNHaJnlt0qsh0jR-yo18swHH6KCGzC1PwvvqavKFMRoY1Cz6IAzy9GFymlB4Vpu6Hu_56rAn9qzIlLjZu5n08VQhwZGmg2cTu0dV735rgrZaq17jSrUREHxxFYGfqHU/s150/QUOTE2.gif); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; color: #222222; font-family: Verdana; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<b:if cond='data:post.hasJumpLink'><div class='jump-link'><a expr:href='data:post.url + &quot;#more&quot;'><a class='button size black' expr:href='data:post.url'>Read More</a></a></div></b:if></blockquote>
<br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><span style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;">That’s it you’ve done ‘Save your template’ to preview.</span><br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><span style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;">If you’re facing any type of problem please bring to us using our comment box and Don’t’ forget to Join in Our Community.</span>

How to Add CSS3 Readmore Button without image? blogger

Professional blogger always tries to formulate or develop which is useful to other webmasters. Today in this tutorial we educate you abou...

10:58 AM

how to add Scroll Any Widget Sticky for Blog/Website

<div class="separator" style="background-color: white; clear: both; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px; text-align: center;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTA3X7t_D8RNCvo5eSjzfHmSC7u91SGDvyBV3BCWLpksocH1ZWt" /></div>
<br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" />
<h5 style="-webkit-box-shadow: rgb(91, 181, 240) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJP0jPEKonAHVbfjlNn_LakPIUc-DLZGVYc3mNzYK8DMBWp9Cdv4www-GHxWRf6_clI-DGi9kjPnGN1gXxnF4HIbBRBGY18qYiMTi6LtqNSoRH3PnjsL3VnMUCsgbc6c7J_YhFrNXw_yA/s1600/h3.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(91, 181, 240); box-shadow: rgb(91, 181, 240) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #0274be; font-family: Oswald; font-size: 20px; font-weight: normal; line-height: 1.3; margin: 15px 3px; padding: 3px 10px 3px 80px; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;">
HOW TO ADD STICKY SCROLL ANY WIDGET CODE TO BLOGGER?</h5>
<br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><span style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;">Sign into your blogger account</span><br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><span style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;">From Blogger Dashboard select ‘Template’ link tab</span><br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><span style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;">Click on ‘Edit HTML’ and proceed </span><br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><span style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;">Now, Search for tag </span><br />
<blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_V8_MW8ZK3CsfMNHaJnlt0qsh0jR-yo18swHH6KCGzC1PwvvqavKFMRoY1Cz6IAzy9GFymlB4Vpu6Hu_56rAn9qzIlLjZu5n08VQhwZGmg2cTu0dV735rgrZaq17jSrUREHxxFYGfqHU/s150/QUOTE2.gif); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; color: #222222; font-family: Verdana; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; padding: 10px 20px 10px 45px;">
</body></blockquote>
<br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><span style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;">After finding tag copy the below code and paste above to it</span><br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><br />
<blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_V8_MW8ZK3CsfMNHaJnlt0qsh0jR-yo18swHH6KCGzC1PwvvqavKFMRoY1Cz6IAzy9GFymlB4Vpu6Hu_56rAn9qzIlLjZu5n08VQhwZGmg2cTu0dV735rgrZaq17jSrUREHxxFYGfqHU/s150/QUOTE2.gif); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; color: #222222; font-family: Verdana; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<script><br />// Sticky widget by www.blogtariff.com<br />// Tutorial at http://www.blogtariff.com/2013/07/add-sticky-scroll-any-widget-to.html<br />// Free to use or share, but please keep this notice intact.<br />//<![CDATA[<br />ko_makeSticky("<span style="color: red;"><b>WIDGET ID</b></span>"); // enter your widget ID here<br />function ko_makeSticky(elem) {<br />    var ko_sticky = document.getElementById(elem);<br />    var scrollee = document.createElement("div");<br />    ko_sticky.parentNode.insertBefore(scrollee, ko_sticky);<br />    var width = ko_sticky.offsetWidth;<br />    var iniClass = ko_sticky.className + ' ko_sticky';<br />    window.addEventListener('scroll', ko_sticking, false);<br />    function ko_sticking() {<br />        var rect = scrollee.getBoundingClientRect();<br />        if (rect.top < 0) {<br />            ko_sticky.className = iniClass + ' ko_sticking';<br />            ko_sticky.style.width = width + "px";<br />        } else {<br />            ko_sticky.className = iniClass;<br />        }<br />    }<br />}<br />//]]><br /></script><br /><br /><style><br />.ko_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}<br /></style></blockquote>
<br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><br />
<h5 style="-webkit-box-shadow: rgb(91, 181, 240) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJP0jPEKonAHVbfjlNn_LakPIUc-DLZGVYc3mNzYK8DMBWp9Cdv4www-GHxWRf6_clI-DGi9kjPnGN1gXxnF4HIbBRBGY18qYiMTi6LtqNSoRH3PnjsL3VnMUCsgbc6c7J_YhFrNXw_yA/s1600/h3.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(91, 181, 240); box-shadow: rgb(91, 181, 240) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #0274be; font-family: Oswald; font-size: 20px; font-weight: normal; line-height: 1.3; margin: 15px 3px; padding: 3px 10px 3px 80px; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;">
CODE CUSTOMIZATION:</h5>
<br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><span style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;">Replace </span><span style="background-color: white; color: red; font-family: Verdana; font-size: 12px; line-height: 19.1875px;"><b>Widget ID</b></span><span style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;"> with your any type of Widget ID (eg. HTML1 or HTML2 etc.)</span><br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><span style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;">Finally ‘Save Template’ and Preview your experiment</span><br style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;" /><span style="background-color: white; color: #222222; font-family: Verdana; font-size: 12px; line-height: 19.1875px;">That’s done</span>

how to add Scroll Any Widget Sticky for Blog/Website

HOW TO ADD STICKY SCROLL ANY WIDGET CODE TO BLOGGER? Sign into your blogger account From Blogger Dashboard select ‘Template’ link tab C...

10:46 AM

How To Add Falling Leaves in Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-3s1z46U8TDg/UWmbeUtX3qI/AAAAAAAAAPE/BndIP5hyWRM/s1600/dew-drops-green-leaf-1.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-3s1z46U8TDg/UWmbeUtX3qI/AAAAAAAAAPE/BndIP5hyWRM/s1600/dew-drops-green-leaf-1.jpeg"></a></div>
<br>
<div class="separator" style="background-color: white; border: none; clear: both; font-family: arial; font-size: 14px; line-height: 23.796875px; list-style: none; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
</div>
<span style="font-family: arial, sans-serif; font-size: 13px; font-weight: bold;">Do You Know how to make your blog becomes just? You can give natural objects, such as falling leaves. So, if you want to know how to add falling leaves in your blog, just follow the steps below </span><br>
<span style="font-family: arial, sans-serif; font-size: 13px; font-weight: bold;"></span><br>
</div>

How To Add Falling Leaves in Blog

Do You Know how to make your blog becomes just? You can give natural objects, such as falling leaves. So, if you want to know how to a...

8:08 PM

How to Add Falling Love On Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-1bIIKOWhMI0/UWmhh6xxrEI/AAAAAAAAAPo/2ANX2OoYHQM/s1600/falling-in-love-with-abstract-free-desktop.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="http://1.bp.blogspot.com/-1bIIKOWhMI0/UWmhh6xxrEI/AAAAAAAAAPo/2ANX2OoYHQM/s320/falling-in-love-with-abstract-free-desktop.jpg" width="320"></a></div>
<div class="separator" style="background-color: white; border: none; clear: both; font-family: arial; font-size: 14px; line-height: 23.796875px; list-style: none; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<br></div>
<span style="background-color: white; font-family: arial; font-size: 14px; line-height: 23.796875px;">Have you ever falling in love to someone? I know, most of you ever fallin in love to someone. Therefore, I will teach you how to add many falling love on your blog. How? You follow the steps below</span><br>
<br>
</div>

How to Add Falling Love On Blog

Have you ever falling in love to someone? I know, most of you ever fallin in love to someone. Therefore, I will teach you how to add m...

7:58 PM

How To Add Facebook in Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-F4_1_HXi1Ec/UWmfCgtZckI/AAAAAAAAAPM/9iJjwojeKJ0/s1600/AssassinsCreed.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-F4_1_HXi1Ec/UWmfCgtZckI/AAAAAAAAAPM/9iJjwojeKJ0/s1600/AssassinsCreed.jpg"></a></div>
<div class="separator" style="background-color: white; border: none; clear: both; font-family: arial; font-size: 14px; line-height: 23.796875px; list-style: none; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<br></div>
<span style="background-color: white; font-family: arial; font-size: 14px; line-height: 23.796875px;">Did you know what is facebook? Facebook is the most popular social networking beside twitter. In this trick I will share to you  how to add facebook in your blog. Are you still confused? Facebook can add to my blog? OK if you still confused, it's better to you if you try this trick. SO follow the steps below</span><br>
</div>

How To Add Facebook in Blog

Did you know what is facebook? Facebook is the most popular social networking beside twitter. In this trick I will share to you how t...

11:55 AM

How To Add Translate Flags

How To Add Translate Flags

This trick is actually same as my previous trick, Add Google Translate. But in this trick, I added a flag logo that will be translat...

11:50 AM

How to Add Vibrating While Opening A Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-N5AeewlPArM/UWogwfTYgfI/AAAAAAAAAP8/Ow3B500zOvc/s1600/images+(1)+(1).jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-N5AeewlPArM/UWogwfTYgfI/AAAAAAAAAP8/Ow3B500zOvc/s1600/images+(1)+(1).jpg"></a></div>
<div class="separator" style="background-color: white; border: none; clear: both; font-family: arial; font-size: 14px; line-height: 23.796875px; list-style: none; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<br></div>
<span style="background-color: white; font-family: arial; font-size: 14px; line-height: 23.796875px;">Have you ever visited a blog that when you open the blog, The blog is vibrating? I know you turn annoyed. If you want to vengeance to your blog visitors, This is a right time.Because you can learn the trick by following the steps below</span><br>
</div>

How to Add Vibrating While Opening A Blog

Have you ever visited a blog that when you open the blog, The blog is vibrating? I know you turn annoyed. If you want to vengeance to ...

11:46 AM

How To Add Animated Text in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-4DiNfgVRmEM/UWoh1_wKdhI/AAAAAAAAAQE/AOAux2kQaic/s1600/Shut_Your_Mouth_Animated_GIF_Welcome_Gold_Red_k_3.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="62" src="http://1.bp.blogspot.com/-4DiNfgVRmEM/UWoh1_wKdhI/AAAAAAAAAQE/AOAux2kQaic/s320/Shut_Your_Mouth_Animated_GIF_Welcome_Gold_Red_k_3.gif" width="320"></a></div>
<div class="separator" style="background-color: white; border: none; clear: both; font-family: arial; font-size: 14px; line-height: 23.796875px; list-style: none; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<br></div>
<span style="background-color: white; font-family: arial; font-size: 14px; line-height: 23.796875px;">This trick will be add an animated text widget, That wll make your blog more beautiful. OK, if you want to try it,so follow the steps below</span><br>
<div style="background-color: white; border: none; font-family: arial; font-size: 14px; line-height: 23.796875px; list-style: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
<br>
</div></div>

How To Add Animated Text in Blogger

This trick will be add an animated text widget, That wll make your blog more beautiful. OK, if you want to try it,so follow the steps ...

11:15 AM

How To Add Cool Google Translate

<div dir="ltr" style="text-align: left;" trbidi="on">
<br>
<div class="separator" style="background-color: white; border: none; clear: both; font-family: arial; font-size: 14px; line-height: 23.796875px; list-style: none; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMsf9wDlWcBz5nr4nFxXOne8HStjxaPYATExY8bDArgIjusJ8lKkETsPDOc9DmMnQI5XTlk6CVGjH1Rmzy0bnJCw06nRlDhzhPiAhGKGgxK4gtOmdw2MjoHQYiHjeceNI_qSrbjawxOlku/s200/translate_google_logo_software2iqbal.jpg" imageanchor="1" style="border: none; color: #bf1717; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><img border="0" height="156" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMsf9wDlWcBz5nr4nFxXOne8HStjxaPYATExY8bDArgIjusJ8lKkETsPDOc9DmMnQI5XTlk6CVGjH1Rmzy0bnJCw06nRlDhzhPiAhGKGgxK4gtOmdw2MjoHQYiHjeceNI_qSrbjawxOlku/s200/translate_google_logo_software2iqbal.jpg" style="border: none; list-style: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;" width="200"></a></div>
<span style="background-color: white; font-family: arial; font-size: 14px; line-height: 23.796875px;">Now, I will share to you how to add cool google translate in blogger. Maybe you think, this aticle is same as my previous trick </span><a href="http://chsaqlain.blogspot.com/2013/04/how-to-add-google-translate-in-blogsite.html" style="background-color: white; border: none; color: #bf1717; font-family: arial; font-size: 14px; line-height: 23.796875px; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">Add Google Translate</a><span style="background-color: white; font-family: arial; font-size: 14px; line-height: 23.796875px;">, but it's different. It's cool. Now, if you want to learn how to add this google translate, please follow the steps below</span><br>
<div style="background-color: white; border: none; font-family: arial; font-size: 14px; line-height: 23.796875px; list-style: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
</div></div>

How To Add Cool Google Translate

Now, I will share to you how to add cool google translate in blogger. Maybe you think, this aticle is same as my previous trick Add Goo...

10:37 AM

How To Add Google Translate in blog/site

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br>
<div class="separator" style="background-color: white; border: none; clear: both; font-family: arial; font-size: 14px; line-height: 23.796875px; list-style: none; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<a href="http://3.bp.blogspot.com/_Eos38-mt1ME/TOWxS0bLTUI/AAAAAAAAABg/aFSaj8CyolM/s1600/google-translate-logo.png" imageanchor="1" style="border: none; color: #ff7f7f; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><img border="0" height="240" src="http://3.bp.blogspot.com/_Eos38-mt1ME/TOWxS0bLTUI/AAAAAAAAABg/aFSaj8CyolM/s320/google-translate-logo.png" style="border: none; list-style: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;" width="320"></a></div>
<span style="background-color: white; font-family: arial; font-size: 14px; line-height: 23.796875px;">Have you ever use Google Translate? Google Translate now can use in blog. This widget will allow your blog visitors who have a language that doesn't match languange of your blog. So your visitors can translate the words  into their language. If you want try this tricks, just follow the steps below</span><br>
</div></div>

How To Add Google Translate in blog/site

Have you ever use Google Translate? Google Translate now can use in blog. This widget will allow your blog visitors who have a language...

10:34 AM