The Trick Lab: Css

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 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 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 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...

The Trick Lab

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

Add A Horizontal Ribbon Menu With Hover Effect

How To Add Color Gamut To Blog Links For Rainbow Effect

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

Follow by Email

Popular Posts

Blog Archive