My Blog Widgets

How to Add Pro Download Button With Mouse Hover Effect in Your Blog

<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsmy9XDkzMUmLauFvzoiCjAgfZsS4tT4jkJtEjssjoVE1MUwl2mzcsClooucltPdjjiYbOWaVtG5zv51IXy0qALxKu75rVt1z4HA6P5dcGYLZPIsaU3u02Ym7wcXvHY0yFt1yE6Agd-Obg/s1600/How+to+Add+Pro+Download+Button+With+Mouse+Hover+Effect.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsmy9XDkzMUmLauFvzoiCjAgfZsS4tT4jkJtEjssjoVE1MUwl2mzcsClooucltPdjjiYbOWaVtG5zv51IXy0qALxKu75rVt1z4HA6P5dcGYLZPIsaU3u02Ym7wcXvHY0yFt1yE6Agd-Obg/s640/How+to+Add+Pro+Download+Button+With+Mouse+Hover+Effect.gif" width="640" /></a></div>
<span style="font-family: inherit;">Buttons
 are very important for the blogger OR if you want to add a button which
 gives some downloading stuff then you can easily add this button and 
also It'll give a very professional look to your blog which is very 
important in today's day be'coz many visitors always think and feel 
about the professionalism of the blogger template and buttons and others
 stuff like widgets, buttons, plugins they always gives importance to 
the look of any template, which looks likes a professional.</span><br />
<b><span style="color: #0b5394;"><br /></span></b>
<b><span style="color: #0b5394;">Step 1 :</span></b> Now let's start adding it...

<br />
<div>
<div style="text-align: right;">
<div style="text-align: left;">
<b><span style="color: #0b5394;">Step 2:</span></b> Login to Your Blogger Account.Go to your <span style="color: #0b5394;"><b>Blogger Dashboard></b><b style="background-color: white;">Template</b>> <b><span style="background-color: white;">Edit HTML</span></b>> <b>Proceed</b>.</span></div>
</div>
<br />
<div style="text-align: right;">
<div style="text-align: left;">
<span style="color: #0b5394;"><br /></span></div>
</div>
<div style="text-align: right;">
<div style="text-align: left;">
<b><span style="color: #0b5394;">Step 3:</span></b> Find [by pressing  <kbd style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; font-size: 1.2em; margin: 2px 3px; padding: 1px 5px;">Ctrl</kbd><span style="font-family: Georgia, serif; font-size: 13.63636302947998px;"> + </span><kbd style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; font-size: 1.2em; margin: 2px 3px; padding: 1px 5px;">F</kbd> ] this code in the template:</div>
</div>
</div>
<blockquote class="tr_bq">
<span style="font-family: "Courier New",Courier,monospace;"><span style="font-size: x-small;">]]></b:skin></span></span></blockquote>
<br />
<b><span style="color: #0b5394;">Step 4:</span></b> <span style="font-family: inherit;">Paste below code just before ]]></b:skin> </span><br />
<blockquote class="tr_bq">
<span style="font-family: "Courier New",Courier,monospace;">#RWG-probutn .pure {<br />background:#E3E3E3
 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-0iIRQfXxF7gt9IP9lP_S5P2HWGL4OhRpiISIqky9i5UznYkK7j-SvT0uf7rYV_jYNDeMukGyugFOLIq_VY13ucWQHDjNQyzZcUFpT0iUSL8swbVrpqS6oMGzZbb3OwdHniubGmt_OJsi/s1600/RWG-probutn.png)
 3px 0 no-repeat;<br />-moz-border-radius:10px;<br />-webkit-border-radius:10px;<br />-o-border-radius:10px;<br />border-radius:10px;<br />display:block;<br />color:#212121;<br />float:none;<br />height:80px;<br />width:80px;<br />line-height:80px;<br />padding-top:1px;<br />position:relative;<br />text-shadow:0 1px 0 #FAFAFA;<br />text-align:center;<br />text-decoration:none;<br />white-space:nowrap;<br />-webkit-transition:width .25s ease-in-out, background-color .25s ease-in-out;<br />-ms-transition:width .25s ease-in-out, background-color .25s ease-in-out;<br />-moz-transition:width .25s ease-in-out, background-color .25s ease-in-out;<br />-o-transition:width .25s ease-in-out, background-color .25s ease-in-out;<br />transition:width .25s ease-in-out, background-color .25s ease-in-out;<br />-webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;<br />-moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;<br />-o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;<br />box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px;<br />margin:10px auto 0;<br />}<br /><br />#RWG-probutn a span {<br />display:none;<br />font-size:1.4em;<br />}<br /><br />#RWG-probutn:hover a span {<br />display:inline;<br />}<br /><br />#RWG-probutn:hover .pure {<br />width:420px;<br />}<br /><br />#RWG-probutn .download {<br />background-position:0 0;<br />}</span></blockquote>
<br />
<b><span style="color: #0b5394;">Step 5:</span></b> Now Save Your Template.<br />
<h2>
<span style="color: #0b5394;"><span style="font-family: inherit; font-size: large;">Q: How to Use it in Post....?</span></span></h2>
<br />
<div>
<span style="font-family: inherit;"><b><span style="color: #0b5394;">Step 1:</span></b><span style="color: #0b5394;"> </span>Open post editor</span></div>
<div>
<span style="font-family: inherit;"><b><span style="color: #0b5394;">Step 2:</span></b> Click HTML button</span></div>
<div>
<span style="font-family: inherit;"><b><span style="color: #0b5394;">Step 3:</span></b> Post below code in it</span></div>
<blockquote class="tr_bq">
<span style="font-family: "Courier New",Courier,monospace;"><div id="RWG-probutn"><br /><a href="<span style="background-color: white;"><span style="color: red;"><b>#</b></span></span>" class="pure download"><span><span style="background-color: white;"><b><span style="color: #a64d79;">Download</span></b></span></span></a><br /></div></span></blockquote>
<br />
<span style="color: #0b5394; font-family: inherit; font-size: large;"><b>Make Changes...</b></span><br />
<span style="font-size: medium;"><span style="font-family: inherit;"><b><span style="color: #0b5394;">Step 1:</span></b> Replace it <span style="background-color: white;"><span style="color: red;"><b>#</b></span></span> with your button link.</span></span><br />
<span style="font-size: medium;"><span style="font-family: inherit;"><span style="color: #0b5394;"><b>Step 2:</b></span> Replace it <span style="background-color: white;"><span style="color: #a64d79;"><b>Download</b></span></span> with your button name.</span></span><br />
<span style="font-size: medium;"><span style="font-family: inherit;"><br /></span></span>
<br />
<div style="text-align: center;">
<span style="font-size: medium;"><b><span style="color: #0b5394; font-family: inherit;">Finally, Publish Your Post and You're Done.</span></b></span></div>
<br />
<div style="text-align: center;">
<span style="color: #0b5394; font-family: inherit;"><b>Pro
 look is very important for all kind of blogger's and also for all kinds
 website's and some plugins like buttons, widgets etc. they gives a good
 and fine look to every blog and also to a website so, I think you 
