The Trick Lab: Blogger Widgets

How To Add Facebook Popup Widget To Blogger

Unknown 2 Blogger Widgets, Facebook Widget 02:51

Today i am sharing a brand new widget Facebook popup like widget for blogger. A pretty great way to increase your web site traffic is to come up with traffic using social network, 
One of best option is Facebook, insert / add Facebook pop up like box or widget to your blog. Its a query widget and lately very hip among blogger gadgets. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizr0lKxydN_iMkFbRFatx6WQ1DfNltrxVLFeKb5GR-8ZZ5XQa4GVdEEFYEC7RDl1Ovy7jmq5JpoZxrS4hLedx_lKWogCRGeSds0r2EDxMH8ya0Xc8fxPXeosNyPph75wKjEjEobDT_f6o/s1600/untitled.bmp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizr0lKxydN_iMkFbRFatx6WQ1DfNltrxVLFeKb5GR-8ZZ5XQa4GVdEEFYEC7RDl1Ovy7jmq5JpoZxrS4hLedx_lKWogCRGeSds0r2EDxMH8ya0Xc8fxPXeosNyPph75wKjEjEobDT_f6o/s1600/untitled.bmp" width="320" /></a></div>
<h1 class="post-title entry-title" itemprop="name headline" style="background-color: white; color: #008cdb; font-family: Oswald, 'Bebas Neue', Bebas, 'Arial Narrow', sans-serif; font-size: 22px; font-weight: normal; margin: 0px;">
<a href="http://thetricklab.blogspot.com/2014/03/write-your-name-lovers-name-in-heart.html" itemprop="url" style="color: #008cdb; text-decoration: none;">Write your Name Lover’s Name in Heart Shape</a></h1>
<div>
 </div>
<div>
 </div>
<div>
HOW TO ADD FACEBOOK LIKE BOX </div>
<div>
 </div>
<div>
<div>
First Go To Blogger.com> Layout</div>
<div>
Add a HTML / JavaScript Gadget</div>
<div>
Now paste the following code in it.</div>
</div>
<div>
 </div>
<div>
<blockquote class="tr_bq">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script> 
<style> 
#fanback { 
display:none; 
background:rgba(0,0,0,0.8); 
width:100%; 
height:100%; 
position:fixed; 
top:0; 
left:0; 
z-index:99999; 
} 
#fan-exit { 
width:100%; 
height:100%; 
} 
#fanbox { 
background:white; 
width:420px; 
height:270px; 
position:absolute; 
top:58%; 
left:63%; 
margin:-220px 0 0 -375px; 
-webkit-box-shadow: inset 0 0 50px 0 #939393; 
-moz-box-shadow: inset 0 0 50px 0 #939393; 
box-shadow: inset 0 0 50px 0 #939393; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
margin: -220px 0 0 -375px; 
} 
#fanclose { 
float:right; 
cursor:pointer; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu7BH57b6IA19Dgq4IJQHV0C9ZnmgpD5j5KQdoMxgUAcZdkBlLiaEcYzdqhH2zcyIr7_eX2B0pkeI9xiSyfdzfdxhkoblV5HNwArD9nyCTrXmwWrue6iI9rWzKEcN7Tse_11NuceLZ4wsY/s1600/fanclose.png) repeat; 
height:15px; 
padding:20px; 
position:relative; 
padding-right:40px; 
margin-top:-20px; 
margin-right:-22px; 
} 
.remove-borda { 
height:1px; 
width:366px; 
margin:0 auto; 
background:#F3F3F3; 
margin-top:16px; 
position:relative; 
margin-left:20px; 
} 
#linkit a.visited,#linkit a,#linkit a:hover { 
color:#80808B; 
font-size:10px; 
margin: 0 auto 5px auto; 
float:center; 
} 
</style> 
<pre></pre> 
<script type='text/javascript'> 
//<![CDATA[ 
jQuery.cookie = function (key, value, options) { 
// key and at least value given, set cookie... 
if (arguments.length > 1 && String(value) !== "[object Object]") { 
options = jQuery.extend({}, options); 
if (value === null || value === undefined) { 
options.expires = -1; 
} 
if (typeof options.expires === 'number') { 
var days = options.expires, t = options.expires = new Date(); 
t.setDate(t.getDate() + days); 
} 
value = String(value); 
return (document.cookie = [ 
encodeURIComponent(key), '=', 
options.raw ? value : encodeURIComponent(value), 
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE 
options.path ? '; path=' + options.path : '', 
options.domain ? '; domain=' + options.domain : '', 
options.secure ? '; secure' : '' 
].join('')); 
} 
// key and possibly options given, get cookie... 
options = value || {}; 
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent; 
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; 
}; 
//]]> 
</script> 
<script type='text/javascript'> 
jQuery(document).ready(function($){ 
if($.cookie('popup_user_login') != 'yes'){ 
$('#fanback').delay(100).fadeIn('medium'); 
$('#fanclose, #fan-exit').click(function(){ 
$('#fanback').stop().fadeOut('medium'); 
}); 
} 
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 }); 
}); 
</script> 
<div id='fanback'> 
<div id='fan-exit'> 
</div> 
<div id='fanbox'> 
<div id='fanclose'> 
</div> 
<div class='remove-borda'> 
</div> 
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php? 
href=http://www.facebook.com/computerlatestinformation&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' 
style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center> 
<a href="http://thetricklab.blogspot.com/2014/03/how-to-add-facebook-popup-widget-to.html" rel="dofollow">Facebook Popup Widget</a></center> 
</div> 
</div></blockquote>
 
 
 
Replace http://www.facebook.com/computerlatestinformation with your facebook username 
 
 If you want the Popup to appear every time the User Reloads  or access the website 
 
 Delete the below code 
 
<blockquote class="tr_bq">
$.cookie(‘popup_user_login’, ‘yes’, { path: ‘/’, expires: 7 }); </blockquote>
</div>

How To Add Facebook Popup Widget To Blogger

Today i am sharing a brand new widget Facebook popup like widget for blogger. A pretty great way to increase your web site traffic is to com...

4 in 1 Social Subscribing Slide Out Widget For Blogger

Unknown 0 Blogger Widgets 21:46

<div class="tr_bq">
 </div>
<div class="tr_bq">
 </div>
<div class="tr_bq">
 </div>
<div class="tr_bq">
 </div>
<div class="tr_bq">
 </div>
<div class="tr_bq">
 </div>
<div class="tr_bq">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1YuiE6suIMsxJa62cNOMcsqllwORKAiMlBisxAXSuI-03dDChF-e5rbrh8Sn4f4oMv7jNC9QKCGPDEznv-NSh-bfEh_xenDkZQSnkDx_IJxdpS8KztHjeKnBjEk7a1oNpNlb-ghdzMlY/s1600/thetricklab.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1YuiE6suIMsxJa62cNOMcsqllwORKAiMlBisxAXSuI-03dDChF-e5rbrh8Sn4f4oMv7jNC9QKCGPDEznv-NSh-bfEh_xenDkZQSnkDx_IJxdpS8KztHjeKnBjEk7a1oNpNlb-ghdzMlY/s1600/thetricklab.png" width="52" /></a></div>
<div class="tr_bq">
Today i'm share four in one Social Subscribing Slide Out gadget For Blogger.</div>
If you do not have an area for your social subscribing widgets then don't fret. 
I am share Hide and show them out with sleek j question slide out hover result. 
This four in one slide out gadget contains a floating Facebook like box,your recent tweets, Google +1 button and feed burner email subscription. 
 
 
Go to blogger.com. 
Select Layout. 
Add a Gadget 
Click HTML JavaScript. 
 Paste the code. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<blockquote>
