How To Show a Visit Source Message for Visitors Using JS and CSS

How To Show a Visit Source Message for Visitors Using JS and CSS

In this post, i will share with you a beautiful widget for blogger exclusively ,this widgets is a message that contains the URL of referrer website, if you search about a page in google and you visit it ,a message will show inform the visitor that he was on google before visiting this website...you have still problems,let me show you a preview of this widgets :(This link is shrinked by T.co using twitter)
 

 

If you like it, let me show you how to add it in your blogger or website *_*
Step 1: Copy paste the code bellow before the </body> tag

<div id='youcamefrom'>
<button class='close' onclick='document.getElementById(&apos;youcamefrom&apos;).style=&apos;display:none;&apos;'>X</button>
<script>
var url = document.referrer;
var arr = url.split("/");
var result = arr[0] + "//" + arr[2];
document.write("I've just come from : <br/><div style='margin-top:10px;text-align:center;width: 100%;color: #3eff3b;'>"+result+"</div>")
</script>
</div>
<style>
#youcamefrom {
border:2px solid #ccc;
width:25%;
height:70px;
position:fixed;
top:150px;
left:7px;
color:#fff;
padding:10px;
background-color:#3683ff;
-webkit-box-shadow: -5px 0px 19px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -5px 0px 19px 0px rgba(0,0,0,0.75);
box-shadow: -5px 0px 19px 0px rgba(0,0,0,0.75);
border: 1px solid #3683ff;
font-size: 14px;
font-family: Arial;
font-weight:bold;
display:none;
z-index: 9999999;
}
.close
{
position:absolute;
background:transparent;
color:#fff;
font-size:20px;
cursor:pointer;
right:1px;
top:1px;
border:0;
transition:.7s
}
.close:hover
{
color:red;
transition:.7s
}
.animated {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
@-webkit-keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}

60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}

75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}

90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}

to {
-webkit-transform: none;
transform: none;
}
}

@keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}

60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}

75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}

90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}

to {
-webkit-transform: none;
transform: none;
}
}

.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes bounceOut {
20% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}

50%, 55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}

to {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
}

@keyframes bounceOut {
20% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}

50%, 55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}

to {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
}

.bounceOut {
-webkit-animation-name: bounceOut;
animation-name: bounceOut;
}
</style>
<script>
var popup = document.getElementById("youcamefrom");
function youcame(){
var k=setTimeout(function(){ popup.style.display='block';popup.className+='animated bounceInDown'; }, 2500);
var kh=setTimeout(function(){ popup.className+='animated bounceOut'; }, 8000);
}
if (document.referrer=="" || result=="https://giveawaysnetworks.com") {
popup.style.display='none';
}else
{
window.onload=setTimeout(function(){ youcame(); }, 1000);
}
</script>


Change The Yellow with your text , The Red with your Blog URL , the The Blue with the time before the message show after the page load (1 Second = 1000) and The Green with time before the message close or hide(1 Second = 1000).
Step 2: Click Save Template

that's all, if you have a question,problem,feedback you can put it in comments box.



Subscribe to our Newsletter

Did you find this post useful?
67%
33%
Comments
Edward
Edward

Thank You

Giveaways Networks
Your welcome
nike shoes for men
nike shoes for men

This comment has been marked as spam

Subscribe to the mailing list of our blog and get the latest lessons and topics that are sent directly to your e-mail