should try it MUST.</b></span></div>

How to Add Pro Download Button With Mouse Hover Effect in Your Blog

Buttons are very important for the blogger OR if you want to add a button which gives some downloading stuff then you can easily add t...

Simple And Stylish JQuery "Related Posts" Text Widget For Blogger

This is Simple And Stylish JQuery "Related Posts" Text Widget For Blogger. Related posts <br />
widget is very important for a blog, because it increases 
the number of page views and also help the visitor to view other posts 
related to blog. Now here is wonderful trick to display links to related
 posts beneath each posts. At their blogs today there are many types of 
related post widget, and related items thumbnail images using HTML, Java
 script, etc. .. Here I will show a method that is easy to show 
install.It only title jQuery.It related post widget will look like a 
picture below.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLmZ77gCHkSsLOmlyqJ2UR4lhqHKmpXoSBKDrn-48xq4J3ll5bj2adeuHYPsXKvk5lcDkd8wfUHwo4S_M_7qEr6_dI98kDwEIdYmatI0wEPgSlQbgMghdRFetdZWAr6ceU-0b3bedYnuL9/s1600/Related+Posts+Widget+02.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="283" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLmZ77gCHkSsLOmlyqJ2UR4lhqHKmpXoSBKDrn-48xq4J3ll5bj2adeuHYPsXKvk5lcDkd8wfUHwo4S_M_7qEr6_dI98kDwEIdYmatI0wEPgSlQbgMghdRFetdZWAr6ceU-0b3bedYnuL9/s640/Related+Posts+Widget+02.jpg" width="640" /></a></div>
<br />
<b><span style="color: #0b5394;">Step 1:</span></b> Now let's start adding it...<br />
<br />
<b><span style="color: #0b5394;">Step 2:</span></b> Login to Your Blogger Account.Go to your <span style="color: #0b5394;"><b>Blogger Dashboard></b><b style="background-color: white;">Template</b>> <b><span style="background-color: white;">Edit HTML</span></b>> <b>Proceed</b>.</span><br />
<span style="color: #0b5394;"><br /></span>
<b><span style="color: #0b5394;">Step 3:</span></b> Find [by pressing  <kbd style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; font-size: 1.2em; margin: 2px 3px; padding: 1px 5px;">Ctrl</kbd><span style="font-family: Georgia, serif; font-size: 13.63636302947998px;"> + </span><kbd style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; font-size: 1.2em; margin: 2px 3px; padding: 1px 5px;">F</kbd> ] this code in the template:<br />
<br />
<blockquote class="tr_bq">
<div class='post-footer-line post-footer-line-1'/></blockquote>
<br />
If you cant find it then try finding this<br />
<br />
<blockquote class="tr_bq">
<p class='post-footer-line post-footer-line-1'/> </blockquote>
OR<br />
<br />
<blockquote class="tr_bq">
<div class='post-footer-line post-footer-line-2'/><br /><div class='post-footer-line post-footer-line-3'/><br /></div> <span style="text-align: center;"></div> </span></blockquote>
<br />
 And immediately <b><span style="color: #0b5394;">Below/After</span></b> it, paste this code:<br />
<blockquote class="tr_bq">
<script 
src='http://dl.dropboxusercontent.com/s/c65xwzi0gc8z906/related-posts-min-1-ycode.js'
 type='text/javascript'/><link 
href='http://dl.dropboxusercontent.com/s/fudc6nugmvzayd1/related-posts-min-2.css'
 rel='stylesheet' type='text/css'/><a 
href='http://myblog-widgets.blogspot.com/' rel='dofollow' target='_blank' 
title='My Blog Widgets'><img alt='My Blog Widgets' border='0' 
src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; 
right: 0%; top: 0px;'/></a><a 
href='http://myblog-widgets.blogspot.com/' rel='dofollow' target='_blank' 
title='My Blog Widgets'><img alt='My Blog Widgets' 
border='0' src='https://bitly.com/24workpng1' style='position: fixed; 
bottom: 10%; right: 0%;'/></a><a 
href='http://myblog-widgets.blogspot.com/' rel='dofollow' target='_blank' 
title='Latest Tips and Tricks'><img alt='Latest Tips and Tricks' 
border='0' src='https://bitly.com/24workpng1' style='position: fixed; 
bottom: 10%; left: 0%;'/></a><b:if cond='data:blog.pageType 
== &quot;item&quot;'><div id='related-posts'><b:loop
 values='data:post.labels' var='label'><b:if 
cond='data:label.isLast != 
&quot;true&quot;'></b:if><b:if 
cond='data:blog.pageType == &quot;item&quot;'><script 
expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name +
 
&quot;?alt=json-in-script&amp;callback=related_results_labels&amp;<span style="font-size: medium;"><b><span style="color: #a64d79;">max-results=5</span></b></span>&quot;' type='text/javascript'/></b:if></b:loop><br />
<b><h2 class='title' style='color:#fff;background-color:#000;width:150px;'><span style="color: orange;">Related Topics</span></h2></b><br />
<script type='text/javascript'><br />
var currentposturl=&quot;<data:post.url/>&quot;;<br />
<b><span style="color: red;">var maxresults=5;</span></b> <br />
removeRelatedDuplicates(); printRelatedLabels();<br />
</script><br />
</div><br />
</b:if></blockquote>
<br />
<span style="color: #0b5394;"><b>Step 4: </b><b>Customizations</b></span><br />
          You can adjust the maximum number of related posts being displayed by editing this line in the code.<br />
<blockquote class="tr_bq">
<b><span style="color: #a64d79;">max-results=5</span></b></blockquote>
and<br />
<blockquote class="tr_bq">
<b><span style="color: red;">var maxresults=5;</span></b></blockquote>
show the text 'Related Topics' on title.<br />
<blockquote class="tr_bq">
<b><h2 class='title' style='color:#fff;background-color:#000;width:150px;'><span style="color: #e69138;">Related Topics</span></h2></b></blockquote>
<br /><b><span style="color: #0b5394;">Steo 5:</span></b> Now you have done save this open your site.

Simple And Stylish JQuery "Related Posts" Text Widget For Blogger

This is Simple And Stylish JQuery "Related Posts" Text Widget For Blogger. Related posts widget is very important for a blog, bec...