<div dir="ltr" style="text-align: left;" trbidi="on"> <style> img,a {     border: 0; } #on {     visibility: visible; } #off {     visibility: hidden; } #facebook_div {     width: 196px;     height: 340px;     overflow: hidden; } #twitter_div {     width: 246px;     height: 353px;     overflow: hidden; } #google_plus_div {     width: 152px;     height: 97px;     overflow: hidden;     margin-left: 50px;     margin-top: 10px; } #knfeedburner_div {     width: 300px;     height: 97px;     overflow: hidden;     margin-top: 5px;     margin-left: -4px; } #kakinetwork_div {     width: 300px;     height: 97px;     overflow: hidden; }/* right side style */#facebook_right {     z-index: 10005;     border: 2px solid #3c95d9;     background-color: #fff;     width: 196px;     height: 353px;     position: fixed;     right: -200px; } #facebook_right img {     position: absolute;     top: -2px;     left: -35px; } #facebook_right iframe {     border: 0px solid #3c95d9;     overflow: hidden;     position: static;     height: 360px;     left: -2px;     top: -3px; } #twitter_right {     z-index: 10004;     border: 2px solid #6CC5FF;     background-color: #6CC5FF;     width: 246px;     height: 353px;     position: fixed;     right: -250px; } #twitter_right_img {     position: absolute;     top: -2px;     left: -35px;     border: 0; } #google_plus_right {     z-index: 10003;     background-color: #F2F2F2;     border: 2px solid #006ec9;     border-top: 2px solid #0056a0;     border-bottom: 2px solid #0056a0;     border-right: 2px solid #0056a0;     border-left: hidden;     width: 152px;     height: 97px;     position: fixed;     right: -154px; } #google_plus_right_img {     position: absolute;     top: -2px;     left: -33px;     border: 0; } #feedburner_right {     z-index: 10003;     background-color: #fefefe;     border: 2px solid #5b5b5b;     border-top: 2px solid #5b5b5b;     border-bottom: 2px solid #5b5b5b;     border-right: 2px solid #5b5b5b;     border-left: hidden;     width: 300px;     height: 97px;     position: fixed;     right: -303px; } #feedburner_right_img {     position: absolute;     top: -2px;     left: -33px;     border: 0; } #kakinetwork_right {     z-index: 10003;     border: 2px solid #303030;     background-color: #fff;     width: 300px;     height: 97px;     position: fixed; } #kakinetwork_right img {     position: absolute;     top: -2px;     left: -101px; }/* left side style */#facebook_left {     z-index: 10005;     border: 2px solid #3c95d9;     background-color: #fff;     width: 196px;     height: 353px;     position: fixed;     left: -200px; } #facebook_left img {     position: absolute;     top: -2px;     right: -35px; } #facebook_left iframe {     border: 0px solid #3c95d9;     overflow: hidden;     position: static;     height: 360px;     right: -2px;     top: -3px; } #twitter_left {     z-index: 10004;     border: 2px solid #6CC5FF;     background-color: #6CC5FF;     width: 246px;     height: 353px;     position: fixed;     left: -250px; } #twitter_left_img {     position: absolute;     top: -2px;     right: -35px;     border: 0; } #google_plus_left {     z-index: 10003;     background-color: #006ec9;     border: 2px solid #006ec9;     border-top: 2px solid #0056a0;     border-bottom: 2px solid #0056a0;     border-left: 2px solid #0056a0;     border-right: hidden;     width: 152px;     height: 97px;     position: fixed;     left: -154px; } #google_plus_left_img {     position: absolute;     top: -2px;     right: -33px;     border: 0; } #feedburner_left {     z-index: 10003;     background-color: #fefefe;     border: 2px solid #5b5b5b;     border-top: 2px solid #5b5b5b;     border-bottom: 2px solid #5b5b5b;     border-left: 2px solid #5b5b5b;     border-right: hidden;     width: 300px;     height: 97px;     position: fixed;     left: -303px; } #feedburner_left_img {     position: absolute;     top: -2px;     right: -33px;     border: 0; } #kakinetwork_left {     z-index: 10003;     border: 2px solid #303030;     background-color: #fff;     width: 300px;     height: 97px;     position: fixed; } #kakinetwork_left img {     position: absolute;     top: -2px;     right: -101px; } .box-title1 {     border: 1px solid #ddd; /*border-radius*/     -webkit-border-radius: 6px;     -moz-border-radius: 6px;     border-radius: 6px; /*box-shadow*/     -webkit-box-shadow: 5px 5px 5px #CCCCCC;     -moz-box-shadow: 5px 5px 5px #CCCCCC;     box-shadow: 5px 5px 5px #CCCCCC;     padding: 10px;     margin: 10px 0; } .enteryouremail {     background: #fff !important;     border: 1px solid #d2d2d2;     padding: 0px 8px 0px 8px;     color: #a19999;     font-size: 12px;     height: 25px;     width: 165px; /*border-radius*/     -webkit-border-radius: 5px;     -moz-border-radius: 5px;     border-radius: 5px;     margin: 0px; } .submitbutton {     background: #F2F2F2;     border: 1px solid #F66303; /*box-shadow*/     -webkit-box-shadow: 3px 3px 3px #666;     box-shadow: 3px 3px 3px #666;     font: bold 12px Arial, sans-serif;     color: #000000;     height: 25px;     padding: 0 12px 0 12px;     margin: 0 0 0 5px; /*border-radius*/     -webkit-border-radius: 5px;     border-radius: 5px;     cursor: pointer; } </style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script> <script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script> <div id="on"> <div id="facebook_right" style="top: 18%;"> <div id="facebook_div"> <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLoMw9rgvrVOMGIkl9Jt2GR6yuFjShpbA0dBDczqea11Telvt63HDemjVWO1dqMwRvGMXdlwQ8brp3FS7sMc53m2Cv0LJpaRwc4Rh3svQkIMdaDOEmidkppDUvQdWZExQgrMAR7o84YYtf/s1600/thetricklab.blogspot.com-facebook-icon.png" />    <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fasadtariq786&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" style="border: none; height: 346px; overflow: hidden; width: 200px;">    </iframe>   </div> </div> </div> <div id="on"> <div id="twitter_right" style="top: 35%;"> <div id="twitter_div"> <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWXqttYSmiMy2FYyhG0bc8Rlmi9Q-3HILQUFievzYdLj15Y4PMg54yKIlVJGhtoncx5OOrEg73Qi4itztxXchpktDYMwkaRgCvLAFac0OF7K2uSa75_68eC8EoFKp6bI0C16opFRRQD32v/s1600/thetricklab.blogspot.com-twitter.png" />    <script src="http://widgets.twimg.com/j/2/widget.js"></script>    <script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('asadtariq77').start();</script>   </div> </div> </div> <div id="on"> <div id="google_plus_right" style="top: 52%;"> <div id="google_plus_div"> <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE-94MPPkzhiMecaNxj-q5NfK15FU8cqFpEBmS2Xv3H5Fe-18aXANsqmWhUJZDtZ0fRTCGOUsG-_4YZWQSJD0NBYEzWhEZwrOvXHdvfYP5TFKLyOsf7e0gNan7eJ4xXOiZW81CukDJoBKN/s1600/thetricklab.blogspot.com-google+.png" />     <div style="float: left; margin: 10px 10px 10px 0;"> <g:plusone expr:href="data:post.url" size="tall"></g:plusone>    </div> </div> </div> <div id="on"> <div id="feedburner_right" style="top: 69%;"> <div id="knfeedburner_div"> <center>     <h4 style="color: #f66303;"> You can also receive Free Email Updates:</h4> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/USDlLP', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input class="enteryouremail" gtbfieldid="10" name="email" onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" value="Enter your email here..." /><input name="uri" type="hidden" value="hblogger" /><input class="submitbutton" type="submit" value="Submit" />     </form> </center> <img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqE1Tx2qKUnAR_vFAOkC5jCdE9pQZSEb9sGEm7mceaOADSe31wgVbb_kLP3Al6wYG_1BFBiFoxsoYovgkVyxe55WDHZVT61JoiMGBoeTNgxSnsg6ZZGoxYiXhy9qS38OPmBfVR345zBkbF/s1600/thetricklab.png" />    </div> </div> </div> </div> </div>  </blockquote>
 
 
replace asadtariq786 with your Facebook fan page username. 
Replace asadtariq77 with your twitter username. 
Replace blogspot/USDlLP with your feed burner username

4 in 1 Social Subscribing Slide Out Widget For Blogger

Today i'm share four in one Social Subscribing Slide Out gadget For Blogger. If you do not have an area for your social ...

Google Adsense Convert code

Unknown 0 AdSense, Blogger Widgets, Generator 21:29

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQXJf_csrlqUJWoID35pEtnoJTM_z3YDVgMLD9oQW2C1q9SZj1BRcn_54glz8dhyOVQehNK5O9VSdDsOzdUwp82WZZygkNcu7kwpEhZhUOqARgiayrliY2M-RCX46CXsleA4nIr4ohPdQ/s1600/Adsense++Code+Converter+Tool+Cover.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQXJf_csrlqUJWoID35pEtnoJTM_z3YDVgMLD9oQW2C1q9SZj1BRcn_54glz8dhyOVQehNK5O9VSdDsOzdUwp82WZZygkNcu7kwpEhZhUOqARgiayrliY2M-RCX46CXsleA4nIr4ohPdQ/s1600/Adsense++Code+Converter+Tool+Cover.png" width="400" /></a></div>
 
 
If you like Adsense Ad units or any other ad scripts within the web and blogger Post or anyplace within the Blog, You can't directly Paste it in the template code. You have to first convert the code by using this HTML Entities Encoder tool and then you can definitely put ads anywhere you choose. 
 
 
 
 
Google Adsense Convert code 
 
 
 
 
 
 
 
<iframe frameborder="0" height="250" scrolling="no" src="http://www-open-opensocial.googleusercontent.com/gadgets/ifr?url=http%3A%2F%2Fhosting.gmodules.com%2Fig%2Fgadgets%2Ffile%2F102462998830435293579%2Fpost-Code.xml&container=open&view=home&lang=all&country=ALL&debug=0&nocache=0&sanitize=0&v=e099959db401a1a9&source=http%3A%2F%2Fdigipassion.com%2F2010%2F12%2Fsimple-ad-code-converter-adsense.html&parent=http%3A%2F%2Fdigipassion.com%2F2010%2F12%2Fsimple-ad-code-converter-adsense.html&libs=core%3Acore.io#up_grows=20&up_conv1=1&up_conv2=1&up_conv3=1&up_conv4=1&up_conv5=1&st=%25st%25" style="display: block;" width="550"></iframe>

Google Adsense Convert code

If you like Adsense Ad units or any other ad scripts within the web and blogger Post or anyplace within the Blog, You can't directl...

Flying Twitter Bird Widget Generatora

Unknown 0 Blogger Widgets, Generator 09:27

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhVBv_lpG41pxK_NeIdfDGWB5r1nbNdFa6MYwrNwpKfCmepqybJSuBEvhsZeE93GSIeA_mn-uxDClozZBDNjZo0mmKS-pEbfQtLpXQDYleR43CH78VBbeZM26lh6GZi1aAebpupMe2b9I/s1600/Untitled.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhVBv_lpG41pxK_NeIdfDGWB5r1nbNdFa6MYwrNwpKfCmepqybJSuBEvhsZeE93GSIeA_mn-uxDClozZBDNjZo0mmKS-pEbfQtLpXQDYleR43CH78VBbeZM26lh6GZi1aAebpupMe2b9I/s1600/Untitled.jpg" width="400" /></a></div>
 
 
 
Today I'm share Flying Twitter Bird Widget <a href="http://thetricklab.blogspot.com/search/label/Generator" target="_blank">Generator</a>
 for blogger. it's a generator which can add differing types flying 
objects that on click can tweet your required text. Twitter bird flying 
animated effect by JavaScript when you scroll the page Up or Down, 
twitter bird available front of page. The bird found itself as the 
“follow me” link on the Twitter account. If you move the mouse pointer 
on the bird, a “follow me” button and a “tweet this” option displayed. 
In this post i provide you seven style of twitter birds for blogger. 
 
 
 
 
How To Add This Widget To Blogger 
 
 
 