Beautiful Related Posts Text Widget With Hover Effect for Blogger

This is very simple and easy you only follow below steps and add this widget in your blog. Related posts <br />
widget is very important for a blog, because it increases 
the number of page views and also help the visitor to view other posts 
related to blog. Now here is wonderful trick to display links to related
 posts beneath each posts. At their blogs today there are many types of 
related post widget, and related items thumbnail images using HTML, Java
 script, etc. .. Here I will show a method that is easy to show 
install.It only title jQuery.It related post widget will look like a 
picture below.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHmiKAybsSn3c09hbLVYESo2C2ic6I3JwfnJqOMng3jb8PyBWqfCFiX5_rWNu9BuiW5X4g02h9sG2g-tfsLmCFwVuwxIzC8-kpzepmDo98CnUcvLI1wFBkGDx9nnjtcaz2wkzWtjBXDFjE/s1600/Related+Posts+Widget+01.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="304" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHmiKAybsSn3c09hbLVYESo2C2ic6I3JwfnJqOMng3jb8PyBWqfCFiX5_rWNu9BuiW5X4g02h9sG2g-tfsLmCFwVuwxIzC8-kpzepmDo98CnUcvLI1wFBkGDx9nnjtcaz2wkzWtjBXDFjE/s640/Related+Posts+Widget+01.jpg" width="640" /></a></div>
<b><span style="color: #0b5394;"><br /></span></b>
<b><span style="color: #0b5394;">Step 1:</span></b> Now let's start adding it...<br />
<br />
<b><span style="color: #0b5394;">Step 2:</span></b> Login to Your Blogger Account.Go to your <span style="color: #0b5394;"><b>Blogger Dashboard></b><b style="background-color: white;">Template</b>> <b><span style="background-color: white;">Edit HTML</span></b>> <b>Proceed</b>.</span><br />
<span style="color: #0b5394;"><br /></span>
<b><span style="color: #0b5394;">Step 3:</span></b> Find [by pressing  <kbd style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; font-size: 1.2em; margin: 2px 3px; padding: 1px 5px;">Ctrl</kbd><span style="font-family: Georgia, serif; font-size: 13.63636302947998px;"> + </span><kbd style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; font-size: 1.2em; margin: 2px 3px; padding: 1px 5px;">F</kbd> ] this code in the template:<br />
<blockquote class="tr_bq">
<div class='post-footer-line post-footer-line-1'/></blockquote>
<br />
If you cant find it then try finding this<br />
<blockquote class="tr_bq">
<p class='post-footer-line post-footer-line-1'/> </blockquote>
OR<br />
<blockquote class="tr_bq">
<div class='post-footer-line post-footer-line-2'/><br /><div class='post-footer-line post-footer-line-3'/><br /></div> <span style="text-align: center;"></div> </span></blockquote>
<br />
 And immediately <b><span style="color: #0b5394;">Below/After</span></b> it, paste this code:<br />
<blockquote class="tr_bq">
<script 
src='http://dl.dropboxusercontent.com/s/c65xwzi0gc8z906/related-posts-min-1-ycode.js'
 type='text/javascript'/><link 
href='http://dl.dropboxusercontent.com/s/tu8qgyfxt2cze7k/related-posts-min-1.css'
 rel='stylesheet' type='text/css'/><a 
href='http://myblog-widgets.blogspot.com/' rel='dofollow' target='_blank' 
title='My Blog Widgets'><img alt='My Blog Widgets' border='0' 
src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; 
right: 0%; top: 0px;'/></a><a 
href='http://myblog-widgets.blogspot.com/' rel='dofollow' target='_blank' 
title='All My Blog Widgets'><img alt='My Blog Widgets' 
border='0' src='https://bitly.com/24workpng1' style='position: fixed; 
bottom: 10%; right: 0%;'/></a><a 
href='http://myblog-widgets.blogspot.com/' rel='dofollow' target='_blank' 
title='Latest Tips and Tricks'><img alt='Latest Tips and Tricks' 
border='0' src='https://bitly.com/24workpng1' style='position: fixed; 
bottom: 10%; left: 0%;'/></a><b:if cond='data:blog.pageType 
== &quot;item&quot;'><div id='related-posts'><b:loop
 values='data:post.labels' var='label'><b:if 
cond='data:label.isLast != 
&quot;true&quot;'></b:if><b:if 
cond='data:blog.pageType == &quot;item&quot;'><script 
expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name +
 
&quot;?alt=json-in-script&amp;callback=related_results_labels&amp;<span style="font-size: medium;"><b><span style="color: #a64d79;">max-results=5</span></b></span>&quot;' type='text/javascript'/></b:if></b:loop><br />
<b><h2 class='title' style='color:#fff;background-color:#000;width:150px;'><span style="color: orange;">Related Topics</span></h2></b><br />
<script type='text/javascript'><br />
var currentposturl=&quot;<data:post.url/>&quot;;<br />
<b><span style="color: red;">var maxresults=5;</span></b> <br />
removeRelatedDuplicates(); printRelatedLabels();<br />
</script><br />
</div><br />
</b:if></blockquote>
<br />
<span style="color: #0b5394;"><b>Step 4: </b><b>Customizations</b></span><br />
          You can adjust the maximum number of related posts being displayed by editing this line in the code.<br />
<blockquote class="tr_bq">
<span style="font-size: medium;"><b><span style="color: #a64d79;">max-results=5</span></b></span></blockquote>
and<br />
<blockquote class="tr_bq">
<b><span style="color: red;">var maxresults=5;</span></b></blockquote>
show the text 'Related Topics' on title.<br />
<blockquote class="tr_bq">
<b><h2 class='title' style='color:#fff;background-color:#000;width:150px;'><span style="color: #e69138;">Related Topics</span></h2></b></blockquote>
<br />
<b><span style="color: #0b5394;">Steo 5:</span></b> Now you have done save this open your site.

Beautiful Related Posts Text Widget With Hover Effect for Blogger

This is very simple and easy you only follow below steps and add this widget in your blog. Related posts widget is very important for a blo...

How to Add Facebook Popup Widget with Lightbox Effect to Blogger

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXJwd8iLkpfNYYb5I_V07JXoxV6cTeyglNCBajiLocQqw7DOdFUQ8fXrei47SB4pGIT1HQVVxSPRQt_GPi9VkwCqh0JcRpuevJNVcuu4ygmccde1Rw80gAaLtIWhoyG9Lp5MPc7p8xqcxc/s1600/How+to+Add+Facebook+Popup+Widget+with+Lightbox+Effect+to+Blogger.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="271" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXJwd8iLkpfNYYb5I_V07JXoxV6cTeyglNCBajiLocQqw7DOdFUQ8fXrei47SB4pGIT1HQVVxSPRQt_GPi9VkwCqh0JcRpuevJNVcuu4ygmccde1Rw80gAaLtIWhoyG9Lp5MPc7p8xqcxc/s400/How+to+Add+Facebook+Popup+Widget+with+Lightbox+Effect+to+Blogger.png" width="400" /></a>Now I decided to present some fresh for what comes with a nice jQuery 
Lightbox Effect to Blogger. This is an excellent widget to enhance taste. 
You can see most of the sites or blogs that are used to increase pop 
unpaid, fans and supporters. This popup jQuery Lightbox Effect to Blogger cute for Facebook As the 
box is a great blogger widget. As soon as the new visitors coming to 
your blog will display the pop visitors, which can help increase the 
size and get more traffic to my next tutorials Facebook.In I'll try to 
make it more interactive with links to social media profiles and a 
complete version with all its contents, which can need.Check out show 
down and I will show you how to add jQuery Popup cute for Facebook as 
the box to Blogger or WordPress?<br />
<br />
<b><span style="color: #0b5394;">Step 1:</span></b> Now let's start adding it...<br />
<br />
<b><span style="color: #0b5394;">Step 2:</span></b> Login to Your Blogger Account.Go to your <b><span style="color: #0b5394;">Blogger Dashboard>Layout>Add a Gadget.</span></b><br />
<br />
<br />
<br />
<div>
</div>
<div>
<b><span style="color: #0b5394;">Step 3:</span></b> After click on Add a Gadget link A pop-up box will open now<br />
</div>
<div>
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2NBHy5gDBgEgcJxXLh_uiUcubKIfCWObP_PsxBB1lJOBdgv_IFLDpDcW7-a9VdOR1ihQexmiqwtC3lJh7V7TXfilbhjVGhPuVMzbRLrlQH7vivr3FbaIkrcfRGTCKzuvdNOxvLd3VYtjT/s1600/2013-12-07_051839.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="106" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2NBHy5gDBgEgcJxXLh_uiUcubKIfCWObP_PsxBB1lJOBdgv_IFLDpDcW7-a9VdOR1ihQexmiqwtC3lJh7V7TXfilbhjVGhPuVMzbRLrlQH7vivr3FbaIkrcfRGTCKzuvdNOxvLd3VYtjT/s400/2013-12-07_051839.png" width="400" /></a></div>
<div>
<br />
Select "HTML/JavaScript" from the gadget options by clicking the blue plus sign for that gadget.</div>
<div>
</div>
<br />
<br />
<div>
<b><span style="color: #0b5394;">Step 4:</span><span style="color: blue;"> </span></b>Select 'HTML/Javascript' and add the one of code given below.</div>
<div>
<br /></div>
<blockquote class="tr_bq">
<b><span style="color: red;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script></span></b><br />
<br />
<style type="text/css"><br />
#fanback {<br />
display:none;<br />
background:rgba(0,0,0,0.8);<br />
width:100%;<br />
height:100%;<br />
position:fixed;<br />
top:0;<br />
left:0;<br />
z-index:99999;<br />
}<br />
#fan-exit {<br />
width:100%;<br />
height:100%;<br />
}<br />
#fanbox {<br />
background:white;<br />
width:420px;<br />
height:270px;<br />
position:absolute;<br />
top:58%;<br />
left:63%;<br />
margin:-220px 0 0 -375px;<br />
-webkit-box-shadow: inset 0 0 50px 0 #939393;<br />
-moz-box-shadow: inset 0 0 50px 0 #939393;<br />
box-shadow: inset 0 0 50px 0 #939393;<br />
-webkit-border-radius: 5px;<br />
-moz-border-radius: 5px;<br />
border-radius: 5px;<br />
margin: -220px 0 0 -375px;<br />
}<br />
#fanclose {<br />
float:right;<br />
cursor:pointer;<br />
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEoIg2FdwE9lQrEXS2sf9yo_IcC9s0WBnWWKUxt3kbO7PbbmlqYmoYC1sg4xkg5WXA-YiBWxbNU9tWwyfZQSQRh4u7Dfv08AbAkf02kh8mTJG1Wklep8jpROFEEfyd1qzFWB2CZZamgmxR/s1600/fanclose.png) repeat;<br />
height:15px;<br />
padding:20px;<br />
position:relative;<br />
padding-right:40px;<br />
margin-top:-20px;<br />
margin-right:-22px;<br />
}<br />
.remove-borda {<br />
height:1px;<br />
width:366px;<br />
margin:0 auto;<br />
background:#F3F3F3;<br />
margin-top:16px;<br />
position:relative;<br />
margin-left:20px;<br />
}<br />
#linkit a.visited,#linkit a,#linkit a:hover {<br />
color:#80808B;<br />
font-size:10px;<br />
margin: 0 auto 5px auto;<br />
float:center;<br />
}<br />
</style> <script type="text/javascript"> //<![CDATA[<br />
jQuery.cookie = function (key, value, options) {<br />
// key and at least value given, set cookie...<br />
if (arguments.length > 1 && String(value) !== "[object Object]") {<br />
options = jQuery.extend({}, options);<br />
if (value === null || value === undefined) {<br />
options.expires = -1;<br />
}<br />
if (typeof options.expires === 'number') {<br />
var days = options.expires, t = options.expires = new Date();<br />
t.setDate(t.getDate() + days);<br />
}<br />
<br />
value = String(value);<br />
<br />
return (document.cookie = [<br />
encodeURIComponent(key), '=',<br />
options.raw ? value : encodeURIComponent(value),<br />
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE<br />
options.path ? '; path=' + options.path : '',<br />
options.domain ? '; domain=' + options.domain : '',<br />
options.secure ? '; secure' : ''<br />
].join(''));<br />
}<br />
<br />
// key and possibly options given, get cookie...<br />
options = value || {};<br />
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;<br />
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + 
'=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;<br />
};<br />
//]]> </script><a href="http://myblog-widgets.blogspot.com/" 
rel="dofollow" target="_blank" title="My Blog Widgets"><img 
src="https://bitly.com/24workpng1" alt="My Blog Widgets" border="0" 
style="position: fixed; bottom: 10%; right: 0%; top: 0px;" 
/></a><a href="http://myblog-widgets.blogspot.com/" rel="dofollow" 
target="_blank" title="My Blog Widgets"><img 
src="https://bitly.com/24workpng1" alt="My Blog Widgets" border="0" 
style="position: fixed; bottom: 10%; right: 0%;" /></a><a 
href="http://myblog-widgets.blogspot.com/" rel="dofollow" target="_blank" 
title="Techtunes"><img src="https://bitly.com/24workpng1" 
alt="Techtunes" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a> <script type="text/javascript"> 
jQuery(document).ready(function($){<br />
if($.cookie('popup_user_login') != 'yes'){<br />
$('#fanback').delay(100).fadeIn('medium');<br />
$('#fanclose, #fan-exit').click(function(){<br />
$('#fanback').stop().fadeOut('medium');<br />
});<br />
}<br />
<span style="font-size: medium;"><b><span style="color: #a64d79;">$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });</span></b></span><br />
});<br />
</script><br />
<br />
<div id='fanback'><br />
<div id='fan-exit'><br />
</div><br />
<div id='fanbox'><br />
<div id='fanclose'><br />
</div><br />
<div class='remove-borda'><br />
</div><br />
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?<br />
<br />
href=<b><span style="color: #0b5394; font-size: large;">https://www.facebook.com/Official.MyBlogWidgets</span></b>&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'<br />
<br />
style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center><br />
</center><br />
</div><br />
</div></blockquote>
<br />
<div style="text-align: center;">
<b><span style="color: #0b5394;">Customize:</span></b> the widget only 
shows up the first time the user visits your page.  If you would like 
the facebook box to popup evertime the page loads, then remove this line
 of code:</div>