Fill the desired information in generator below 
select a type of twitter bird 
Click on “Generate” button 
Finally click on “Add to blogger” button 
 
 
 
<a href="http://thetricklab.blogspot.com/p/blog-page_12.html" target="_blank">Click here for Flying Twitter Bird Widget Generatora </a>

Flying Twitter Bird Widget Generatora

Today I'm share Flying Twitter Bird Widget Generator for blogger. it's a generator which can add differing types flying obje...

Add Social Bookmarking Running Trucks For Blogger

Unknown 0 Blogger Widgets, Share Box 22:34

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnCdYDU2-K51c2JXw_rI_RXDUdn628skOYOcFMTOlF1K4L5q157yDxVpd5oY4ePvzhI10KJH43H2Qc_SMURW5tqQbrZrDJog756npv8wNMEAjpMiu075PPHiEsF6RIZiDmqcBaR3vBKdk/s1600/thetricklab.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="145" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnCdYDU2-K51c2JXw_rI_RXDUdn628skOYOcFMTOlF1K4L5q157yDxVpd5oY4ePvzhI10KJH43H2Qc_SMURW5tqQbrZrDJog756npv8wNMEAjpMiu075PPHiEsF6RIZiDmqcBaR3vBKdk/s1600/thetricklab.gif" width="640" /></a></div>
 
 
Today I'm share Social bookmark submitting Widget. Social bookmarking Widget is important for any internet site. And if widget is related animation then it always gives a good impression to any blog as well as your visitor like to play it and so they also also want to view it many times. 
 
<a href="http://thetricklab.blogspot.com/2014/03/floating-social-media-slide-out-widget.html" target="_blank">Floating Social Media Slide out Widget For Blogger , Website And wordpress</a> 
 
 
Add Running Trucks in Blogger. 
 
 
Sign in to Blogger > Dashborad. 
Click on drop Menu and choose Layout. 
Add a HTML/JavaScript. 
Add a new HTML/JavaScript Gadget. 
Paste below code inside it. 
 
 
<blockquote class="tr_bq">
 <div style="position: fixed; z-index: 65535; left: 0px; bottom: -3px; width:100%;"> <marquee><a href="http://www.facebook.com/computerlatestinformation" target="blank"> <abbr title="Follow us at Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNk41aF9uwThNXKwSBSI5QUTmgKG1YODgf8codU4r3VfAFxbqZoG0ihinMa9WYKvHMX89KxVtXccNvXPrJoS3D6fwQbcKq7eSHV5wX3hys7dG5o9hHvh15SmZTqMuJr4PZZTTUKyMFgX4/s1600/thetricklab.png" width="120px" height="100px"/> </abbr> </a> <a href="http://feeds.feedburner.com/thetricklab" target="blank"> <abbr title="Subscribe Our Feeds"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6YyekkuJm2hyrGqDKX23vBBXAxvMiv8MVDqt3loDkHqBoNKmAlNhnPY5l1_3zXoz6_slCTcOabMKCfl33qHUTSOJb6hEa8YFlfF0JyboTjTYZEUz3szskVP-naMyZQqNt7duS1rDgpk8/s1600/thetricklab.png" width="120px" height="100px"/> </abbr> </a><a href="http://twitter.com/asadtariq78" target="blank"> <abbr title="Follow Us on Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghxKjC_r_MAP-GMdA6WUWInS0HjW-zgi-tpatz4_5RRj7Bvsbgai4ZzL420adLU9QELBgr0q3LS1NjPbdmc3QMdHqi5evwi21bUF27LCDodJrH0-MNZfTMOSMFuprkfqRx6mFasICMK9M/s1600/thetricklab.png" width="120px" height="100px"/> </abbr> </a> </marquee></div></blockquote>
 Save your Widget. 
 
     Replace it computerlatestinformation with your Facebook Username 
    Replace it thetricklab with your Feed Burner Username 
    Replace it asadtariq78 with your Twitter Username

Add Social Bookmarking Running Trucks For Blogger

Today I'm share Social bookmark submitting Widget. Social bookmarking Widget is important for any internet site. And if widget is re...

How To Make Grab Our Button Widget And Add It To Blog

Unknown 0 Blogger Widgets, Tricks And Tips 03:54

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWunRZFWfKHqbO9ZuD8b4nAsa2jWvtsAClyLcJ-oEJk8ABo2FOQ0ywjWSxhQMSduZzzEotGOfcwqLf47N1-0CPE9T3YDhQ9Pf-VGF3m9pgOiL_xbIPBroe4gwagidaRlbwHkhVgKdkj00/s1600/Untitled+(Copy).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWunRZFWfKHqbO9ZuD8b4nAsa2jWvtsAClyLcJ-oEJk8ABo2FOQ0ywjWSxhQMSduZzzEotGOfcwqLf47N1-0CPE9T3YDhQ9Pf-VGF3m9pgOiL_xbIPBroe4gwagidaRlbwHkhVgKdkj00/s1600/Untitled+(Copy).png" width="400" /></a></div>
 
I 'm share Making Grab Our own Button Golf widget And Include It In order to Blog. Grab Our own Button promote your website via some other blog. 
How To make a Badge For Blog. 
 
 
How To Create A Badge For Blog 
 
 
Visit. <a href="http://cooltext.com/" target="_blank">Cooltext </a> 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuU6QBY4pCeV_iwYnhV3ZI5FcF12MBRbZ860ADQBoOayxCqtkBX0aFsrb_0puTsHvZasFA993XDp6nXKN7OqG0J5kC5A8lbkDYLulMLj0dX6rxmSBhp7EEAZOKHfzMeBW0iy-WVAnvUiY/s1600/thetricklab.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuU6QBY4pCeV_iwYnhV3ZI5FcF12MBRbZ860ADQBoOayxCqtkBX0aFsrb_0puTsHvZasFA993XDp6nXKN7OqG0J5kC5A8lbkDYLulMLj0dX6rxmSBhp7EEAZOKHfzMeBW0iy-WVAnvUiY/s1600/thetricklab.png" width="287" /></a></div>
Choose PIXEL MARKER. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDIMLsKo3KOZg31GW6MeYihbuwGYBuow8VMSy0aHeS4gQHq2HjnRiKNTge5rgwm5v2RTNXBvQUTLYafMCX4nvdaw6WScdfPx9OjWzPH7TfC4fAjmBJLgWpE0Ccwt9Y6sP5qa9oEL1grPA/s1600/thetricklab.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="114" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDIMLsKo3KOZg31GW6MeYihbuwGYBuow8VMSy0aHeS4gQHq2HjnRiKNTge5rgwm5v2RTNXBvQUTLYafMCX4nvdaw6WScdfPx9OjWzPH7TfC4fAjmBJLgWpE0Ccwt9Y6sP5qa9oEL1grPA/s1600/thetricklab.png" width="320" /></a></div>
 
Enter name, Select color and download image. 
 
 
 
 
 
 
 
<blockquote class="tr_bq">
 <div dir="ltr" style="text-align: left;" trbidi="on"> 
<center> 
<div dir="ltr" style="text-align: center;" trbidi="on"> 
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1-B1iblhHeqvJr0bXSMr7rNn4e2Wd0o9BFlWqzW8C0ZC2p7y96-4zHp1cBG1vbFVrXwY_gQzoydSHWIzal91qQIymyYWk0TjqPZC9D6PsYzvzS-d8uN8T9A6C-8Twxsl9CurCuNVwYFk/s400/Thetricklab.gif" title="Blogger tricks" /></a></div> 
</center> 
<center> 
<input onclick="this.focus();this.select()" readonly="" type="thetricklab" value="&lt;a href=&quot;www.thetricklab.blogspot.com/&quot;&gt;&lt;img alt=&quot;&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1-B1iblhHeqvJr0bXSMr7rNn4e2Wd0o9BFlWqzW8C0ZC2p7y96-4zHp1cBG1vbFVrXwY_gQzoydSHWIzal91qQIymyYWk0TjqPZC9D6PsYzvzS-d8uN8T9A6C-8Twxsl9CurCuNVwYFk/s400/Thetricklab.gif&quot; title=&quot;Blogger tricks&quot; /&gt;&lt;/a&gt;" /> 
</center> 
</div><div dir="ltr" style="text-align: left;" trbidi="on"> 
<a href="http://thetricklab.blogspot.com/2014/03/how-to-make-grab-our-button-widget-and.html">+grab this</a></div> 
</div></blockquote>
 
Replace 
 
 www.thetricklab.blogspot.com  with your link 
 
 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1-B1iblhHeqvJr0bXSMr7rNn4e2Wd0o9BFlWqzW8C0ZC2p7y96-4zHp1cBG1vbFVrXwY_gQzoydSHWIzal91qQIymyYWk0TjqPZC9D6PsYzvzS-d8uN8T9A6C-8Twxsl9CurCuNVwYFk/s400/Thetricklab.gif your pic link

How To Make Grab Our Button Widget And Add It To Blog

I 'm share Making Grab Our own Button Golf widget And Include It In order to Blog. Grab Our own Button promote your website via som...

How To Add Author Info Box At the bottom of every Blog Post

Unknown 0 Blogger Widgets 20:34

Hi friends Today I will share with you 3 beautiful Author box widget below every blogger posts. it will show at the bottom of every  post.We know that a author box contain small information about the site owner/Author 
 
 
 Go to your Blogger 