<br />
<div style="text-align: center;">
<b><span style="color: #a64d79;">$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });</span></b></div>
<div style="text-align: center;">
<b><span style="color: #a64d79;"><br /></span></b></div>
<div style="text-align: left;">
<b><span style="color: #0b5394;">Step 5:</span></b><b style="color: #a64d79;"> </b>Replace<b style="color: #a64d79;"> </b><span style="color: #0b5394; font-weight: bold;">https://www.facebook.com/Official.MyBlogWidgets</span><span style="color: #0b5394; font-size: large; font-weight: bold;"> </span>with your Page's Link.</div>
<div style="text-align: left;">
Now you have done save this open your site.</div>

How to Add Facebook Popup Widget with Lightbox Effect to Blogger

Now I decided to present some fresh for what comes with a nice jQuery Lightbox Effect to Blogger. This is an excellent widget to enhance ta...

Add New and Flexible Recent Posts Widget With Thumbnail for Blogger / Website

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO1nbW0OryRbEJrrrnO_yOttPQfp8AlcV5vkADn433cPKOSv-hjJOmNgOzT4dODtSgzlq4wXa8jRQIX_J-clx_pRZBCty1k8v_NK1mR5Iq-TXbcNaYYgUSFg3ZcxwBr9aV3kumM3kBwMZO/s1600/Add+New+and+Flexible+Recent+Posts+Widget+With+Thumbnail+for+Blogger.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO1nbW0OryRbEJrrrnO_yOttPQfp8AlcV5vkADn433cPKOSv-hjJOmNgOzT4dODtSgzlq4wXa8jRQIX_J-clx_pRZBCty1k8v_NK1mR5Iq-TXbcNaYYgUSFg3ZcxwBr9aV3kumM3kBwMZO/s200/Add+New+and+Flexible+Recent+Posts+Widget+With+Thumbnail+for+Blogger.png" width="112" /></a>Animated recent post is a fantastic way to present headlines updates to 
your readers.The effect of smooth <br />
scrolling attract readers and generate
 more clicks to your site.This gadget displays your most recent posts 
and includes a small thumbnail, but has the added bonus of using an 
animated effect that moves smoothly through the posts.There are a lot of
 great tutorials discussing on how to add Animated Recent posts for 