Template > Edit HTML 
Now Find this code ]]></b:skin> (ctrl+f) 
Paste the below code  Before/above ]]></b:skin> and Save the templates. 
 
 
<blockquote class="tr_bq">
]]></b:skin></blockquote>
 
 
 Author Box 1 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5sAsI1xkBroPvIKBY68PzZf73BkP35SrbkCKayMaXfPcpEJKwjRIvdsvfiKtt2fxEZBrX3FoveJtcLUGgSLmo2aLwq0B2pCSCVEKxqmoW_Pcjn64J2ww8WIlRQwO7ot8JiNOyQ4CXZWo/s1600/How+To+Add+Author+Info+Box+at+the+bottom+of+every+Blog+Post.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="67" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5sAsI1xkBroPvIKBY68PzZf73BkP35SrbkCKayMaXfPcpEJKwjRIvdsvfiKtt2fxEZBrX3FoveJtcLUGgSLmo2aLwq0B2pCSCVEKxqmoW_Pcjn64J2ww8WIlRQwO7ot8JiNOyQ4CXZWo/s1600/How+To+Add+Author+Info+Box+at+the+bottom+of+every+Blog+Post.png" width="320" /></a></div>
 
 
 
<blockquote class="tr_bq">
 
/* Author Box by www.Thetrickslab.blogspot.com */ 
.admin-bs{display:block; width:auto; background:#F5F5F5; border:3px solid #C0C0C0; box-shadow:0 1px 3px #000; -moz-box-shadow:0 1px 3px #000; -webkit-box-shadow:0 1px 3px #000; padding:0; margin:30px 0 10px 0; font:normal 12px Arial,Sans-Serif; color:#222} 
.admin-bs .kontainer{padding:5px} 
.admin-bs h1{background:#C0C0C0; border:none; border-bottom:1px solid #C0C0C0; color:#fff; text-transform:normal; text-shadow:0 1px 0 rgba(0,0,0,0.4); font:bold 12px Arial,Sans-Serif; padding:5px 10px; margin:0 0 0 0; display:block} 
.admin-bs h1 a{color:#FEEA83} 
.admin-bs img{width:70px; height:70px; margin:0 10px 0 0; float:left; border:0px solid #E6E6FA; padding:2px; background:#E6E6FAbox-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none}</blockquote>
 
 
  Author Box 2 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLycBRJ5gakY0FSl-NvLBrnT77VTC7jAXboZ43jjRVABeaXN9D0SnH_0RYwg9LdU0uODTS84JOJC-3eJNe6Qvss8-wWjWZACzAD-ZL3LyLloa86E6O5RZykzYHlplCLxVcR_tpJYvs34A/s1600/How+To+Add+Author+Info+Box+at+the+bottom+of+every+Blog+Post.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLycBRJ5gakY0FSl-NvLBrnT77VTC7jAXboZ43jjRVABeaXN9D0SnH_0RYwg9LdU0uODTS84JOJC-3eJNe6Qvss8-wWjWZACzAD-ZL3LyLloa86E6O5RZykzYHlplCLxVcR_tpJYvs34A/s1600/How+To+Add+Author+Info+Box+at+the+bottom+of+every+Blog+Post.png" width="320" /></a></div>
 
 
 
 
<blockquote class="tr_bq">
  /* Author Box by www.thetrickslab.blogspot.com */ 
.admin-bs{display:block; width:auto; background:#F5F5F5; border:3px solid #C0C0C0; box-shadow:0 1px 3px #000; -moz-box-shadow:0 1px 3px #000; -webkit-box-shadow:0 1px 3px #000; padding:0; margin:30px 0 10px 0; font:normal 12px Arial,Sans-Serif; color:#222} 
.admin-bs .kontainer{padding:5px} 
.admin-bs h1{background:#C0C0C0; border:none; border-bottom:1px solid #C0C0C0; color:#fff; text-transform:normal; text-shadow:0 1px 0 rgba(0,0,0,0.4); font:bold 12px Arial,Sans-Serif; padding:5px 10px; margin:0 0 0 0; display:block} 
.admin-bs h1 a{color:#FEEA83} 
.admin-bs img{width:70px; height:70px; margin:0 10px 0 0; float:left; border:0px solid #E6E6FA; padding:2px; background:#E6E6FAbox-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none}</blockquote>
 
  Author Box 3 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1GPR9KPBeBjBG8sml7HsRJuehvhdIHI1QlxLYy991snaQNq-dQ0Xbo7Z010yxK4UoJ3uZxP4Yx_3e9MnNnFdJKWcs-3EbtGJiauUEiDxAQqmx9nCjVU9YwM2L70zC6Omhspwsdki0okk/s1600/How+To+Add+Author+Info+Box+at+the+bottom+of+every+Blog+Post.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1GPR9KPBeBjBG8sml7HsRJuehvhdIHI1QlxLYy991snaQNq-dQ0Xbo7Z010yxK4UoJ3uZxP4Yx_3e9MnNnFdJKWcs-3EbtGJiauUEiDxAQqmx9nCjVU9YwM2L70zC6Omhspwsdki0okk/s1600/How+To+Add+Author+Info+Box+at+the+bottom+of+every+Blog+Post.png" width="320" /></a></div>
 
 
<blockquote class="tr_bq">
 /* Author Box by www.thetrickslab.blogspot.com */ 
.admin-bs {display:block; width:auto; background:#FED9BF; border:5px solid #B24700; box-shadow:0 1px 3px #000; -moz-box-shadow:0 1px 3px #000; -webkit-box-shadow:0 1px 3px #000; padding:0; margin:30px 0 10px 0; font:normal 12px Arial,Sans-Serif; color:#222} 
.admin-bs .kontainer{padding:5px} 
.admin-bs h1{background:#00477D; border:none; border-bottom:1px solid #C0C0C0; color:#fff; text-transform:normal; text-shadow:0 1px 0 rgba(0,0,0,0.4); font:bold 12px Arial,Sans-Serif; padding:5px 10px; margin:0 0 0 0; display:block} 
.admin-bs h1 a{color:#FEEA83} 
.admin-bs img{width:70px; height:70px; margin:0 10px 0 0; float:left; border:0px solid #E6E6FA; padding:2px; background:#E6E6FAbox-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none}</blockquote>
 
 Part now you have to go for HTML coding. 
 
Template -> Edit HTML 
 
 Now find <data:post.body/> 
by pressing Ctrl + F 
 
 
You will find 3/4 time this code go for second one. 
 
 
Now Copy the below code and Paste it before /above code 
 
 
<blockquote class="tr_bq">
 
<div class="admin-bs"> 
<h1>Founded by : <a href="https://plus.google.com/u/0/117382748404876103459/posts">Asad tariq</a> - Written 50+ Awesome Articles </h1> 
<div class="kontainer"> 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitMjWFcOrpCT-Lc0SiBYBpccARuJTQ4GxjkcjJGSCGH_-KYZxkuS-bgNJuMRR3cC9q1KyZcEb-9ER-GacSIUCgWEysag9-NhpwAn2RL4rlES1x6h043fZlFqVbsYVu6ExFh17IqFLbAKxG/s320/Untitled-1.jpg 
" width="80" height="85"></img> 
I love to blogging and sharing tips and tricks with my readers. I am a Part time blogger. Design Blogger template, Web Developing and Designing. If you think that this article help you little bit then please  do not forget to subscribe by entering your email in column Get Updates Via Email. 
  
Join Me On: <a href='http://www.facebook.com/asadtariq786' rel='nofollow'>Facebook</a> | <a href='http://www.twitter.com/asadtariq78' rel='nofollow'>Twitter</a> | <a href='https://plus.google.com/117382748404876103459/' rel='nofollow'>Google Plus</a> 
<a href="http://thetricklab.blogspot.com/2014/03/How-To-Add-Author-Info-Box-At-the-bottom-of-every-Blog-Post.htmll" target="_blank">:: Thank you for visiting ! ::</a> 
<div style="clear:both;"></div> 
 </blockquote>
 
 And save template. 
 
Change this link https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvFwKljQN1po51vHpk78GyzSlh_CmAHJzjU26540AdpY6ZFthTTg6kHGN2v_SxJAv7yka7tTVepKEXeGaxjG_y1zDAOgM0NEooJJ1z7PvZiPrrQRzen7HAHfwEGaiWHatcAvEZeDSflJbX/s1600/as.jpg with your image link. 
 
Change Asadtariq786 Asadtariq78 with your Twitter and Facebook ID 
 
Change 117382748404876103459  with your Google Plus ID

How To Add Author Info Box At the bottom of every Blog Post

Hi friends Today I will share with you 3 beautiful Author box widget below every blogger posts. it will show at the bottom of every post.We...

Floating Social Media Slide out Widget For Blogger , Website And wordpress

Unknown 2 Blogger Widgets, Css, Share Box 21:03

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKXwkIC0GizbhPQF8KW6AXOo3vQGybohrQB9sV9XzVyXDqXjf6X941pIz4XFe1aQrdaRtK8Y3V9c5SUmOTzSQkIxdqhL1DF1crjtuXDQws19GMn_qcY2TVwtNCK-w5g2Ki9Yb1d6QiK-E/s1600/Floating+Social+Media+Slide+out+Widget+For+Blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKXwkIC0GizbhPQF8KW6AXOo3vQGybohrQB9sV9XzVyXDqXjf6X941pIz4XFe1aQrdaRtK8Y3V9c5SUmOTzSQkIxdqhL1DF1crjtuXDQws19GMn_qcY2TVwtNCK-w5g2Ki9Yb1d6QiK-E/s1600/Floating+Social+Media+Slide+out+Widget+For+Blogger.png" /></a></div>
Floating social media slide out stick to right site of your blogger. When you mouse over then you will see a slide out option. This widget has created completely with CSS and when you scroll down then the widget will also scroll down up to edge of your footer bar. 
 
 
 Go to Blogger 
Select your Layout. 
Click on "Add a Gadget" then select "HTML/JavaScript" 
Now Copy the below code and Paste it in "HTML/JavaScript" Gadget. 
 
 
<blockquote class="tr_bq">
<style type='text/css'> 
.ThetricklabFSS a, .slider-tooltip p{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;transition:all .2s ease-in-out} 
.slideshow-chunk>div{-webkit-transition:all .8s ease-in-out;-moz-transition:all .8s ease-in-out;transition:all .8s ease-in-out} 
.thetricklabFSS {height:150px;left:50%;position:fixed;top:200px;width:18px;z-index:5;margin-left:495px} 
.thetricklabFSS a{display:block;margin-left:133px;width:19px;height:20px;position:absolute;top:0;right:0;color:#fff!important;text-decoration:none;text-transform:uppercase;font-size:10px;font-weight:700;line-height:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiltJGFhofcdUErvOA9RYqCgYELl0BTXD37OvTyiTdGfyEMelKscLZdstKH6EUVDM6h0CzEZ8Fm1wgxNcV108bFUU3pZMH2ZWCoY_u_ofTVeVH8IvuXNnuy5RuvYZKzAa968lmhRf71cNSG/s320/BS+FSS.png) no-repeat;overflow:hidden} 
.thetricklabFSS a span{min-width: 152px;padding: 2px;display:block;visibility:hidden;min-width:152px} 
.thetricklabFSS a:hover{min-width:133px;padding-left:25px;-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out} 
.thetricklabFSS a:hover span{visibility:visible;position:absolute;top:0;left:25px} 
.thetricklabFSS a.BSfacebook{background-position:3px -15px;top:20px;background-color:#526ca5} 
.thetricklabFSS a.BStwitter{background-position:3px -36px;top:40px;background-color:#75ddfe} 
.thetricklabFSS a.BSrss{background-position:3px -55px;top:60px;background-color:#f6a858} 
.thetricklabFSS a.BSmail{background-position:3px -75px;top:80px;background-color:#c1c1c2} 
.thetricklabFSS a.BSfacebook:hover{background-color:#526ca5;background-position:5px -15px} 
.thetricklabFSS a.BStwitter:hover{background-color:#75ddfe;background-position:5px -36px} 
.thetricklabFSS a.BSmail:hover{background-color:#c1c1c2;background-position:5px -75px} 
.thetricklabFSS a.BSrss:hover{background-color:#f6a858;background-position:5px -55px} 
.FloatingSocialMediaSlideoutWidgetForBloggerFSS a.BSfacebook:active{background-color:#294a90} 
.FloatingSocialMediaSlideoutWidgetForBloggerFSS a.BStwitter:active{background-color:#40b5fe} 
.FloatingSocialMediaSlideoutWidgetForBloggerFSS a.BSmail:active{background-color:#909090}.FloatingSocialMediaSlideoutWidgetForBloggerFSS a.BSrss:active{background-color:#f37526}                                                                                                                                  /*widget by www.thetricklab.blogspot.com */ 
</style> 
<div class='thetricklabFSS'> <a class='BSfacebook' href='https://www.facebook.com/asadtariq786' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;Facebook&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;exnav-soc&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='Facebook'>Join Us on Facebook</a> <a class='BStwitter' href='https://twitter.com/asadtariq78' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;Twitter&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;exnav-soc&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='Twitter'>Tweet Us On Twitter</a> <a class='BSrss' href='/feeds/posts/default' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;RSS&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;invite-follow&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='RSS Feed'>Visit Our rss feed</a> <a class='BSmail' href='mailto:asadtariq77@gmail.com' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;Email&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;invite-email&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='Email'>Newsletter</a></div></blockquote>
 
 Replace  asadtariq786 with your Facebook name. 
    Replace  asadtariq78 with your twitter name. 
    Replace asadtariq77@gmail.com with your email address.

Floating Social Media Slide out Widget For Blogger , Website And wordpress

Floating social media slide out stick to right site of your blogger. When you mouse over then you will see a slide out option. This widget...

Add YouTube Subscribe Widget On Your Blog And website

Unknown 0 Blogger Widgets, Youtube 01:23

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbbBZEWXGgGYmE6QNAEorChzB3KNmxOcDjY_-iaosVT2Nmf_57usIGtbpAIITwmTcZigTOzB7j2r_AK1FKhWm8srXMVBf0IQdIHWI5lbQGuTf3tknQcYEe4-4xF1TGABqJJXII2s5bcyY/s1600/tricklab.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="124" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbbBZEWXGgGYmE6QNAEorChzB3KNmxOcDjY_-iaosVT2Nmf_57usIGtbpAIITwmTcZigTOzB7j2r_AK1FKhWm8srXMVBf0IQdIHWI5lbQGuTf3tknQcYEe4-4xF1TGABqJJXII2s5bcyY/s1600/tricklab.png" width="320" /></a></div>
I am going to post about YouTube subscribe widget on your blog and website. If you will use this widget then you can increase your YouTube subscriber easily. 
 
 
 
 Add YouTube Subscribe Widget 
 
 
    Go To Your Blogger Dashboard 
    Select Layouts 
    Add A Gadget 
    Select HTML/JAVASCRIPT And Paste The Following Code In It. 
 
<center>
<iframe frameborder="0" scrolling="no" src="http://www.youtube.com/subscribe_widget?p=thetrickslab" style="border: 0; height: 130px; overflow: hidden; width: 260px;"></iframe></center>
<blockquote class="tr_bq">
<center><iframe src=http://www.youtube.com/subscribe_widget?p=thetrickslab style="overflow: hidden; height: 130px; width: 260px; border: 0;" scrolling="no" frameborder="0"></iframe></center></blockquote>
 
 
 Replace Thetrickslab with your YouTube channel name. 
    All Done save widget and enjoy :) 
 
 
 
<a href="http://thetricklab.blogspot.com/2014/02/how-to-make-vpn-connection-on-windows-7.html"> How to Make VPN Connection on Windows 7 And 8 Free</a>

Add YouTube Subscribe Widget On Your Blog And website

I am going to post about YouTube subscribe widget on your blog and website. If you will use this widget then you can increase your YouTube...

Add A Horizontal Ribbon Menu With Hover Effect

Unknown 0 Blogger Widgets, Css 23:50

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTAkKd62d81ZiWXMTgP43uPcYV9dAqbrfsLHdmqKvGw_fhmBaag7wJXr_KR1liTu_Y1lxoKb2U1ozbU2hAG01jZPTYscUTH20kZDrsMEElEdy1mYg15RpoaOmfsSudwOANA2enDApvYI0/s1600/thetricklab.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="94" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTAkKd62d81ZiWXMTgP43uPcYV9dAqbrfsLHdmqKvGw_fhmBaag7wJXr_KR1liTu_Y1lxoKb2U1ozbU2hAG01jZPTYscUTH20kZDrsMEElEdy1mYg15RpoaOmfsSudwOANA2enDApvYI0/s1600/thetricklab.png" width="640" /></a></div>
Hello Friends. Today we are going to publish about a horizontal ribbon menu with hover effect. 
Horizontal menu are the most necessary part of our blog.Now a days every bloggers are wanting to make his blog looks professional and for those bloggers this menu is better. This horizontal ribbon menu is created by fully CSS3 without using JavaScript and no any images uses so this menu is not effecting in your blog speed.It's hover effect is cool. 
 
Add It On Your Blog 
 
 
    Log In To Blogger.com 
    Select To Layout And Add A Gadget 
    Select HTML/JavaScript And Paste It Inside The Box. 
 
<a href="http://thetricklab-demo.blogspot.com/2014/02/add-horizontal-ribbon-menu-with-hover.html">Live Demo  </a> 
 
<blockquote class="tr_bq">
<style> .thetricklab-ribmenu span {     background:#A81B6A;     display:inline-block;     font-family:verdana;     line-height:3em;     padding:0 1em;     margin-top:0.5em;     position:relative;       -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */     -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */     -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */     -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */     transition: background-color 0.2s, margin-top 0.2s; } .thetricklab-ribmenu a:hover span {     background:#FFD204;     margin-top:0; } .TechBlogGuide-ribmenu span:before {     content: "";     position:absolute;     top:3em;     left:0;     border-right:0.5em solid #9B8651;     border-bottom:0.5em solid #fff; } .thetricklab-ribmenu span:after {     content: "";     position:absolute;     top:3em;     right:0;     border-left:0.5em solid #9B8651;     border-bottom:0.5em solid #fff; } .thetricklab-ribmenu a:link, .thetricklab-ribmenu a:visited {     color:#000;     text-decoration:none;     float:left;     height:3.5em;     overflow:hidden; } .thetricklab-ribmenu:after, .thetricklab-ribmenu:before {     margin-top:0.5em;     content: "";     float:left;    border: 1.5em solid #A81B6A; } .thetricklab-ribmenu:after {     border-right-color:transparent; } .thetricklab-ribmenu:before {     border-left-color:transparent; } </style> <div class='thetricklab-ribmenu'>     <a href='#'>Home</a>     <a href='#'>thetricklab</a>     <a href='#'>Tricks</a>     <a href='#'>jQuery</a>     <a href='#'>CSS</a>   </div>  </blockquote>
 
 
     Replace All The "#" With Your Own Blog Link.     Now Save It And Enjoy

Add A Horizontal Ribbon Menu With Hover Effect

Hello Friends. Today we are going to publish about a horizontal ribbon menu with hover effect. Horizontal menu are the most necessary par...

How To Add Flipper Sharing Widget Below Every Post In Blogger

Unknown 0 Blogger Widgets, Share Box 23:35

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6W4Q2qBwjqtw3a-L6AoVu9TV-2UReVrozh0yB3jce6kLMSKysnBn1gjejzacgVDacFWz9WJyWhElf2umP6kr30WagTeixc43F5jllc8AM9Zng-Jmjmfj2RUED0JD2yWU1BZQN0afcraw/s1600/tricklab.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6W4Q2qBwjqtw3a-L6AoVu9TV-2UReVrozh0yB3jce6kLMSKysnBn1gjejzacgVDacFWz9WJyWhElf2umP6kr30WagTeixc43F5jllc8AM9Zng-Jmjmfj2RUED0JD2yWU1BZQN0afcraw/s1600/tricklab.gif" width="320" /></a></div>
 
 
Today i am going to share about how to add flipper sharing widget below every post in your blogger and website. This widget make your  backlinks for sites and  increase your traffic free 
 
 How To Add Flipper Sharing Widget Below Every Post In Blogger     Go To Blogger 
    Design > Edit Html     Find <data:post.body/> Using CTRL+F 
 
 
Copy the code below and paste it just after <data:post.body/> tag. 
 
 
 
<blockquote class="tr_bq">
<style>         /*--------Thetricklab Flipper Sharing Widget ------*/         .flipper a {         display:block;         height:48px;         width:48px;         padding:0 4px;         float:left;         background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6ZKkPqQkSy6fgqSKz2cm3VJcQUfa7fYc5A7XznIpq7oqXkq4nFP1TMjuTIOGOjKRgPig5uFvrOQlFdcYdrbkz_wDG2in3XfamdU03iGtx7ErkK7ri00FJ2fms_OvFC4QWvntOQgxtEyI/s1600/tricklab.png) no-repeat;         -webkit-transition: ease-in 0.15s all;         -moz-transition: ease-in 0.15s all;         -o-transition: ease-in 0.15s all;         -ms-transition: ease-in 0.15s all;         transition: ease-in 0.15s all;         cursor:pointer;         }         .flipper a.googleplus {         background-position: 0px -348px;         }         .flipper a.googleplus:hover {         background-position: 0px -406px;         }         .flipper a.pinterest {         background-position: 0px -464px;         }         .flipper a.pinterest:hover {         background-position: 0px -522px;         }         .flipper a.delicious {         background-position: 0px 0px;         }         .flipper a.delicious:hover {         background-position: 0px -58px;         }         .flipper a.digg {         background-position: 0px -116px;         }         .flipper a.digg:hover {         background-position: 0px -174px;         }         .flipper a.stumbleupon {         background-position: 0px -812px;         }         .flipper a.stumbleupon:hover {         background-position: 0px -870px;         }         .flipper a.technorati {         background-position: 0px -928px;         }         .flipper a.technorati:hover {         background-position: 0px -406px;         }         .flipper a.twitter {         background-position: 0px -928px;         }         .flipper a.twitter:hover {         background-position: 0px -986px;         }         .flipper a.facebook {         background-position: 0px -232px;         }         .flipper a.facebook:hover {         background-position: 0px -290px;         }         .flipper a.reddit {         background-position: 0px -580px;         }         .flipper a.reddit:hover {         background-position: 0px -638px;         }         .flipper a.rss {         background-position: 0px -696px;         }         .flipper a.rss:hover {         background-position: 0px -754px;         }         .Pleaseshare{         margin:10px 0px;         color:#333333;         font-weight:bold;         font-size:20px;         font-family:sans-serif;         }         </style>         <div class='flipper'>         <b:if cond='data:blog.pageType == &quot;item&quot;'>         <div class="Pleaseshare">         Please Share it! :) </div>                  <a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>                  <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>                  <a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>                  <a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>                  <a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>                  <a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>                  <a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>                  <a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>                  <a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Bookmark plz :&gt;'/>         </b:if></div>         <div style="clear:both"/></blockquote>
 
 
Then save your template and enjoy :)

How To Add Flipper Sharing Widget Below Every Post In Blogger

Today i am going to share about how to add flipper sharing widget below every post in your blogger and website. This widget make your b...

How To Add Animated Google Plus Follower Box Widget In Blogger And website

Unknown 0 Blogger Tricks, Blogger Widgets 03:58

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoJHdW3g8Uk_1AHi_44i4kyRdKtXwP7CVO1exsVUsHCMIQVFvPB_Y_SxqoxzBMsWKYL70gi74uM0DWIGZ2aO4PWhCR8NYEw_aQsMAIJjf6NHwzIa0jJL-MY9tbok4CFqToSUU8r5oVIcA/s1600/How+To+Add+Animated+Google+Plus+Follower+Box+Widget+In+Blogger+And+website.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="153" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoJHdW3g8Uk_1AHi_44i4kyRdKtXwP7CVO1exsVUsHCMIQVFvPB_Y_SxqoxzBMsWKYL70gi74uM0DWIGZ2aO4PWhCR8NYEw_aQsMAIJjf6NHwzIa0jJL-MY9tbok4CFqToSUU8r5oVIcA/s1600/How+To+Add+Animated+Google+Plus+Follower+Box+Widget+In+Blogger+And+website.png" width="320" /></a></div>
 
Google Plus follower box is essential to increase your Googleebook fan bo fan like Facx. However Google has already introduced this widget for blogger. So I just modified the original traditional widget with little spice.  
 
So let's start 
 
Go to Blogger 
 
Selecet Layout 
 
Click on "Add a Gadget" then 
 select "HTML/JavaScript" Gadget. 
 
Now Copy the below code and Paste it in "HTML/JavaScript" Gadget. 
 
 
Live Demo

<div class="bloggerspiceGplus">
<div class="g-plus" data-action="followers" data-height="290" data-href="https://plus.google.com/117382748404876103459" data-source="blogger:blog:followers" data-width="280">
</div>
</div>
 
 
 
 
<blockquote class="tr_bq">
 
<style> 
.bloggerspiceGplus{ 
    margin: 10px auto; 
    background-color: #FEFEFE; 
    width: 260px; 
    padding: 10px 0 10px 10px; 
    height: 255px; 
    overflow: hidden; 
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -ms-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
    border: 10px solid #E50913; 
} 
.bloggerspiceGplus:hover { 
    border: 10px solid #A0060E; 
    background-color: #E50913; 
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -ms-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
} 
// Google Plus Widget by www.thetricklab.blogspot.com // 
</style> 
<div class="bloggerspiceGplus"> 
<div class="g-plus" data-action="followers" data-height="290" data-href="https://plus.google.com/117382748404876103459" data-source="blogger:blog:followers" data-width="280"></div> 
</div></blockquote>
 
 
Alter 117382748404876103459 with your Google Plus ID

How To Add Animated Google Plus Follower Box Widget In Blogger And website

Google Plus follower box is essential to increase your Googleebook fan bo fan like Facx. However Google has already introduced this widg...

Float AdSense And Other Ads On Left And Right Side Of Your Blog And Website

Unknown 0 AdSense, Blogger Tricks, Blogger Widgets, Tricks And Tips 21:26

Hi Friends Today I am going to share, how to use 160px X 600Px Adsense ads which can be float right or left side of your blog and website.  Not only Adsense ads can be float but you can use any affiliates ads to make float. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqLHf37MnSr-A-PkxwyDOamvabltj-P00fmnmoepl9a2vI7WaVTP875X3MD-rVhbbvquI7TKASZzBM6jdVGSljqzNluO8aaxZC-ILFuMCWarqa23xIcxJGmJMEhiDFlmyOHDSGUR7lJgc/s1600/Float+AdSense+And+Other+Ads+On+Left+And+Right+Side+Of+Your+Blog+And+Website.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqLHf37MnSr-A-PkxwyDOamvabltj-P00fmnmoepl9a2vI7WaVTP875X3MD-rVhbbvquI7TKASZzBM6jdVGSljqzNluO8aaxZC-ILFuMCWarqa23xIcxJGmJMEhiDFlmyOHDSGUR7lJgc/s1600/Float+AdSense+And+Other+Ads+On+Left+And+Right+Side+Of+Your+Blog+And+Website.jpg" width="160" /></a></div>
Go to Blogger.com > Dashboard Select Layout tab. Click on "Add a Gadget" then select "HTML/JavaScript" Gadget. Now Copy the below code and Paste it in "HTML/JavaScript" Gadget. 
 
 
<blockquote>
    <style>     #thetricklabflotads {     height:30px;     width:auto;     background: #333333 url('..');     background-repeat:repeat-x;     text-align:left;     padding-top:4px;     }     #bsadsbase{     height:600;     margin:0auto;     width:180px;     background:#fff;     border-bottom:2px #333333 solid;     border-right:2px #333333 solid;     border-left:2px #333333 solid;     text-align:center;     padding:4px;     }     #bsadsheadline{     opacity:1.0;     height:auto;     width:auto;     position:fixed;     top:65px;     left:10px;     border-bottom:1px #005094 solid;     border-bottom:0px blue solid;     color:#333;     padding:0px;     z-index:1001;     font-size:13px;}     </style>     <script type="text/javascript">     function getValue()     {     document.getElementById("bsadsheadline").style.display = 'none';     }     </script>     <div id="bsadsheadline">     <div id="thetricklabflotads">         <a href="http://www.thetricklab.blogspot.com" target="_blank" onclick="getValue()">close(x)</a>     </div>     <div id="bsadsbase">     <h3></h3>     <h3></h3>                                                                                                                                  Ads code here    </div></div></blockquote>
 
 Replace "Ads code here" with your AdSense or others ads code.     Change 180px to increase or decrease wide     Change Left with right to float right side of your blog.

Float AdSense And Other Ads On Left And Right Side Of Your Blog And Website

Hi Friends Today I am going to share, how to use 160px X 600Px Adsense ads which can be float right or left side of your blog and website. ...

Popup Facebook Like, Adsense Ad, Twitter follow, Email Subscribe Box Widget For Blogger

Unknown 1 AdSense, Blogger Widgets, Facebook Widget 20:43

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicXeGOKNziMvnV-LpFhcNo9-RVlMRcqKyAK7GAhgmklY45JgLCSqu9Qt8zOjU9m7vunq5F4naFNiI0X0pcjOvxVBfUxmECquPkaKcisdNB3Mi0RzXfbfyyTW1H2lis7-pFQlkxoQwSi4c/s1600/Popup+Facebook+Like,+Twitter+follow,+Email+Subscribe+Box+Widget+For+Blogger.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"> </a></div>
Today i am going to share that how to use Scrolling Popup Facebook Like, Adsense Ad, Twitter follow, Email Subscribe Box  Widget for Blogger and this widget will increase your facebook like, twitter follow, subscribe for  your blog and increase your traffic.too 
 its is very powerful Widgets 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicXeGOKNziMvnV-LpFhcNo9-RVlMRcqKyAK7GAhgmklY45JgLCSqu9Qt8zOjU9m7vunq5F4naFNiI0X0pcjOvxVBfUxmECquPkaKcisdNB3Mi0RzXfbfyyTW1H2lis7-pFQlkxoQwSi4c/s1600/Popup+Facebook+Like,+Twitter+follow,+Email+Subscribe+Box+Widget+For+Blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicXeGOKNziMvnV-LpFhcNo9-RVlMRcqKyAK7GAhgmklY45JgLCSqu9Qt8zOjU9m7vunq5F4naFNiI0X0pcjOvxVBfUxmECquPkaKcisdNB3Mi0RzXfbfyyTW1H2lis7-pFQlkxoQwSi4c/s1600/Popup+Facebook+Like,+Twitter+follow,+Email+Subscribe+Box+Widget+For+Blogger.jpg" width="400" /></a></div>
 
Go to your Blogger > Dashboard 
 
Select Layout tab. 
 
Click on "Add a Gadget" then select "HTML/JavaScript" Gadget. 
 
 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it. 
 
 
<blockquote class="tr_bq">
<style type='text/css'> 
#bloggerspiceFBpop { 
position:fixed !important; 
position:absolute; 
top:-1000px; 
left:50%; 
margin:0px 0px 0px -182px; 
width:300px; 
height:auto; 
padding:16px; 
background:#FEFEFE;font:normal Dosis, Georgia, Serif; 
color:#111; 
border:2px solid #333; 
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4); 
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4); 
box-shadow:0px 1px 2px rgba(0,0,0,0.4); 
-webkit-border-radius:10px; 
-moz-border-radius:10px; 
border-radius:10px; 
} 
#bloggerspiceFBpop a.bsclose { 
position:absolute; 
top:-10px; 
right:-10px; 
background:#fff; 
font:bold 16px Arial, Sans-Serif; 
text-decoration:none; 
line-height:22px; 
width:22px; 
text-align:center; 
color:#000000; 
border:2px solid #333; 
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4); 
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4); 
box-shadow:0px 1px 2px rgba(0,0,0,0.4); 
-webkit-border-radius:22px; 
-moz-border-radius:22px; 
border-radius:25px; 
cursor:pointer; 
} 
</style> 
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<script type='text/javascript'> 
$(window).bind("load", function() { 
// Animate Top 
$('#bloggerspiceFBpop').animate({top:"50px"}, 1000); 
// Widget by www.thetricklab.blogspot.com 
$('a.bsclose').click(function() { 
$(this).parent().fadeOut(); 
return false; 
}); 
}); 
</script> 
<div id='bloggerspiceFBpop'> 
 
<center><a class="BloggerSpice">Don't Forget To Join With Our Community</a></center> 
<center> 
Add Your Code 
</center> 
 
<a class='bsclose' href='#'>&times;</a> 
<center style="float:right; margin-right:10px;">+Get this at</center></div><a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href="http://thetricklab.blogspot.com/2014/02/popup-facebook-like-adsense-ad-twitter.html">The Trick Lab</a></center> 
</div> </blockquote>
 
 Change Add Your Code with your code

Popup Facebook Like, Adsense Ad, Twitter follow, Email Subscribe Box Widget For Blogger

Today i am going to share that how to use Scrolling Popup Facebook Like, Adsense Ad, Twitter follow, Email Subscribe Box Widget for Blogg...

How To Add Color Gamut To Blog Links For Rainbow Effect

Unknown 1 Blogger Widgets, Css 20:12

I am going to share how to add rainbow effect on blog or web links but the main concept is to add rainbow effect  which use  different color gamut. Its not actually rainbow because it shows only 4 to 5 color instead 7. Rainbow effect make your blog little attractive that can convert a dull or text base blog. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDmggdfmjsFvezU6LXi9F4dQ_VM7BeeSZCresqHUpAXS6IHjQkc8Hd0ikeM3nZZwVqNJChyphenhyphenoiE-mWr5fF7BgHzycQHeBBI-sddiVJU3sCw33fcmpFQ49UfyQm7TqKyyUQA0fKbB08GNe4/s1600/ok.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="304" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDmggdfmjsFvezU6LXi9F4dQ_VM7BeeSZCresqHUpAXS6IHjQkc8Hd0ikeM3nZZwVqNJChyphenhyphenoiE-mWr5fF7BgHzycQHeBBI-sddiVJU3sCw33fcmpFQ49UfyQm7TqKyyUQA0fKbB08GNe4/s1600/ok.jpg" width="640" /></a></div>
 
Go to blogger.com Template 
 
Now find ]]></b:skin> 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 + F</kbd>

And Paste the below code after/below ]]></b:skin> 
 
 
<blockquote class="tr_bq">
<script type='text/javascript'> 
//<![CDATA[ 
var rate = 5; 
if (document.getElementById) 
window.onerror=new Function("return true") 
var objActive; 
var act = 0; 
var elmH = 0; 
var elmS = 128; 
var elmV = 255; 
var clrOrg; 
var TimerID; 
if (document.all) { 
document.onmouseover = doRainbowAnchor; 
document.onmouseout = stopRainbowAnchor; 
} 
else if (document.getElementById) { 
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT); 
document.onmouseover = Mozilla_doRainbowAnchor; 
document.onmouseout = Mozilla_stopRainbowAnchor; 
} 
function doRainbow(obj) 
{ 
if (act == 0) { 
act = 1; 
if (obj) 
objActive = obj; 
else 
objActive = event.srcElement; 
clrOrg = objActive.style.color; 
TimerID = setInterval("ChangeColor()",100); 
} 
} 
function stopRainbow() 
{ 
if (act) { 
objActive.style.color = clrOrg; 
clearInterval(TimerID); 
act = 0; 
} 
} 
function doRainbowAnchor() 
{ 
if (act == 0) { 
var obj = event.srcElement; 
while (obj.tagName != 'A' && obj.tagName != 'BODY') { 
obj = obj.parentElement; 
if (obj.tagName == 'A' || obj.tagName == 'BODY') 
break; 
} 
if (obj.tagName == 'A' && obj.href != '') { 
objActive = obj; 
act = 1; 
clrOrg = objActive.style.color; 
TimerID = setInterval("ChangeColor()",100); 
} 
} 
} 
function stopRainbowAnchor() 
{ 
if (act) { 
if (objActive.tagName == 'A') { 
objActive.style.color = clrOrg; 
clearInterval(TimerID); 
act = 0; 
} 
} 
} 
function Mozilla_doRainbowAnchor(e) 
{ 
if (act == 0) { 
obj = e.target; 
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') { 
obj = obj.parentNode; 
if (obj.nodeName == 'A' || obj.nodeName == 'BODY') 
break; 
} 
if (obj.nodeName == 'A' && obj.href != '') { 
objActive = obj; 
act = 1; 
clrOrg = obj.style.color; 
TimerID = setInterval("ChangeColor()",100); 
} 
} 
} 
function Mozilla_stopRainbowAnchor(e) 
{ 
if (act) { 
if (objActive.nodeName == 'A') { 
objActive.style.color = clrOrg; 
clearInterval(TimerID); 
act = 0; 
} 
} 
} 
function ChangeColor() 
{ 
objActive.style.color = makeColor(); 
} 
function makeColor() 
{ 
// Rainbow widget by www.thetricklab.blogspot.com// 
if (elmS == 0) { 
elmR = elmV; elmG = elmV; elmB = elmV; 
} 
else { 
t1 = elmV; 
t2 = (255 - elmS) * elmV / 255; 
t3 = elmH % 60; 
t3 = (t1 - t2) * t3 / 60; 
if (elmH < 60) { 
elmR = t1; elmB = t2; elmG = t2 + t3; 
} 
else if (elmH < 120) { 
elmG = t1; elmB = t2; elmR = t1 - t3; 
} 
else if (elmH < 180) { 
elmG = t1; elmR = t2; elmB = t2 + t3; 
} 
else if (elmH < 240) { 
elmB = t1; elmR = t2; elmG = t1 - t3; 
} 
else if (elmH < 300) { 
elmB = t1; elmG = t2; elmR = t2 + t3; 
} 
else if (elmH < 360) { 
elmR = t1; elmG = t2; elmB = t1 - t3; 
} 
else { 
elmR = 0; elmG = 0; elmB = 0; 
} 
} 
elmR = Math.floor(elmR).toString(16); 
elmG = Math.floor(elmG).toString(16); 
elmB = Math.floor(elmB).toString(16); 
if (elmR.length == 1) elmR = "0" + elmR; 
if (elmG.length == 1) elmG = "0" + elmG; 
if (elmB.length == 1) elmB = "0" + elmB; 
elmH = elmH + rate; 
if (elmH >= 360) 
elmH = 0; 
return '#' + elmR + elmG + elmB; 
} 
//]]> 
</script> </blockquote>
 
 Now save your template and enjoy.

How To Add Color Gamut To Blog Links For Rainbow Effect

I am going to share how to add rainbow effect on blog or web links but the main concept is to add rainbow effect which use different color...

How To Add Facebook Like and Send Button In Blogger And Website

Unknown 0 Blogger Widgets, Facebook Tricks, Facebook Widget 03:27

<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/AVvXsEgumybsGLdih4JI_qFgF-srHhflp08b7xNLEuVz36VZtqZau8UlWbDXeA8iFNBfbRjGYcTMkufrVtI6sS1AoUGvAA39IRWS0tBFkA5Jg6BVlQEVCvZu5qOydi6k86OGolnXAy1zeRemkKk/s1600/Like+and+send+buttons.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgumybsGLdih4JI_qFgF-srHhflp08b7xNLEuVz36VZtqZau8UlWbDXeA8iFNBfbRjGYcTMkufrVtI6sS1AoUGvAA39IRWS0tBFkA5Jg6BVlQEVCvZu5qOydi6k86OGolnXAy1zeRemkKk/s1600/Like+and+send+buttons.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
 
Hello Friends Today i am going how to  Facebook like and share button for blogger and website. 
Share button is very important any  blogger and website. its increase blog traffic. 
 
 
<ol>
<li>Go to Blogger.com</li>
<li>Select blog</li>
<li>Edit HTML</li>
</ol>
 
Note Backup your template 
 
Search for (ctrl+f) 
 
<blockquote class="tr_bq">
<data:post.body/></blockquote>
 
Paste the following code just below <data:post.body/> 
 
 
<blockquote class="tr_bq">
<div id="fb-root"></div><script src="https://docs.google.com/file/d/0B0-0Xqug-nT8c1FGY1BCQk55WGc/edit?usp=sharing"></script><fb:like href="" send="true" layout="button_count" width="450" show_faces="false" font=""></fb:like> </blockquote>
 
 
 Save your template and enjoy

How To Add Facebook Like and Send Button In Blogger And Website

Hello Friends Today i am going how to Facebook like and share button for blogger and website. Share button is very important any ...

How To Add Eye Catching Blockquote With Hover Effects In Your Blog And website

Unknown 0 Blockquote, Blogger Widgets, Css 01:51

<div style="text-align: left;">
Today i am going to share Blockquote for blogger and website.  Created Simple Css Codes For a Blockquote. This Blockquote Highlighter Is quite Nice And Eye-Catching.</div>
<div style="text-align: left;">
 </div>
<div style="text-align: left;">
 </div>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcDnzaCBUo9v3VfIthye_N6LCyNkBVDgDbA9PRAupPIrYTlOovruqEb0ajsJuL89A-94ikad9sxepZIn-01Lbkhco11PnFgAQiI8ZZPMz4gDnv3KgORJ8FUWX-CdFK9K6zAtew0MpU4Z0/s1600/How+To+Add+Eye+Catching+Blockquote+With+Hover+Effects+In+Your+Blog+And+website.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How To Add Eye Catching Blockquote With Hover Effects In Your Blog And website " border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcDnzaCBUo9v3VfIthye_N6LCyNkBVDgDbA9PRAupPIrYTlOovruqEb0ajsJuL89A-94ikad9sxepZIn-01Lbkhco11PnFgAQiI8ZZPMz4gDnv3KgORJ8FUWX-CdFK9K6zAtew0MpU4Z0/s1600/How+To+Add+Eye+Catching+Blockquote+With+Hover+Effects+In+Your+Blog+And+website.png" title="How To Add Eye Catching Blockquote With Hover Effects In Your Blog And website " width="400" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEYpZRYV-KG63VI3FrVUYmbtvOqdSFqNpf-Dy2aEY_Qo1qn6tCfMvz-EYm1fV3m1i9bAx2YatZOB8EujT12F1OJC7Xj1kEbzZoCOmJgXMxvXiXfIPgfMoZV1_qxFhYTtumWIAlC8TvOQ0/s1600/How+To+Add+Eye+Catching+Blockquote+With+Hover+Effects+In+Your+Blog+And+website.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="322" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEYpZRYV-KG63VI3FrVUYmbtvOqdSFqNpf-Dy2aEY_Qo1qn6tCfMvz-EYm1fV3m1i9bAx2YatZOB8EujT12F1OJC7Xj1kEbzZoCOmJgXMxvXiXfIPgfMoZV1_qxFhYTtumWIAlC8TvOQ0/s1600/How+To+Add+Eye+Catching+Blockquote+With+Hover+Effects+In+Your+Blog+And+website.png" width="400" /> </a></div>
<div class="separator" style="clear: both; text-align: left;">
 </div>
<div class="separator" style="clear: both; text-align: left;">
 </div>
<div class="separator" style="clear: both; text-align: left;">
 </div>
<div class="separator" style="clear: both; text-align: left;">
How to add CSS Style Sheet in Blogger Template:</div>
  Go to Blogger 
  select  Template 
  EDIT HTML 
 
And now Search For ]]></b:skin> 
With CTRL+F 
 
  After you find ]]></b:skin> just above it paste the following coding 
<div class="separator" style="clear: both; text-align: left;">
 </div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://thetricklab-demo.blogspot.com/2014/02/how-ro-add-eye-catching-blockquote-with.html">Live Demo</a></div>
<div class="separator" style="clear: both; text-align: left;">
 </div>
<div class="separator" style="clear: both; text-align: left;">
 </div>
<div style="text-align: left;">
<blockquote class="tr_bq">
<div class="separator" style="clear: both;">
/*****************************************</div>
Thetricklab.blogspot.com blockquote 
******************************************/ 
.post blockquote 
{ 
font-size: 15px;font-family: Verdana;font-weight: normal;font-style:italic; 
background-color: #F2F1F1; 
color: #000; 
margin: 5px 10px; 
padding: 20px 20px 20px 20px; 
border: 2px dotted lightgrey; 
border-radius: 10px; 
box-shadow: -1px -1px 12px 2px gainsboro; 
transition: background-color .777s; 
-webkit-transition: background-color .777s; 
-moz-transition: background-color .777s; 
-o-transition: background-color .777s; 
-ms-transition: background-color .777s; 
} 
.post blockquote:hover 
{ 
background-color: darkgreen ; 
color: #fff; 
} 
.post blockquote:active 
{ 
background-color: CornflowerBlue ; 
color: #000; 
}  
<div class="separator" style="clear: both;">
 </div>
</blockquote>
 
 
Save your Template and enjoy  </div>

How To Add Eye Catching Blockquote With Hover Effects In Your Blog And website

Today i am going to share Blockquote for blogger and website. Created Simple Css Codes For a Blockquote. This Blockquote Highlighter Is qu...

Add Facebook Send Button For Blogger And Website

Unknown 1 Blogger Widgets, Facebook Widget 00:20

Today i am going to share how you can add Facebook send button. Facebook Send button helps people to share interesting stuff with all their friends, This wedgie increase your traffic and make back link. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq26T9m_Wq2fRPQKwPoA69Ia4IACM2IbQA0XxNEYEawq4o85Gg2SJI-hOHBEets6XBsA5sINYT_AyKzrJTd2e-AlUefOuxFyVhGAwYyP1_UL1gUpoSicySazKoR9e9CINWJj5U4EpHej4/s1600/Like+and+send+buttons.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq26T9m_Wq2fRPQKwPoA69Ia4IACM2IbQA0XxNEYEawq4o85Gg2SJI-hOHBEets6XBsA5sINYT_AyKzrJTd2e-AlUefOuxFyVhGAwYyP1_UL1gUpoSicySazKoR9e9CINWJj5U4EpHej4/s1600/Like+and+send+buttons.png" /></a></div>
 
 
<div class="separator" style="clear: both; text-align: center;">
</div>
How To Add Facebook Send Button In Blogger and website. 
 
 
<ul>
<li>    Go To Blogger > Design > Edit HTML</li>
<li>    Search for <data:post.body></li>
</ul>
 
Pastt the code below just above <data:post.body> 
 
 
<blockquote class="tr_bq">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:send href="" font="verdana"></fb:send></blockquote>
 
 save it and enjoy

Add Facebook Send Button For Blogger And Website

Today i am going to share how you can add Facebook send button. Facebook Send button helps people to share interesting stuff with all their ...

IP Address Finder Widget

Unknown 1 Blogger Tricks, Blogger Widgets 21:17

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLTRuEyjZlRqe3d32-209Zd4MZMSSCRCd5aKD-zdWMsnHpAKtcjEowLlpIOVGzfi0L1LO3DKWA5bUJY_7mNKOKVmMWiak1EbQzIy0HP4_24msM2NxOXCsPwzHhwYFDGYobMVxdc8LQxmU/s1600/Untitled-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLTRuEyjZlRqe3d32-209Zd4MZMSSCRCd5aKD-zdWMsnHpAKtcjEowLlpIOVGzfi0L1LO3DKWA5bUJY_7mNKOKVmMWiak1EbQzIy0HP4_24msM2NxOXCsPwzHhwYFDGYobMVxdc8LQxmU/s1600/Untitled-1.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
 
<div class="separator" style="clear: both; text-align: center;">
</div>
 
Today i am going to share IP Address finder. Just copy the HTML source code shown below and put it on your website and blogger. This service is  free for personal use. 
 
<ul>
<li>Go to your Blogger > Dashboard</li>
<li>Select Layout tab.</li>
<li>Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.</li>
</ul>
 
 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it. 
 
 
<a href="http://thetricklab.blogspot.com/2013/06/ip-address-finder-widget.html"><img alt="IP" border="0" height="125" src="http://www.wieistmeineip.de/ip-address?size=125x125" width="125" /></a> 
 
<blockquote class="tr_bq">
<a href="http://thetricklab.blogspot.com/2013/06/ip-address-finder-widget.html"><img src="http://www.wieistmeineip.de/ip-address?size=125x125" border="0" width="125" height="125" alt="IP" /></a> </blockquote>
 
 
<a href="http://thetricklab.blogspot.com/2013/06/ip-address-finder-widget.html"><img alt="IP" border="0" height="60" src="http://www.wieistmeineip.de/ip-address/?size=468x60" width="468" /> </a> 
 
<blockquote class="tr_bq">
<a href="http://thetricklab.blogspot.com/2013/06/ip-address-finder-widget.html"><img src="http://www.wieistmeineip.de/ip-address/?size=468x60" border="0" width="468" height="60" alt="IP" /></a>  </blockquote>

IP Address Finder Widget

Today i am going to share IP Address finder. Just copy the HTML source code shown below and put it on your website and blogger. This...

The Trick Lab