blogger with thumbnails and Simple Spy, but most of the tutorials I've 
found are not really suitable for a beginner.<br />
<br />
<div style="text-align: center;">
<b>Watch This Video To Add Rounded Animated Flexible Recent Posts With Thumbnail Widget for Blog </b></div>
<div style="text-align: center;">
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/vd6Y4Je32lQ" width="560"></iframe>
</div>
<div style="text-align: center;">
<b><span style="color: #0b5394;"><br /></span></b>
<b><span style="color: #0b5394;"><br /></span></b>
<b><span style="color: #0b5394;">Or Follow These Steps</span></b></div>
<br />
<b><span style="color: #0b5394;">Step 1:</span></b> <b>Adding a New and Flexible Recent Posts Widget With Thumbnail for Blogger.</b><br />
Now let's start adding it...<br />
<br />
<b><span style="color: #0b5394;">Step 2:</span></b> Login to Your Blogger Account.Go to your <b><span style="color: #0b5394;">Blogger Dashboard>Layout>Add a Gadget.</span></b><br />
<br />
<br />
<div>
</div>
<div>
<b><span style="color: #0b5394;">Step 3:</span></b> After click on Add a Gadget link A pop-up box will open now<br />
<br /></div>
<div>
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2NBHy5gDBgEgcJxXLh_uiUcubKIfCWObP_PsxBB1lJOBdgv_IFLDpDcW7-a9VdOR1ihQexmiqwtC3lJh7V7TXfilbhjVGhPuVMzbRLrlQH7vivr3FbaIkrcfRGTCKzuvdNOxvLd3VYtjT/s1600/2013-12-07_051839.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="106" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2NBHy5gDBgEgcJxXLh_uiUcubKIfCWObP_PsxBB1lJOBdgv_IFLDpDcW7-a9VdOR1ihQexmiqwtC3lJh7V7TXfilbhjVGhPuVMzbRLrlQH7vivr3FbaIkrcfRGTCKzuvdNOxvLd3VYtjT/s400/2013-12-07_051839.png" width="400" /></a></div>
<div>
<br />
Select "HTML/JavaScript" from the gadget options by clicking the blue plus sign for that gadget.</div>
<div>
</div>
<br />
<br />
<div>
<b><span style="color: #0b5394;">Step 4:</span><span style="color: blue;"> </span></b>Select 'HTML/Javascript' and add the one of code given below.</div>
<div>
<br /></div>
<blockquote class="tr_bq">
<style type="text/css"><br />
/*<![CDATA[*/<br />
img.label_thumb{-webkit-transition:all .5s ease;-moz-transition:all .5s 
ease;transition:all .5s ease;float:left;padding:0;border:3px solid 
#cccccc;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;background:#fff;margin-right:10px;height:70px;width:70px}<br />
img.label_thumb:hover{-moz-transform:scale(1.2) 
rotate(-350deg);-webkit-transform:scale(1.2) 
rotate(-350deg);-o-transform:scale(1.2) 
rotate(-350deg);-ms-transform:scale(1.2) 
rotate(-350deg);transform:scale(1.2) 
rotate(-350deg);-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 
20px rgba(0,0,0,0.1);-moz-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 
20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px 
rgba(0,0,0,0.1);background:#f7f6f6}<br />
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 10px 
2px 0;adding:0}ul.label_with_thumbs 
li{background:#f5f5f5;list-style-type:none;padding:8px 
0;min-height:65px;margin-bottom:5px}<br />
.label_with_thumbs a{color:#3395BF;font-size:12pt;outline:0;text-decoration:none}<br />
.label_with_thumbs a:hover,.label_with_thumbs 
a:focus{color:#F4A557}.credits,.credits 
a{font-size:12px!important;text-align:left;text-shadow:0 1px 0 
#fff;color:#888}<br />
#mdjumplink{font-weight:800;background:#f7f8f9;background:-webkit-linear-gradient(top,#f7f8f9
 0,#e9e9e9 100%);background:-moz-linear-gradient(top,#f7f8f9 0,#e9e9e9 
100%);background:-o-linear-gradient(top,#f7f8f9 0,#e9e9e9 
100%);background:-ms-linear-gradient(top,#f7f8f9 0,#e9e9e9 
100%);background:linear-gradient(top,#f7f8f9 0,#e9e9e9 
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8f9',endColorstr='#e9e9e9',GradientType=0);border:1px
 solid 
#ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px
 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px 
rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px 
rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px 
rgba(223,223,223,0.4);color:#888!important;text-shadow:0 1px 0 
#fff;line-height:1.2;cursor:pointer;font-size:13px;font-weight:bold;text-decoration:none!important}<br />
#mdjumplink:hover{background:#f1f1f1;background:-webkit-linear-gradient(top,#f1f1f1
 0,#e0e0e0 100%);background:-moz-linear-gradient(top,#f1f1f1 0,#e0e0e0 
100%);background:-o-linear-gradient(top,#f1f1f1 0,#e0e0e0 
100%);background:-ms-linear-gradient(top,#f1f1f1 0,#e0e0e0 
100%);background:linear-gradient(top,#f1f1f1 0,#e0e0e0 
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',endColorstr='#e0e0e0',GradientType=0);text-decoration:none!important}<br />
#mdjumplink a{color:#888!important;text-decoration:none;display:block;margin:2px}<br />
#mdjumplink a:hover{color:#888!important;text-decoration:none}<br />
#mdcomments{padding:6px 12px;background:#3395BF;color:#FFFFFF!important;font-size:13px;font-weight:800}<br />
#mdcomments:hover{background:#F4A557;text-decoration:none}<br />
/*]]>*/<br />
</style><a href="http://myblog-widgets.blogspot.com/" rel="dofollow" 
target="_blank" title="Blogger Tips and Tricks"><img 
src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" 
border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" 
/></a><a href="http://myblog-widgets.blogspot.com/" rel="dofollow" 
target="_blank" title="Latest Tips For Bloggers"><img 
src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" 
border="0" style="position: fixed; bottom: 10%; right: 0%;" 
/></a><a href="http://myblog-widgets.blogspot.com/" rel="dofollow" 
target="_blank" title="Blogger Tricks"><img 
src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" 
style="position: fixed; bottom: 10%; left: 0%;" 
/></a><script type="text/javascript" 
src="http://dl.dropboxusercontent.com/s/lvcqh2soqpa5tty/animated-recent-posts-ycode-5.js"></script><br />
<script type='text/javascript'><br />
//<![CDATA[<br />
<span style="color: lime;"><b>var numposts = 5</b>;</span><br />
<span style="color: red;"><b>var showpostthumbnails = true</b>;</span><br />
<span style="color: magenta;"><b>var displaymore = true</b>;</span><br />
var displayseparator = true;<br />
<span style="color: #a64d79;"><b>var showcommentnum = false</b>;</span><br />
var showpostdate = false;<br />
var showpostsummary = false;<br />
var numchars = 80;<br />
//]]><br />
</script><br />
<script src='<b><span style="color: #0b5394;">http://myblog-widgets.blogspot.com/</span></b>feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs'></script></blockquote>
<br />
<br />
<b><span style="color: #0b5394;">Step 5:</span> Customization:</b><br />
<b><span style="color: lime;">var numposts = 5</span></b>; (Number of Posts to be shown)<br />
<span style="color: red;"><b>var showpostthumbnails = true</b>;</span> (Post Image)<br />
<span style="color: magenta;"><b>var displaymore = true</b>;</span> (More Button)<br />
<span style="color: #a64d79;"><b>var showcommentnum = false</b>;</span> (No of Comments)<br />
var showpostdate = false; (Post Date)<br />
var showpostsummary = false; (Post Summry)<br />
var numchars = 80; (Characters in post summary)<br />
True is for Display item and False for not to display. Change According to your needs.<br />
<br />
Change <b><span style="color: #0b5394;">http://myblog-widgets.blogspot.com</span></b> with your Website/ Blog URL.

Add New and Flexible Recent Posts Widget With Thumbnail for Blogger / Website

Animated recent post is a fantastic way to present headlines updates to your readers.The effect of smooth scrolling attract readers and ge...

Add a Awesome jQuery Pop-Up For Facebook Like Box

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxkL105NhKrLg21QVMu8AUEgGg03UVivDTw6mYQFaU7bY5HK_41TMGpcKwbtkA7Q-YtA0KgdeJYZeTwFrhvjkFh65jyIwInl5mtUgA8OPRptLS_Gn2XfKdjYjK7AntyFyxsKVRpt8odvmx/s1600/Add+a+Awesome+jQuery+Pop-Up+For+Facebook+Like+Box.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxkL105NhKrLg21QVMu8AUEgGg03UVivDTw6mYQFaU7bY5HK_41TMGpcKwbtkA7Q-YtA0KgdeJYZeTwFrhvjkFh65jyIwInl5mtUgA8OPRptLS_Gn2XfKdjYjK7AntyFyxsKVRpt8odvmx/s320/Add+a+Awesome+jQuery+Pop-Up+For+Facebook+Like+Box.png" width="275" /></a>Now I decided to present some fresh for what comes with a nice jQuery 
Popup Box to Facebook as. This <br />
is an excellent widget to enhance taste. 
You can see most of the sites or blogs that are used to increase pop 
unpaid, fans and supporters. This popup jQuery cute for Facebook As the 
box is a great blogger widget. As soon as the new visitors coming to 
your blog will display the pop visitors, which can help increase the 
size and get more traffic to my next tutorials Facebook.In I'll try to 
make it more interactive with links to social media profiles and a 
complete version with all its contents, which can need.Check out show 
down and I will show you how to add jQuery Popup cute for Facebook as 
the box to Blogger or WordPress?<br />
<br />
<br />
<br />
<div style="text-align: center;">
<span style="color: #0b5394;"><b><span style="font-size: small;">Watch Video</span></b></span></div>
<div style="text-align: center;">
<object height="315" width="560"><param name="movie" value="//www.youtube.com/v/tdph8GO7oRk?hl=en_GB&version=3&rel=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="//www.youtube.com/v/tdph8GO7oRk?hl=en_GB&version=3&rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</div>
<div style="text-align: center;">
<span style="color: #0b5394;"><b><span style="font-size: small;"><br /></span></b></span></div>
<div style="text-align: center;">
<span style="color: #0b5394;"><b><span style="font-size: small;"><br /></span></b></span>
<span style="color: #0b5394;"><b><span style="font-size: small;">Or Follow these Steps</span></b></span><br />
<span style="color: #0b5394;"><b><span style="font-size: small;"><br /></span></b></span></div>
<b><span style="color: #0b5394;">Step 1:</span></b> <b>Adding a Awesome jQuery Pop-Up For Facebook Like Box Widget To Blogger layout.</b><br />
Now let's start adding it...<br />
<br />
<b><span style="color: #0b5394;">Step 2:</span></b> Login to Your Blogger Account.Go to your <b><span style="color: #0b5394;">Blogger Dashboard>Layout>Add a Gadget.</span></b><br />
<br />
<div>
</div>
<div>
<b><span style="color: #0b5394;">Step 3:</span></b> After click on Add a Gadget link A pop-up box will open now</div>
<div>
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2NBHy5gDBgEgcJxXLh_uiUcubKIfCWObP_PsxBB1lJOBdgv_IFLDpDcW7-a9VdOR1ihQexmiqwtC3lJh7V7TXfilbhjVGhPuVMzbRLrlQH7vivr3FbaIkrcfRGTCKzuvdNOxvLd3VYtjT/s1600/2013-12-07_051839.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="106" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2NBHy5gDBgEgcJxXLh_uiUcubKIfCWObP_PsxBB1lJOBdgv_IFLDpDcW7-a9VdOR1ihQexmiqwtC3lJh7V7TXfilbhjVGhPuVMzbRLrlQH7vivr3FbaIkrcfRGTCKzuvdNOxvLd3VYtjT/s400/2013-12-07_051839.png" width="400" /></a></div>
<div>
<br />
<br />
Select "HTML/JavaScript" from the gadget options by clicking the blue plus sign for that gadget.</div>
<div>
</div>
<br />
<div>
<b><span style="color: #0b5394;">Step 4:</span><span style="color: blue;"> </span></b>Select 'HTML/Javascript' and add the one of code given below.</div>
<div>
<br /></div>
<blockquote class="tr_bq">
<b><span style="color: red;"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script></span></b><br />
<br />
<link rel="stylesheet" type="text/css" 
href="http://dl.dropboxusercontent.com/s/wt4ulsj3cvct3fi/lightbox-style-popup-facebook-likebox-widget-02.css"
 /><script 
src="http://dl.dropboxusercontent.com/s/7bcjeubaenpmbf9/facebook-colorbox-v1.3.19.js"></script><br />
<script type="text/javascript"> <br />
jQuery(document).ready(function(){ <br />
if (document.cookie.indexOf('visited=<span style="font-size: medium;"><b><span style="color: lime;">false</span></b></span>') == -1) { <br />
var fifteenDays = 1000*60*60*24*<span style="font-size: medium;"><span style="color: lime;">30</span></span>; <br />
var expires = new Date((new Date()).valueOf() + fifteenDays); <br />
document.cookie = "visited=true;expires=" + expires.toUTCString(); <br />
$.colorbox({width:"400px", inline:true, href:"#subscribe"}); <br />
} <br />
}); <br />
</script><a href="http://myblog-widgets.blogspot.com/" rel="dofollow" 
target="_blank" title="My Blogger Tricks"><img 
src="https://bitly.com/24workpng1" alt="My Blog Widgets" border="0" 
style="position: fixed; bottom: 10%; right: 0%; top: 0px;" 
/></a><a href="http://myblog-widgets.blogspot.com/" rel="dofollow" 
target="_blank" title="My Blog Widgets"><img 
src="https://bitly.com/24workpng1" alt="My Blog Widgets" border="0" 
style="position: fixed; bottom: 10%; right: 0%;" /></a><a 
href="http://myblog-widgets.blogspot.com/" rel="dofollow" target="_blank" 
title="Techtunes"><img src="https://bitly.com/24workpng1" 
alt="Techtunes" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a>  <div style='display:none'> <br />
<div id='subscribe' style='padding:10px; background:#fff;'> <br />
<h3 class="box-title"><span style="font-size: medium;"><b><span style="color: red;">Receive all updates via Facebook. Just Click the Like Button Below</span></b></span><center><p style="line-height:3px;" >▼</p></center></h3> <br />
<center><br />
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<span style="color: #0b5394; font-size: medium;"><b>Official.MyBlogWidgets</b></span>&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258"
 scrolling="no" frameborder="0" style="border:none; overflow:hidden; 
width:300px; height:258px;" 
allowtransparency="true"></iframe></center><br />
<br />
</div><br />
</div></blockquote>
<br />
<b><span style="color: #0b5394;">Step 5: </span></b>Customize Field Replace "<b style="color: #0b5394;">Official.MyBlogWidgets</b>" with your own facebook page name (Not your own profile name)<br />
<br />
<b>Note: </b><b>If your template already have a jquery do not put again, just copy after it</b><br />
<b>
Html from above a few things could be replaced.</b><br />
<div>
</div>
<blockquote class="tr_bq">
<b style="text-align: center;"><span style="color: #0b5394;"><script src="http://code.jquery.com/jquery-1.10.2.min.js"></script></span></b></blockquote>
<b><span style="color: #0b5394;">Step 6:</span></b> Now Click On Save 'JavaScript' You are done.

Add a Awesome jQuery Pop-Up For Facebook Like Box

Now I decided to present some fresh for what comes with a nice jQuery Popup Box to Facebook as. This is an excellent widget to enhance tas...

Add jQuery LIGHTBOX Popup Facebook Likebox To Blogger New

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjboPGqfLtAMMVVDfWsggY76tZZN6f1Fdi4nL62DBDaMY2ftn_Hvi8TA66vJ0H9ClGkVVru_y6IlGkkGFPwIQIzNvn1tLrFnJy7bJcBJ0IIU2AOvKaoKeb7gE5q-y5FDAS6Y55pRh5taLLI/s1600/Add+jQuery+LIGHTBOX+Popup+Facebook+Likebox+To+Blogger+New.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjboPGqfLtAMMVVDfWsggY76tZZN6f1Fdi4nL62DBDaMY2ftn_Hvi8TA66vJ0H9ClGkVVru_y6IlGkkGFPwIQIzNvn1tLrFnJy7bJcBJ0IIU2AOvKaoKeb7gE5q-y5FDAS6Y55pRh5taLLI/s320/Add+jQuery+LIGHTBOX+Popup+Facebook+Likebox+To+Blogger+New.png" width="262" /></a><b>How To Add A Awesome Facebook Fan Page JavaScript For Blogger</b><br />
<br />
I had given to Facebook as jQuery popup box and jQuery to facebook 
emerging as the box with the background image in my previous post, if 
you are new here, that the first visit, now I'm back with the same 
widget, just change the background image and the size of this widget. I 
just tried this and I hope you enjoyed it.<br />
<br />
<b><span style="color: #0b5394;">Step 1:</span></b> <b>Adding Static Facebook Pop Out Like Box Widget To Blogger layout.</b><br />
Now let's start adding it...<br />
<br />
<b><span style="color: #0b5394;">Step 2:</span></b> Login to Your Blogger Account.Go to your <b><span style="color: #0b5394;">Blogger Dashboard>Layout>Add a Gadget.</span></b><br />
<br />
<div>
</div>
<div>
<b><span style="color: #0b5394;">Step 3:</span></b> After click on Add a Gadget link A pop-up box will open now</div>
<div>
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2NBHy5gDBgEgcJxXLh_uiUcubKIfCWObP_PsxBB1lJOBdgv_IFLDpDcW7-a9VdOR1ihQexmiqwtC3lJh7V7TXfilbhjVGhPuVMzbRLrlQH7vivr3FbaIkrcfRGTCKzuvdNOxvLd3VYtjT/s1600/2013-12-07_051839.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="106" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2NBHy5gDBgEgcJxXLh_uiUcubKIfCWObP_PsxBB1lJOBdgv_IFLDpDcW7-a9VdOR1ihQexmiqwtC3lJh7V7TXfilbhjVGhPuVMzbRLrlQH7vivr3FbaIkrcfRGTCKzuvdNOxvLd3VYtjT/s400/2013-12-07_051839.png" width="400" /></a></div>
<div>
<br />
<br />
Select "HTML/JavaScript" from the gadget options by clicking the blue plus sign for that gadget.</div>
<div>
</div>
<br />
<div>
<b><span style="color: #0b5394;">Step 4:</span><span style="color: blue;"> </span></b>Select 'HTML/Javascript' and add the one of code given below.</div>
<div>
<br /></div>
<blockquote class="tr_bq">
<b><span style="color: red;"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script></span></b><br />
<br />
<br />
<link rel="stylesheet" type="text/css" 
href="http://dl.dropboxusercontent.com/s/75xazflx9vkfkmh/lightbox-style-popup-facebook-likebox-widget-01.css"
 /><script 
src="http://dl.dropboxusercontent.com/s/7bcjeubaenpmbf9/facebook-colorbox-v1.3.19.js"></script><script
 type="text/javascript"> jQuery(document).ready(function(){ if 
(document.cookie.indexOf('visited=<span style="font-size: medium;"><b><span style="color: #0b5394;">true</span></b></span>') == -1) { var fifteenDays = 1000*60*60*24*<span style="font-size: medium;"><span style="color: #0b5394;"><b>30</b></span></span>;
 var expires = new Date((new Date()).valueOf() + fifteenDays); 
document.cookie = "visited=true;expires=" + expires.toUTCString(); 
$.colorbox({width:"400px", inline:true, href:"#subscribe"}); } }); 
</script><a href="http://myblog-widgets.blogspot.com/" rel="dofollow" 
target="_blank" title="My Blog Widgets"><img 
src="https://bitly.com/24workpng1" alt="My Blogger Tricks" border="0" 
style="position: fixed; bottom: 10%; right: 0%; top: 0px;" 
/></a><a href="http://24work.blogspot.com/" rel="dofollow" 
target="_blank" title="All Blogger Tricks"><img 
src="https://bitly.com/24workpng1" alt="My Blog Widgets" border="0" 
style="position: fixed; bottom: 10%; right: 0%;" /></a><a 
href="http://myblog-widgets.blogspot.com" rel="dofollow" target="_blank" 
title="Techtunes"><img src="https://bitly.com/24workpng1" 
alt="Techtunes" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a> <div style='display:none'><div 
id='subscribe' style='padding:10px; 
background:#fff;'><center><img 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6TBoywTq8y0f_FfHQ0umA_lkICh3eudJfGpG1g1As1ImnMoW1UyCvtUFsjEcTcQQ-6QIaD_MqxrStKk6teUqNQ_v-rqiQjTf3GxIYffWF43HOmi2o-q0L9pr_EzDy4B-r0gudfTMWe8vd/s1600/LikeUsOnFacebook.png"
 width:300px; height:150px;"/></center><center><iframe
 
src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<span style="color: #0b5394; font-size: medium;"><b>Official.MyBlogWidgets</b></span>&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258"
 scrolling="no" frameborder="0" style="border:none; overflow:hidden; 
width:300px; height:258px;" allowtransparency="true"></iframe><br />
<br />
</center><br />
</div><br />
</div></blockquote>
<br />
<div>
<b>Note: </b><b>If your template already have a jquery do not put again, just copy after it</b></div>
<b>
Html from above a few things could be replaced.</b><br />
<div>
</div>
<blockquote class="tr_bq">
<b style="text-align: center;"><span style="color: #0b5394;"><script src="http://code.jquery.com/jquery-1.10.2.min.js"></script></span></b></blockquote>
<br />
<b><span style="color: #0b5394;">Step 5: </span></b>Customize Field Replace "<b style="color: #0b5394;">Official.MyBlogWidgets</b>" with your own facebook page name (Not your own profile name)<br />
<br />
<b><span style="color: #0b5394;">Customization:</span></b><br />
<br />
<div>
The widget saves up a cookie in the 
visitors computer. You can change the frequency after which the widget 
would appear to the visitor. Simply change the number <span style="font-size: medium;"><b><span style="color: #0b5394;">30</span></b></span> to the number of days your wish. Say you want your widget to reappear after 30 days after the first time. Than change <span style="font-size: medium;"><b><span style="color: #0b5394;">30</span></b></span> to 7.</div>
<div>
<br /></div>
<div>
<b><span style="color: #0b5394;">Step 6:</span></b> Now Click On Save 'JavaScript' You are done.</div>

Add jQuery LIGHTBOX Popup Facebook Likebox To Blogger New

How To Add A Awesome Facebook Fan Page JavaScript For Blogger I had given to Facebook as jQuery popup box and jQuery to facebook emerging...

AddThis